This article was originally published on this site

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.

Download the Files

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!