Creating pages can and designing everything can be a hassle in WordPress. Especially when you don’t have a coding background. Elementor for WordPress is here to save the day. So do you want to create custom pages with the custom layout? This is the Elementor Tutorial for you.
Elementor is a drag and drop page builder which is an ultimate solution for you. It enables you to easily create pages with the custom layout without you having to learn to code at all. Therefore, in this article, we will teach you how you can create awesome custom WordPress Layout with Elementor WordPress in just a few clicks. With few clicks come greater flexibilities and usability, therefore let’s talk about when you need a WordPress layout.
When you do need a custom WordPress Layout?
There are dozens of free page builders available as a plugin for WordPress. However, the choices of building custom layouts they provide are either limited or they just won’t meet your requirements.
If you know how to code in PHP, CSS, and HTML, then you can create your layout or build a child theme for your website. Moreover, what if you could create these pages without having to code but just by dragging and dropping the interface?
https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-5622353653630105&output=html&h=280&adk=438493626&adf=186479072&pi=t.aa~a.1308332082~i.9~rp.4&w=613&fwrn=4&fwrnh=100&lmt=1662994591&num_ads=1&rafmt=1&armr=3&sem=mc&pwprc=8888421900&psa=1&ad_type=text_image&format=613×280&url=https%3A%2F%2Fdotslaz.com%2Felementor-wordpress-tutorial%2F&fwr=0&pra=3&rh=154&rw=613&rpe=1&resp_fmts=3&wgl=1&fa=27&adsid=ChEI8Nb0mQYQzID7s8fHqKuqARI9ABjHgSCYlJLekSnNC7U5AqlOJ_yIKLontxdsYOMy40M88ohntVbMWAc5Z5wRU9-B0WZo1zDgglT54fMzcw&uach=WyJXaW5kb3dzIiwiMTAuMC4wIiwieDg2IiwiIiwiMTA2LjAuNTI0OS45MSIsW10sZmFsc2UsbnVsbCwiNjQiLFtbIkNocm9taXVtIiwiMTA2LjAuNTI0OS45MSJdLFsiR29vZ2xlIENocm9tZSIsIjEwNi4wLjUyNDkuOTEiXSxbIk5vdDtBPUJyYW5kIiwiOTkuMC4wLjAiXV0sZmFsc2Vd&dt=1664961929716&bpp=5&bdt=861&idt=6&shv=r20220928&mjsv=m202209290101&ptt=9&saldr=aa&abxe=1&cookie=ID%3D4d15ae5b2450e15d-22e5385ac9d50014%3AT%3D1661535043%3ART%3D1661535043%3AS%3DALNI_MZGFfEOf3pao1KBwcA49MPA13cZMw&gpic=UID%3D0000091852d3d612%3AT%3D1661535043%3ART%3D1664946833%3AS%3DALNI_MbHoQvt5stBmnl6YjfOJA3I0EntYg&prev_fmts=0x0&nras=2&correlator=8051623365723&frm=20&pv=1&ga_vid=1722306284.1661535019&ga_sid=1664961929&ga_hid=1924405143&ga_fc=1&u_tz=330&u_his=7&u_h=864&u_w=1536&u_ah=824&u_aw=1536&u_cd=24&u_sd=1.25&dmc=8&adx=340&ady=1274&biw=1519&bih=722&scr_x=0&scr_y=0&eid=44759875%2C44759926%2C44759837%2C42531705%2C44772927&oid=2&pvsid=3864667227060523&tmod=781395450&uas=0&nvt=1&eae=0&fc=1408&brdim=0%2C0%2C0%2C0%2C1536%2C0%2C1536%2C824%2C1536%2C722&vis=1&rsz=%7C%7Cs%7C&abl=NS&fu=128&bc=31&ifi=2&uci=a!2&btvi=1&fsb=1&xpc=92D6LEZXVe&p=https%3A//dotslaz.com&dtd=82
This is exactly the feature that Elementor WordPress provides. It has a drag and drop interface and it’s a page builder plugin that enables you to easily create a custom WordPress page and layout without having to essentially have any coding skills.
Therefore, it has a very responsive and fast interface through with you can create a custom layout with a live preview. There are many ready-to-use modules for web design elements in Elementor WordPress.
Therefore, let’s move on with our tutorial of creating a custom WordPress Layout with Elementor for WordPress.
What is Elementor?
Elementor is a drag and drop page builder plugin that is used in WordPress. There are a couple of features it provides:
- It gives you a completely separate and original interface for creating pages, posts or even custom types of posts.
- Therefore, when you visit a standard post or page section in your WordPress dashboard, you will be able to see the “Edit With Elementor” button. Clicking that button will allow you to enable Elementor for your website.
- Moreover, It will redirect you towards the menu of Elementor
- You don’t need to have any HTML or PHP knowledge or skills to use Elementor. Everything can be done easily using the handly interface that it possesses.
- Therefore, it’s all about simplicity and functionality.
- Moreover, you can use Elementor WordPress to create any layout of content or page layout that you can ever imagine.
- Regardless of what WordPress theme you use, you can use it as your liking.
- Finally, Elementor works with all of the WordPress themes.
The main Elementor’s benefit is that you can create very impressive pages and page layout or contents even if you have no experience as a designer or have any experience in site building using languages like HTML, CSS, PHP.
Moreover, Elementor opens endless possibilities especially if you don’t want to spend endless amounts of money in hiring designers and learning to code. The weirdest aspect is that Elementor is Enjoyable. The users seem to enjoy a lot. As they boast, the main plugin has been downloaded more than a million times.
There’s even more to Elementor. If you don’t want to build everything from the scratch, you can use several templates and furthermore tweak then to your liking. This is until unless you get the same result that you desire. The possibilities are endless.
Features of Elementor
The plugin is equipped with several features. These features are a handful of interesting elements.
- Therefore, the main page-building function itself is awesome
- There are a bunch of pre-made templates that can be implemented and furthermore tweaked. At the time of starting, there are more than 35 free templates available. Moreover, you can even tweak then and save them as your templates to use them later on pages or posts.
- Finally, there’s a custom page template which is Elementor Canvas. It’s a blank page template that enables you to build everything from scratch without having to even originate anything from the current WordPress theme. These elements include header, footer, and sidebar.
Using Elementor WordPress
Using Elementor may seem too easy but there is some technical stuff that should be mentioned everywhere. Here are the key points of our tutorial.
- Installing the Elementor WordPress Plugin
- Install a separate theme
- Adding new pages by using Elementor WordPress
- Using Elementor to insert a template
- Create sections
- Learning how to use Elementor Widgets
- Edit background images according to your liking
- Change fonts in Elementor WordPress
- Creating a post using Elementor WordPress
How to Create a Page with Elementor WordPress
Open the WordPress admin panel or dashboard. There, you have to go to the Pages.
Click on Add New. After that, you’ll be able to see the “Edit with Elementor” button. Click it and you will be redirected toward Elementor’s custom panel
There, you will have two options. The first one is to create the whole page just by scratch. It means that you will have to drag and drop different elements to your page’s workspace. But, the second one is much easier and better. Let’s see how.
In the center of your work area, you will see two buttons over “Drag Widget Here”. Click on the gray one to “Add Template”.
This will open a whole new library of page templates. Moreover, there are many free to use templates. Elementor templates are not themes though.
Choose your favorite theme template and click on the insert button. I am randomly going to choose any free template just to show you guys how it will look like for the rest of our tutorial. The pages that you’ve chosen won’t affect the header and footer of your website.
Therefore, there’s no need to worry about that. It only fills the body temporarily. As you can see in the screenshot below, the page that I have inserted will change my webpage with customized elements and I can change them to my liking.
Therefore, let’s start with customization. Now you have to click on the element that you want to edit. A menu will appear on the left side of your screen.
Menu itself has three tabs. These tabs are:
- Content
- Style
- Advanced
Content
The “Content” tab enables you to change the displayed element whether it’s a picture, text, link or anything. You can customize it according to your flavor without any styling. So content is basically for editing the content of your webpage or website.
Style
Moreover, the “Style” tab gives you basic and advanced tools to make you change the contents that appear on your webpage. These contents can be colors, background, alignment, borders, margins, and fonts.
It’s very simple. You will be able to understand everything by just messing around with it for a few minutes.
Advanced
For the third tab “Advanced“. It contains additional functions like the whole element’s background or animations. Therefore, you don’t need to necessarily mess around with it until unless you know what you’re doing and whether you need these features.
Elementor WordPress Page Builder makes the creation of pages easy and interesting. Therefore, it’s almost like playing some games. You have the whole choice of choosing the template that fits the structure of your WordPress site. Apply the template and then customize it according to the design of the theme.
You should stick to a set of color schemes. Therefore, you can even save that template and use it for all the parts of your website. How cool is that?
How to Create a Post with Elementor
Creating a post is a little different from Elementor. Therefore, let’s try to create the post from scratch and see how it holds up.
So what is a post? In Normal cases, there are featured images, metadata, sharing buttons, comments, texts, and other things. Your case might be different as you may need to add some other features. Therefore, you are free to do it.
Furthermore, I am going to create a very simple post to show you how everything works in Elementor. Therefore, I will start by dragging and dropping all the mentioned elements to the word area. Moreover, you can customize it to your liking if you want. It’s not even a problem.
This is the time to customize. Therefore, press the title element and set details and appearance you want it to have. I will change the font size, size of the title and alignment.
Therefore, now let’s try to set a picture. Click on the image, choose the picture you want to set and set the margins. Moreover, I’ve also added the text of the post of text section and changed fonts and size of letters than I’m writing. Also, you can change the sharing buttons and comment sections.
BOOM! You’ve created a simple post page. Now, you can save it as a template to you further in your posts. You just have to press the little error in the sidebar and you’ll see the “Save as Template” option. You can save it by clicking that.
There are a ton of other functions that Elementor could offer you. Mastering the Elementor WordPress Page Builder will enable you to open up a whole toolbox for you. It’s a great tool that can help you to create even more pages and marvelous posts for your blogs.
Now let’s talk about a little about Elementor WordPress.
Main Functionality
About the core functionality of this plugin, let’s talk. Elementor allows you to build, adjust or even tweak your pages with endless possibilities. The main significance is that you can do everything in real-time.
This means that you can see everything as you implement everything. You don’t have to wait for things to reload and stuff.
Therefore, what can you do with Elementor exactly? It allows you to take advantage of the content widgets or the content blocks and rearrange it to your heart’s content via drag and drop support that it provides.
https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-5622353653630105&output=html&h=280&adk=438493626&adf=2438402516&pi=t.aa~a.1308332082~i.63~rp.4&w=613&fwrn=4&fwrnh=100&lmt=1662994591&num_ads=1&rafmt=1&armr=3&sem=mc&pwprc=8888421900&psa=1&ad_type=text_image&format=613×280&url=https%3A%2F%2Fdotslaz.com%2Felementor-wordpress-tutorial%2F&fwr=0&pra=3&rh=154&rw=613&rpe=1&resp_fmts=3&wgl=1&fa=27&adsid=ChEI8Nb0mQYQzID7s8fHqKuqARI9ABjHgSCYlJLekSnNC7U5AqlOJ_yIKLontxdsYOMy40M88ohntVbMWAc5Z5wRU9-B0WZo1zDgglT54fMzcw&uach=WyJXaW5kb3dzIiwiMTAuMC4wIiwieDg2IiwiIiwiMTA2LjAuNTI0OS45MSIsW10sZmFsc2UsbnVsbCwiNjQiLFtbIkNocm9taXVtIiwiMTA2LjAuNTI0OS45MSJdLFsiR29vZ2xlIENocm9tZSIsIjEwNi4wLjUyNDkuOTEiXSxbIk5vdDtBPUJyYW5kIiwiOTkuMC4wLjAiXV0sZmFsc2Vd&dt=1664961929730&bpp=3&bdt=871&idt=3&shv=r20220928&mjsv=m202209290101&ptt=9&saldr=aa&abxe=1&cookie=ID%3D4d15ae5b2450e15d-22e5385ac9d50014%3AT%3D1661535043%3ART%3D1661535043%3AS%3DALNI_MZGFfEOf3pao1KBwcA49MPA13cZMw&gpic=UID%3D0000091852d3d612%3AT%3D1661535043%3ART%3D1664946833%3AS%3DALNI_MbHoQvt5stBmnl6YjfOJA3I0EntYg&prev_fmts=0x0%2C613x280&nras=3&correlator=8051623365723&frm=20&pv=1&ga_vid=1722306284.1661535019&ga_sid=1664961929&ga_hid=1924405143&ga_fc=1&u_tz=330&u_his=7&u_h=864&u_w=1536&u_ah=824&u_aw=1536&u_cd=24&u_sd=1.25&dmc=8&adx=340&ady=7650&biw=1519&bih=664&scr_x=0&scr_y=5010&eid=44759875%2C44759926%2C44759837%2C42531705%2C44772927&oid=2&pvsid=3864667227060523&tmod=781395450&uas=3&nvt=1&eae=0&fc=1408&brdim=0%2C0%2C0%2C0%2C1536%2C0%2C1536%2C824%2C1536%2C664&vis=1&rsz=%7C%7Cs%7C&abl=NS&fu=128&bc=31&ifi=3&uci=a!3&btvi=2&fsb=1&xpc=2oJR1GONvL&p=https%3A//dotslaz.com&dtd=M
Moreover, the most awesome thing is drag and drop itself. You can move any element that’s on your page to move it anywhere possible. It works for all the type of content that is in Elementor’s content widgets. You can completely move it anywhere on the screen.
But what are the widgets exactly? The widgets include headlines, text, images, videos, buttons, dividers, icon, gallery, carousels, counters, shortcodes, links and anything you can imagine. Also, you can use the widgets that you already have on your WordPress site.
Moreover, Elementor also gives you access to the “Basic Display Settings“. This is the setting where you can change backgrounds, margins or even padding values. Colors, fonts and other things can also be changed here.
https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-5622353653630105&output=html&h=280&adk=438493626&adf=3166780042&pi=t.aa~a.1308332082~i.67~rp.4&w=613&fwrn=4&fwrnh=100&lmt=1662994591&num_ads=1&rafmt=1&armr=3&sem=mc&pwprc=8888421900&psa=1&ad_type=text_image&format=613×280&url=https%3A%2F%2Fdotslaz.com%2Felementor-wordpress-tutorial%2F&fwr=0&pra=3&rh=154&rw=613&rpe=1&resp_fmts=3&wgl=1&fa=27&adsid=ChEI8Nb0mQYQzID7s8fHqKuqARI9ABjHgSCYlJLekSnNC7U5AqlOJ_yIKLontxdsYOMy40M88ohntVbMWAc5Z5wRU9-B0WZo1zDgglT54fMzcw&uach=WyJXaW5kb3dzIiwiMTAuMC4wIiwieDg2IiwiIiwiMTA2LjAuNTI0OS45MSIsW10sZmFsc2UsbnVsbCwiNjQiLFtbIkNocm9taXVtIiwiMTA2LjAuNTI0OS45MSJdLFsiR29vZ2xlIENocm9tZSIsIjEwNi4wLjUyNDkuOTEiXSxbIk5vdDtBPUJyYW5kIiwiOTkuMC4wLjAiXV0sZmFsc2Vd&dt=1664961929740&bpp=3&bdt=882&idt=3&shv=r20220928&mjsv=m202209290101&ptt=9&saldr=aa&abxe=1&cookie=ID%3D4d15ae5b2450e15d-22e5385ac9d50014%3AT%3D1661535043%3ART%3D1661535043%3AS%3DALNI_MZGFfEOf3pao1KBwcA49MPA13cZMw&gpic=UID%3D0000091852d3d612%3AT%3D1661535043%3ART%3D1664946833%3AS%3DALNI_MbHoQvt5stBmnl6YjfOJA3I0EntYg&prev_fmts=0x0%2C613x280%2C613x280&nras=4&correlator=8051623365723&frm=20&pv=1&ga_vid=1722306284.1661535019&ga_sid=1664961929&ga_hid=1924405143&ga_fc=1&u_tz=330&u_his=7&u_h=864&u_w=1536&u_ah=824&u_aw=1536&u_cd=24&u_sd=1.25&dmc=8&adx=340&ady=8021&biw=1519&bih=664&scr_x=0&scr_y=5372&eid=44759875%2C44759926%2C44759837%2C42531705%2C44772927&oid=2&pvsid=3864667227060523&tmod=781395450&uas=3&nvt=1&eae=0&fc=1408&brdim=0%2C0%2C0%2C0%2C1536%2C0%2C1536%2C824%2C1536%2C664&vis=1&rsz=%7C%7Cs%7C&abl=NS&fu=128&bc=31&ifi=4&uci=a!4&btvi=3&fsb=1&xpc=wOQiEnuIuy&p=https%3A//dotslaz.com&dtd=M
But the most main part is that you have a full revision history. This means that you can revert to the previous version of the edited page. Just so that if you have messed anything, you can revert it to the original position.
Elementor also gives you full control over how pages look like on desktop, mobile or even tablet. Using the toggles, you can adjust how your page looks like on various devices.
Pricing of Elementor?
Here’s probably the most fun part. It’s free. Well, it’s free in theory, somewhat. It also has a Pro edition too. But you don’t have to buy Pro edition to enjoy it. I’d say that Pro version gives you 10% more features than there are already.
The main plugin can be downloaded via the official WordPress Repository. Click HERE to download it. You don’t have to sign up or register anywhere and it works like a breeze.
Moving on towards the pro addition, it does offer you quite interesting stuff that more advanced and power users might enjoy. Moreover, you don’t necessarily need until unless you know what you’re doing. Here’s the current pricing of the pro version of Elementor:
Here is the list of features the pro version of Elementor provides:
- Display post listing inside the Elementor Layout
- Work on web forms in the Elementor workspace
- Use a global widget that you can put right into different areas of the site.
- Adding custom CSS code to any of the Elementor blocks.
- Elementor elements can be implemented in sidebars and on widgets
- You have the full option to use slides
- You can use WooCommerce integration too
- Access of many more page templates is provided to you.
- You will get more content blocks.
Therefore, let’s talk about some of the best Elementor Themes are Templates you can use as of now.
Best Elementor Themes or Templates
Many free or paid WordPress themes are made to work with the Elementor. Therefore, there are a couple of templates you can use on WordPress themes.
Let’s take a look at some of the best themes you can use as of now.
1. Ocean WP
It is a popular WordPress theme that works with Elementor builder in WordPress. Moreover, it comes with many templates and the setup process is pretty easy. Everything is easy to set up.
One thing to notice is that, with the use of premium extensions, you can extend the features and usability of your website. Ocean WP is the fastest WP theme. Therefore, it has the fastest page load time and it even supports WooCommerce for free.
2. Astra Theme
Astra Theme is one of the most powerful WordPress theme that can be fully integrated with Elementor Page Builder. It allows you to customize any aspect of your webpage or website.
It packs quite a punch. Therefore, with dozens of pre-made demos, the theme is highly optimized for greater performance and speed.
3. Atmosphere Pro
It is a beautiful WordPress theme that is power by the Genesis Framework. Therefore, it is fully compatible with Elementor’s drag and drop builder. You can customize your website easily with it. Moreover, it has a widgetised homepage where you can add your content and images quickly.
Other features are customization header, theme options panel and also the custom page templates. This theme also supports WooCOmmerce so if you want to start an online store, you can do it easily.
These were some of the best themes that you might want to integrate with Elementor. Therefore, now let’s talk about the Pros and Cons of Elementor.
Advantages of Elementor Plugin
Here is everything that I like or I dislike Elementor WordPress. So let’s start with the advantages.
- Elementor is Free
- It has a wide variety of features and it’s easy to use
- These features, most of them are free. Which is even more impressive.
- Elementor allows you to build custom page layouts and design things that are not available in your current theme. Therefore, you don’t even require any sort of HTML, PHP and CSS skills.
- Everything you do on the screen is a real preview. What you do will be live. You’ll be editing everything in real-time.
- Blank Canvas Page takes your current theme and just throws it away. Therefore, it lets you use Elementor blocks and sections of the theme. This is helpful when you might want to remove everything and start it from scratch.
- Elementor 1.5 enables you to tweak column layouts for specific screen sizes. Therefore, flexibility is endless.
- The undo or rollback option enables you to revert to an earlier version of the Elementor. Therefore, if you mess up anywhere in the process of editing, you need not worry because Elementor’s Rollback option has got you covered of course.
Cons
- There is no way to stylize your links for some reason. Moreover, there also isn’t any way to link the syles properly from your current theme. Therefore, the link is where it somewhat suffers.
- It is buggy when it comes to fonts or text sometimes. Moreover, sometimes the styles are applied correctly. On the other hand, they don’t. Therefore, it’s just a tad bit unreliable.
Should you use it?
The main competitors of Elementor to this date are Divi and Beaver Builder. We can argue with the features of these three and how one is better than others. There is just one thing that puts Elementor ahead of others and that is the price. Moreover, the flexibility of Elementor is also the best. There is unlimited customization you can do to make your webpage look better and more functional than it is right now.
Well, there’s a pro version too but to think that, you can use 90% of the plugin for free, Beaver and Divi just don’t give you that. In short, it’s an awesome and the best WordPress theme builder. I give it a 10/10 recommendation for using.
Conclusion
Keeping everything in mind, Elementor is the best website builder available on the internet as of now. It’s free, it provides tons of features. The best thing about Elementor Tutorial is that it’s powerful and flexible.
Elementor, with its large number of controls and features, makes it our number one recommendation to use for building a webpage. It is fast, smart and precise.
