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/

i just wanna design the homepage like this site https://opticsmag.com/

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!

Thanks Daniel :)

I want hole homepage containers area white but only on the homepage, not other post pages?

I want separating space zero only for the homepage?

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);
}

I'm unable to remove the container shadow in the homepage.how can I remove it?

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.

I have added but nothing happened?

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);
}

finally, this problem is sorted out. that is why I love generatpress as much more than others. you are awesome;)

Glad we could be of help.