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

how-to-add-image-markers-with-divis-transform-options How to Add Image Markers with Divi’s Transform Options

Mobile

how-to-add-image-markers-with-divis-transform-options How to Add Image Markers with Divi’s Transform Options

Example #2

Desktop

how-to-add-image-markers-with-divis-transform-options-1 How to Add Image Markers with Divi’s Transform Options

Mobile

how-to-add-image-markers-with-divis-transform-options-1 How to Add Image Markers with Divi’s Transform Options

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!

how-to-add-image-markers-with-divis-transform-options How to Add Image Markers with Divi’s Transform Options

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

how-to-add-image-markers-with-divis-transform-options-2 How to Add Image Markers with Divi’s Transform Options

how-to-add-image-markers-with-divis-transform-options-2 How to Add Image Markers with Divi’s Transform Options

Spacing

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

  • Top and Bottom Padding: 0vw

how-to-add-image-markers-with-divis-transform-options-3 How to Add Image Markers with Divi’s Transform Options

Visibility

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

  • Vertical and Horizontal Overflow: Hidden

how-to-add-image-markers-with-divis-transform-options-4 How to Add Image Markers with Divi’s Transform Options

Add Row #1

Now, add a new row with three columns.

how-to-add-image-markers-with-divis-transform-options-5 How to Add Image Markers with Divi’s Transform Options

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%

how-to-add-image-markers-with-divis-transform-options-6 How to Add Image Markers with Divi’s Transform Options

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;

how-to-add-image-markers-with-divis-transform-options-7 How to Add Image Markers with Divi’s Transform Options

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

how-to-add-image-markers-with-divis-transform-options-8 How to Add Image Markers with Divi’s Transform Options

Z Index

Add a higher z index value to the visibility tab.

  • Z Index: 10

how-to-add-image-markers-with-divis-transform-options-9 How to Add Image Markers with Divi’s Transform Options

Column 2

Transform Translate

Apply a transform translate effect to the second column.

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

how-to-add-image-markers-with-divis-transform-options-10 How to Add Image Markers with Divi’s Transform Options

Z Index

Increase the z index value.

  • Z Index: 10

how-to-add-image-markers-with-divis-transform-options-9 How to Add Image Markers with Divi’s Transform Options

Column 3

Transform Translate

Modify the transform translate values of the third column.

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

how-to-add-image-markers-with-divis-transform-options-11 How to Add Image Markers with Divi’s Transform Options

Z Index

And change the z index value.

  • Z Index: 10

how-to-add-image-markers-with-divis-transform-options-9 How to Add Image Markers with Divi’s Transform Options

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.

how-to-add-image-markers-with-divis-transform-options-12 How to Add Image Markers with Divi’s Transform Options

Sizing

Change the sizing settings of the row.

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

how-to-add-image-markers-with-divis-transform-options-13 How to Add Image Markers with Divi’s Transform Options

Add Image Module

Add an image module next.

how-to-add-image-markers-with-divis-transform-options-14 How to Add Image Markers with Divi’s Transform Options

how-to-add-image-markers-with-divis-transform-options-15 How to Add Image Markers with Divi’s Transform Options

Sizing

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

  • Force Fullwidth: Yes

how-to-add-image-markers-with-divis-transform-options-16 How to Add Image Markers with Divi’s Transform Options

Spacing

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

  • Left and Right Padding: 10vw

how-to-add-image-markers-with-divis-transform-options-17 How to Add Image Markers with Divi’s Transform Options

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.

how-to-add-image-markers-with-divis-transform-options-18 How to Add Image Markers with Divi’s Transform Options

how-to-add-image-markers-with-divis-transform-options-19 How to Add Image Markers with Divi’s Transform Options

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

how-to-add-image-markers-with-divis-transform-options-20 How to Add Image Markers with Divi’s Transform Options

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

how-to-add-image-markers-with-divis-transform-options-21 How to Add Image Markers with Divi’s Transform Options

Sizing

Adjust the size of the text module.

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

how-to-add-image-markers-with-divis-transform-options-22 How to Add Image Markers with Divi’s Transform Options

Spacing

Add top and bottom padding.

  • Top and Bottom Padding: 0.9vw

how-to-add-image-markers-with-divis-transform-options-23 How to Add Image Markers with Divi’s Transform Options

Border

Change the border settings.

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

how-to-add-image-markers-with-divis-transform-options-24 How to Add Image Markers with Divi’s Transform Options

Box Shadow

Apply a box shadow.

  • Box Shadow: Third Option

how-to-add-image-markers-with-divis-transform-options-25 How to Add Image Markers with Divi’s Transform Options

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.

how-to-add-image-markers-with-divis-transform-options-26 How to Add Image Markers with Divi’s Transform Options

how-to-add-image-markers-with-divis-transform-options-27 How to Add Image Markers with Divi’s Transform Options

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.

how-to-add-image-markers-with-divis-transform-options-28 How to Add Image Markers with Divi’s Transform Options

how-to-add-image-markers-with-divis-transform-options-29 How to Add Image Markers with Divi’s Transform Options

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

Line

Make the divider black.

  • Line Color: Black #000000

how-to-add-image-markers-with-divis-transform-options-30 How to Add Image Markers with Divi’s Transform Options

Sizing

Adjust the thickness of the divider.

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

how-to-add-image-markers-with-divis-transform-options-31 How to Add Image Markers with Divi’s Transform Options

Spacing

Adjust the top margin.

  • Top Margin: 7vw

how-to-add-image-markers-with-divis-transform-options-32 How to Add Image Markers with Divi’s Transform Options

Transform

Add a transform rotate effect to make the divider vertical.

  • Transform Rotate: First Option at 90deg

how-to-add-image-markers-with-divis-transform-options-33 How to Add Image Markers with Divi’s Transform Options

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.

how-to-add-image-markers-with-divis-transform-options-34 How to Add Image Markers with Divi’s Transform Options

The design should now look like this:

how-to-add-image-markers-with-divis-transform-options-35 How to Add Image Markers with Divi’s Transform Options

Add Row #3

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

how-to-add-image-markers-with-divis-transform-options-36 How to Add Image Markers with Divi’s Transform Options

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%

how-to-add-image-markers-with-divis-transform-options-37 How to Add Image Markers with Divi’s Transform Options

Column 1

Transform

Apply a transform translate effect to the first column.

  • Transform Translate: y-axis -8vw

how-to-add-image-markers-with-divis-transform-options-38 How to Add Image Markers with Divi’s Transform Options

Z Index

Adjust the z index value too.

  • Z Index: 10

how-to-add-image-markers-with-divis-transform-options-39 How to Add Image Markers with Divi’s Transform Options

Column 2

Transform

Reposition the second column using some custom transform translate settings.

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

how-to-add-image-markers-with-divis-transform-options-40 How to Add Image Markers with Divi’s Transform Options

Z Index

Adjust the z index value.

  • Z Index: 10

how-to-add-image-markers-with-divis-transform-options-41 How to Add Image Markers with Divi’s Transform Options

Add 2 Dividers

Add two dividers, one in each column.

how-to-add-image-markers-with-divis-transform-options-42 How to Add Image Markers with Divi’s Transform Options

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.”

how-to-add-image-markers-with-divis-transform-options-43 How to Add Image Markers with Divi’s Transform Options

how-to-add-image-markers-with-divis-transform-options-44 How to Add Image Markers with Divi’s Transform Options

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

how-to-add-image-markers-with-divis-transform-options-45 How to Add Image Markers with Divi’s Transform Options

Z Index

Change the z index too.

  • Z Index: -2

how-to-add-image-markers-with-divis-transform-options-46 How to Add Image Markers with Divi’s Transform Options

Add 2 Text Modules

Add a text module to each column.

how-to-add-image-markers-with-divis-transform-options-47 How to Add Image Markers with Divi’s Transform Options

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.”

how-to-add-image-markers-with-divis-transform-options-48 How to Add Image Markers with Divi’s Transform Options

how-to-add-image-markers-with-divis-transform-options-49 How to Add Image Markers with Divi’s Transform Options

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

how-to-add-image-markers-with-divis-transform-options-50 How to Add Image Markers with Divi’s Transform Options

Recreate Example #2

On to the next example!

how-to-add-image-markers-with-divis-transform-options-1 How to Add Image Markers with Divi’s Transform Options

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

how-to-add-image-markers-with-divis-transform-options-51 How to Add Image Markers with Divi’s Transform Options

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%

how-to-add-image-markers-with-divis-transform-options-52 How to Add Image Markers with Divi’s Transform Options

Spacing

Then adjust the spacing.

  • Left and Right Padding: 19.5vw

how-to-add-image-markers-with-divis-transform-options-53 How to Add Image Markers with Divi’s Transform Options

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;

how-to-add-image-markers-with-divis-transform-options-54 How to Add Image Markers with Divi’s Transform Options

All Column Settings

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

Custom CSS

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

how-to-add-image-markers-with-divis-transform-options-55 How to Add Image Markers with Divi’s Transform Options

Z Index

Adjust the z index value too.

  • Z Index: 10

how-to-add-image-markers-with-divis-transform-options-56 How to Add Image Markers with Divi’s Transform Options

Add 5 Text Modules

Add a text module to each column.

how-to-add-image-markers-with-divis-transform-options-57 How to Add Image Markers with Divi’s Transform Options

how-to-add-image-markers-with-divis-transform-options-58 How to Add Image Markers with Divi’s Transform Options

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

how-to-add-image-markers-with-divis-transform-options-59 How to Add Image Markers with Divi’s Transform Options

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

how-to-add-image-markers-with-divis-transform-options-60 How to Add Image Markers with Divi’s Transform Options

Sizing

Adjust the sizing.

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

how-to-add-image-markers-with-divis-transform-options-61 How to Add Image Markers with Divi’s Transform Options

Spacing

Adjust the spacing to turn the module into a square.

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

how-to-add-image-markers-with-divis-transform-options-62 How to Add Image Markers with Divi’s Transform Options

Border

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

  • Rounded Corners: 50vw all four sides

how-to-add-image-markers-with-divis-transform-options-63 How to Add Image Markers with Divi’s Transform Options

Box Shadow

Select a box shadow too.

  • Box Shadow: Third Option

how-to-add-image-markers-with-divis-transform-options-64 How to Add Image Markers with Divi’s Transform Options

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.

how-to-add-image-markers-with-divis-transform-options-65 How to Add Image Markers with Divi’s Transform Options

how-to-add-image-markers-with-divis-transform-options-66 How to Add Image Markers with Divi’s Transform Options

The design should now look like this.

how-to-add-image-markers-with-divis-transform-options-67 How to Add Image Markers with Divi’s Transform Options

Text Module 2

Make the second circle yellow.

  • Background Color: Yellow #f2e200

how-to-add-image-markers-with-divis-transform-options-68 How to Add Image Markers with Divi’s Transform Options

Text Module 3

Make the third circle orange.

  • Background Color: Orange #f2b100

how-to-add-image-markers-with-divis-transform-options-69 How to Add Image Markers with Divi’s Transform Options

Text Module 4

Make the fourth circle orange-red.

  • Background Color: Orange Red

how-to-add-image-markers-with-divis-transform-options-70 How to Add Image Markers with Divi’s Transform Options

Text Module 5

Make the fifth module purple.

  • Background Color: Purple #8e008c

how-to-add-image-markers-with-divis-transform-options-71 How to Add Image Markers with Divi’s Transform Options

Add 5 Divider Modules

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

how-to-add-image-markers-with-divis-transform-options-72 How to Add Image Markers with Divi’s Transform Options

how-to-add-image-markers-with-divis-transform-options-73 How to Add Image Markers with Divi’s Transform Options

Adjust the settings to the first divider accordingly.

Line

Give the divider a color.

  • Line Color: Green #2f7713

how-to-add-image-markers-with-divis-transform-options-74 How to Add Image Markers with Divi’s Transform Options

Sizing

Adjust the width.

  • Divider Width:  4px
  • Width: 13vw

how-to-add-image-markers-with-divis-transform-options-75 How to Add Image Markers with Divi’s Transform Options

Spacing

Add a top margin value.

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

how-to-add-image-markers-with-divis-transform-options-76 How to Add Image Markers with Divi’s Transform Options

Transform

Rotate the divider to make it vertical.

  • Transform Rotate: 90 deg in The First Option

how-to-add-image-markers-with-divis-transform-options-77 How to Add Image Markers with Divi’s Transform Options

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.”

how-to-add-image-markers-with-divis-transform-options-78 How to Add Image Markers with Divi’s Transform Options

how-to-add-image-markers-with-divis-transform-options-79 How to Add Image Markers with Divi’s Transform Options

Match the colors

Divider 2

Make the second divider yellow.

  • Line Color: Yellow #f2e200

how-to-add-image-markers-with-divis-transform-options-80 How to Add Image Markers with Divi’s Transform Options

Divider 3

Make the third divider orange.

  • Line Color: Orange #f2b100how-to-add-image-markers-with-divis-transform-options-81 How to Add Image Markers with Divi’s Transform Options

Divider 4

Make the fourth divider orange red.

  • Line Color: Orange Red #ef4a21

how-to-add-image-markers-with-divis-transform-options-82 How to Add Image Markers with Divi’s Transform Options

Divider 5

Make the fifth divider purple.

  • Line Color: Purple #8e008c

how-to-add-image-markers-with-divis-transform-options-83 How to Add Image Markers with Divi’s Transform Options

Add Row #2

Add a new one-column row.

how-to-add-image-markers-with-divis-transform-options-84 How to Add Image Markers with Divi’s Transform Options

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%

how-to-add-image-markers-with-divis-transform-options-85 How to Add Image Markers with Divi’s Transform Options

Visibility

Then, the visibility.

  • Horizontal and Vertical Overflow: Visible

how-to-add-image-markers-with-divis-transform-options-86 How to Add Image Markers with Divi’s Transform Options

Add Image Module

Add an image module and upload the juices image.

how-to-add-image-markers-with-divis-transform-options-87 How to Add Image Markers with Divi’s Transform Options

Sizing

Force fullwidth on the image.

  • Force Fullwidth: Yes

how-to-add-image-markers-with-divis-transform-options-88 How to Add Image Markers with Divi’s Transform Options

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

how-to-add-image-markers-with-divis-transform-options-89 How to Add Image Markers with Divi’s Transform Options

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

how-to-add-image-markers-with-divis-transform-options How to Add Image Markers with Divi’s Transform Options

Mobile

how-to-add-image-markers-with-divis-transform-options How to Add Image Markers with Divi’s Transform Options

Example #2

Desktop

how-to-add-image-markers-with-divis-transform-options-1 How to Add Image Markers with Divi’s Transform Options

Mobile

how-to-add-image-markers-with-divis-transform-options-1 How to Add Image Markers with Divi’s Transform Options

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!


Source

SEO News and More

SEO News and More

Share This