In this step-by-step WordPress tutorial, we show you how to use Elementor to create a beautiful 5 page website.
Want to learn how to use Elementor?
There have been many times in which I have gotten disappointed with promising premium themes that proved to be incredibly slow.
This was money that had been wasted, because there was no chance I would stay with any multipurpose theme, that promised the world, but ended up with pages that took 4-5 seconds to load. A disaster in terms of SEO.
This is why I was so excited with the release of the recent starter theme called ‘Base Theme’, created by the professional Sitepoint team with speed and minimalism in mind. Base Theme also included full compatibility with page builders, making it the perfect candidate to test with Elementor.
How to Use Elementor?
- Install Elementor Make sure you have your WordPress installation ready, along with Elementor page builder installed. In the WordPress dashboard, go to ‘Plugins’ > ‘Add new’, and enter ‘Elementor’ in the search bar. Then click the ‘Install’ button, and then the ‘activate’ button.
- Edit a new page with Elementor Go to ‘Pages’ > ‘Add new’. Then, click the ‘Edit with Elementor’ button.
- Insert an Elementor Template You should now be inside the Elementor editor. Click ‘Add template’ and choose from the wide array of free and paid templates. It is advised to start with a template to get to know how the different elements of the page are built. I would also recommend watching this short video about the Elementor structure.
- Make the template full-width You can make any page in Elementor full width by going to Section > Layout, and switchStretch Section to Yes. Watch video showing how to do this
- Understand the structure of Elementor Each Elementor page is made up of sections, columns and widgets. Sections divide the page into horizontal rows. Columns divide each section into vertical columns, and widgets are dragged and dropped inside the column.
- Add a widget Let’s try adding a new widget into a page. Delete one of the widgets in the template you’ve inserted by clicking on widget and then clicking on the X icon. Then, in the left panel, search for the button widget and drag it into the empty area where you’ve just deleted the widget.
- Change background image Click on one of the sections. This will open the section settings on the left panel. Go to the middle ‘Style’ tab, and click on the background image. Now, choose another image, and press ‘insert Media’. Watch video showing how to do this
- Change fonts Go to a heading widget on the page and click on it. It will open the heading settings on the left panel. Go to the middle ‘Style’ tab, and switch on ‘Typography’. Now, under ‘Family’, you can browse through the various fonts and choose a different font family.
- Learn more. For a more detailed 30 minute video , see this Elementor + WordPress tutorial we’ve made not long ago.
Why Choose Base Theme?
We found Base Theme to work amazing with Elementor, because it is lightning fast, yet still offers all you need from a theme:
As you can see in the 45 minute video tutorial, pairing up Base Theme and Elementor lets you create super-fast WordPress websites, in a lot less time than before.
Inside Base Theme
What makes Base Theme so great for page builders, other than the speed and no fluff of course, is that you get six useful templates built in:
Default Template: This is the basic template, with the sidebar on the right
Full Width Page: Use this template when you don’t want the sidebar to appear, and prefer the content to span to 100% of the width
Left Sidebar Page: When you need to switch the position of the sidebar
Page Builder Blank: This is perfect for landing pages, because you get a blank canvas, no header and no footer. Design the entire page with the page builder
Page Builder Boxed: This is a very handy template, because it removes the title of the page, and all the related unneeded spaces
Page Builder Full Width: This is the same as the Page Builder Boxed theme, but the content spans to the full width of the screen
Design a Website With Base Theme
Base Theme is perfect for small business sites with 5-10 pages, for creating super fast landing pages and for building child themes on. Developers can use it to create complex websites, by customizing the structure of every page.
Base Theme is less fitting for a newbie WordPress user who still wants to create a content rich website. This is because it is still a starter theme, and doesn’t allow for a flexible and easy way to change the structure of website sections like the blog area. To customize these areas with Base Theme you would need to use code. Still, for most websites using Base Theme and Elementor is quite sufficient.
Page Builder For Base Theme
The free Elementor page builder is the perfect addition to Base Theme, and adds a long list of design capabilities that does wonders for the web designer’s workflow. It lets you design a website much faster than ever before. Among these features:
- Mobile Editing to visually design the page to be 100% mobile responsive
- Pre-designed templates that let you quickly setup a beautiful
- page design with one click
- Effects like Box Shadows and animations to make the pages more engaging
- Template library to save your designed pages for reuse and for export
- Dozens of useful widgets like Testimonials and Counter
- Live frontend layout control to control the layout of the page on the frontend
This is just the tip of the iceberg, and you can learn more about Elementors’ widgets, features and capabilities in over 50 videos we previously published in our YouTube channel.
Getting Started With Elementor
If you want a head start with Elementor, check out these 4 most basic tutorials:
WordPress users are starting to realize that there is great potential in using a free starter theme like Base Theme and a free page builder like Elementor. You can design a website easily and quickly, without having to spend too much time coding. Using this theme & plugin combo is in the spirit of Open Source that managed to make WordPress the number 1 CMS in the world.
I hope you too will find this combination useful when creating your own site. I invite you to Download Elementor and Base Theme for free and start experimenting with creating your own beautiful website.