-
Hey,
I want to create a similar banner to the one in the private area. It should be visible both on desktop and phone and work the same. The design I can make myself but the functionality should be the same. -
Hi there,
what is the Functionality that you want to match ?
-
Hey,
The main function should be that you can close and open it.
-
Not sure what you mean by close/open it, I didn’t find it.
Can you explain some more?
-
Hey,
There is an arrow to close the CTA banner, if you press that one it hides a bit and you can open it again by pressing the arrow.
-
I see, that’s can not be done by CSS, it requires custom JS.
-
Hey,
I understand what about if you skip the functionality and only have a banner down there?
-
That’s easy.
1. You can create the banner in a block element – hook, use
before_footer
hook.2. Give the root container a class, eg.
sticky-bottom-banner
.
Adding CSS class(es): https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/3. Add this CSS:
.sticky-bottom-banner { position: fixed; bottom: 0; width: 100%; }
-
Hey,
Is it possible to make it smaller on desktop and then make it look better for mobile view.
-
What do you mean by smaller? Width-wise or height-wise?
It’s built with blocks, you should be able to adjust it in the block level.
And what do you mean by “look better on mobile view”? Do you have a mockup?
Let me know 🙂
-
Hey, I figured it out however I can’t change background colors of my blocks when editing elements.
-
The background color is set to white for the parent container which has the
sticky-bottom-banner
class.You can select that container and change the background color.
- You must be logged in to reply to this topic.