Introduction to Elementor Page Builder +

Content Used For the Demo Site

This guide is a companion to the comprehensive video tutorial found at:

https://www.youtube.com/watch?v=kwmvGpcJux0

1
 Table of Contents

Introduction to This Guide . 3

Introduction to the Elementor Page Builder 4

Written Content/Preview of Each Page ..12

Media Page12
Contact Us Page.. 13
About Us Page..14
Home Page16
Blog Posts..20

Links to Download Images 22

YouTube Video URL .. 23

2
Introduction to This Guide
The Elementor Page Builder is absolutely incredible. It enables you to customize 100% of the
content between your website header and footer. By learning how to use Elementor, you can
learn to build world-class custom web designs without having to write a single line of code.

With that said, there is a bit of a learning curve. Given the enormous flexibility included with
Elementor, there are some things that will seem difficult and confusing at first. This is completely
normal and expected. However, if you are willing to take the time to watch my Elementor/
Generate Press tutorial (and probably watch certain sections multiple times), you will be able to
reach new levels of web design capability.

Given the complexities inherit within the Elementor Page Builder plugin, I wanted to create a
guide that covers the most basic aspects of using it. This guide is not meant to stand alone,
rather it is a companion piece to the video tutorial. This guide will only be helpful for re-enforcing
some of the basic principles discussed in the Introduction to Elementor section of the video
tutorial. If you try to use this guide as the sole component for learning how to use the Elementor
Page Builder, you will most likely walk away, disappointed. I encourage you to take the time to
watch the video tutorial and use this guide as a companion piece.

Demo Content
Ive also included the written content for all of the pages as well as links to all of the images and
video I used to create the demo site.

If possible, I encourage you to follow along with the video tutorial and recreate everything I
teach. By imitating my examples, youll learn much more quickly than if you just watched the
video. The demo content is here for you to follow along with my examples and not have to worry
about writing your own text or finding your own images while you learn.

Screenshot Previews
Ive also added a screen shot of what each page or section will look like after completion. This
way, as you get to various sections in the video, you will have a visual preview of what the final
outcome for that page or section will look like.

I wish you all the best with your online endeavors!

-Josh Jackson, wpsculptor.com

3
Introduction to the Elementor Page Builder
When you open up the Elementor page builder, your list of Elements will appear on the left. If
they are not displaying, you can access your elements by clicking on the Element Icon.

On the right, you have the live review of what your site will look like after you Save the
changes. This area on the right is where you setup your website layout with sections and
columns within those sections. Every section must have at least one column.

Columns are what we use to add elements to.

Creating New Sections

Add a new section by clicking on Add New Section and then choose the column structure you
want to start with. This is just a starting point. You can always add or remove columns later.

4
After you choose a column structure, your starting layout will be created.
Because I chose the 2 column layout structure, you can see I now have 2 evenly spaced
columns within a single section.

Changing Column Width

Click, hold and drag the inside edge of your left column to redistribute the width of your
columns.

Adding New Columns to a Section

Hover over any of the columns within that section and click on the Column tab. That will bring
up the Add button. Click on the Add button to add a new column to that section.

5
That will create another column within that section and all of your columns will have equal
widths. You can change your column widths by using the same process mentioned above.

Now you have 3 columns within a single section.

Delete a Column
Hover over the column you want to delete, click on the Column tab and click on the X button.
Confirm the deletion by clicking on Delete.

Adding Content to Columns

You can add all types of content using any of the Elements included with the Elementor Page
Builder. The video tutorial will cover a wide range of different elements as I create each page.

To add an element, access your Elements by clicking on the Element Icon and click hold and
drag the Element and release it into the column of your choice.

This will add your Element to that Column. It will also automatically pull up your element settings
for the element you just added. Those element settings will appear on the left side of the screen.
You can also access your element settings by hovering over the element within your column that
you want to edit and clicking on the Pencil Icon.

6
Editing Your Elements
Each element will have different options you can control and you will have up to 3 types of
settings.

1. The Content tab is where you adjust basic settings such as the actual text that you want to
use.

2. The Style tab is where you adjust most of your appearance options. This would include
things like the font family, font color, letter spacing, line height, etc

3. The Advanced tab will allow you to control advanced options such as spacing options.

7
Saving Changes
To save any changes made within the Elementor Page Builder, you must click on the Save
button, otherwise the changes will not be saved and they will not take effect on the front-end of
your site.

Adding Additional Elements to a Column

You can add as many elements as you want to any column. Each new element you add will
stack underneath (or above - depending on where you release the element) any other Elements
you have within the Column. You add new elements by clicking on the Element Icon to pull up
your list of Elements and click, hold, drag and release the Element into the column you want to
add it to.

8
Section Settings
Section settings allow you to control things like your section background with background
colors, images, or background videos. You can also control the section height and width with
section settings.

To access your section settings, hover over any of the content within your section and click on
the Section tab. This will pull up your section settings on the left side of the screen

The section Layout tab is where you adjust things like your section height and width.

The section Style tab is where you add section background colors, images, or background
videos.

Accessing the Full Screen Preview Mode

The full screen preview mode will allow you to see exactly what your site will look like after you
save your changes. You can toggle back and forth between the full screen preview mode by
clicking on the Red Arrow tab.

9
Duplicating Elements to Save Time
Duplicating elements is a great way to speed up your design process. When you duplicate an
element, you are creating an identical copy of that element.

This can be useful for any situation where you want to have several of the same elements with
the same style settings. An example would be if you have multiple headings on your page and
you want all of those headings to have the same styling options (font, color, etc) You can
customize the first Element, duplicate it and instead of having to spend time re-adjusting all of
your styling options, they will already be a part of that element.

Duplicate an element by hovering over it and clicking on the Duplicate icon.

Re-Arranging Elements
You can re-arrange your elements by hovering over them and click, holding and dragging the
Pencil icon for that Element and releasing it in your new location. You can move elements
around within the same column and you can also move elements to new columns (assuming
you have already created the new column).

Then, with your new duplicate element in place, you can edit it by clicking on the Pencil icon
for that element and that will pull up your Element Settings on the left.

10
Re-Arranging Columns
Just as you can re-arrange individual elements by click, holding and dragging the Pencil icon
for that element, you can do the same thing with Columns. To re-arrange your columns, hover
over the column you want to move and click, hold and drag the column tab and release it in a
new location.

When you release the column where you want it, your columns will automatically re-size to have
equal widths. You can change your column widths using the same process mentioned above.

11
Written Content/Preview of Each Page:
Media:

Youtube Video URL:

https://www.youtube.com/watch?v=ynkKL3R0rhc

12
Contact Us:

We would love to hear from you!

Give us a call: 555-555-5555
Office Hours: M-F 9:00 a.m. - 6:00 p.m.
Address: 20th st. Denver, CO
Stop by anytime!

13
About Us:

14
This is a demo WordPress website made with the GeneratePress theme and the Elementor live
page builder plugin. WordPress, the theme, and the plugin are all free to use!

The GeneratePress theme is created by a guy named Tom Usborne. He's been making
websites since he was 11 years old! GeneratePress is really making a name for itself, and
currently has over 40,000 active installs and over 370 5 star reviews! This demo website was
made using the free version of the theme, but you can always upgrade your site to the the
premium version to get more features.

The Elementor plugin is a live page builder that you can use to customize everything between
your site's header and footer. This means you can create an unlimited number of layouts for
each page. You can also control virtually every option for anything you put on your site. This
means: custom background colors, images, transparencies, overlays, video backgrounds,
borders, margin and padding, over 600 google fonts, over 400 icons and truly, so much more.

Testimonial:
This is an example of the testimonial element. This is 1 of 28 elements included with the
Elementor plugin and you can use any of the elements on any page!

Jane Doe
Designer

Icons:
Speed
Create websites faster
Icon Used: hourglass-start

Layout Control
Build custom rows and columns
Icon Used: building

Freedom
Free yourself from design restrictions
Icon Used: chain

Icon Options
Choose from over 400 icons
Icon Used: diamond

Font Controls
Use over 600 Google fonts
Icon Used: font

Creativity
Create just about anything
Icon Used: bolt

15
Home Page Section 1:

The secret of getting ahead is getting started.

-Mark Twain

Buttons:
Learn About Us
Read Our Blog

Media Gallery
Icon Used: camera

We love adventure! Take a look at our videos and photo gallery to see us in action. We think
you'll like what you see and will want to work with us!

Who We Are
Icon Used: users

We know how important is to work with good people. We pride ourselves on being ethical,
relational, kind, and are always doing our best to stay ahead of the curve.

Get In Touch
Icon Used: envelope

16
We would love to hear from you! Please let us know if you have any questions, concerns, or
comments. We look forward to visiting with you!

Home Page Section 2:

Believe you can and you're halfway there.

-Theodore Roosevelt

Team Building
Icon Used: trophy

We know how important it is to create an environment that encourages honesty and respect. We
specialize in bringing your team closer together.

Seeing Opportunity
Icon Used: eye

Many teams spend their time waiting for inspiration before taking action. We believe developing
a keen sense of opportunistic vision enables you to create your own opportunities.

Creativity
Icon Used: paint-brush

You already have a creative team. We can help you tap in to that creativity and develop an
environment that encourages new ideas and forward thinking.

Problem Solving
Icon Used: puzzle-piece

17
We understand that success comes as a result of productive problem solving. We teach your
team to approach problems from the right angle to develop lasting solutions.

Home Page Section 3:

Media Gallery
We are adventure seekers! We believe we can bring you and your team closer together. Take a
look at our videos and photo gallery to see us in action. We think you'll like what you see and
will want to work with us!

Button Text:
View Media

Video Background URL:

https://www.youtube.com/watch?v=ynkKL3R0rhc

18
Home Page Section 4:
Your Journey Starts Now
We consistently help our clients achieve lasting positive group dynamics. Get in touch with us
today and start planning your team retreat.

Button Text: Contact Us

See Us In Action
We maintain visual records of our group retreats. We want you to see the work we have
documented so that you can decide if we are a good fit for you.

Button Text: View Our Gallery

Home Page Section 5:

Energy and persistence conquer all things.

-Benjamin Franklin

Buttons:
Learn About Us
Read Our Blog

19
Blog Posts
Believe You Can and Youre Halfway There

This is the Teddy Roosevelt quote blog post. Believe you can and youre halfway there. This is
the content for the Teddy Roosevelt blog post. Believe you can and youre halfway there.

This is the Teddy Roosevelt quote blog post. Believe you can and youre halfway there. This is
the content for the Teddy Roosevelt blog post. Believe you can and youre halfway there.This is
the Teddy Roosevelt quote blog post. Believe you can and youre halfway there. This is the
content for the Teddy Roosevelt blog post. Believe you can and youre halfway there.

This is the Teddy Roosevelt quote blog post. Believe you can and youre halfway there. This is
the content for the Teddy Roosevelt blog post. Believe you can and youre halfway there.This is
the Teddy Roosevelt quote blog post. Believe you can and youre halfway there. This is the
content for the Teddy Roosevelt blog post. Believe you can and youre halfway there.This is the
Teddy Roosevelt quote blog post. Believe you can and youre halfway there. This is the content
for the Teddy Roosevelt blog post. Believe you can and youre halfway there.

This is the Teddy Roosevelt quote blog post. Believe you can and youre halfway there. This is
the content for the Teddy Roosevelt blog post. Believe you can and youre halfway there.This is
the Teddy Roosevelt quote blog post. Believe you can and youre halfway there. This is the
content for the Teddy Roosevelt blog post. Believe you can and youre halfway there.This is the
Teddy Roosevelt quote blog post. Believe you can and youre halfway there. This is the content
for the Teddy Roosevelt blog post. Believe you can and youre halfway there.

This is an example of a custom excerpt for the Theodore Roosevelt quote.

The Secret of Getting Ahead is Getting Started

This is the Mark Twain quote blog post. The secret of getting ahead is getting started. This is the
content for the Mark Twain blog post. The secret of getting ahead is getting started.

This is the Mark Twain quote blog post. The secret of getting ahead is getting started. This is the
content for the Mark Twain blog post. The secret of getting ahead is getting started. This is the
Mark Twain quote blog post. The secret of getting ahead is getting started. This is the content
for the Mark Twain blog post. The secret of getting ahead is getting started.

This is the Mark Twain quote blog post. The secret of getting ahead is getting started. This is the
content for the Mark Twain blog post. The secret of getting ahead is getting started. This is the
Mark Twain quote blog post. The secret of getting ahead is getting started. This is the content
for the Mark Twain blog post. The secret of getting ahead is getting started. This is the Mark
Twain quote blog post. The secret of getting ahead is getting started. This is the content for the
Mark Twain blog post. The secret of getting ahead is getting started.

This is the Mark Twain quote blog post. The secret of getting ahead is getting started. This is the
content for the Mark Twain blog post. The secret of getting ahead is getting started. This is the
Mark Twain quote blog post. The secret of getting ahead is getting started. This is the content
for the Mark Twain blog post. The secret of getting ahead is getting started. This is the Mark

20
Twain quote blog post. The secret of getting ahead is getting started. This is the content for the
Mark Twain blog post. The secret of getting ahead is getting started.

Energy and Persistence Conquer All Things

This is the Benjamin Franklin quote blog post. Energy and persistence conquer all things. This
is the content for the Benjamin Franklin blog post. Energy and persistence conquer all things.

This is the Benjamin Franklin quote blog post. Energy and persistence conquer all things. This
is the content for the Benjamin Franklin blog post. Energy and persistence conquer all things.
This is the Benjamin Franklin quote blog post. Energy and persistence conquer all things. This
is the content for the Benjamin Franklin blog post. Energy and persistence conquer all things.

This is the Benjamin Franklin quote blog post. Energy and persistence conquer all things. This
is the content for the Benjamin Franklin blog post. Energy and persistence conquer all things.
This is the Benjamin Franklin quote blog post. Energy and persistence conquer all things. This
is the content for the Benjamin Franklin blog post. Energy and persistence conquer all things.
This is the Benjamin Franklin quote blog post. Energy and persistence conquer all things. This
is the content for the Benjamin Franklin blog post. Energy and persistence conquer all things.

This is the Benjamin Franklin quote blog post. Energy and persistence conquer all things. This
is the content for the Benjamin Franklin blog post. Energy and persistence conquer all things.
This is the Benjamin Franklin quote blog post. Energy and persistence conquer all things. This
is the content for the Benjamin Franklin blog post. Energy and persistence conquer all things.
This is the Benjamin Franklin quote blog post. Energy and persistence conquer all things. This
is the content for the Benjamin Franklin blog post. Energy and persistence conquer all things.

21
Image URLs:

https://unsplash.com/search/hiking?photo=lSegRSDBMLw

https://unsplash.com/search/mountain-climbing?photo=efruITOl8P0

https://unsplash.com/collections/170843/hiking-adventure?
photo=Dwheufds6kQ

https://unsplash.com/search/smiling-face?photo=nOVQ8Gj1i8E

https://unsplash.com/search/italy?photo=fwWj5Y1IgQg

https://unsplash.com/search/oce?photo=-A3Kb429mgY

https://unsplash.com/search/people?photo=AZMmUy2qL6A

https://unsplash.com/search/hike?photo=e_Q3BhySf5U

https://unsplash.com/search/polaroid?photo=mj2NwYH3wBA

https://unsplash.com/search/oce?photo=XOSBmiCQ1DI

https://unsplash.com/?photo=NkEH30uoe8o

https://unsplash.com/search/oce?photo=IXHNBGTKJfw

22
Blog Post Image URLs:

https://pixabay.com/en/mark-twain-vintage-author-humorist-391120/

https://pixabay.com/en/benjamin-franklin-1767-writer-62846/

https://pixabay.com/en/theodore-roosevelt-politician-man-393205/

YouTube Video URL:

https://www.youtube.com/watch?v=ynkKL3R0rhc

23