- This topic has 8 replies, 2 voices, and was last updated 10 months, 3 weeks ago by David.
February 26, 2020 at 5:18 am #1177284Hugo
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).February 26, 2020 at 6:00 am #1177340DavidStaffCustomer Support
Beaver Builder allows you to save a layout and add it anywhere using a shortcode:
Once you got your shortcode eg.
Create a new Hook Element:
Add the shortcode
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:February 26, 2020 at 12:36 pm #1177923Hugo
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?February 27, 2020 at 3:34 am #1178414DavidStaffCustomer Support
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 ?February 28, 2020 at 12:46 am #1179380Hugo
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….February 28, 2020 at 8:07 am #1179811DavidStaffCustomer Support
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.February 29, 2020 at 6:56 am #1180643Hugo
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 🙂May 25, 2020 at 2:47 am #1300194Hugo
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.May 25, 2020 at 5:11 am #1300313
- You must be logged in to reply to this topic.