How To Get Full Width Sections like your homepage does

[Greg]

Hi Tom

How do I get to have those nice full width sections and parallax semi moving background images like I see on your homepage which appears to be using the GP theme?

All content seems to be stuck in the container and not stretch full width no matter setting I choose.

Thanks
Greg

[Tom]

Hi Greg,

The homepage is using our sections add-on: https://generatepress.com/knowledgebase/generate-sections/

Let me know if you have any other questions 🙂

[Tom]

I have the same question, although I’m not sure how to add a section to the homepage as it’s automatically generated. Do I need to set my homepage to be a static page? It’s a blog, so, I’d rather show my blog articles on the homepage but have a large full-width image at the top like the GeneratePress homepage. Tom, can you elaborate on how that’s done on the homepage? Thanks!

[Tom]

The Sections add-on requires the page to be static.

If you’d like a full width section above your posts, you can use our Page Header add-on (like the demo: http://demo.generatepress.com).

Let me know if you need more info 🙂

[Tom]

Thanks for the quick reply!

I’m afraid I’m still a bit confused. On the demo homepage, is that a static page you’re using for the homepage? http://demo.generatepress.com

If so, how do the articles appear below the large full-width header on your homepage, or are they hard-coded into the static page somehow?

Also, in Settings there is a “Blog Page Header” which puts an image at the top of the homepage, but, it’s not full-width. Is that different from the Page Header add-on?

[Tom]

That’s the blog page, using the “Customize > Blog Page Header” settings.

In order to get the full width section like that, you have to add some content into the Content area in “Customize > Blog Page Header”. Then more options will appear 🙂

[Tom]

Hmm, okay, I must be doing something wrong. I’ve added content and an image to Blog Page Header, but I don’t see any additional options when I do. Are they in the Advanced Settings area? All I see there is “Merge With Site Header.” When I save the settings I’ve set and look at the blog, all I see is the header content on a plain white background, the image I chose isn’t displayed at all. I’ve got the GP Premium package with all plugins enabled. Not sure what I’m doing wrong.

[Tom]

Hi Tom,

Okay, something must be screwy with my browser. While in the Customize section, I refreshed the browser page and then all of a sudden I can see the additional Content Settings that weren’t showing before. Not sure if this is a problem with my browser (Safari) or the new version of WordPress.

Anyway, I got the large header on the homepage of the blog I wanted! Thanks very much, this is an excellent and versatile theme.

• This reply was modified 8 years ago by Tom.

[Tom]

The content settings are only viewable when content is entered – that may have been the issue?

Glad it’s all working now 🙂

[Joseph]

Tom, I had the sections at full width and then on a refresh I lost the full width see here: provinciawebdesign.com/client/wow/

I have the sections set to Fluid/contained but I also tried fluid/fluid and the same result. I have no active GPHooks and nothing in the CSS Child that would affect the layout which is set to separate containers. at 1100 width.

I do have the Child Function loaded with a small script I got from a thread here for parallax speed and that’s about it.

With the contained view, it threw off my section to repeat on scroll. I just don’t know how to get it back to full screen and how it happened?

Thanks in advance

[Joseph]

I found the issue, there was a conflict with one of the plugins I removed it and all went back as was.

[Tom]

Glad you found the issue 🙂

[Hector Alejandro Vargas Ochoa]

Hi Tom;

I have a problem, place a background image and place a Custom Class called “transbox”, to have an effect of transparent color or opacity in Red color. And this does not work or that I’m doing wrong.??

If it works but white opacity, but shows no other color.

In effect parrallax scrolling. CSS

.generate-sections-container {
background-attachment: fixed;

}

Custom Class CSS

.transbox {
background-color: #fa0000;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}

[Tom]

Hi there,

I’m not too sure what you mean? Any examples of what you’re trying to do?

[Hector Alejandro Vargas Ochoa]

Hi.
I put an image and I wanna put a layer of red background, efect in transparent or opacity.

For example in header..
https://themify.me/demo/themes/ultra/theme-appearance/transparent/
https://themify.me/demo/themes/ultra/

I put in the field a class section for CSS; but it does not work; only it is shown in white opacity not another color.

[Author]

Posts