Using custom bullton points?

[KTurner3]

I’m trying to create a listicle within a blog post. I see the options for the bullets in the text box, but is there a way to make your own custom bullet points?

I’m sure I will have to do this with code. I tried to use little inserted images of symbols, but it looked bad on mobile. Please direct me to a tutorial if it has to be done in HTML.

Thank you!

[PamCotton]

Hey @KTurner3, thank you for posting in our Community!

I would recommend working with a developer or provider of this theme/template that is being used here. Another option is to use a different theme if it’s not live yet.

I want to invite our top experts, @Anton, @DanielSanchez any recommendations for @KTurner3?

Thank you,

Pam

[Anton]

Hi @KTurner3,

creating this type of listing is def. possible but you’re assuming right - you’ll need some code. I’ll guide you through that.

1. Go to your design-tools(Marketing / Files & Templates / Design-Tools) - if you should not see this please contact your portal admin or a developer

2. Right-click on your module folder and select “Create new file”. Select Module in the dropdown. In the next step add a name and select where you’d like to use this module in. Don’t select E-Mail (if available). Also set the module to “locale module”. Unless you want to display the same content every time you’ll use the module. If this should be the case select “global module”

3. add an image and a text field in the right sidebar. While adding the image field set the “Available size options” to “Don’t show controls”. We’ll take care of that with code.

4. group those two elements by selecting “Group” in the Actions dropdown

5. Once you have created a group of those two elements provide it a propper name like “image bullets” or something, scroll down to the very bottom of the right sidebar and enable “repeater options”. If you want you can optionally set a min and max value. Default is optional as well but you can set it to a certain number. By doing so you’ll have this amout of bullets predefined everytime you’ll use the module. If you’ll leave it blank there won’t be any predefined bullets, if you set it to let’s say 5, you’ll get 5 bullets with the same content everytime by default (as long as you don’t modify it via local development). My personal recommendation is to either leave it blank or set it to 1 or 2.

6. The fields should look like this

Congratulations you’ve created a repeater and the functionality for the icon listing!

If you want to add some images to the side, add a new image field outside the group and enable the repeater function at the very bottom of the image function.

Now for the fun part - the code

<div class="customIconBullets">
	{% for single_bullet in module.image_bullets %} {# replace image_bullets with the name of the group if yours should be different #}
	<div class="singleBullet">
		{% if single_bullet.image_field.src %} {# Check if an image is uploaded; if no image will be uploaded/selected it won't display a "broken image icon" #}
		 <img src="{{ single_bullet.image_field.src }}" alt="{{ single_bullet.image_field.alt }}" class="img">
		{% endif %}
		<span class="description">
			{{ single_bullet.text_field }}
		</span>
	</div>
	{% endfor %}
</div>

This is the basic layout - you can extend it to your needs.

Now the styling: If you want a static styling you can paste following code into the module.css area. If you want to add customizable styling to the module put it like this into the module.html area:

{% require_css %}
 <style>
 {% scope_css %}
 ... your styling ...
 {% end_scope_css %}
 </style>
{% require_css %}

I’ll proceed with the static and therefore module.css option.

Copy/paste following code into the module.css area:

.customIconBullets{
	display:flex;
	flex-direction:column;
	gap: 24px;
}

.singleBullet{
	display:flex;
	flex-direction:column;
	align-items: center;
	gap: 32px;
}

.singleBullet img.img{
	width:48px;
	height:48px;
}

@media screen and (min-width:1024px){
	.singleBullet{
		flex-direction: row;
	}

	.singleBullet img.img{
		width:64px;
		height:64px;
	}
}

Congratulations! You’ve developed your (first) custom module!

Now you’ll need to test it (you can do that in the preview). Once you’re done click “publish” and use it in your blog posts or pages if you’ve selected them

best,

Anton

[SophTeece]

Hi Anton, does this work when creating emails as well as blogs?

[MPiontek]

@Anton, thank you so much for taking the time to post a helpful tutorial that was easy to follow. It worked like a champ! The only part that tripped me up a little is adding “customizable styling to the module, put it like this into the module.html area:” I couldn’t get that to work, or perhaps there’s a knowledge gap there, but the static .css saved the day. Appreciate your knowledge and help.