How to Create a Complete WordPress Website With Base Theme & Elementor

In this step-by-step WordPress tutorial, we show how you can use a free basic theme like SitePoint's Base theme, and create a beautiful 5 page website using 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?

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

  2. Edit a new page with Elementor
    Go to ‘Pages’ > ‘Add new’. Then, click the ‘Edit with Elementor’ button.

  3. 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.
  4. 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
  5. 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. 
  6. 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.
  7. 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
  8. 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.
  9. 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:

Design a 100% Mobile Responsive Website

Base Theme is completely mobile responsive, and has a perfect mobile score on Google’s Mobile Testing tool.

Free & Open Source

Base Theme is completely open source and free, and seem to be built with the developer in mind.

Multilingual & RTL Friendly

The theme is compatible with WPML, which is a must nowadays, unless you are willing to let go of over 48% of all websites.

WooCommerce Support

SBT makes it easy to add WooCommerce. With Elementor Pro's extended WC widgets, this makes it the perfect candidate for online shops as well.

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.

basetheme-elementor

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

wordpress-dashboard

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.

Conclusion

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.

About the Author

Ben Pines

Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

77 Responses

  1. Hi!
    I don’t know if it is right place to discuss this or not, sorry for that if i am wrong 🙁

    I was trying to use elementor for my project earlier I am using cornerstone but I am facing few problems if you have any solution for them.

    #1 whenever i try to use your prebuilt templates , like Product-App and Home-page-app, I tired with these 2 templates for now, but whenever i try to make modifications there come errors and elementor stops responding http://take.ms/622Zt this is screenshot which may help you at some extant.
    #2 i didn’t find custom js section, is it available in pro, like custom css or you don’t have custom js or jquery support?

    error #1 was annoying, let me know if you or any of elementor team member can help, Thanx

      1. i ve watched the vid ben,but i stii can t figure it out how to use the posts widget….does not showing nothing when i draw it….can u point me in the right direction ?

  2. Are you still recommending using the GeneratePress theme? Is GP just as fast as Base? In your professional opinion, what is the difference between the two?

      1. I bought the Pro version of GP several months ago and I like it. But, when I read that Base is super faster, I want that extra speed. So, Ben, have you tested it? Is Base faster and cleaner that GP? It’s better to know than not to know, right?

  3. Loved the tutorial, and with a few minor tweaks, Base is a great theme. One thing: this site is not very responsive. Will you be doing a tutorial on that as well? Because I think it is more important to have great mobile presence than a desktop.
    Thanks in advance.

  4. Hi, sorry, I’m using google translate to chat … I’m Brazilian, I’ve been trying to get into this world for four years and now I’m only really able to do some good work … with all the resources I can to succeed in the area. Look … to live in Brazil today is very complicated, but with Elementor I can say that I see a light at the end of the tunnel … Thank you all of the team, congratulations and I hope to one day come back here and say that I won. Check out my project: http://www.telsoamorim.com.br/

  5. Why do page builder plug-ins obsess with NEW websites? How come there is so little information or support for using Elementor with EXISTING sites?

    Elementor should devote an entire section of its support to using Elementor and Elementor Templates with existing sites.

    Thank you.

    1. You’re right. Elementor is actually a great solution for existing sites as well. There are several reason we don’t focus on those:
      1. People tend to get attached to their site. If they want to change it, they change all of it, and a lot of the times this means designing everything from scratch.
      2. Not all page builders or themes are as flexible as Elementor. When you switch off Elementor, all your HTML content stays in tact. You are also not confined to a single theme. Other themes and page builders lock you in, so basically to get off them, you need to build everything from scratch.

  6. excellent tutorial. 2 questions:
    1. how can i control the menu location an appearance? you did not address it at all. can i have 2 menus? one above and one below the header?

    2. you mentioned that every change we make in the margin we need to change in the mobile properties too. is this guidance exist in the link you metioned above?

    thanks!

    1. 1. Menu design is still not available in Elementor. It is currently controlled by the theme.
      2. You don’t have to set a different margin for every mobile property. The right methodology is, once you finished designing the page, go to mobile view, and fix the margin where needed. Check out the previous videos we made on this subject on our YouTube channel.

      1. thank you for your prompt reply. are u planning to control the menu appearancd with elementor in the future?

  7. It looks a great tool and very easy to use. Anyway how you can replicate the part where the menu and logo appear in this website http://cleanco2-demo.detheme.com/cleanco-blue/ and where the slider section is under. Following the demo using the same Base Theme, Do we need to use a code in order to get the same design? Thanks in advance for any suggestion or ideas.

    1. We still don’t have a menu widget in Elementor, and our slider is simpler than the one used on that page, but you could use third party plugins to recreate a similar page in Elementor, sure.

  8. What’s your opinion about Elementor with Genesis themes in terms of speed and usability especially compared to GP? Trying to make a choice.

  9. Hello !
    Sorry to ask you this here, but I see no contact page on the Elementor website.
    I fell a bit confused with the choice of a theme. GP looks great, but if I go Pro with them, do I still need to use Elementor? After all they make sections and page headers… But, there are no coumns, right, and no slider…. So, if I go Pro with Elementor as well as with GP, won’t it be to much, or complicated or heavy ?
    Thanks for your answer!!

  10. Good afternoon friends. First of all, I want to thank you for such a wonderful product like Fakir. I would like that you know that they are in Ukraine and countries in Armenia. Thank you for the hard work you put into this work. In fact, my question is, I hope you can help me. I am an internet marketer, but my hobby design. Your plugin allows you to display all the colors of the soul and imagination on the project site. It’s just great! Recently, my friend saw that I was doing a website and wants to be for its resorts, which I made a site. I agreed and began to read in detail how to make a website. I came across many forums, blogs, where people say that the websites developed by designers WP is very slow, and often corrupt, and off by themselves. You, as a developer, please notify us that there is a risk that the site will no longer work independently, after the upgrade, or perhaps your WP plugin? And the download speed is really so slow?

      1. Thanks a lot, so when I make my first website on your designer, I’ll show you. Thanks again for your help and the wonderful plugin.

  11. Спасибо большое, значит когда я сделать свой первый сайт на вашем конструктор, я буду вам показывать. Еще раз спасибо вам за помощь и чудесный плагин.

  12. Thanks. GeneratePress is too limited for its free version. That’s why I don’t like it. And I hope you stop recommending it with Elementor.

  13. When I create the page in the first step it takes me into a page that looks nothing like this. Id doesn’t have the gray background, the orangish color background, none of the elements, etc… What am I missing?

    Thx

    1. Hi Wade, sorry for the misunderstanding. Let’s start with the basics. You need to go to Base Theme’s Customizer and customize the logo and menu. Once you have the menu and logo like you want, you can go on to the rest of page.

  14. Using menu anchors for easy page navigation is great. Just one quirk. It will scroll long if using a fixed menu. How can we add an offset css class to adjust the padding for the anchor?

  15. thank you, but i don’t understand how to install it (i click on it and the web page open, but i don’t understand what i am supposed to do with it).

    thank you for your help

  16. Hi,
    I was searching “how to make a website on wordpress for free?” I saw many suggestions to make a website on wordpress. Recently, I’ve seen your article and read it carefully. You’ve explained very good. I really liked it. So, keep up the good work.

  17. hi guys,

    I have designed a template by using elemector. I’d like to export that new website as a wp template. Is that possible?

    I understand that one way to achieve that is by saving the website as a library but, I’d like to have a separate installable theme on its own

    Thanks for your comments

  18. hello guys,

    really explained well, but i wanna know that, a website or blog can be create by free version of elementor or i have to go for pro version and can you tell me how to create a blog by elementor.

    thanks…:-)

  19. Hi,
    The website I created with Elementor doesn’t show on the internet. What can I do to fix this?
    There is no conflict with an other page builder.

    1. You need to click on the X at the bottom left, then go to dashboard, then on the page’s dashboard hit the publish button. You can also do it by going to the hamburger icon at the top left, click page settings, and under status change it to published

  20. I hope you still react to this. I have now created a template, but I can not get it in my pages. How do I get that done? It must be on my home page. Thank you in advance

  21. Hi, I am using Ocean WP theme and Elementor (free) for designing my site. Under portfolio page, there are five pages which are not showing on the portfolio page. What to do for showing it on the page. If you can help me,it will be great. I am not a web designer or any other technical knowledge regarding this. What i did is by trial and error. Thanks in advance.

  22. Hi Ben for the slider do I need to purchase elementor pro? Is there other things in this tutorial that need the pro version?

  23. Hi, Whenever I am trying to create a new page using Elementor, it is saying preview not loaded.
    I cannot deactivate the plugins or theme as this is my main website. I tried incognito mode still it didn’t help 🙁

  24. Just a quick question. I saw you use in the tutorial an ‘Icon Box’ for each ‘Service’. Could you please clarify whether the Icon Box or Headers and Text Boxes should be used to setup each service.

Leave a Reply