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

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

Home Forums Support Adding a full width section to a page with a sidebar

Viewing 15 posts - 1 through 15 (of 33 total)
  • Author
    Posts
  • #1975502
    Stephen

    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.

    #1975528
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1975549
    Stephen

    Thanks!

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

    #1975590
    Stephen

    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?

    #1976259
    David
    Staff
    Customer Support

    Hi there,

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

    #1976271
    Stephen

    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.

    #1976317
    David
    Staff
    Customer Support

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

    #1976319
    Stephen

    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.

    #1976334
    David
    Staff
    Customer Support

    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.

    #1976337
    Stephen

    Thanks.

    How do I create a custom field?

    #1976340
    Stephen

    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.

    #1976452
    Ying
    Staff
    Customer Support

    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 🙂

    #1976535
    Stephen

    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.

    #1976823
    Ying
    Staff
    Customer Support

    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.

    #1977097
    Stephen

    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?

Viewing 15 posts - 1 through 15 (of 33 total)
  • You must be logged in to reply to this topic.