[Resolved] Images and hover within table

Home Forums Support [Resolved] Images and hover within table

Home Forums Support Images and hover within table

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #1618097


    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?



    Customer Support

    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 2×3 table on the white bakground right on the main section

    Customer Support

    Hi Jean,

    Since you are using Generateblocks, you can achieve this by create a structure like this, and set all container width to 33%.

    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.

    You can give each button a custom CSS class as well.

    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

    Customer Support

    You can add text below icon by add a Headline block below the Buttons block (not button).

    For mobile, the Containers under Grid width are set to 100% by default, you could change them to 50% or 33%.

    GB allows you to upload your custom SVG html, you’ll need to do some google research on how to get the SVG html.

    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

    Customer Support

    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):

    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.

    Customer Support

    No problem πŸ™‚
    Glad to help!

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.