Page Design With Elementor Pro (7 Important Tips For Beginners)

page design with elementor

I have been building websites with WordPress since 2009. I’ve used almost every page builder out there. But, after about two hours of using Elementor’s Free Plugin I knew I was hooked. I’ve been using Elementor Pro for about a year and a half now.

The main reason why I recommend Elementor for my clients and through the Blitz Challenge is the fact that almost anyone can design a good looking page on their own. I’ve had customers across the United States and the main concern with long distant clients is how to make basic edits and changes.

With Elementor, I’ve been able to help people be comfortable building out their websites.

I didn’t want to waist your time with individual posts on how to design a [Fill In The Blank] page. So instead, I thought I’d share seven things that I have found to be musts when I’m designing every page.

The following are in no particular order.

Always include the page name or “subject”. Headline of the page

If you are designing your “About Page” you may want to have something like: “About Us”, “About UrOnlineBrand”, “Who Is ██████ ?”. Your home page may include “Welcome To DigiToolBag” or something like that.

I like to refer to this as the “Headline of the page”. For me, it just sets the tone and lets your readers know what the page is about.

Embrace the “White Space”

This may sound weird but if I am designing a page and something isn’t looking right I will add more and more white space to make the content stand out more.

Depending on the feel of your website, this may be “Grayspace” or “Blackspace” depending on your color pallet. The focus of this tip is to use spacing and not make the page look or feel “crowded”.

Remember Your Target Market

If you are building out a website and your target market is in the younger “tech” demo, you need to design for mobile FIRST! Remember that you need to design with your target market in mind so the process to consume your content and become a customer, client, or follower isn’t difficult for them.

If you are a laser eye surgery doctor, you don’t want to have text on your website really tiny.

It can make it hard on the eyes and make people leave!

Use Different Types Of Content

If you are looking for a service provider, images are important in your decision to make a purchase. But if all they have is a bunch of pictures and no text or videos it may be overbearing.

Having nothing but a video for a primary page (Home, About, Services, Products, etc.) can look like your brand is a “Shortcut Taker”. It looks too basic and takes away from the message of the video.

The worst websites online, in my opinion, are the websites that have zero images, videos or any other type of visual effects. Having a website with nothing but text is one of the fastest ways to lose viewers. I’ve done many split tests and starting in 2010-2011 people started leaving text only websites almost instantly. (unless it is a blog, but even then you still need featured images and some sort of visuals)

If you have images, videos, text and audio… USE THEM ALL!

Having a page with all different types of content will help you communicate your message to everyone regardless of their favorite way to consume content. (I would include audio in video, unless you run a podcast)

Don’t Go Too Small Or Too Big

Remember that sizing of images, text and videos can make or ruin a website. I already talked about tiny text but huge text is bad most of the time too!


So I only ask that you keep sizing in mind and don’t forget how they are going to be viewing your content.

Never Forget The Power Of The Call To Action (CTA)

Call To Action Description From Wikipedia

In marketing, a call to action (CTA) is an instruction to the audience designed to provoke an immediate response, usually using an imperative verb such as “call now”, “find out more” or “visit a store today”.[1] Other types of calls-to-action might provide consumers with strong reasons for purchasing immediately such an offer that is only available for a limited time (e.g. ‘Offer must expire soon’; ‘Limited stocks available’) or a special deal usually accompanied by a time constraint (e.g. ‘Order before midnight to receive a free gift with your order’; ‘Two for the price of one for first 50 callers only’). The key to a powerful call-to-action is to provide consumers with compelling reasons to purchase promptly rather than defer purchase decisions. A CTA can be a simple non-demanding request like “choose a color” or “watch this video”, or a much more demanding request. An obvious CTA would be a request for the consumer to purchase a product or provide personal details and contact information.

Use CTA’s where you can and drive traffic to the pillar content on your website.

Stay On Point

Remember what page you are designing and unless you are building a “one page” website, don’t try and force all content into one page.

Yes, your home page should tease inner pages to send traffic to them but if you sell products and services, you don’t want to have information about “products” on your “services” page. Of course a “CTA” for them to check out your products is fine. Just be sure to remember what page that your visitors are on. If they are on a page about your upcoming events, you want to keep that the focus and not give other options for them to not sign up or consume your content.

Bonus Tip: Don’t Forget That You Can Use Templates

For starters, the Elementor Pro WordPress plugin has a massive amount of pre-made design templates. All of the design templates come included with your site license when you buy Elementor.

You may want some other design templates for inspiration when designing your website. If you do, that is totally fine!

Envato recently released a FREE WordPress plugin with hundreds of free templates for Elementor users. Once you get your copy of Elementor, you can get the Envato plugin here.

I will be releasing a video on the Envato Elements plugin in the near future. Don’t worry I’ll be posting it here!

For the 100% complete FREE Elementor Pro Guide Visit Site

How To Create A Coming Soon & Under Construction Page

coming soon elementor

There’s a good chance that you are familiar in some way with a Coming Soon Page or “Under Construction Page”. 

In this post we are going to walk through how to create a “Coming Soon Page” with the awesome Elementor page builder plugin.

At this point, if you are following along with the “Blitz” we’ve now Installed WordPress for our domain and set up everything we need to do including installing the recommended plugins and all that fun stuff.

Now, while we build our website it is time to get started with a Coming Soon Page so people who visit your website know how to contact you until your website is finished.

If you are not familiar with the “Under Construction Page” or Coming Soon Page, it is basically a single landing page that visitors visit, regardless of what URL they visit that is associated with your website.  So while you are designing the “Contact Page” if your visitors go to it will be redirected to this page until you are ready to launch your website.

Ready? Let’s Go!

The first thing we are going to do is to get started with creating our first “Template” with Elementor. You get to this section by going to the “Elementor” section within your Dashboard sidebar.  Then click on “My Templates”. This will take you to the “Create Your First Template” page that you see below.

Once you are here you just need to click on “Add New” in the upper left corner or the “Add New Template” green button. This will bring up the New Template panel. 

The settings you will need to use is “Page” in the drop-down menu and then the name of your template … I’m going to use “Coming Soon Page”. Then you just need to click on “Create Template”

At this point if “Elementor” isn’t loading you may want to make this change.

Now your page should be “up” but we have some designing to do …

The first thing we need to do is get the page template set so it doesn’t look cheap…

Start by clicking on the “gear” icon on the bottom left of the screen and then change the page layout to “Elementor Canvas”.  This will help make sure only what we are doing now is the only thing showing.  That way your Header or Footer won’t show.

After you have that finished you will now build out your coming soon page.  For this example, I’m going to stay basic and just use one of the Elementor Coming Soon Page Templates.

All you need to do in order to view the available templates is to click on the gray folder icon.

This will open up all of the available page templates. You can use the “Search Box” at the top of the pop up window for “Coming Soon” or you can browse through the results.

You will see a small [PRO] icon in the top right-hand corner for some of the templates. These are just templates that are only available to the people who have a licensed copy of Elementor Pro.  When you see that, don’t worry you can use those once you get your copy of Elementor Pro. (It is only $49 for a year with unlimited updates and support) 

***For more information about Elementor Pro – Check out the Elementor Guide***

Coming Soon Page Templates

You can custom build your page without a template but to save time and get started building our website, we’re going to use a template.

You can see more of the design by clicking on the image of the design. If you don’t like the design, all you have to do is click on “Back to Library” and continue browsing until you find the template you want to use for your page.

Once you find the right design for your page, all you need to do is click on the Insert button to have the template inserted into the page.

Now, all you need to do is replace the content with your content… If you need help with using Elementor, please take the time to go over the Elementor Guide.

Once you have your page updated with all of your content all you need to do is click on the Green “Publish” button on the bottom of the page.

Now that you have your page “designed”, it’s time to tell WordPress & Elementor that you want to use that page for your “Coming Soon”, “Under Construction” or “Maintenance Mode” page…

 In order to move on to the next step you will want to exit back to your dashboard.

Once you are back on your dashboard you need to go to the Elementor section on the left menu and click on “Tools”

Once you land on the “Tools” page you will need to click on the “Maintenance Mode” tab.

coming soon page

You will make two adjustments to this page 

The first thing you need to do is “Choose Mode” … We are going to change this to “Coming Soon” by selecting it in the drop-down menu.

After you do that you will need to go down to “Choose Template” and in that drop-down menu you need to select the coming soon page that we just created. 

Now for the most important part of this tutorial … Don’t forget to SAVE YOUR CHANGES!! 🙂 

You are now free to build your website!

Just don’t forget to come back to these settings and disable your coming soon page when you are ready to launch the website! 

Hope this has helped! Shoot me a tweet or a dm if you have any questions and I’ll be glad to help

What To Do When Elementor Won’t Load

elementor wont load

Sometimes you may find that Elementor won’t load. It may be because it is not compatible with the current version of WordPress or might be an issue with your server.  I’ve used Elementor for years and this doesn’t happen often but when it does, most of the time it is a quick fix!

If you are having issues with Elementor loading or you get that dreaded white page you can likely fix it in a few quick steps …

The first thing you are going to do is go to your Elementor “Settings” tab. 

The next step is to click on the “Advanced” tab to access the Advanced Settings for Elementor.

Now that you are on the Advanced Settings page you need to go to “Switch Editor Loader Method” and change it to “Enable”.

And just like that you have the function to load Elementor again.

If you need some more help with Elementor then check out the Elementor Guide!

If you have any questions feel free to shoot me a message on my personal Twitter or Instagram account.

I hope this has been helpful!

Talk Soon…

Ultimate Elementor Guide • WordPress Page Builder Plugin

elementor guide

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.

Get more information about Elementor Pro Here.

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.


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. (

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.

Custom CSS

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.

Column Settings

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 widgets

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.

Basic Elements

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.


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.

PRO Elements

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 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. (

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:

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)

General Elements

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.