To create landing pages fast is something we can all learn to do. In this tutorial we will be making a simple, web design Landing Page and making it fast. WordPress will be the foundation. We’ll install an iThemes Builder theme and use the Beaver Builder plugin for the design of our landing page. You can follow along by watching the video or you can read this simplified post if you want the even shorter version.
We are going to do this in four steps. We will install, create, import and tweak. Are you ready?
Let’s create landing pages fast
Using the link below, go grab any builder theme. In the video, I used Brooke, but you can use any theme you like in order to create landing pages fast.
iThemes Builder Themes
Once you buy your theme, install and activate it. Builder will automatically create a child theme. Give it a name and click ‘Create My Child Theme.’ If you don’t know what a child theme is, don’t worry. That’s not important for this tutorial.
Next, you will need to install the Beaver Builder plugin. Follow the link below to purchase and download this wonderful tool.
Once you install and activate Beaver Builder, head over to ‘Settings/Page Builder’ and add your license. You can grab that from your Beaver Builder account page.
The last thing you need to install is the Builder Full Width Content plugin. This is a custom plugin created by Ronald van Weerd, one of the great developers over at iThemes.
After activating this plugin, go to ‘My Theme/Full Width Content’ and check the box under ‘Enable’ (next to Content module). You’ll also want to put zeros in all the padding and margin boxes in the Content module row.
That’s it for installation. So far, so good.
The next step to create landing pages fast is to make the layout for your landing page. Go to ‘My Theme/Layouts and Views.’ You will see a bunch of layouts. Delete them all. Check the box to the left of ‘Layout Description.’ This will select all layouts. Go to ‘Bulk Actions,’ choose ‘Delete’ and click ‘Apply.’ All the layouts, but one, will disappear. That will be the default layout but it will probably be called something else like Full Width, Home, or some other name.
Click the title to edit this layout. You can now give it a new name. I called mine Landing Page. There will be several modules on the page. I have a logo module, navigation, content and footer. Depending on your theme, you may have different modules. What you want to do is delete all of them except the content module. If you don’t see a content module, you will need to add it. Once you only have the content module left, click on ‘Modify Settings’ next to the content module title. Scroll down to ‘Style’ and choose ‘Full Width.’ Your layout is now ready. Make sure you click on ‘Save Layout’ at the bottom of the page.
Two steps left before we start having some Beaver Builder fun.
Go to ‘Pages/Add New.’ This will be the page used for the content, but you don’t want to add anything quite yet. Go ahead and give it a name. I got super creative and called my page Landing Page. You can call it anything you want.
Next, go to ‘Settings/Reading’ and choose ‘A Static Page’ for the front page display. Next to ‘Front Page,’ choose the page you just created.
That’s it. We are done creating. Now it’s time to import content.
Go back to the page you just created. Click on ‘Pages’ and you will see your new page. Click the page title or the edit link. Now click the Page Builder tab. You will probably see a dialog box asking if you would like to take a tour. Click on ‘No Thanks.’ The Layout Template box should open and you should see Landing Pages as the option. If Landing Pages isn’t the option you see then use the drop down box up at the top right. Pick a landing page template and, BOOM, Houston, we have content.
That’s it for import. Let’s tweak.
If you’ve made it this far, hopefully you are tracking with my fast paced, short version tutorial. The only thing left to do is tweak your layout. The first thing we need to do is get rid of the page title, which is pretty simple. Go up to the top of your page and click ‘Tools/Global Settings.’ Under ‘Default Page Heading,’ make sure you select ‘No’ for Show. In the CSS Selector box type .entry-title. That’s the CSS code iThemes Builder uses for page titles. Click save and the title, at the top of the page, should vanish. Way to go.
Next, click on the row settings wrench for the top module on your landing page. Click on the ‘Advanced’ tab. Set everything to zero. You may have to play with the top margin in order to get the spacing, at the top of the page, just right.
Once you are happy with those results click ‘Done/Publish Changes.’ That’s it. Your landing page is finished. Good job.
If you have any questions at all please leave them in the comments below or contact us.