Image markers are a great way to showcase a product’s special features. In this post, we’ll show you how to create image markers using a text module and a vertical divider. Thanks to the transform settings inside the columns, an image marker can be placed anywhere you need it. To show you how versatile this technique is, we will show you two different design examples. You’ll be able to download the JSON file for free as well!

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Example #1

Desktop

Image markers preview with car

Mobile

image marker mobile 1.

Example #2

Desktop

Juices image marker preview

Mobile

image markers mobile 2

Download The Image Markers Layout for FREE

To lay your hands on the free image markers layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Recreate Example #1

Let’s start recreating the first design example!

Image markers preview with car

Add New Section

Add a new section to the page you’re working on. Before adding a row, adjust the section settings first.

Background

Add a gradient and then an image with a screen blend mode.

  • Background: Gradient + Image
  • Gradient Color 1: White #ffffff
  • Gradient Color 2: Medium Grey #666666
  • Gradient Start Position: 22%
  • Background Image Blend: Screen

add a gradient background 1

add an image to the section background

Spacing

Remove the default top and bottom padding of the section next.

  • Top and Bottom Padding: 0vw

adjust section padding

Visibility

Complete the section settings by hiding the section’s overflows.

  • Vertical and Horizontal Overflow: Hidden

adjust visibility in section

Add Row #1

Now, add a new row with three columns.

add a row in the section

Before adding any modules adjust the row settings.

Sizing

First, adjust the sizing of the row.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • WIdth: 100%
  • Max Width: 100%

row settings

Custom CSS

Next, add one single line of CSS code to the main element of the row. This will allow the columns to appear next to each other on smaller screen sizes as well.

  • Main Element CSS: display: flex;
display: flex;

add some custom css

Column 1

Transform Translate

Apply a custom transform translate effect to the first column to reposition the column. This step will make sense once you add the image marker modules later on the post. If you’re using this technique on another design, you’ll need to change these values accordingly.

  • Transform Translate: x-axis 2vw, y-axis 16vw

adjust column settings

Z Index

Add a higher z index value to the visibility tab.

  • Z Index: 10

Adjust the visibility

Column 2

Transform Translate

Apply a transform translate effect to the second column.

  • Transform Translate: x-axis -11vw, y-axis 6vw

transform translate column 2

Z Index

Increase the z index value.

  • Z Index: 10

Adjust the visibility

Column 3

Transform Translate

Modify the transform translate values of the third column.

  • Transform Translate: x-axis -11vw, y-axis 8vw

adjust transform translate

Z Index

And change the z index value.

  • Z Index: 10

Adjust the visibility

Add Row #2

Before adding any modules to the first row, add a new one-column row. Do this before adding the image markers so you can see what is happening on the screen while designing.

add a new one column row

Sizing

Change the sizing settings of the row.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • WIdth: 100%
  • Max Width: 100%

adjust sizing of the row

Add Image Module

Add an image module next.

add an image module

insert an image in the module

Sizing

Force fullwidth on the image module to make sure the design remains responsive across all screen sizes.

  • Force Fullwidth: Yes

force fullwidth

Spacing

Then, add some left and right padding to make the image smaller.

  • Left and Right Padding: 10vw

make spacing on left and right adjustments

Add 3 Text Modules

Now, return to the first 3-column row and add 3 text modules.

Use the wireframe view for easier access.

Add a text module to the first column, clone it twice and drag the duplicates to the other columns.

add the first text module

add and duplicate text modules

Start modifying the text module in column 1. Enter some content of your choice and change the settings as follows.

Background

Add a black background.

  • Background Color: Black #000000

add a black background

Text

Style the text.

  • Text Font: Aldrich
  • Text Color: White #ffffff
  • Text Alignment: Centered
  • Text Size:
    • Desktop: 1.2vw
    • Tablet: 2vw
    • Phone: 2.4vw
  • Heading Font Weight: Bold

style the text with aldrich font

Sizing

Adjust the size of the text module.

  • Width:
    • Desktop: 17vw
    • Tablet: 23vw
    • Phone: 30vw
  • Module Alignment: Center

text setting for image markers

Spacing

Add top and bottom padding.

  • Top and Bottom Padding: 0.9vw

add padding to the text settings

Border

Change the border settings.

  • Rounded Corners: 14px on all corners
  • Bottom Styles: Bottom Border
  • Bottom Border Width: 4px
  • Bottom Border Color: Red #E02B20

text settings for the image marker border

Box Shadow

Apply a box shadow.

  • Box Shadow: Third Option

add a box shadow to the text

Expand Text Styles

To save time, use the extend style option to style the other text modules in the section.

  • First, click on the three dots on the right edge of the text module and select “Extend Text Styles.”
  • Then, in the pop-up box, click on “Throughout” and select “This Section” when the menu drops down.
  • Change the content in each text module.

extend text styles

extend styles throughout this section

Add 3 Divider Modules

Add a divider below the text module in column 1. Then clone it twice and drag the duplicates to the other columns.

add a divider module

duplicate dividers and drag

Open the divider module in column 1 and make some changes.

Line

Make the divider black.

  • Line Color: Black #000000

add color to the divider

Sizing

Adjust the thickness of the divider.

  • Divider Weight: 3px
  • Width: 20vw
  • Module Alignment: Center

divider sizing settings

Spacing

Adjust the top margin.

  • Top Margin: 7vw

divider margin settings

Transform

Add a transform rotate effect to make the divider vertical.

  • Transform Rotate: First Option at 90deg

divider rotate

Expand Divider  Settings

Save time and use the extend styles option.

  • First, click on the three dots on the right side of the divider module and select “Extend Divider Styles.”
  • Then, in the popup box, click on “Throughout” and select “This Section” in the dropdown menu.

extend divider styles

The design should now look like this:

image marker first stage

Add Row #3

Add a third row to the section using the following column structure:

add the third row

Now, before adding any modules, adjust the row settings accordingly.

Sizing

Change the sizing settings.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • WIdth: 100%
  • Max Width: 100%

adjust third row settings

Column 1

Transform

Apply a transform translate effect to the first column.

  • Transform Translate: y-axis -8vw

transform translate on column one

Z Index

Adjust the z index value too.

  • Z Index: 10

z index on column one

Column 2

Transform

Reposition the second column using some custom transform translate settings.

  • Transform Translate: x-axis -17vw, y-axis -14vw

transform on column two

Z Index

Adjust the z index value.

  • Z Index: 10

z index column two

Add 2 Dividers

Add two dividers, one in each column.

adding more dividers

Extend Divider Styles

After adding the dividers, use the previous dividers to extend the styles to the new ones.

  • First, click on the three dots in the divider module in the first row above and select “Extend Divider Styles.”
  • Then, in the popup, select “Throughout This Page.”

extend divider style again

throughout this page

Now, we’re going to make some changes to the divider in the first column of our third row.

Sizing

Remove the margin.

  • Top Margin: default

remove the margin

Z Index

Change the z index too.

  • Z Index: -2

z index to -2

Add 2 Text Modules

Add a text module to each column.

add more text modules

Extend Text Styles

After adding the new text modules, extend the text styles from the text module in the first row.

  • First, click on the three dots in the first text module in the top row and select “Extend Text Styles.”
  • Then, in the popup, select “Throughout This Page.”

extend text styles to bottom row

throughout this page again

Now, change the text to match the design. Furthermore, add some top margin to both text modules in the third row.

Spacing

  • Top Margin: 7vw

adjust the margin of the new text module

Recreate Example #2

On to the next example!

Juices image marker preview

Add New Section

Add a new section to the page you’re working on. Before adding a row, adjust the section settings.

Visibility

Hide the section’s overflows in the visibility settings.

  • Horizontal and Vertical Overflow: Hidden

adjust the visibility for the section

Add Row #1

Now, add a row with five columns. Before adding any modules, adjust the row settings as follows.

Sizing

First, modify the sizing settings.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • WIdth: 100%
  • Max Width: 100%

adjust settings to the new row

Spacing

Then adjust the spacing.

  • Left and Right Padding: 19.5vw

left and right padding

Custom CSS

Allow the columns to appear next to each other by adding one line of CSS code to the main element of the row.

  • Main Element CSS: display: flex;
display: flex;

custom css to the row

All Column Settings

Then, make some changes to each one of the columns.

Custom CSS

  • Main Element: width: 20% !important;
width: 20% !important;

custom css to all the columns

Z Index

Adjust the z index value too.

  • Z Index: 10

z index to all the columns

Add 5 Text Modules

Add a text module to each column.

add a text module in the row

drag the duplicated text modules

Add some relevant content to the content box and continue by modifying the text module settings of the text module in column 1.

Background

Add a background color.

  • Background Color: Green #2f7713

add a green background

Text

Style the content as follows.

  • Text Font: Allerta
  • Text Alignment: Center
  • Text Color: White #ffffff
  • Text Size:
    • Desktop: 1.3vw
    • Tablet: 2vw
    • Phone: 2.4vw
  • Text Line Height: 2.9em

adjust text setting to text module

Sizing

Adjust the sizing.

  • Width:
    • Desktop: 6vw
    • Tablet: 8vw
    • Phone: 9vw
  • Module Alignment: Center

adjust the width of the text module

Spacing

Adjust the spacing to turn the module into a square.

  • Bottom Margin: -2vw
  • Top and Bottom Padding: 1vw
  • Left and Right Padding: 1vw

make the module square

Border

Turn the text module into a circle in the border settings.

  • Rounded Corners: 50vw all four sides

make the module circular

Box Shadow

Select a box shadow too.

  • Box Shadow: Third Option

add a box shadow to the circle

Extend Text Styles

Use the extend styles option to adjust the settings of all the text modules in the row.

  • First, click on the dots on the right of the text module and choose “Extend Text Styles.”
  • Then, in the pop-up, click “Throughout” and choose “This Page.”
  • Finally, change the text in each module’s content box.

extend circle text styles

extend the circle

The design should now look like this.

five green circular text modules

Text Module 2

Make the second circle yellow.

  • Background Color: Yellow #f2e200

change the color of the second circle

Text Module 3

Make the third circle orange.

  • Background Color: Orange #f2b100

change the third circle

Text Module 4

Make the fourth circle orange-red.

  • Background Color: Orange Red

change the orange circle

Text Module 5

Make the fifth module purple.

  • Background Color: Purple #8e008c

fifth purple circle

Add 5 Divider Modules

Now, below each text module, add a divider module.

add a divider under each circle

add, duplicate and drag dividers

Adjust the settings to the first divider accordingly.

Line

Give the divider a color.

  • Line Color: Green #2f7713

make the first divider green

Sizing

Adjust the width.

  • Divider Width:  4px
  • Width: 13vw

adjust the width of the divider

Spacing

Add a top margin value.

  • Top Margin:
    • Desktop: 7vw
    • Tablet + Phone: 5vw

adjust the width of the divider 1

Transform

Rotate the divider to make it vertical.

  • Transform Rotate: 90 deg in The First Option

make the divider vertical

Extend Divider Settings

Use the extend styles option to style the other dividers.

  • First, click on the dots in the right of the divider module and choose “Extend Divider Styles.”
  • Then, in the popup, click on “Throughout” and choose “This Section.”

extending divider styles

apply divider styles to section

Match the colors

Divider 2

Make the second divider yellow.

  • Line Color: Yellow #f2e200

make the divider yellow

Divider 3

Make the third divider orange.

  • Line Color: Orange #f2b100make the divider orange

Divider 4

Make the fourth divider orange red.

  • Line Color: Orange Red #ef4a21

make the divider orange red

Divider 5

Make the fifth divider purple.

  • Line Color: Purple #8e008c

purple divider adjustment

Add Row #2

Add a new one-column row.

add a row for an image module

Before adding the image module, adjust the row settings.

Sizing

First, adjust the sizing.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • WIdth: 100%
  • Max Width: 100%

adjust the last row

Visibility

Then, the visibility.

  • Horizontal and Vertical Overflow: Visible

adjust the visibility of the last row

Add Image Module

Add an image module and upload the juices image.

add an image module into the row

Sizing

Force fullwidth on the image.

  • Force Fullwidth: Yes

make image fullwidth

Row Spacing

It’s time for the final touch. Open the row #1 settings again and add some top and bottom margin.

  • Top Margin: 7vw
  • Bottom Margin:
    • Desktop: -24vw
    • Tablet: -31vw
    • Phone: -35vw

margin final touches

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Example #1

Desktop

Image markers preview with car

Mobile

image marker mobile 1.

Example #2

Desktop

Juices image marker preview

Mobile

image markers mobile 2

That’s a Wrap!

In this post, we’ve shown you how to create two different image marker designs. We used the column options to keep the text columns and dividers together. We hope these designs will inspire you to create your own image marker designs. Remember to use the transform translate options inside the columns for better control of each image marker. If you have any questions, feel free to leave a comment in the comment section below!

Share This: