[Resolved] Moving the sidebar below a full width div element

[Hugo]

I tried searching the forums for existing topics related to my question, and all I could find was this one: https://generatepress.com/forums/topic/single-blog-post-full-width-featured-image-under-post-title-wsidebar-support/

… which wasn’t clear enough for me to fix this without asking again. Sorry!

My site currently has no sidebar. My articles (blog posts) are formatted as such that most of them contain a full-width element (a div with a specific class = “full-width-section-header”). When used, these elements are always at the top of the page, right below the header/menu.

This is a current schematic painting of how my articles are formatted, without a sidebar: https://i.imgur.com/FulrtwO.png

I want to add a sidebar to my posts, but only after/below the full-width element at the top of my posts.

With the current theme options, I’m only able to create a sidebar that squishes everything of the page content, as such: https://i.imgur.com/WSfhtSB.png

What I want, is for the sidebar to be placed underneath my “full-width-section-header” div, as such: https://i.imgur.com/OpDsAoO.png

I hope this is possible and that you are able to help me! 🙂

To make matters more complicated: I’m using Beaver Builder as a page builder. I don’t know if this has big implications, but then again, I’m not an expert (huge understatement).

[David]

Hi there,

Beaver Builder allows you to save a layout and add it anywhere using a shortcode:

https://kb.wpbeaverbuilder.com/article/192-use-shortcodes-in-your-layouts

Once you got your shortcode eg. [fl_builder_insert_layout id="123"]
Create a new Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/

Add the shortcode
Select the after_header hook
Check Execute Shortcodes
Then set your Display Rules for where you want that content to be displayed.

You can do the same thing with a Header Element as well:

https://docs.generatepress.com/article/header-element-overview/

[Hugo]

Hi David, thanks for your time.

I know that I can add shortcodes to load certain modules, but I don’t think I’m there yet.

Beaver Builder allows you to save a layout and add it anywhere using a shortcode

As far as I know, Beaver Builder doesn’t allow me to save a “layout” and summon it via a shortcode, it only allows me to do this with modules.

Also, my posts contain multiple “rows”, made with beaver builder. As far as I know, adding a shortcode via an after header hook won’t put this element on the side of every row, all the way down to the bottom of the content frame.

Finally, the after header hook places this element right below my header/menu, while it should be placed below my “full-width-section-header” div.

Is there no way to do this by editing the code of the theme in my child theme?

[David]

My method was suggesting you create the Full Width DIV in Beaver Builder, save the Row / Layout / Template ( or whatever they call it 🙂 ) which can then be added as a Short Code using the After Header Hook. Now you have the normal post content area that can incorporate a sidebar.

What am i missing ?

[Hugo]

Ah, I guess I understand it better now.

So you mean that my “full-width-section-header” div is added via the Header Hook? I thought you initially meant adding the sidebar via the hook.

Just for my information, you’re suggesting that I save the “full-width-section-header” div in Beaver Builder, and use the shortcode of that row to insert after the header via a hook?

I can see how this would work, but if I do this, I would have to create a custom shortcode and add it manually for each of my posts (>200). I was hoping there would be an easier way, especially since I’ve already given the full-width rows a dedicated class = “full-width-section-header”.

Or am I still missing something?

Thanks again for your time! I really appreciate it.

Since Gutenberg was released, and with the GP Header Element functionality, I can theoretically do everything that I want without requiring my page builder (beaver builder). But going back and editing more than 200 pages is a huge task which I was hoping to delay for now by implementing a smart trick. But to be honest, I would have not opted for a page builder if Gutenberg and GP Header Element were available to me 2 years ago….

[David]

Well thats the gist of it – but i can see how hooking a separate shortcode for every post would be a bit of a nightmare.

It could of course be done dynamically using a Hook or a Header Element – some HTML, PHP and CSS to pull in and style Title, Post Meta, Featured image and excerpt. But then you would need to remove that top div from each and every post in beaver builder.

Other than that it require us hooking in the sidebar somewhere into the post, and use JS to reposition – not something i would suggest though.

So unfortunately i cant offer a solution unless there is way you can globally edit the post in Beaver Builder.

[Hugo]

Thanks for your time, I really appreciate it. Guess I have to put my head down and fix the root issue here, instead of hoping for an easy fix.

Have a nice weekend 🙂

[Hugo]

Hi David,

Just wanted to say thanks again for your time on this (unnecessary) complicated issue of mine.

I was thinking way too complicated, all for a design that wasn’t good to start with anyway. I’m now using clean content formatting and a hook element to dynamically load beautiful headers above my articles. I like it a lot!

Thanks again. 🙂 Keep up the amazing support.

[David]

Not a problem, sometimes it takes sharing an idea to move forward with the right idea 🙂
Appreciate the feedback 🙂

[Author]

Posts