[Support request] Adding a full width section to a page with a sidebar

[O’Reilly]

Hi,

I am trying to add a section without a sidebar to a page with a sidebar.

So basically the idea is that the website first shows a comparison table above the content. This section should not have a sidebar.

After that the content shows and this section has a sidebar.

I have added an example (not a generatepress website) in the Private information.

[Elvin]

Hi there,

Technically, that isn’t a sidebar in a traditional sense like how WordPress themes do sidebars.

It’s actually a 2 column grid w/ the left side containing a link wrapper that’s set to sticky and the right side where the the contents are placed.

This can be easily done w/ only a bit of custom CSS + GenerateBlocks.

Check this very simplified demo here – https://dev-generate-press.pantheonsite.io/389498-2/

I didn’t include the navigation functionality but the stickiness is achieved.

I basically did a created the layout usnig GB’s Grid Block. (25%/75%)

On the right column container, I just added the contents.

On the left columm container, I’ve added gb-sticky-path-container on its additonal CSS Class(es).

Inside the left column container, I’ve added another GB Container block to serve as sticky links wrapper. I then added gb-sticky-links-wrapper to it.

and then I added this CSS:

.gb-sticky-path-container > .gb-inside-container{
	min-height: 100%;
}

.gb-sticky-links-wrapper { position: sticky; top: 80px; }

Here’s the layout – https://share.getcloudapp.com/NQu7D0Q0

Now for the navigation, that’s simply placing links w/ anchoring to contents.

[O’Reilly]

Thanks!

How would I go around creating a page like this as a template? So that I can use it on multiple pages?

[O’Reilly]

Hi,

I already have a page draft (See private info) on which I have a sidebar with the sticky content navigation.

Would it not be possible to add a full width section above this page where I can add a comparison table and some intro content? Perhaps in/under the current header?

[David]

Hi there,

how many pages are you going to require that have this layout ?

[O’Reilly]

Hi,

Pretty much every page on the website going forward will need a full-width section at the top for a comparison table.

Considering that this will be a global/multilingual website we are talking about 200+ pages.

[David]

Hmmm….
The Comparison table, could this be a template that is dynamically populated with Post Meta ( Custom Fields ) ?

[O’Reilly]

Hi David,

The comparison tables will be inserted via a plugin, so all I would have to do is insert a shortcode and thats it.

[David]

Ok… so in that case.
You could try:

1. Create a Custom Field to store your Shortcode string.
eg. Custom Field name: comparison_shortcode
eg. value = [my_shortcode]

2. Then use a Hook element set to after_header and a little PHP to retrieve the custom field and output the shortcode.

<?php
$comparison = get_post_meta( get_the_id(), 'comparison_shortcode', true );
if ( $comparison ) {
    echo do_shortcode( $comparison );
}
?>

Might need to wrap some HTML around it and throw a little CSS at it.

[O’Reilly]

Thanks.

How do I create a custom field?

[O’Reilly]

Just noticed a problem with this.. The shortcode would be unique for every table and that would be mean every page.

Might be easier to get back to basics and forget about the shortcode.. What I am trying to create is an area which has no sidebar and is placed above the content with the sidebar of a page.

[Ying]

Hi Sterk,

We are aware that your short code would be unique for every page.

That’s why David asked you to store the shortcode in a custom field in each page, here’s more info about WP costom field, you don’t need to install plugins for it, it’s a WP core feature:
https://wordpress.org/support/article/custom-fields/

Here’s a screenshot for your reference, you’ll insert each unique shortcode to this field of each page:
https://www.screencast.com/t/hEPOG22PzG

Then you create a hook element at Appearance > Elements, paste the PHP code there, set page > all pages as location:
https://www.screencast.com/t/b2g36Y9hbZ5u

Let me know if you need further assistance 🙂

[O’Reilly]

Great, just gave it a try and we are getting somewhere!

A few questions with regards to the styling:

– How do I add a H2 element to the hook? A H2 which i can edit per page, maybe via the custom field?
– How do I center the shortcode in the hook? So that it shows centered in the page?
– Currently the header is page wide, this turns out to be too wide. How do i contain it so that it does not take up the whole width?
– Is there a way to change the background of the header element?

By the way.. Thanks for your great support! Never came across such a fast team with any of the premium themes I bought.

[Ying]

Let’s take 1 question at a time.

So for question 1, you can use a block element, add a headlineblock, assign the dynamic custom field value to it. Here’s a tutorial video of how to use block element build dynamic page hero, you can start watching from 3:10.
https://youtu.be/H6wHd83DfDI

Here’s the guide on block element – page hero: https://docs.generatepress.com/article/block-element-page-hero/

Please be noted, in order to use the dynamic features of GP element, you’ll need to install GenerateBlocks plugin.

[O’Reilly]

Hi Ying,

You lost me here.

Any chance that you can explain the steps in a bit more detail? Or even add the element using the login details provided in the private info section?

[Author]

Posts