- This topic has 10 replies, 3 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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?
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 sectionCustomer 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%.
https://www.screencast.com/t/0GSm5AJDGMC5The 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/0SpoMgWuq9You can give each button a custom CSS class as well.
https://www.screencast.com/t/6rpcqrrZrdVLet 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/ugICwjOyFor 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/IzKmgIvEW0GB 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/TzqJqUBtE6Btw 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-columnto each of the Button (not Buttons):
https://www.screencast.com/t/h2c2TNeb2. 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!
- You must be logged in to reply to this topic.