{"id":1712,"date":"2017-01-17T13:40:18","date_gmt":"2017-01-17T13:40:18","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=1712"},"modified":"2025-12-31T11:21:26","modified_gmt":"2025-12-31T09:21:26","slug":"base-theme-with-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/base-theme-with-elementor\/","title":{"rendered":"How to Create a Complete WordPress Website With Elementor"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\tBuild Your Site With Elementor Pro<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Want to learn how to use Elementor?<\/p>\n

There have been many times in which I have gotten disappointed with promising premium themes that proved to be incredibly slow.<\/p>\n

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.<\/p>\n

This is why I was so excited about the release of the recent starter theme called ‘Hello Theme<\/a>‘, created by the professional Sitepoint team with speed and minimalism in mind. Hello Theme also included full compatibility with page builders, making it the perfect candidate to test with Elementor.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

How to Use Elementor?\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
  1. Install Elementor<\/strong>
    In order to     install Elementor<\/a>, make sure you have your WordPress installation ready. 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.<\/li>
  2. Edit a new page with Elementor
    <\/strong>Go to ‘Pages’ > ‘Add new’. Then, click the ‘Edit with Elementor’ button.<\/li>
  3. Insert an Elementor Template
    <\/strong>You should now be inside the Elementor editor. Click ‘Add     template<\/a>‘ 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<\/a> about the Elementor structure.<\/li>
  4. Make the template full-width
    <\/strong>You can make any page in Elementor full width by going to Section > Layout, and switchStretch Section to Yes<\/strong>.     Watch video showing how to do this<\/a><\/li>
  5. Understand the structure of Elementor
    <\/strong>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.<\/li>
  6. Add a widget<\/strong>
    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.<\/li>
  7. Change background image
    <\/strong>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<\/a><\/li>
  8. Change fonts
    <\/strong>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<\/a>. Now, under ‘Family’, you can browse through the various fonts and choose a different font family.<\/li>
  9. Learn more.<\/strong>
    For a more detailed 30 minute video , see this\u00a0    Elementor + WordPress tutorial<\/a> we’ve made not long ago.<\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"basetheme-elementor\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Inside Hello Theme<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    What makes Hello Theme so great for page builders, other than the speed and no fluff of course, is that you get six useful templates built in:<\/p>

    Default Template:<\/strong> This is the basic template, with the sidebar on the right<\/p>

    Full Width Page:<\/strong> Use this template when you don’t want the sidebar to appear, and prefer the content to span to 100% of the width<\/a><\/p>

    Left Sidebar Page:<\/strong> When you need to switch the position of the sidebar<\/p>

    Page Builder<\/a> Blank:<\/strong> 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<\/a><\/p>

    Page Builder Boxed:<\/strong> This is a very handy template, because it removes the title of the page, and all the related unneeded spaces<\/p>

    Page Builder Full Width:<\/strong> This is the same as the Page Builder Boxed theme, but the content spans to the full width of the screen<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"wordpress-dashboard\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Page Builder For Hello Theme<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    The free Elementor page builder is the perfect addition to Hello Theme, and adds a long list of design capabilities that does wonders for the web designer’s workflow. It lets you design a website<\/a> much faster than ever before. Among these features:<\/p>