Horizontal hexagon numbering

Helpdesk Website Builder
1

dear Team,
I was looking for something similar as this

pic 3

pic3
pic3757×512 95.3 KB

I found this as a preset (pic4)
pic4
But this one goes vertically and I would need something horizontally.

I would love to keep the shape of the bee-cache as I think that is cool btw how do I change the shape if it isn’t given in a preset?

Thanks and regards,
Clara

2 Likes
2

I would approach this by:

  • Add 5 Column Preset to project canvas
  • Set it to 5 columns on all device sizes (can adjust later if necessary)
  • In each column, add an SVG element + a Container (alternate one above the other in each column)
  • Make an SVG honeycomb hexagon (Flaticon is a good resource)
  • Install that SVG in each proper slot, and give a class like .hexGridSVG
  • In each column’s container, add an “Uneven Columns” preset
  • in each column’s container, add a class of .hexGridContent
  • in the Shrink Column, set it to 10% or so (adjust as necessary) and add another SVG or just a text field, for the number icon
  • in the Grow Column, add a text field and add your text
  • For the arrows, you could just add an SVG element to the canvas and position it absolutely.
  • For the lines around the content, you could add ::before or ::after elements to the .hexGridContent or the .hexGridSVG.

Then, using custom CSS, you can target and adjust as necessary for responsivity in different device sizes using @media. You could achieve the overlap of the hexagons by using transform: scale(1.05) or something that achieves the same effect. By adding the classes as you went, you prepared for easier changes down the line.

The biggest challenge would be the responsivity, I would be the layout would have a lot of breaking shifts so you would just have to scrape the screen size down to catch all the adjustments you would need to make.

Or, you could make this in a vector graphic editor or as an image, just add that, and then use a caption, adjacent section, or long-decs attributes to aid in the content for accessibility.

4 Likes