{"id":18023,"date":"2018-09-04T13:39:28","date_gmt":"2018-09-04T10:39:28","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=18023"},"modified":"2023-05-08T15:08:24","modified_gmt":"2023-05-08T12:08:24","slug":"create-a-landing-page-with-divi-builder-hestia","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/create-a-landing-page-with-divi-builder-hestia\/","title":{"rendered":"How to Create a Landing Page With Divi Builder and Hestia"},"content":{"rendered":"

There are many page builders in the market today that can be used to design landing pages without the use of code. In this article, we will be showing you one of such methods – how to use Divi Builder<\/a> & the Hestia<\/a> theme to create an effective landing page.<\/p>\n

In short, Divi Builder is the plugin edition<\/a> of the main Divi framework and theme. As in, if you don’t want the whole Divi theme, download the Divi Builder and keep your current theme.<\/p>\n

What’s great about Divi Builder is that it can be used with any theme, giving you a new layer of visual page building to make editing and designing even easier. You can find out more about Divi Builder here<\/a>.<\/p>\n

\n
For this tutorial, we’re going to use the FREE Hestia WordPress theme which you can download here<\/a>. Hestia is our no.1 free material design WordPress theme that is packed with features allowing you to build the site you want. This theme offers many customizable options and is SEO-friendly and built for speed.<\/div><\/div>\n
\n\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tHow to create a landing page with Divi Builder and Hestia #WordPress theme<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div><\/div>\n<\/div>\n

\"Hestia\"<\/p>\n

Okay, here’s how to build a landing page with Divi Builder and Hestia.<\/p>\n

1. Install Divi Builder<\/h2>\n

Divi Builder installs just like any other WordPress plugin. To get started, complete your purchase of the Elegant Themes membership, and download the Divi Builder ZIP file.<\/p>\n

Then, go to Plugins \u2192 Add New \u2192 Upload<\/strong> and locate the ZIP file from your downloads folder or wherever you saved the ZIP file to. Once installed, you will need to activate it. <\/p>\n

You will then be prompted to validate your subscription, so enter your username and API key for Elegant Themes membership.<\/p>\n

\"license\"<\/p>\n

2. Design your landing page with Divi Builder<\/h2>\n

Designing in Divi can be done either by constructing a new layout from scratch or importing a pre-made layout.<\/p>\n

Building your landing page from scratch is surely an interesting perspective, and one that gives you more freedom, but it’s also more difficult. So until you get familiar with Divi Builder and learn how to use the interface, it’s best to stick with pre-built designs. <\/p>\n

But before we get into that, be sure to select the page template, Page Builder Full Width<\/strong> (see below). This will allow the Hestia, header, menu, and footer settings to appear but have full control over the page design.<\/p>\n

\"page<\/p>\n

(If you wanted to build a landing page<\/a> with Divi Builder but with no navigation or other elements you would choose Page Builder Blank<\/strong> template in that instance.)<\/p>\n

Okay, to start adding a pre-made design, create a new page or select an existing one and click on Use Divi Builder<\/strong>. <\/p>\n

\"launch<\/p>\n

You will then see a blank block module layout appear.<\/p>\n

\"layout<\/p>\n

Let’s choose the Load Layout<\/strong> option.<\/p>\n

When this option is selected, you will see the following layout grid appear:<\/p>\n

\"design<\/p>\n

Let’s choose the first one titled Restaurant<\/strong>, for example, but either one of them will work.<\/p>\n

When you choose a layout pack, you will be shown the different designs available.<\/p>\n

As we are building a landing page with Divi Builder, we will choose the one labeled “landing page<\/a>“. <\/p>\n

Click on the green Use This Layout<\/strong> button.<\/p>\n

\"landing<\/p>\n

You will then see the layout appear in the Divi Builder interface. <\/p>\n

To view the page, right-click preview changes<\/strong>.<\/p>\n

You will see the landing page has populated with all the images, animations and text from the layout pack we chose. <\/p>\n

\"landing<\/p>\n

3. Change text content<\/h2>\n

To replace any text content, simply click into the module or edit using the visual builder. To access the visual builder, select the purple enable visual builder<\/strong> button at the top of the page.<\/p>\n

<\/p>\n

Just be sure to save any edits you make here by selecting the purple center menu and clicking on Save<\/strong>. To exit the visual builder, select Exit Visual Builder<\/strong> in the top menu.<\/p>\n

In this demo, I also changed the call to action<\/a> color from gold to pink. To do this, go into each module and change the color there. From the visual builder, you can change it via one button, then by right clicking, you can copy the style and paste to all the other buttons. This is a real time-saver.<\/p>\n

<\/p>\n

Another great thing about the builder, is you can adjust content for different devices.<\/p>\n

When in the visual builder, select the device image icon in the bottom left corner to see how the content renders on each device. Select phone, then choose settings for each module. You can then adjust the text size for desktop, tablet and smartphone to your liking.<\/p>\n

\"mobile\"<\/p>\n

4. Resize your images<\/h2>\n

Always ensure you optimize your images prior to using them on your landing page. There are a number of tools you can use to do this. We’ve even had a separate post comparing the most efficient ones<\/a>. <\/p>\n

Be sure you only upload the image size that is needed, too. For example, a full width, full height hero image would usually need to be 1920px wide by 1280px, but doesn’t need to be, say, 4000px.<\/p>\n

Conclusion<\/h2>\n

Essentially, that’s it when it comes to using Divi pre-made layouts when building your landing page with Divi Builder and Hestia. <\/p>\n

At the end of the day, this all comes down to adjusting what’s already there in the template, and making it your own. <\/p>\n

As you build some confidence with Divi Builder, you can begin building new layouts from scratch to get a complete customized look.<\/p>\n

If you would like to use Divi Builder, you will need a membership plan from Elegant Themes. Plans start at $89.00 per year or $249 for a lifetime license<\/a>.<\/p>\n\n\t\t

<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tHow to create a landing page with Divi Builder and Hestia #WordPress theme<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n