If you are focusing on mobile-first designs, this post might help you out. We’ve created two beautiful examples of service showcases that look great on smaller screen sizes. More so, they were specifically designed to look their best on mobile while still maintaining a good design on desktop. In this post, we’ll show you step by step how to recreate them from scratch. We hope this tutorial will inspire you to unleash your creativity when designing services sections for any website you build. At the end of the tutorial, you’ll also be able to download the JSON files of both sections.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the two mobile examples that we’ll recreate.

Example #1

mobile services

Example #2

mobile services

Let’s Start Recreating Example #1

mobile services

Add New Section

Gradient Background

Create a new page and add a regular section to it. Open the section settings and add a gradient background.

  • Color 1: #ff0f83
  • Color 2: rgba(255,255,255,0)
  • Gradient Type: Radial
  • Radial Direction: Left
  • Start Position: 20%
  • End Position: 20%

mobile services

Add Row #1

Column Structure

Continue by adding a new row to the section using the following column structure:

mobile services

Add Text Module #1

Add Content

The first module we’ll need is a Text Module. Add some content to the content box.

mobile services

Text Settings

Then, go to the design tab and modify the text settings.

  • Text Font: Poppins
  • Text Font Weight: Heavy
  • Text Color: #ffffff
  • Text Size: 20vw
  • Text Line Height: 1em

mobile services

  • Text Shadow Blur Strength: 0.95em
  • Text Shadow Color: rgba(0,0,0,0.13)
  • Text Orientation: Center

mobile services

Add Text Module #2

Add H2 Content

Add another Text Module right below the previous one. Enter some H2 content of your choice.

mobile services

H2 Text Settings

Then, go to the design tab and modify the H2 text settings.

  • Heading 2 Font: Poppins
  • Heading 2 Font Weight: Bold
  • Heading 2 Text Alignment: Center
  • Heading 2 Text Color: #000000
  • Heading 2 Text Size: 10vw (Phone & Tablet), 10vw (Desktop)

mobile services

Spacing

Create an overlap between both text modules using some negative top margin.

  • Top Margin: -12vw (Phone), -10vw (Tablet), -8vw (Desktop)

mobile services

Add Row #2

Column Structure

Continue by adding another row using the following column structure:

mobile services

Gradient Background

Without adding any modules yet, open the row settings and add a gradient background.

  • Color 1: #3239ff
  • Color 2: rgba(255,255,255,0)
  • Gradient Type: Radial
  • Radial Direction: Right
  • Start Position: 30%
  • End Position: 30%

mobile services

Sizing

Go to the sizing settings next and allow the row to take up the entire width of the screen.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

mobile services

Spacing

Add some spacing values too. These values will make sure everything looks good across all screen sizes.

  • Left Padding: 0vw (Phone & Tablet), 15vw (Desktop)
  • Right Padding: 0vw (Phone & Tablet), 15vw (Desktop)

mobile services

Custom CSS

We’re also placing the two columns right next to each other by adding one line of CSS code in the advanced tab.

display: flex;

mobile services

Add Text Module to Column 1

Add H3 & Link Content

Now we can start adding modules! Add a Text Module to the first column with some H3 copy and a link.

mobile services

Background Color

Then, go to the background settings of the module and add a background color.

  • Background Color: rgba(255,255,255,0.95)

mobile services

Text Settings

Continue by changing the text orientation in the text settings of the module.

  • Text Orientation: Center

mobile services

Link Text Settings

Modify the link text settings as well.

  • Link Font: Poppins
  • Linke Font Weight: Bold
  • Link Font Style: Underline
  • Link Underline Color: #000000
  • Link Text Color: #000000
  • Link Text Size: 3vw (Phone), 2vw (Tablet), 1vw (Desktop)

mobile services

H3 Text Settings

Along with the H3 text settings.

  • Heading 3 Font: Poppins
  • Heading 3 Font Weight: Ultra Light
  • Heading 3 Text Color: #000000
  • Heading 3 Text Size: 4vw (Phone), 3vw (Tablet), 2vw (Desktop)
  • Heading 3 Text Line Height: 1.9em for a circle shape or 3em for an oval one

mobile services

Spacing

To create a shape out of this module, we’re going to add some custom margin and padding values in the spacing settings.

  • Left Margin: 5vw
  • Right Margin: -5vw
  • Top Padding: 17vw (Phone), 20vw (Tablet), 15vw (Desktop)
  • Bottom Padding: 17vw (Phone), 20vw (Tablet), 15vw (Desktop)

mobile services

Border

We’re turning the square into a circle using rounded corners by adding ‘100vw’ to each one of the corners.

mobile services

Box Shadow

And to create some depth, we’ll add a subtle box shadow.

  • Box Shadow Blur Strength: 100px
  • Shadow Color: rgba(0,0,0,0.12)

mobile services

Clone Text Module 4 Times

Now that we’re done modifying the first Text Module, we can go ahead and clone it four times. Place two of the duplicates in the second column.

mobile services

Modify Duplicate #1

Spacing

Continue by modifying the first duplicate’s spacing settings.

  • Top Margin: 20vw
  • Left Margin: -5vw
  • Right Margin: 5vw

mobile services

Modify Duplicate #2

Background Color

Open the second duplicate next and change the background color.

  • Background Color: rgba(255,248,209,0.92)

mobile services

Spacing

Modify the spacing settings too.

  • Top Margin: -5vw

mobile services

Modify Duplicate #3

Background Color

Then, open the third duplicate and change the background color.

  • Background Color: rgba(219,255,223,0.95)

mobile services

Spacing

Modify the spacing settings next.

  • Top Margin: -5vw
  • Left Margin: -5vw
  • Right Margin: 5vw

mobile services

Modify Duplicate #4

Spacing

Open the last duplicate as well and add some negative top margin to finish the design.

  • Top Margin: -5vw

mobile services

Let’s Start Recreating Example #2

mobile services

Add New Section

On to the second example! Add a new section to your page.

mobile services

Add Row #1

Column Structure

Continue by adding a new row using the following column structure:

mobile services

Add Text Module

Add H2 Content

The first module we’ll need is a Text Module. Enter some H2 content of your choice.

mobile services

H2 Text Settings

Then, go to the design tab and modify the H2 text settings.

  • Heading 2 Font: Poppins
  • Heading 2 Text Alignment: Center
  • Heading 2 Text Color: #333333
  • Heading 2 Text Size: 7vw (Phone & Tablet), 4vw (Desktop)

mobile services

Add Divider Module

Visibility

Add a Divider Module right below the Text Module. Make sure the ‘Show Divider’ option is enabled.

mobile services

Color

Then, go to the design tab and modify the divider color.

  • Color: #333333

mobile services

Sizing

Play around with the sizing settings as well.

  • Divider Weight: 5px
  • Width: 12%
  • Module Alignment: Center

mobile services

Add Row #2

Column Structure

Continue by adding a new row to the section using the following column structure:

mobile services

Background Color

Without adding any modules yet, open the row settings and add a white background color.

  • Background Color: #ffffff

mobile services

Sizing

Go to the sizing settings next and allow the row to take up the entire width of the screen.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

mobile services

Spacing

Add some custom margin and padding values next to optimize the design for all screen sizes.

  • Top Margin: 2vw
  • Bottom Margin: 2vw
  • Top Padding: 10vw (Phone & Tablet), 5vw (Desktop)
  • Bottom Padding: 10vw (Phone & Tablet), 5vw (Desktop)
  • Left Padding: 2vw (Phone & Tablet), 20vw (Desktop)
  • Right Padding: 2vw (Phone & Tablet), 20vw (Desktop)

mobile services

Box Shadow

We’re using a subtle box shadow too.

  • Box Shadow Blur Strength: 50px
  • Shadow Color: rgba(0,0,0,0.07)

mobile services

Custom CSS

Last but not least, place both columns next to each other by adding a single CSS code line to the main element in the advanced tab.

display: flex;

mobile services

Add Blurb Module to Column 1

Select Icon

We can now start adding modules! The only module we need in column 1 is a Blurb Module. Select an icon of your choice.

mobile services

Gradient Background

Then, add a gradient background.

  • Color 1: #7b28ef
  • Color 2: #29b6e5
  • Gradient Direction: 142deg

mobile services

Icon Settings

Modify the icon settings next.

  • Icon Color: #ffffff
  • Icon Placement: Top
  • Use Icon Font Size: Yes
  • Icon Font Size: 5vw (Phone & Tablet), 4vw (Desktop)

mobile services

Sizing

And change around the sizing settings.

  • Width: 48% (Phone & Tablet), 78% (Desktop)

mobile services

Spacing

We’re also adding some custom margin and padding values to optimize the design across all screen sizes.

  • Top Margin: 2vw (Phone)
  • Top Padding: 8.5vw (Phone), 9vw (Tablet), 6vw (Desktop)
  • Bottom Padding: 3vw (Phone), 5vw (Tablet), 4vw (Desktop)

mobile services

Border

Turn the module into a circle next by adding ‘100vw’ to each one of the corners in the border settings.

mobile services

Box Shadow

We’re adding a box shadow too.

  • Box Shadow Vertical Position: 10px
  • Box Shadow Spread Strength: 5px
  • Shadow Color: rgba(2,185,252,0.35)

mobile services

Add Text Module #1 to Column 2

Add H3 Content

On to the second column! The first module we need there is a title Text Module. Add some H3 content.

mobile services

H3 Text Settings

Then, go to the design tab and modify the H3 text settings.

  • Heading 3 Font: Poppins
  • Heading 3 Text Size: 4vw (Phone), 3vw (Tablet), 2vw (Desktop)

mobile services

Spacing

Add some custom spacing values next.

  • Top Margin: 0vw (Phone), 3vw (Tablet & Desktop)
  • Left Margin: -20vw (Phone & Tablet), 0vw (Desktop)
  • Right Margin: 0vw
  • Bottom Padding: 2vw (Phone & Tablet), 1vw (Desktop)
  • Left Padding: 5vw (Phone & Tablet), 2vw (Desktop)

mobile services

Border

Along with a left border.

  • Left Border Width: 5px
  • Left Border Color: #f4f4f4
  • Left Border Style: Double

mobile services

Add Divider Module to Column 2

Show Divider

The second module we need is a Divider Module. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

mobile services

Color

Then, go to the design tab and change the divider color.

  • Color: #f4f4f4

mobile services

Styles

Change the divider style in the styles settings next.

  • Divider Style: Double

mobile services

Sizing

Continue by modifying the different options in the sizing settings.

  • Divider Weight: 5px
  • Height: 0px

mobile services

Spacing

And play around with the spacing values too.

  • Left Margin: -20vw (Phone & Tablet), 0vw (Desktop)

mobile services

Add Text Module #2 to Column 2

Add Content

The next module we need in the second column is another Text Module. Add some body content of choice.

mobile services

Text Settings

Then, go to the design tab and modify the text settings.

  • Text Size: 2vw (Phone), 1.7vw (Tablet), 0.8vw (Desktop)
  • Text Orientation: Left

mobile services

Spacing

Play around with the spacing values as well.

  • Top Margin: 0vw
  • Left Margin: -20vw (Phone & Tablet), 0vw (Desktop)
  • Right Margin: 0vw
  • Top Padding: 3vw (Phone & Tablet), 2vw (Desktop)
  • Left Padding: 5vw (Phone & Tablet), 2vw (Desktop)

mobile services

Border

And add a left border.

  • Left Border Width: 5px
  • Left Border Color: #f4f4f4
  • Left Border Style: Double

mobile services

Add Button Module to Column 2

Add Copy

The next and last module we need in the second column is a Button Module. Add some copy.

mobile services

Button Settings

Then, go to the design tab and change the button settings.

  • Use Custom Styles for Button: Yes
  • Button Text Size: 2.5vw (Phone), 2vw (Tablet), 1vw (Desktop)
  • Button Text Color: #4f77e8
  • Button Border Width: 1px
  • Button Border Color: #4f77e8

mobile services

  • Button Border Radius: 1px
  • Button Font: Poppins

mobile services

Spacing

Modify the spacing values as well.

  • Top Margin: 4vw (Phone & Tablet), 2vw (Desktop)
  • Left Margin: -20vw (Phone & Tablet), 0vw (Desktop)

mobile services

Clone Row Twice

Now that we’re done modifying the row and all of its modules, we can clone it two times.

mobile services

Change Icons

Make sure you change the icons for both Blurb Modules.

mobile services

Change Gradient Backgrounds

Modify the gradient backgrounds as well.

  • Color 1: #ff2885
  • Color 2: #d6ac24

mobile services

  • Color 1: #70ff1e
  • Color 2: #2699ff

mobile services

Change Box Shadow Colors

Match the box shadow color with the new gradient background.

  • Shadow Color: rgba(255,208,2,0.37)

mobile services

  • Shadow Color: rgba(42,255,0,0.37)

mobile services

Change Button Border & Text Colors

And complete the design by changing the button border and text colors.

  • Button Text Color: #e96c54
  • Button Border Color: #e96c54

mobile services

  • Button Text Color: #4dcb93
  • Button Border Color: #4dcb93

mobile services

Download The Mobile Services Sections for FREE

To lay your hands on the free mobile services sections, you will first need to download them 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.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #ffffff !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Download For Free

Download For Free

Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

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

Preview

Now that we’ve gone through all the steps, let’s take a final look at the mobile outcome of both examples.

Example #1

mobile services

Example #2

mobile services

Final Thoughts

In this post, we’ve shown you two creative ways on how to showcase services on mobile devices using Divi’s built-in options only. We hope this mobile-first approach will inspire you to get creative as well. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

The post How to Beautifully Showcase Services on Mobile Devices with Divi (Free Download!) appeared first on Elegant Themes Blog.