button partially over the above image and aligned to the right

[Carlo]

Hi,

please see the homepage at the attached link. How can I move the “Button to Google” button over the image above and aligned starting from the right border of the image (aligned to the right, essentially), both for Desktop and Mobile?

Thanks in advance.

P.S.
I am starting testing blocks, that are new for me, but feel free to suggest a better way.
I have elementor pro installed but only because I’ll need to customize the woocommerce product pages, if you could confirm that not using elementor on the other pages (even when installed) helps keeping those pages lighter, I’d prefer not to use it.

[Tom]

Hi there,

To place it on top of the image, the image and button would need to be inside one relative container. For example, you could create a Group block and add both elements inside that Group block. If the Group has a custom class, we can use it to position the button absolutely.

You can also try our GenerateBlocks plugin which has a Container block (and a buttons block).

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Carlo]

Hi Tom,

thank you for your reply.

Please look at the second image + button now.
They are both in the same group and the group has a class named “customtom” (with no css so far).

Could you please let me know what css I can give to that class?

EDIT:
in the meanwhile I started “playing” with generateblocks. It’s great!
1) Can I build some pages with it and some other pages with ElementorPro without conflicts?
The reason is that so far I need Elementor to build the woocommerce pages (products, checkout etc) being able to customize them.
2) Do you plan to make generateblocks able to customize woocommerce pages as ElementorPro can do now?

Thank you. Carlo

[David]

Hi there,

try this:

.customtom {
    position: relative;
}
.customtom .button {
    position: absolute;
    bottom: 60px;
    right: 40px;
}

1. Yes you can use both

2. There is lots of stuff going on in regards to editing templates.
a. WordPress are working on theme editing from within the block editor.
b. Woocommerce are looking at introducing block editing for products.
So WP core has already set a direction for template customisation

We are watching this space closely. In the meantime we are introducing new features within GP, GPP and GB that provide more site building options. Starting with GPP 1.11 Block Elements:

https://generatepress.com/gp-premium-1-11-0-block-elements/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carlo]

Thank you David,

last question about using ElementorPro for some (woocommerce related) pages and GenerateBlocks for all the others.
For this latter pages, (given that both the builder plugins are installed) is this solution lighter than building them with elementor?
– I know that generateblocks is way lighter than ElementorPro but I don’t know what happens when loading a page when both are installed
– I hope so, because I’d prefer to keep using generateblocks, I really like it 🙂

[David]

GenerateBlocks requires no static stylesheets or Javascript. All CSS is dynamic – it only writes what you need – so if you add no blocks it creates no CSS.

Out of interest do you have examples of the Woo Shop and Product pages you’re trying to achieve?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carlo]

Thank you David, happy to read that. These are the first steps with generatepress and let me say that so far I am really eager to keep going on testing!

About the product pages, I have just edited the url in my first page. Now it’s pointing to a product page of the production website I am willing to move to generatepress.
Maybe we’ll decide to change the layout in the near future, anyway it’s already a custom layout.

Do you thing it’s already doable with generateblocks? I’d be happy 🙂

[David]

Awesome – glad to hear that.
That is a totally different layout to conventional Woo.

At this time editing Woo with Blocks is experimental.
There is some code and a plugin that allows Block editing of the Woo Description which with a little code could be used to create templates like that. And my current tests proves that GB works with it.

My only concern is its still experimental….. i think once Woo moves forward with Block editing we certainly will be creating all types of template with GB.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carlo]

Thanks David,

hope that will happen soon! 🙂

Really appreciate your interest and feedback. I love this kind of approach.

[David]

Thank you too!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts