Account & Settings

KTurner3
Member

Using custom bullton points?

SOLVE

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!

0 Upvotes
1 Accepted solution
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Using custom bullton points?

SOLVE

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

Bildschirmfoto 2024-02-15 um 23.55.13.png
Bildschirmfoto 2024-02-15 um 23.55.48.png

Bildschirmfoto 2024-02-15 um 23.56.29.png

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

Anton Bujanowski Signature

View solution in original post

2 Replies 2
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Using custom bullton points?

SOLVE

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

Bildschirmfoto 2024-02-15 um 23.55.13.png
Bildschirmfoto 2024-02-15 um 23.55.48.png

Bildschirmfoto 2024-02-15 um 23.56.29.png

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

Anton Bujanowski Signature
PamCotton
Community Manager
Community Manager

Using custom bullton points?

SOLVE

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

Você sabia que a Comunidade está disponível em outros idiomas?
Participe de conversas regionais, alterando suas configurações de idioma !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !