Elementor Pdf Guide 2rp6l

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 Page…………………………………………12 Us Page………………………………….. 13 Page……………………………………..14 Home Page…………………………………………16 Blog Posts…………………………………………..20 Links to 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 I’ve 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, you’ll 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 I’ve 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

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

:

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 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 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: s 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: 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 Read Our Blog

19

Blog Posts Believe You Can and You’re Halfway There This is the Teddy Roosevelt quote blog post. Believe you can and you’re halfway there. This is the content for the Teddy Roosevelt blog post. Believe you can and you’re halfway there. This is the Teddy Roosevelt quote blog post. Believe you can and you’re halfway there. This is the content for the Teddy Roosevelt blog post. Believe you can and you’re halfway there.This is the Teddy Roosevelt quote blog post. Believe you can and you’re halfway there. This is the content for the Teddy Roosevelt blog post. Believe you can and you’re halfway there. This is the Teddy Roosevelt quote blog post. Believe you can and you’re halfway there. This is the content for the Teddy Roosevelt blog post. Believe you can and you’re halfway there.This is the Teddy Roosevelt quote blog post. Believe you can and you’re halfway there. This is the content for the Teddy Roosevelt blog post. Believe you can and you’re halfway there.This is the Teddy Roosevelt quote blog post. Believe you can and you’re halfway there. This is the content for the Teddy Roosevelt blog post. Believe you can and you’re halfway there. This is the Teddy Roosevelt quote blog post. Believe you can and you’re halfway there. This is the content for the Teddy Roosevelt blog post. Believe you can and you’re halfway there.This is the Teddy Roosevelt quote blog post. Believe you can and you’re halfway there. This is the content for the Teddy Roosevelt blog post. Believe you can and you’re halfway there.This is the Teddy Roosevelt quote blog post. Believe you can and you’re halfway there. This is the content for the Teddy Roosevelt blog post. Believe you can and you’re 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 URL’s: 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/office?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/office?photo=XOSBmiCQ1DI

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

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

22

Blog Post Image URL’s: 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