I tried using nested stacks, but it was a nightmare. I thought maybe a whole section with padding to get the overall width I need, then slice and dice with cells, but not sure how to do the borders and open ends. Is this even possible? Many thanks in advance for any help: I’m referring to the complex example at the bottom, with the vertical type and irregular layout. The others are pretty easy.
:
[Which editor or feature is your question most relevant to? e.g. Wix Editor, Wix Studio Editor, Editor X.]
What are you trying to achieve:
[Explain the details of what you are trying to achieve. The more details you provide, the easier it is to understand what you need.]
What have you already tried:
[Share resources, forum topics, articles, or tutorials you’ve already used to try and answer your question.]
Additional information:
[Include any other pertinent details or information that might be helpful for people to know when trying to answer your question.]
This will not be easy, unfortunately! The way I would do this is to use containers with advanced CSS activated. It’s easier to think of this as the content inside boxes inside boxes.
So to get the 4 individual elements shown in the picture you would need them to be in their own containers, which is inside the main container - probably 3 columns by 2 rows. Then for the first element it would simply be 4 rows by 2 columns. Then the same technique for the other 3 elements.
This can be responsive also, by it would require prior design planning, I use an app called Figma for this…
Thanks Nathan, in the end it was quite easy.
Section with padding.
Advanced CSS.
Split cells to taste, horizontally and vertically.
Add lines to cells where needed and dock left, right, top, whatever.
Open ends = no line.
Set line length to 100%
Add any text into any cell and set to scale (with a few tweaks)
I was expecting it not be responsive but hey. First time.
After that it was just a matter of tuning the cell architecture to keep everything readable.
It wasn’t quick, but it was straightforward. Now changing the padding changes the whole element’s aspect ratio. It was never intended as a functional element so much as a brutalist design element, so, success!
Hey! It sounds like you use Figma to do your prior design planning, so just in case you didn’t see, Figma to Wix Studio is now available! Check out the announcement here!
