[Support request] Full width CTA with GenerateBlocks

[Rembert]

I have setup a basic website with GeneratePress (having Sections disabled) and installed GenerateBlocks.

I created some page with some paragraphs and then added a GenerateBlocks container with a different background as a CTA block. This container is set to full width instead of wide width, then I have set the background color. So: Container = Full width, Inner container = Contained.

I’d expect that container to be full width then. In the preview this assumption is confirmed. But when saving the page, the container is not a full width container.

Then I discovered the option “Set Full Width Content”. I’d expect that option to operate only on the current container but to my surprise it operates on the full page. When the option is set, the CTA does look as I’d wish it to look but also the entered paragraphs are shown in full width now. I’ve think I’ve fiddled with all options but cannot find a solution here.

[David]

Hi there,

there are two methods you can apply. Starting with a new page they are:

1. Select the Container Block, from its Toolbar ( above the container ) select Full Width.
This will force the container to expand to the the edges of the screen.

This uses a CSS hack – more likely want to use this method in Posts.

or

2. Make the Page Builder Container Full Width using the meta box:

https://docs.generatepress.com/article/page-builder-container/

Note: Set Full Width Content option you see in the Container Block settings is a shortcut for enabling this.

Now with your Page being full width, you can add multiple Containers, some you can set for full width or contained from the Block settings sidebar.

[Rembert]

Thanks.

I’m a bit uncertain about the first solution: do I need to add some CSS hack?

I managed to fix my issue with the second solution although getting the page-title properly aligned with the content appeared quite a challenge. I ended up with hiding the page-title and add an Element on the before_main_content hook:

<div class="title_container">
	<div class="inside_title_container">
		<header class="page_title">
				<h1 class="entry-title" itemprop="headline"><?php single_post_title(); ?></h1>	
		</header>
	</div>
</div>

with some CSS:

.title_container {
	margin-top:80px;
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
}
.inside_title_container {
	padding-left:40px;
	padding-right:40px;
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
}

As I’m new to GeneratePress & GenerateBlocks, is this the right way to solve this?

[David]

1. No the hack is included. It uses negative margins to stretch the container to the edges of the screen.

Using method 2 – For alignment – couple of options:

1. Disable the Content Title using the Disable Elements meta box and then add the Page Title to the Content using a H1 Headline Block.

OR

2. Keep the Content title and add this CSS:

.full-width-content .entry-header {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px;
    box-sizing: border-box;
}

[Author]

Posts