How do I create a styled div box element that I can use multiple times, yet keep each copy unconnected to its siblings?
Hi, I’m six pages into my first project, so I’m really still a newbie. For the most part I’m loving Webflow, but there are a few things that aren’t working for me.
My project is an educational site about history so it’s mostly copy with pictures and captions. I styled a div with background color and drop shadow to hold a photo and caption. It’s centered, sized and spaced in between the paragraphs. The size of the div changes with the photo, the length of the caption, etc. That is where the problem starts. Most styled div boxes need to be massaged somewhat, depending on the information inside them.
I tried using a class for these boxes only to find out that changing one also changed the previous boxes as I worked on a new one. Then I tried using a combo class, but that meant a combo class for each box. My current page has 18 photos – 18 boxes. You can imagine how frustrating it gets when they all change when I only want to change one. Next I tried making the box a symbol but it didn’t seem to let me add the new photo and caption. So then I unlinked the symbol. I guess that makes it a class because as I worked on one box, they were all changing again. So I was back where I started. I tried duplicating and copy/pasting the box but it is still connected and changed also. I have come to hate classes or anything that connects boxes. My only alternative seems building the box from scratch each time I need one.
My question is: Is there any way make a styled div box into a template that can be used over and over, but also make it independent from all the others. (By the way, I’m having a similar problem with other elements – change one and they all change!)
Here’s a read-only link to one of my pages: https://preview.webflow.com/preview/history-wright-brothers-inkling?utm_medium=preview_link&utm_source=designer&utm_content=history-wright-brothers-inkling&preview=d62964e000a83f116b571cdf14f08e34&pageId=5eac463ed76edde890e44003&mode=preview
Thanking you in advance for any and all suggestions,