Button on the side of page - positions?

Hi there,

Not sure about the available positions gp offers
Which position to insert the button-code to show it best on the left or right side of my gp theme?

Sorry not sure if I understand.

GP doesn't offer any specific options for that plugin.

Where did you want the button to show? I believe a hook element would be what you are looking for:
https://docs.generatepress.com/article/hooks-element-overview/
https://docs.generatepress.com/article/hooks-visual-guide/

i want to show it on the right side of the page - somewhere around the middle.
thought this was somehow a widget position.

Can you show us a screenshot of where you're wanting to place it maybe?

Let me know :)

Like on this page - maybe a little lower Just on the side.

Ah, so you would do this:

1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Add your hook content:

<div class="floating-button">
    Your shortcode here
</div>

3. Check the Execute Shortcodes checkbox.

4. Set your Display Rules

Then, you'd add this CSS:

.floating-button {
    position: fixed;
    top: 45%;
    right: 0;
}

This didnt work.

Is wp_head the right hook?
I added the css to my child-theme style css.

I added it
a) for entire site and
b) for the vision page - but it doesn't show.

What i tried also: it can be added as widget (it is available as widget (off-canvas-trigger)- which i added in the footer bar for testing) to test if it works - which it does.

Also i tried adding the shortcode-code (via gutenberg shortcode block) to a page - which also works) - so the shortcode should be fine.

You can see that on the vision page (button is grey on the left bottom).

Use the after_header hook for adding the HTML. WP_head should be reserved for meta,links and scripts...

that actually worked now the button can be seen on the right side.

A few follow ups though:

1.is there a possibility to rotate it? (Text Bottom to top).

2. position says fixed - if i read right what that means - it should stay on that position even when scrolling the page. This isnt the case.

3. Also about further customization of the button (color, corners etc.)- this codes will work when i add to style-css code from tom right? (dumb question maybe - but im no programmer ;) ) https://www.w3schools.com/css/css3_buttons.asp .

4. if i want to add a 2nd button - i just have to do the same with different position and top in the css right?

5. Also - i can't just add a button created with gb for that right?

6. Been asking myself 5 and - also about gutenberg in widget areas (as i want to fill the sidebars opened by the button with content next).

I wonder if a plugin like this might help more?: https://wordpress.org/plugins/sticky-side-buttons/

It seems to do everything you're looking for - it might be a better option?

1. This should do it:

.floating-button {
    transform: rotate(-90deg);
    transform-origin: 100% 100%;
}

2. Strange, it's acting like it's position: absolute instead of being fixed.. I wonder if there's something conflicting. What if you use generate_after_footer for the hook?

3. Correct - basic CSS will work.

4. Exactly, just add another button inside the floating-button element.

5. It's not possible to hook Gutenberg elements at the moment, but we're working on it.

The slidebar plugin provided the button shortcode - thats why i didn't think about using a plugin.
Edit - just tried the plugin you linked. Sadly it can only link to url (and open in same or new tab) - shortcode does not work.

1. Thx - that worked nicely.

2. Yes - for some reason it was not floating.
I tried the different hook as described on the plugin page - but it works (floating aside) with the recommended wp_body_open and wp_footer.
generate_after_footer works also - but doesnt change behaviour.

What did work: the plugin has some options for "Compatibility for fixed elements". Before i had it set on:
-> No (Use CSS3 transform with hardware acceleration), This is the default Slidebars behaviour.

Changing it to:
"Legacy CSS solution" (Use basic CSS positioning instead of CSS3 transform with hardware acceleration) This is your best option if your site uses sticky menus and/or other fixed elements within the site container.

did make the button float.
But in return it was stuck when opening the slidebar (meaning the bar floated over the button.) - instead of the button staying in front.

Even more interesting: changing fixed to position: absolute; -> it floats together with the slidebar again. Deja vu :D. Guess i will try around a little and stay with non-floating if i didnt get it to work.

3+4 thx - already playing around - but for some reason it doesn't take over the changes (like font-size or color)

5. sounds like a plan - btw- do you know this plugin - pages in widgets??

3+4: Make sure your CSS is specific enough. If you right-click + Inspect the element it will open developer tools and you'll be able to see the CSS added.

5. I haven't, but it looks interesting :)