[Support request] homepaage design

Hi there,

Is there a specific section you are referring to?

Here is a quick overview:

– First part:
https://docs.generatepress.com/article/navigation-as-a-header/

– Second part:
https://docs.generatepress.com/article/header-element-overview/
https://docs.generatepress.com/article/page-hero-examples/https://docs.generatepress.com/article/how-to-create-a-page-hero/

– Third part:
https://en-ca.wordpress.org/plugins/wp-show-posts/

– Fourth part:
https://docs.woocommerce.com/document/woocommerce-shortcodes/

Ajay,

this is what Leo was referring to.

When you enable the GP option “Use Navigation as Header” you get the same menu as shown on your example site.

Then, you’ve to work with the “Header Element”, especially with the Page Hero element to style the next part.

For displaying the blog posts on the site you should install the WP Show Posts plugin (https://en-ca.wordpress.org/plugins/wp-show-posts/).

For example: the GeneratePress demo site Dispatch is also using the WP Show Posts plugin…
https://gpsites.co/dispatch/

You can also install a Page Builder (like Elementor, Beaver Builder…) which can help to design the Start Page or other elements of the site but personally, I’m not a friend of Page Builders…

I know, it’s not easy to design some elements of the site and you’ve to spent some time for the design but GeneratePress has a extensive documentation and a support forum where you’ll find a lot of useful and helpful informations. And: the GeneratePress support/author team is more than great and always ready to help!

Hi there,

you can change the body background color by adding this CSS to Customizer > Additional CSS:

body.home {
    background-color: #fff;
}

While you’re there you can change this CSS which adds the border shadow:

.inside-article, .sidebar .widget, .comments-area {
    border: 1px solid rgba(232,234,237,1);
    box-shadow: 0 0 10px rgba(232,234,237,.5);
}

to:

body:not(.home) .inside-article, .sidebar .widget, .comments-area {
    border: 1px solid rgba(232,234,237,1);
    box-shadow: 0 0 10px rgba(232,234,237,.5);
}

Doesn’t look like you’ve updated your CSS as per David’s suggestion here:
https://generatepress.com/forums/topic/homepaage-design/#post-1137760

Make sure to clear WP Super cache after the changes are made as well.

Follow these steps:

1. Disable Autoptimize
2. Disable all other Cache Plugins

There is no need for these plugins to be enabled when you’re developing a new site. They will just cause confusion when things do not up date. You can enable them when your site is ready.

3. Go to Customizer > Additional CSS and DELETE THIS CODE:

.inside-article, .sidebar .widget, .comments-area {
    border: 1px solid rgba(232,234,237,1);
    box-shadow: 0 0 10px rgba(232,234,237,.5);
}

4. in Customizer > Additional CSS – ADD THIS CODE:

body:not(.home) .inside-article, .sidebar .widget, .comments-area {
    border: 1px solid rgba(232,234,237,1);
    box-shadow: 0 0 10px rgba(232,234,237,.5);
}

Glad we could be of help.