Change the Layout of one element in repeater

Ask the community
, ,
1

Question:
How can I change the layout of one element in the repeater?

Product:
Wix Studio Editor

What are you trying to achieve: / What have you already tried:
I’m working on an overview of our company team using a repeater element. The repeater allows me to quickly manage things like font sizes, layouts, and other style changes across the listed team members. Each team member is an element in the repeater.

Now, I want to add a “Join Our Team!” call-to-action as the last item in the list. However, it seems the repeater doesn’t allow for one element to be styled or structured differently from the rest. If I create this call-to-action as a separate element outside the repeater, the formatting doesn’t quite fit properly when the screen size changes (unless I make everything static, which I want to avoid).

Does anyone have suggestions on how I can:

  1. Customize one element in a repeater without breaking the uniformity?
  2. Ensure this separate call-to-action element adapts responsively to screen size without losing alignment?

I’ve attached a screenshot for reference. Thanks in advance for any help!

Additional information:

image
image1442×1411 77.5 KB

2

You can add a Item with CTA information and then add a conditional code, Here is a quick example.

$w("#repeater1").onItemReady(($item, itemData, index) => {
  if (itemData.name === "Join Our Team") {
    $item("#container").style.backgroundColor = "your-cta-color"; 
    $item("#textElement").text = "Join Our Team!";
  }
});

You can add more condition(use chatGPT to feed Element IDs and conditions in prompt), should be easy.

A quick workaround is to use Flexbox. Add a 1x2 Flexbox, On top cell, put the limiter, in the bottom cell, add your CTA container.

3

Thank you! The coding approach seems very complicated as I’m not a coder, so I would like to go with the flexbox workaround.

Ich have create a flexbox 1x2, pulled the repeater in the top cell and the CTA element in the second cell. Now I can’t find any settings to make it behave like I want it. What am I overseeing?

image
image1423×859 137 KB

4

If you mean alignment you can set the same dimensions as the repeater item and add the same responsive behaviour as well.