Site logo

Archived topic

Images and hover within table

10 replies · Started by Jean on January 14, 2021

Viewing posts 1–11 of 11

Hi,

i'm trying to create something like this https://pasteboard.co/JJA2q3c.png
What i've done is I have a container and within the container i created a table, but seems like i can't make the bordes transparent? another issue is I can't have anything except text inside a column? i want to put a class in a table column where i can have an icon for instance class="fa-plane" to show the icon and then have an hover on the column.
Is something like above link doable in GP?

anyone?

Hi there,

can you share a link to a page where i can see what you have so far?

Hi David,
Please see this link https://bit.ly/2Kdqy1R its the 2x3 table on the white bakground right on the main section

Hi Jean,

Since you are using Generateblocks, you can achieve this by create a structure like this, and set all container width to 33%.
https://www.screencast.com/t/0GSm5AJDGMC5

The Buttons block allows you to add custom SVG html to use your own SVG icon, use the Remove text switch to remove button text. You can achieve the hover effect by change the button colors.
https://www.screencast.com/t/0SpoMgWuq9

You can give each button a custom CSS class as well.
https://www.screencast.com/t/6rpcqrrZrdV

Let me know how it works :)

wow great thanks! love it. Just another question, i set the icon size to 3,5 and then i set some margin do add some spacing between the buttons and i got t to look like this: https://pasteboard.co/JJFAMTY.png
wanted to add text below the icon but still have it within the button in this case the text will be within the purple. i just saw the options to have the texts to the right and left?

and my last question how do i change the icons now i picked icons that's within the general list of icons that GP offers.

*Edit on mobile and tablet the buttons doesn't align as well as it does in desktop it looks really weird specially on mobile?

Really appreciate your help

You can add text below icon by add a Headline block below the Buttons block (not button).
https://www.screencast.com/t/ugICwjOy

For mobile, the Containers under Grid width are set to 100% by default, you could change them to 50% or 33%.
https://www.screencast.com/t/IzKmgIvEW0

GB allows you to upload your custom SVG html, you'll need to do some google research on how to get the SVG html.
https://www.screencast.com/t/TzqJqUBtE6

Btw every container/buttons/button/headline block can be set different margin/padding on desktop/tablet/mobile.

Let me know if you need further assistance :)

Thanks for bearing with me :) i think i'm almost there, when adding a headline i can't get it within the pink square but under the icon? https://pasteboard.co/JJLe84o.png

Hi Jean,

I misunderstood your request, if you want the text inside the button under the icon, it'll need some CSS.

1. Add custom css class button-flex-column to each of the Button (not Buttons):
https://www.screencast.com/t/h2c2TNeb

2. Add this CSS to Customizer > Additional CSS:

.button-flex-column {
	flex-direction: column;
}
/*remove the default padding of the icon to make it center*/
.button-flex-column .gb-icon {
	padding: 0; 
}

Let me know how it works.

Hi Ying,
Great thanks! Really appreciate your help.

No problem :)
Glad to help!

This archived topic is closed to new replies.