Approach to Divs and creating tiles

Hello - I’ve been using Pro for about two years now. I’ve not explored creating small components like this. I’d like to have a simple Logo in a grid cell that also includes 3 tiled divs (or other) that have tool-tip text that has a sentence of information.

My question is, how would others approach this? My test starts with an image in grid cell and 3 divs that are styled almost like buttons. Seems like it’s going to take a bit of CSS to control these the way I want. Right now I had to place them in a text container, but I’m not sure if this is the smartest way to go? Maybe it’s Flexbox to control the container and get those settings to space things out and bein on one row. Thanks for any insights!

Hi Richard,

Thank you for reaching out to us. You can create a similar layout using Rows and Columns. First add a Section and choose 1 column layout, then add 2 Row elements inside the column. First Row is for the Image element so choose 1 column layout, the second Row is to have three buttons so you choose three column layout.

Use the Classic Button elements in each column because it provides the tooltip/popover that appears on hover as you need. To center all elements, Inspect the Columns, enable Flexbox and set Align Horizontal to Center (see screenshot)

image

When you do that you’ll have a similar layout as shown below:

Here’s the section layout screenshot, this may help you in getting started:

image

Hope this helps!

Hi Nabeel -

Thanks. This could work. I’ll give it a shot.

However, what I’m more curious about is how to simply add my own Divs and control it with my own CSS. At least for the basic structure without the top tip. What is the simplest way to add a block of HTLl without any kind of wrapper? I tried a Div, but then I can’t add anything to it and I can’t edit the HTML for it.

Are there other content containers that are better?

I’ll test your idea too!

Thanks
Rich

Hello again @nabeel

Thanks again for the lead. Say, I decided to stay with your approach. The only issue I’m having now is that the Tooltip text is being constrained to the Button Columns. I think your examples are using the global button sizes that are smaller and also your text isn’t as long. Can you think of a way to let the Tooltips overflow into other columns? Thanks!

https://wavelynxtech.com/sandbox/

Also, I just noticed for smaller viewports the columns are breaking pretty bad. I’m not sure of the setting in the Grid or even flexbox to tell the Grid items to simply!

Screen Shot 2021-03-01 at 3.17.40 PM|410x500 move the entire cell to the next row. I tried to set a minimum width for each cell, but that’s not quite right…

Hello Richard,

In order to help you with your concern, please share your details in a secure note. Please provide the following details

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.