Archived topic
Floating Trust Badge on Bottom, Animation on Scroll
9 replies · Started by Robert on May 3, 2020
Hi!
I want to add a "sticky, floating" trust badge like Trusted Shops at the bottom of every WooCommerce page. The trust badge graphic is actually an HTML code that updates the number of review stars. It is also linked to the trust portal, e.g. trustedshops.com.
The bagde should stay at the same viewpoint at all times, bottom right. It should only be visible on desktop.
Unfortunately, adding a sticky section to the global footer with Elementor theme builder interferes with sticky cart bottom panel.
Appreciate your ideas!
Robert
Hi there,
you can try adding it to the site using a GP Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/
The after_footer hook would be a good place to add it.
We can then provide some CSS to position it.
Hi David!
Thanks! The badge should have a fixed ('sticky') position: horizontally aligned right & vertically centered. Delayed follow on scroll would be bonus. How can that be achieved (with CSS)?
Cheers,
Robert
Can you add the Element to the site so i can see what CSS is required.
You will be able to view the element here: <li>https://casimum.de/shop/</li>
Hi there,
Something like this?:
#shopauskunft-widget_wrapper {
position: fixed;
bottom: 20px;
right: 20px;
}Hi Tom,
Thanks! I ended up using (relative) vertical centering:
#shopauskunft-widget_wrapper {
position: fixed;
top: 80%;
right: 1%;
z-index: 1;
transform: translate(0%, -50%);
}
Do you know the animation CSS to make it slide in from off right on page load, 2 sec. delay?
Cheers,
Robert
You can apply the CSS option provided on this stackoverflow:
Thank you, David!
Glad we could be of help
