# How to add a little circle in the centre of the divider?

**URL:** <https://forums.realmacsoftware.com/t/how-to-add-a-little-circle-in-the-centre-of-the-divider/57162>\
**Category:** Elements\
**Created:** [July 31, 2026, 2:21pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-little-circle-in-the-centre-of-the-divider/57162 "2026-07-31T14:21:04Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lalla](https://avatars.discourse-cdn.com/v4/letter/l/71c47a/32.png) [@Lalla](https://forums.realmacsoftware.com/u/Lalla)\
**Post date:** [July 31, 2026, 2:21pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-little-circle-in-the-centre-of-the-divider/57162/1 "2026-07-31T14:21:04Z")

</div>

I’m looking for a way to add a little circle in the centre of the divider in Elements.  
See the screenshot below.  
In Classic, I use the “[RuleStack](https://www.madeforstacks.com/addon/rulestack)” from Stacks4Stacks for this.  
I know, it’s a small thing, but I’d really like to have it back (I’m quite attached to it ;-).

Does anyone know if and how I can achieve this?  
Many thanks in advance!

![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/f/3/f3b51fbf2ee8d738156e01133fa8efa70b624292.png)

Kind regards,  
Lalla

---

<div class="post-metadata">

**Author:** ![differentdan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/differentdan/32/33530_2.png) [@differentdan](https://forums.realmacsoftware.com/u/differentdan)\
**Post date:** [July 31, 2026, 2:53pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-little-circle-in-the-centre-of-the-divider/57162/2 "2026-07-31T14:53:09Z")

</div>

A custom component maybe

 ![divider-circle](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/9/a/9a9e988a88cfb6f684700842bd74c608bdf8a62d.jpeg)

```auto
<div class="flex items-center gap-4">
    <div class="h-px flex-1 bg-gray-300"></div>

    <svg
        class="h-8 w-8 text-gray-400"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        viewBox="0 0 24 24"
    >
        <circle cx="12" cy="12" r="5" />
    </svg>

    <div class="h-px flex-1 bg-gray-300"></div>
</div>

```

I’m sure there are alternative ways to do it as well, the above is very basic.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 31, 2026, 3:02pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-little-circle-in-the-centre-of-the-divider/57162/3 "2026-07-31T15:02:02Z")

</div>

You can do this with just the core elements components, a few ways to do this, not at my Mac but others could show, if not when I’m on my laptop will show a few ways to do this, unless you just use the custom component shown

---

<div class="post-metadata">

**Author:** ![differentdan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/differentdan/32/33530_2.png) [@differentdan](https://forums.realmacsoftware.com/u/differentdan)\
**Post date:** [July 31, 2026, 3:12pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-little-circle-in-the-centre-of-the-divider/57162/4 "2026-07-31T15:12:17Z")

</div>

Yeah, a lot of ways to do it, I was just offloading it to AI. 😁

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 31, 2026, 3:13pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-little-circle-in-the-centre-of-the-divider/57162/5 "2026-07-31T15:13:49Z")

</div>

Just recorded a video to show how to do this using the Flex and Divider components! It’s a little more time consuming than asking AI to do it, but that’s the beauty of Elements. There’s many ways to achieve the same results 😊

Will post the video and project shortly…

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 31, 2026, 3:24pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-little-circle-in-the-centre-of-the-divider/57162/6 "2026-07-31T15:24:41Z")

</div>

@Lalla The video is [up on Youtube now](https://www.youtube.com/watch?v=GpKCgikpUvQ), hopefully this gives you some ideas on how flexible Elements is for building layouts and and intricate designs like this!

[![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/2/62abb6ceae6aaad6780c018dd1ddc2465e1fc53b.jpeg "Designing Decroative Dividers with a Flex Component") ](https://www.youtube.com/watch?v=GpKCgikpUvQ)

👉 [Open Project in Elements](elementsapp://downloadDocument/sTwIpSQJEH27)

---

<div class="post-metadata">

**Author:** ![Lalla](https://avatars.discourse-cdn.com/v4/letter/l/71c47a/32.png) [@Lalla](https://forums.realmacsoftware.com/u/Lalla)\
**Post date:** [July 31, 2026, 4:10pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-little-circle-in-the-centre-of-the-divider/57162/7 "2026-07-31T16:10:48Z")

</div>

This is fantastic! I’m really impressed that this is possible with the core components. Exactly what I was looking for. It’s also brilliant to get such quick help from everyone. And thank you very much Dan for the video. Very helpful. Elements is great 😀

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 4, 2026, 10:18am UTC](https://forums.realmacsoftware.com/t/how-to-add-a-little-circle-in-the-centre-of-the-divider/57162/8 "2026-08-04T10:18:44Z")

</div>

ok back at my Mac now been away, I said a few ways to do this, this version not using the divider, using container as flex, just incase anyone interested. The first 2 are % width on the container. The top right is a bg image rater than bg color

In the center flex I should have set align and items to center

[elementsapp://downloadDocument/7LyJtdCj0hFj](elementsapp://downloadDocument/7LyJtdCj0hFj)

---

<div class="post-metadata">

**Author:** ![Lalla](https://avatars.discourse-cdn.com/v4/letter/l/71c47a/32.png) [@Lalla](https://forums.realmacsoftware.com/u/Lalla)\
**Post date:** [August 5, 2026, 12:10pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-little-circle-in-the-centre-of-the-divider/57162/9 "2026-08-05T12:10:34Z")

</div>

Wow, that video shows many other ways to do it. I’m going to take a close look at them one by one. There’s a lot to learn here. Thanks!!!

By the way, I’m getting an error message when I try to download the project. I have version 3.0.6 beta. Or did you happen to delete it already?

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 5, 2026, 12:44pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-little-circle-in-the-centre-of-the-divider/57162/10 "2026-08-05T12:44:43Z")

</div>

I’ll put it back

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [August 5, 2026, 12:45pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-little-circle-in-the-centre-of-the-divider/57162/11 "2026-08-05T12:45:50Z")

</div>

[elementsapp://downloadDocument/H4UQmmU9NaoA](elementsapp://downloadDocument/H4UQmmU9NaoA)

---

<div class="post-metadata">

**Author:** ![Lalla](https://avatars.discourse-cdn.com/v4/letter/l/71c47a/32.png) [@Lalla](https://forums.realmacsoftware.com/u/Lalla)\
**Post date:** [August 5, 2026, 12:59pm UTC](https://forums.realmacsoftware.com/t/how-to-add-a-little-circle-in-the-centre-of-the-divider/57162/12 "2026-08-05T12:59:19Z")

</div>

Got it now! Thanks.