How to Create a Responsive Homepage With GeneratePress WordPress Theme & Elementor

GeneratePress was one of the first themes to embrace Elementor and recommend it to its users, just days after we launched, so I personally love it and appreciate it. After we released the review of Bluchic themes last week, we got a lot of requests to make the next review on GeneratePress.

That's not why we have created this tutorial, though. GeneratePress is the first choice for a free and well crafted WordPress theme. GeneratePress and Elementor are the perfect pair if you're looking for a fast & intuitive combination of page builder + WordPress theme.

In this tutorial, we look into how to create a premium looking homepage, and make it perfect responsive using Elementor's Mobile Editing toolset. We will also customize another page design, so it fits GeneratePress's color palette.

Why Use Elementor on GeneratePress

Elementor works seamlessly with both the Lite and Pro versions of GeneratePress. The Pro version is worth checking out, as it adds a lot of useful addons and features to the basic theme, like controlling the theme header, colors, typography and more.

GeneratePress is one of the most SEO optimized, lightweight and lean themes available on WordPress. It's also very popular, and has been downloaded over 700K times. Combined with Elementor, it remains lightweight, but is also supercharged and grants a lot more control over the layout, style, colors and other elements within the theme.

Here are just some of the advantages of using Elementor on GeneratePress.

Design Your Pages, Live

With Elementor you can take GeneratePress to another level of design, and are able to create sophisticated and beautifully designed pages and posts, all designed live on the frontend of the site.

Full Control Over Layout, Content & Style

GeneratePress comes with the basic WordPress editor. With Elementor, you get to customize the page grid layout, spacing & padding, columns, fonts, colors and all other design elements.

Embed Widgets Within GeneratePress

Elementor includes a host of useful widgets, including gallery, Font Awesome icons, Social Icons, Slider and dozens of different widgets to make you GeneratePress page more engaging and dynamic.

elementor-generatepress

Initial Settings for Elementor & GeneratePress

If you open up the GeneratePress preview on WordPress.org, you might get the wrong impression that this is just another blog theme. In fact, this theme can be used to create any website, from business sites to portfolios. 

We are going to start off by creating a homepage demo, that includes a header section with background video and a main headline, a services section, pricing table, call to action button section, and logo slideshow. We are creating all this without custom CSS, without coding, without even installing a child theme.

Remove Page Title

Because we don't want the homepage to display the page title, we use GeneratePress's 'Disable Elements' option to remove the page title.

Page Builder Integration

As I wrote earlier, there is no need to do any customizations with GeneratePress. The theme does have a handy checkbox called 'Page Builder Integration', that allows for a full width page.

Sidebar Layout

A lot of the times, we will be working on full width pages, so it's useful to set the Sidebar Layout setting to 'Content (No Sidebars)'.

generatepress-homepage

Creating the Responsive Homepage

As we show in the video, it's very easy to create a beautiful homepage from scratch on GeneratePress. 

In the second part of the video we show how easy it is to make the homepage responsive to tablet and mobile devices, using Elementor's Mobile Editing toolset. 

Make it a habit, after each page you design with Elementor, to go through the page in mobile and tablet mode, and make sure every widget, column and section still looks great.

Customizing A Template To GeneratePress Colors

In the next part, we embed one of our page templates and quickly customize the colors to fit GeneratePress black & white color scheme. You can get other colors on GeneratePress if you use the its colors addon.

It's important to note that each one of the dozen free templates offered in Elementor can be customized to fit any color scheme just as easily as the template we chose for the video.

Final Note

We've seen that GeneratePress and Elementor are a great pair.

  • They are both super fast and lightweight, and work great in terms of SEO and pagespeed.
  • They offer great capabilities for Mobile Responsiveness.
  • They are very intuitive and easy to use.

We have just touched the surface of capabilities for this plugin and theme. There are endless possibilities of designing your WordPress with Elementor. Follow us on Twitter or Facebook to keep updated with the latest updates and tutorials that keep pouring in. 

We'd love to hear from you GeneratePress users in the comments, so please tell us how was your experience with Elementor.

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 when it was only used to blog.

12 Responses

  1. Hi Ben

    Great article with pics.

    “super fast and lightweight” I read that can you tell me if its compatible with Asyc JS WordPress plugin ?

    Many themes and page builder have conflicts with that plugin.

  2. Wow thank you for this video! Now if I would add WCVendor + WooCommerce or the Easy Digital Downloads Marketbundle to the template in order to create a multi-vendor marketplace, would it still work with Elementor? I hope so! Txs!

  3. hello, Thank you very much for vidéo,
    Can we customize the header and footer with Elementor, Or should you use the GeneratePress options ?
    Sorry for my bad english. Best regard

  4. You click on things so rapidly without telling what you’re doing that I have to go back over each action several times before I can figure out what you’ve done. Very frustrating.

  5. I’ve make my web site whit GeneratePress and Elementor Pro. After addiing cache whit WpRocket i reack an incredible score.

    I’m Very happy firt because elmentor adn generatepress have a very clean code, Nothing to do with BE and Visual commposer, or DIvi …

    All the systems I’ve tried but with which I found it very bad for performance.

    If you whant to see it in action or make some thest wht gtmetrix
    http://www.sarao.it

    Ps: sorry for my terrible english

Leave a Reply