Ultimate Elementor Guide Last Updated: 12/17/2018
This is an ongoing project and I will be updating this with videos, images and more.
When it comes to building a website with WordPress there are a lot of different ways to get the look you want. For years as a professional freelance website designer, I’ve used widget based WordPress themes, free page builders, premium page builders and just about anything else you can think of.
For the longest time, I used the Salient WordPress Theme that came with the Visual Composer plugin. After hours of research trying to find the easiest way to build a website with WordPress I came across an awesome FREE plugin called “Elementor”.
I used the free plugin for months before buying Elementor Pro. Since then, I refuse to even consider building a website without using Elementor, for myself or my clients.
Elementor is a visual page builder plugin for WordPress enabling the creation of web pages in a live, visual way.
If you follow along with this guide you will learn what you need to know about using Elementor.
Next thing we are going to do is going into the process.
When you are building your pages with elementor you will click “Edit With Elementor” from the basic editor page.
Once you are in the Elementor page editor you have two different options “+” which will add a new section & “Add Template” which is a file icon. We are going to cover the sections, once you understand the sections then you’ll know how to edit the templates.
“ADD NEW SECTION”
When you click on “Add New Section” you will then need to decide what structure you want. Better way to look at it is, how many columns you want inside of this “section” or “row”.
While you are deciding how many columns each section will have you need to think about the content you are using and if it will look good within the row width.
Once you select your structure, it will add a blank structure. With the section selected (hover over the section and click in the middle of the blue tab in the middle at the top of the section), you will see the “Edit Section” on the left side of the page.
There are three different sections at the top of the “Edit Section”.
Inside of the “Layout” section you can change the basic features.
Stretch Section: With this enabled, it will give you the “full width” look. This will stretch the background to the edge of the page.
Content Width: Unless you are looking for a specific look I’d recommend that you keep this “Boxed” with the default settings. (You can also use full width and edit the padding/margins if you want the content to be full width. We’ll cover that in a bit.)
Columns Gap: This will let you have a space between the different columns. For simplicity I’d recommend leaving this Default.
Height: This works for sections that you want basic elements in with the background being bigger than just the element.
Content Position: This allows you to have the content positioned within the section at the top, middle or bottom of the section.
The next section is the “Structure” and since we already have that set when we added the section we can move on.
Background: This is where you can set the color of the background along with setting a background image. If you are wanting to edit the background all you need to do is to click on the paintbrush icon.
Once you’ve activated the background section you will see a section where you can change the background color.
Underneath that, you can upload the background image. If you decide to use images for the background you should be sure that the width is 1200-1500px. Once again I also urge you to optimize your images. (TinyPNG.com)
When you set the background image you have a few options to customize.
Position: There isn’t many reasons to change this unless you want a specific section to show for a parallax effect or something like that. For most instances I’d recommend leaving this as Default.
Attachment: This is where you can get the parallax scrolling effect where the content of the section will scroll and the background will stay fixed/stationary or scroll.
Repeat: If you are wanting a “tiled” background, this is the option.
Size: You can test the different settings for this but I’d strongly advise the “cover” setting.
Background Overlay: this has the same basic options but with an Opacity scroll bar. This is to set how transparent the image or color overlay will be.
Border: Should you decide to use a border you can chose the different border types. If you decide to use a border then the next option, after you select your border type, is to set the Border Radius.
Border Radius: This type of setting box is something you will see more of moving forward so please pay attention to this. On the right side of the box you will have a link button. This will link all of the sections together. So if you set the “Top” section to 45 then it will automatically change the other three sections. If you un-check the link button then you can set each of the sections separately. When it comes to borders, most of the time 3-5px works.
Box Shadow: This will allow you to add a drop shadow to this section. Use this to add a depth to your page.
Shape Divider: This is going to be how you add the fun transitions on your page. This can add a geometric feel to your website pages. You can customize each setting with a shape divider on the top or bottom.
Typography: This is another section you will see many times moving forward but it may be a bit different for the different elements. But for this, you will be editing the parent settings for all of the typography within this section.
Margin: This will add spacing on the outside of the section. You will use this to add spacing above or below the section
Padding: This section will allow you to add a spacing to the inside of the section displaying more of the background and less of the content.
Unless you know what you are doing I’d recommend you not touch the Z-Index/CSS ID/CSS Classes.
“Entrance Animation” is the last and final setting in this section. This will add an animation as the chosen section displays above the fold.
Responsive: This section is where you will change how this section will be displayed on the different devices.
Reverse Columns: When you design your pages you may have a page that has two columns and when it pulls up on mobile or on a tablet the wrong widget is on top. Using this will do just as it says, it will reverse the columns.
Hide On Desktop: Use this when the section is for your mobile or tablet visitors.
Hide On Tablet: Use this when the section is for your mobile or desktop visitors.
Hide On Mobile: Use this when the section is for your tablet or desktop visitors.
If you are using this tutorial and know how to write CSS then by all means, use this section. If you don’t know what CSS is, then I highly recommend that you do not touch this section or any other custom CSS section you come across moving forward.
In order to edit the column settings you will need to select the column by hovering over the column and clicking on the grey “edit column” button in the upper right hand corner of the desired column.
For this you can change a few settings but we’re going to keep this very basic.
Column Width(%): This is in case if you want the selected column to be a different percentage than what it is currently. Just keep in mind that the column width settings need to total at 100%
Content Position: Once again, just like the section settings you can chose to have the content inside of the selected column positioned at the top, in the middle, or towards the bottom of the column.
Widgets Space & HTML Tags are not needed for doing our sites. If you are more advanced and know how to use these, by all means go ahead.
This section is very similar but your only options here is your background, background overlay(only displays when you have customized your background), border, and typography.
Margin: This will add spacing on the outside of the column. You will use this to add spacing on the top, bottom, or the sides of the column.
Padding: This section will allow you to add a spacing to the inside of the column displaying more of the background and less of the content.
Elementor Widget Walk-Through
Since you know how the sections(rows) and columns work, now is the time to get comfortable with the different elements and what each of them does. I am going to be covering the Elementor Pro elements, along with the elements that are specific for the theme that we are using.
We are going to be walking through each of the elements within elementor and covering what they do. Some of this will seem very repetitive, so you might find that the further down the list I go I may not cover everything as I don’t want to make this just a compilation of copy & paste. So, please take the time to make yourself familiar with each of the elements before you move forward.
Columns: This element is to add additional columns under another column. For example: you may want a “Hero” section on your home page with a headline at the top and underneath it, have two separate columns to have your logo on one side and some text with a button on the other. This is where you would add additional columns inside of the single column section.
Inside of the “Edit Section” you will be able to change out the structure as well as the basic “Layout” settings. The “Style” tab will work the same here as before and the Advanced will as well.
Heading: This is for your page headings. Think of this as your page titles and headings that need to stand out on the page.
Title: In the “Edit Heading” section on the left of the page you can add your title in the text box.
Link: If you want your heading to link out to a landing page or something else you would put the desired link in this section.
Size: You can change the basic size of your heading here via Small, Medium, Large, or XL.
HTML Tag: When it comes to the HTML Tag, the best way to look at a page is that it should only have ONE H1 tag then from there I’d recommend you layout the rest of the page like a pyramid, with the most important headings being H2 & H3 and go down the list as you need.
NOTE: DO NOT FORCE YOUR “KEYWORDS” INTO YOUR CONTENT JUST FOR SEO. BUILD YOUR PAGES WITH YOUR CUSTOMERS/VISITORS IN MIND FIRST. THEN WORRY ABOUT THE REST.
Alignment: This is the same as the word processors on almost every computer. You can chose to align left, center or right. You can also chose to “justify” your text.
Text Color: This is an easy one. You can customize your color to an exact color code if you need to match up with your brand colors.
Typography: This is one of the sections that we’re going to be skipping a lot moving forward so please pay close attention now.
The typography settings consists of a decent amount of features.
Family: This is where, if you want, you can change the font that the text will display in. Because there are a lot of different fonts, not all fonts are available. You can however, use any of the basic fonts along with any of the google fonts.
Size: Remember that you need to set this to make it big enough for people to read. Don’t make the font size below 14, it makes it hard to read and makes people leave the page without consuming your content. You can make your font fairly large just make sure you test the responsiveness for the size. (We will cover how to do responsive design later on)
Weight: This is the thickness of the font. You can chose Default, Normal & Bold. You can also select the thickness based on a scale of 100-900 with the lower the number the thinner the letters and the higher the number the thicker the letters & numbers.
Transform: This feature has a few different settings. Default (depending on if you kept the default settings) will leave everything just as you type it. The next option is Uppercase which will make every letter uppercase. Lowercase will make all letters lowercase. Capitalize will make the first letter of each word uppercase. Normal will also leave everything just as you type it.
Style: This is where you can change the style to Normal, Italic or Oblique.
Decoration: This is where you can add an underline, over-line or a line through the text.
Line-Height: This will make the line higher, so it will add space to the top and bottom of the text, making the space in between the lines of text larger.
Letter Spacing: This adds space in between each letter that will stretch out the text to fit a larger section.
Text Shadow: Very Basic, it adds a shadow behind the text.
Blend Mode: This will change how the text is displayed. There are a lot of options for this, I’m not going to go into these here, feel free to look around and see what they do & if any of them will work for you.
Advanced: Same as before.
Image: This is how you add images to your page. When you add the image element, it will automatically add a placeholder image. Simply hover over the image in the sidebar to the left and click on “Delete” Then upload your new image.
Image size: As long as you upload images in the size they need to be displayed then you can set this to “Full” if not then just make the setting that displays the best for you.
Alignment: Select how you want the image aligned.
Caption: If you want to add a caption under the image you can do so here.
Link to: This is where you can chose to link to the media file or link the image to a specific URL.
Width: you can choose to only display your image to a specific width
Max Width: This is where you can set a default that will keep the Max Width set to a specific %
Opacity: You can use this to display the image at a specific % transparency.
Border Type: You can select the type of border that you want along with the width which is the thickness of your border should you chose a border.
Border Radius: This will allow you to round out the corners of the image. If you upload a square image you can use the border radius to round out the corners and make it a display as a circle.
Box Shadow: this will add a box shadow to the image. Don’t worry, if you set the border radius then it will show the shadow appropriate to the radius you set.
Advanced Settings are the same and from this point forward I will only be covering the Style & Advanced Settings when they are specific to the element.
Text Editor: This is for bodies of text. The editor will run just like the majority of word processors.
Video: This is an easy way to embed videos into your WordPress website. Once you add the element, chose the source (YouTube, Self-Hosted, etc.) then enter the URL to the video you want to embed/display on your page.
Start/End Time: If you only want a small portion of the video to show then you can set the start and end time that will ensure you can control exactly what is shown.
The other video options include: Auto play, Mute, Loop, Player Controls, Video Info, Modest Branding, Suggested Videos, and Privacy Mode.
If you feel like it you can also add an Image Overlay to the video.
When you are selecting your video you may need to change the ratio in order to match the video you’re embedding. You can also control the Play Icon that overlays on your video.
Remember this element! In my opinion, the button is the most under utilized element in all of the page builders available for WordPress.
I normally don’t do anything with the “Type” I’d rather customize everything.
Text: This is the text that displays on the button. “Click Here” for example.
Link: This is the URL that the button will link to.
Alignment: Align left, right, or center. If you chose “Justify” it will stretch the button to the width of the column it is in.
Size: You can chose basic settings here for the size of the button.
Icon: This allows you to add an icon in before or after the text on the button.
Icon Spacing: This only displays when you have an icon selected. This will adjust the spacing between the icon and the text on the button.
Style: The options here are pretty self explanatory so we’re going to move forward.
Divider: This will add a line to separate sections on your website. You can chose if you want a solid line, double, dotted or dashed. Then the rest of the settings is to customize the look of the divider.
Spacer: This just adds blank space. If you want a large area to just display the background or want some extra space in between the different elements you can use this to add that space, if you don’t want to edit the margin for the element.
Google Maps: This is an awesome element for local/”Brick and Mortar” businesses. By just putting in your address you can embed a map without any coding and it also will let you control the “zoom level” for the map along with “height” which will be the size it displays on your page.
Icon: This is simple, it displays the icon of your choice either plain or with a frame/background. You can use the Link section to enter a URL you want it to link to.
Posts: This is for building a “spotlight” for bog posts within a page. For example: you may want to show a spotlight of three or four of your most recent blog posts on your home page. The settings for this is very detailed so hang in there I’ll try not to go into anything you don’t need.
Skin: There are two options here.
The first is Classic which displays the Featured Image at the top, blog post title, date/comments, summary with a “read more” link. This looks more like the traditional layout you might have seen hundreds of times over the last few years.
The second option “Cards” is a clean and modern look. It showcases the featured image with a badge that shows the category. You can also display the Gravatar (Image of the author, setup via gravatar.com). This also displays looking like “cards” with all the info just sitting on the page with the default settings it adds a drop shadow.
Columns: This is where you select how many columns you want to display your blog posts. You can display more than just the amount of columns by utilizing the Posts per page setting below just a quick heads up. Keep it clean and don’t go over three or four columns.
Posts Per Page: Like I said above you can have separate rows of posts. Depending on what you are using the section for you can set up with three columns and set the (PPP) to six which will display two rows of three.
Show Image: This will allow you to display the featured image for each post or not.
Masonry: Using the Masonry setting will allow you to display the entire featured image and will have the cards/posts display like the Masonry layout. Kind of like bricks are laid sort of uneven.
Image Size: You can customize your image size here if you feel the need to. Once again, be sure to optimize your images for mobile. (TinyPNG.com)
Image Ratio: If you are not seeing the full image you can use the image ratio to display the full image depending on the ratio of your image.
For the rest of the settings you can turn on or off each of the features within the element. I don’t want to fill you up with fluff so please click around and make yourself familiar with the settings.
Portfolio: This will work the same as the Posts element. Only difference is that it only shows the image.
Slides: Just as it sounds, this a “Slider” element.
Form: This is my top reason for my recommendation to buy the Elementor Pro plugin. With this element, it allows you to create extremely professional looking forms with integration to software like MailChimp and GetResponse. You can also use this just as a basic contact form that just sends the submissions to your email. There are a lot of different settings and ways to customize your forms. I recommend that you take a look at the Elementor channel on YouTube. There is a great collection of videos including an amazing walk-through on how to customize your forms with Elementor.
Note: From this point moving forward, you should have a good understanding of the editor section. I will be covering the basic features of each element and if you need any more information on the elements, feel free to check out the Elementor Docs overview page located at: https://docs.elementor.com.
Login: For most websites you wouldn’t want a login form because you can use the default login page. But if you are building something like a membership site, you can create a login form for your members/users.
Nav Menu: This will be used to display a horizontal menu for your header & footer. (We kind of already covered this.)
Animated Headline: This is used just like the Headline in the basic elements we discussed earlier but this adds fun animation effects to a specific part of the headline. For example: It can add an animated text effect like a keyboard typing, flipping and other animation intros. You can also select to add an animated circle, underline, strike through and others to a specific part of the text by entering the animated part of the headline into “Highlighted Text”. To change the color of the animated circle, underline, etc., you can do so under the “Style” tab.
Price List: this has a restaurant menu style to list products, brief descriptions along with prices. Items can be added, duplicated or removed via List edit section in the left sidebar.
Price Table: This is the fancy graphic that you see on sales pages that list the product along with the price and the benefits with a call-to-action button.
Flip Box: This is the box you see that has a flip style animation when you hover over it, revealing different content on the back of the box.
Call To Action: This is a clean box that has an image(for the product/service) with a headline, small summary, and then a button to send traffic to a specific URL.
Media Carousel: This helps you make a fancy slideshow of images, a scrolling image carousel and a few other options. You can also use this to display video’s. The best option is to upload videos you want to use on YouTube then use the YouTube link in the video link options.
Testimonial Carousel: Just as it sounds. The only thing I would recommend is keep the testimonials limited to no more than four. You don’t want the animations to slow down the loading speed of your site and not to mention, almost no one will spend the time to scroll through that many testimonials. I’d also suggest you link to your reviews tab on your Facebook page.
Countdown: This is a fun element. You can use this inside of blog posts to show an expiration of a deal or special you are running. You can also have a countdown to an event you are hosting, along with a lot of other uses.
Share Buttons: These give you share buttons for the different platforms like Facebook, Twitter, Pinterest, LinkedIn, and others.
Block Quote: This showcases a quote that includes an optional Tweet Button to share the quote from your website.
Facebook Button: This adds a “Like” button to your page for people to like the page they are on.
Facebook Comments: This will add a comment section on your page that is fully integrated with Facebook.
Facebook Embed: This is how you embed an individual post from your Facebook page. You can also embed a specific Facebook comment or video.
Facebook Page: This is the “traditional” Facebook Like Box. It displays your page in a condensed layout.
Template: This is where you can embed the templates you design within the Elementor settings. (You access this via Dashboard>Elementor>My Templates)
Image Box: This is a simple content box with an image, title, and description.
Icon Box: This is the same as the image box but with an icon instead of an image.
Image Gallery: This is a basic image gallery.
Image Carousel: This is similar to the media carousel but with a cleaner look (in my opinion)
Icon List: This is great for listing benefits or contact information. You can have a bullet list that will just have icons for the bullets so you can chose the icon you want displayed instead of just the boring bullet. (•)
Counter: An animated number with a title. Good for listing how many projects you’ve worked on.
Progress Bar: Simply displays a title with a progress bar with name and %.
Testimonial: This is a basic testimonial element that showcases a testimonial.
Tabs: Using this element will allow you to have multiple tabs displaying different content within your page. There is no limit to tabs you can have but I’d recommend keeping to where there is only one row of titles in the tabs.
Accordion: Similar to the Tabs element, the Accordion will be a drop down with content between the titles. This opens up each section one at a time.
Toggle: A similar look and feel as the Accordion but allows the visitor to toggle all “tabs”
Social Icons: This is a clean element that will let you display the different social media icons to represent your different profiles and accounts.
Alert: This will give a semi-temporary alert to visitors that they can close out. This works for good call-to-action’s and news for your business.
SoundCoud: For musicians this allows you to embed a song from your SoundCoud account.
Shortcode: This is for putting shortcodes on your page. Shortcodes are used by WordPress, Themes & Plugins to reference different content & normally look like [this].
HTML: This is where you are able to put in raw HTML code.
Menu Anchor: This is to link to different parts on your page. Please reference the Elementor Docs for more information.
Sidebar: This allows you to put in a sidebar into your page to display widgets.
Site Elements & WordPress Elements
These elements are self explanatory so we will not be going into these elements.
Use these elements for basic edits in adding content throughout your page. You will find a lot of different things you can use in customizing your page.
Now that you have a decent understanding of the different elements and now we are going to go over the four icons that are at the bottom of the edit sidebar.
The first is General settings which allows you to edit the page title, publication status, featured image, You can hide the title and also select your page layout.
The second icon is the responsive icon: More on this in a little bit
The third icon is to go back in “history” and undo edits. So be careful with this one.
The fourth icon is to view a preview of the page.
Last but not least is the Publish Button. If you click on the arrow to the right you will be able to save it as a draft or as a template.
Responsive Website Design
Now we are going to go over our pages in Tablet and Mobile mode to test the responsiveness of your website.
Responsive Web Design is about using HTML and CSS to automatically resize, hide, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).
Lucky for you, Elementor allows you to do this without having to write or edit any code.
In order to view and edit the website to make it responsive you will need to go to the bottom of the edit sidebar and click on the responsive icon. It is an icon of a computer monitor.
This will open up the options for you to view your website in Desktop, Tablet, or Mobile.
Since we are doing the full build in Desktop by default, the next thing we are going to do is to select the Tablet preview.
Now you need to look over the content and make the changes need to font sizes, padding and margins in order to make it look the way you want it to. After you make the changes needed you need to do the same thing with the Mobile preview.