WordPress has made it easy for everyone to build their online presence, be it a blog or a business website or a complex ERP. WordPress themes and plugins make it even easy for users to build their websites without having to worry about hiring an expert. Page Builder plugins have played a vital role in transforming the way websites are built with WordPress. Elementor is one such popular page builder plugin.
If you are a web designer and want to bring your designs to life without having to worry about the code, you can use Elementor. But what if you are a developer? Well, if you are a developer you can use Elementor as well because of its dev-friendly functionality and easy to extend API.
In this post, you will get to learn more about Elementor and how you can use it with Elementor addons to build websites, landing pages, popups, quickly.
- What is Elementor?
- Lite and Pro version
- Extending Elementor with PowerPack Addon
- How to Create an Impressive Landing Page with Elementor and PowerPack?
- Creating a page with Elementor
What is Elementor?
Elementor is a popular Page Builder plugin for WordPress. Elementor provides ready-to-use content blocks called Widgets along with basic structural elements like sections and columns.
You can drag and drop these widgets on any page on your WordPress website and build a custom layout as per your needs.
Elementor Pro comes with more than 60 widgets and loads of pre-designed templates which you can use to design any page.
Elementor comes with loads of features and functionalities which can make your website development more comfortable and faster. Let’s see all the impressive features of Elementor which make it worth having.
Fast and Easy to Use
Elementor is optimized for performance. Even if you are a novice user, you will find it very easy to use and navigate effortlessly in Elementor. You will never feel Elementor dragging you back in your design process and will only make things fast and easy for you.
While Elementor is blazing fast, you can get more out of Elementor when you use a good host like Cloudways Managed Cloud Hosting. CW is all about performance and provides super control on how your server functions. When it comes to security, Cloudways offers really reliable and secure servers governed by their proactive security practices to keep your servers safe and secure. The number of features which come with Cloudways is something that is hard to find in the industry today.
Pre-Designed Page Templates
With Elementor, you get loads of pre-designed templates which you can use to create a web page with a single click. There are templates for almost every web page category like landing page, about page, etc. and can make the website design process a lot faster.
If you cannot find a good template in Elementor Library then you can check out third-party Elementor templates. With a thriving community of designers and developers, taking Elementor to the next level is easy.
Loaded with Widgets
Both Free and Pro versions Elementor comes with feature loaded widgets. From simple content widgets like headings, text editor, buttons to advanced widgets like posts grid, login form, WooCommerce, social sharing, you get a lot of functionality with Elementor.
If you wish to have more power when it comes to widgets, you can try out third-party Elementor addons. We recommend going with PowerPack for Elementor. It’s a leading addon for Elementor and built by the same team behind the popular PowerPack Beaver Builder addon.
Elementor Pop up Builder
Popups builder is one of the latest additions to the Elementor builder. Popup builder feature eliminates the need of using a third party popup builder plugin on your website. You can use Elementor to design impressive popups with advanced targeting rules and functionality.
You can create login forms, full-screen mats, discount pop-ups and what not with the popup builder feature.
When you build a website, it’s important to have consistent color settings, typography, etc. You can customize the colors, fonts and even the color picker upfront to ease your design process with Global settings in Elementor.
Build Theme Parts like Header, Footer, Archives, etc.
With Elementor, your designing is not limited to just the content area of a page. You can create a custom header, footer, sidebar and almost every part of the website without having to worry about writing code. All these can easily be created using the Theme Builder functionality in Elementor Pro.
With Dynamic Content functionality in Elementor Pro, you can display Dynamic Data/Content from WordPress custom fields, ACF, Toolset, Pods, MetaBox or any other custom fields plugin. You can use the data from custom fields and display them with Elementor widgets in any part of your site. You can learn more about dynamic content here.
Lite and Pro version
While Elementor has a lot to offer, it is not necessary that the users will have to pay a huge amount to get access to it. In fact, Elementor has two versions, Lite and Pro. You can get access to a lot of features of Elementor in the lite version itself. Both versions have their own features to offer. Here is a detailed comparison of Elementor Lite and Pro which can help you in making a decision.
Extending Elementor with PowerPack Addon
Elementor definitely is the whole package. The only tool you need to start designing web pages with a minimal learning angle.
There might be times when you feel a little restricted while using Elementor. For this, well coded third-party add-ons like the PowerPack Elementor addon comes to the rescue. This add-on is one of the best in its category and offers excellent and impressive widgets with loads of customization options for the users.
Currently, there are more than 50 widgets in the Pro version of PowerPack, and the team keeps adding new widgets which makes it a great choice among the Elementor addons.
PowerPack is built by a team of expert WordPress developers and designers with performance in mind. The plugin is well-coded and regularly updated for compatibility with latest versions of Elementor and WordPress
Let’s see how you can use Elementor and PowerPack addon together to create fantastic web pages.
How to Create an Impressive Landing Page with Elementor and PowerPack?
In this tutorial, you will learn how you can create a quick landing page with Elementor and PowerPack Elementor addon. It’s easy to Get Started with Elementor, all thanks to the user-friendly interface.
Please make sure that you have both Elementor and PowerPack installed on your site. You can get the free versions from the links below:
Creating a page with Elementor
Sign in to your WordPress Admin Dashboard and click on the Add New option under Pages. Now give your page a title/name and click on the Edit with Elementor button.
In this tutorial, we are creating a landing page for a Pizzeria, so we will name our Page accordingly. Here is what our end result should look like:
Let start with the first section. Before we do this, change the layout to Elementor Canvas by clicking on the little settings icon on the bottom left corner in the editor.
Step 1: Hero Section
The hero section comprises of a background image, two headings widgets, and a CTA button.
First, click on the plus icon and add a single column structure from the options. Now go to the section settings and enable the stretch section option and set the bottom and top padding to 250 from the advanced tab.
Now, you can select the desired image for the background from the style tab> background type > Classic and choosing the image from the media display.
We have the background ready. Now let’s add the titles and the button to our hero section.
Drag and drop the Dual Heading widget on the page and change the text respectively. Now, make sure you divide the first and second heading accordingly to emphasize more on the price as we have done in the picture below. Alter the typography for both the parts of the heading.
There are many other alterations you can make to make your hero title the way you want.
Once you have made the changes, drag and drop another Heading widget below the dual heading and change the text and typography settings for same as required, here I have changed the text size to 90, font to Elsie, and the font weight to 600.
Now we will add the CTA button.
Drag and drop the Elementor Button widget on the section just below the Heading widget. Now we will begin altering the settings for the button.
Here are the changes I have made to the button:
- Changed text to Order Now!
- Center-aligned the button.
- Added the CTA link
- Changed Typography to Elise; 24;600 for font, size, and weight respectively.
- Changed the Background color to red(#ff0000) and font color to white(#ff0000).
- Added padding 18, 40, 18, 40 for top, right, bottom, left respectively.
After making the changes, this is what the hero section looks like.
Step 2: The About Section
Now we will work on the About section, Go ahead and add a two-column structure to the page by clicking on the “+” icon.
Now we are targeting to create a layout similar to this one, so we will be adding a heading widget, Text editor widget, and the Testimonials widget to the left column. To the right column, we will add a Heading widget, Text widget, and the Button widget.
Simply start dragging and dropping the widgets on the section and alter them to look like the ones in the image provided above. Add the title and change the typography for the same.
Here is what it will look like:
Now add the text editor below the title on the left column and change the typography to same displayed below.
Now we will be adding the Testimonial Carousel widget below the text editor widget. Add the “Items” or Testimonials to show on your website. You can also use the Testimonials widget by PowerPack which offers way more customization power.
Once you are done with making the changes, your about section’s left column should look like this.
Now for the right column, add the background to add a little contrast to the section.
Now create a duplicate of the heading we made on the left column and drag and drop it on the right column. Do the same for the Text Editor as this will save you from unnecessary redundancy and is time-saving as well. Now for the button, simply duplicate the button from the Hero section and drag and move it to the About section’s right column.
Vertically align the right column to Middle from the edit column> layout>vertical align and you have your About section ready!
This is the final result of About section:
Step 3: “Know More” CTA section
We will be adding another section talking about Pizzeria. This section will be similar to the one we created before, but the structure will be a little different.
So, we want our end result to look like this:
Did you notice anything similar here?
Yes! The heading, text editor are similar to the one we have already created earlier. So, instead of redesigning all the widgets, we will simply duplicate them and drag them to place.
Let’s do it!
First, add a new two-column structure and go to the section settings and add the background image from the media window and add top padding of 100 to make the panel look more spacious. Also, enable the Stretch section option from the settings.
Now go to the previous section and duplicate the heading, text editor, and button widget. You can simply do this by right-clicking on the widget and selecting the duplicate option. Once duplicated, drag and drop the duplicate widgets to their new positions.
This is what the section looks like:
Now for the right column, drag and drop the image widget and select the image from the media gallery. Adjust the image in terms of Image size etc. and once you are done, this is what the section looks like.
Step 4: The Contact/Order section
This is the CTA section which will help the user to place the order. Now, what all this section should include? Let’s see what we are targeting to make here.
We need to create two heading and text editor widgets, a contact form and the price list menu widget by PowerPack.
First of all, we know that we have to keep the design and look of the heading and the text editor the same. You can go ahead and duplicate them from the previous section and place them here. Now change the text there with the one you want.
You can use the Forms widget in Elementor Pro to create a contact form by simple drag and drop process. Once you do that, the contact form will appear on the page. Now you can make further customization to the forms. Here are the changes I made:
- Added form fields and changed the field size.
- Changed the text, size, and alignment of the button.
- Added the email as the submit button action and added the email details.
- Adjusted the column gaps and redid the typography and colors of the text and fields
- Other necessary changes to make the contact form look more appealing.
If you use any contact form plugin like Gravity Forms, WPForms, Ninja Forms, etc then you can use PowerPack’s form styler widget to style the form with Elementor.
Now, on the right column, we will be adding the Price list for the products. For this, we will be using the Price Menu widget by PowerPack. Simply drag and drop it, add the details and change the design and layout for the same. This is what the entire section would look like:
Enter the GiveAway Now!
Winding It Up!
After making all the changes, this is what our entire layout would look like.
Now you can make a good looking layout for yourself as well with Elementor and PowerPack for Elementor. While Elementor offers a lot of features, PowerPack extends it further with creative, functionality oriented widgets. With 50+ highly useful widgets in your toolkit, you can build websites faster.
Elementor and PowerPack can save you time, efforts and help you scale up your web design business. Not only this, both the products are backed by an amazing team of WordPress experts so you get complete peace of mind.
Start Growing with Cloudways Today!
We never compromise on performance, security, and support.
Saud is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform. Saud is responsible for creating buzz, spread knowledge, and educate the people about WordPress in the Community around the globe. In his free time, he likes to play cricket and learn new things on the Internet. You can email him at email@example.com