-
Hello,
I would like to display ads on my site. I’ve look around on other questions asked about it to see what are the best practices recommended.
However, I would like to try to replicate something like this:
https://www.verywellfit.com/how-to-get-enough-protein-on-the-vegan-diet-8425944In their right sidebar, the ads are vertically centered while the users scrolls down the page, and eventually are pushed by another unit.
Is there a suggestion to create a similar view?
Thanks!
Denise -
Hi there,
You can create a block element – right sidebar, it will replace the default right sidebar.
1. Then in the element, you can create a structure like this:
- container -- container A --- ads A -- container B --- ads B -- container C --- ads C2. set
padding-bottomto 100px (adjust the value based on your layout design) for container ABC, set theirpositiontorelative.3. need some CSS to make the ads ABC sticky. Let me know when the structure is done, we can help with the CSS.
-
Hi Ying!
Done.
I’ve changed the single post layout to see it, and have some images in there, because I’m working on a staging site.Thanks!
-
1. Add CSS class to the 3 containers containing the images, eg.
sticky-container.
Adding CSS class(es): https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/2. Add a
min-heightfor the 3 containers, eg. 800px.3. Add this CSS:
.gb-container.sticky-container > * { position: sticky; top: 100px; }Let me know if this works!
-
Works perfectly!
However, I think that in the example the sidebar appears below the article header.
I would like to keep the hero section of the content template aligned to the center (full width) and have the sidebar aside the post content area.
Is that possible to do?
Many thanks!
Denise -
Hi there,
the hero section of the post, you would use GP Block Element – Page Hero to add that to your posts:
https://docs.generatepress.com/article/block-element-page-hero/
This will position it before the page container so the content and the sidebar sit beneath it .
-
Hi David!
This worked perfectly.
I removed the hero section from the content template and created another block for that, and does exactly what you said. 🙂I understand that since this is not “automatic” I would be able to show a fix number of ads, maybe max of 4 – 6, depending on the blog post length.
I was looking into the reference site and some posts have 9, other 7, and then a lot of empty space until scrolling at the bottom of the page.I guess the best option would be to set a minimum amount of ads containers and make the last one stick up to the bottom of the page.
Any other recommendation to “fill” the extra space on that rail?
Thanks!
Denise -
Can you implant the solution so we can see the issue on your site and adjust the CSS?
Let me know 🙂
-
Hey Ying!
Not sure what you mean about implant the solution.
I have the sidebar there, but still not showing ads, because I’m working on a staging site.
Does that works?Also, in the tablet view I’m still seeing the sidebar “space”.
I was able to hide it, but not sure how to prevent the content to appear shifted.Thanks!
Denise -
Can you try adding this CSS?
@media(min-width: 769px) { .site-content { align-items: flex-start; } .is-right-sidebar { position: sticky; top: 0; } } -
Hi Ying!
The tablet view is still shifted (as if the sidebar was there).
Would you please take a look?Thanks!
Denise -
would you like to show the sidebar on desktop view only?
If so, add this:
@media(max-width: 1024px) { div#right-sidebar { display: none; } div#primary { width: 100%; } }
- You must be logged in to reply to this topic.