In case you are that specialize in mobile-first designs, this put up may let you out. We’ve created two gorgeous examples of provider showcases that glance nice on smaller display screen sizes. Extra so, they have been in particular designed to seem their very best on cellular whilst nonetheless keeping up a excellent design on desktop. On this put up, we’ll display you step-by-step find out how to recreate them from scratch. We are hoping this instructional will encourage you to unharness your creativity when designing services and products sections for any site you construct. On the finish of the academic, you’ll additionally have the ability to obtain the JSON recordsdata of each sections.

Let’s get to it!

Preview

Earlier than we dive into the academic, let’s take a handy guide a rough have a look at the 2 cellular examples that we’ll recreate.

Instance #1

mobile services

Instance #2

mobile services

Let’s Get started Recreating Instance #1

mobile services

Upload New Phase

Gradient Background

Create a brand new web page and upload a standard phase to it. Open the phase settings and upload a gradient background.

  • Colour 1: #ff0f83
  • Colour 2: rgba(255,255,255,0)
  • Gradient Kind: Radial
  • Radial Course: Left
  • Get started Place: 20%
  • Finish Place: 20%

mobile services

Upload Row #1

Column Construction

Proceed via including a brand new row to the phase the use of the next column construction:

mobile services

Upload Textual content Module #1

Upload Content material

The primary module we’ll want is a Textual content Module. Upload some content material to the content material field.

mobile services

Textual content Settings

Then, pass to the design tab and alter the textual content settings.

  • Textual content Font: Poppins
  • Textual content Font Weight: Heavy
  • Textual content Colour: #ffffff
  • Textual content Measurement: 20vw
  • Textual content Line Peak: 1em

mobile services

  • Textual content Shadow Blur Energy: 0.95em
  • Textual content Shadow Colour: rgba(0,0,0,0.13)
  • Textual content Orientation: Heart

mobile services

Upload Textual content Module #2

Upload H2 Content material

Upload any other Textual content Module proper beneath the former one. Input some H2 content material of your selection.

mobile services

H2 Textual content Settings

Then, pass to the design tab and alter the H2 textual content settings.

  • Heading 2 Font: Poppins
  • Heading 2 Font Weight: Daring
  • Heading 2 Textual content Alignment: Heart
  • Heading 2 Textual content Colour: #000000
  • Heading 2 Textual content Measurement: 10vw (Telephone & Pill), 10vw (Desktop)

mobile services

Spacing

Create an overlap between each textual content modules the use of some unfavorable peak margin.

  • Best Margin: -12vw (Telephone), -10vw (Pill), -8vw (Desktop)

mobile services

Upload Row #2

Column Construction

Proceed via including any other row the use of the next column construction:

mobile services

Gradient Background

With out including any modules but, open the row settings and upload a gradient background.

  • Colour 1: #3239ff
  • Colour 2: rgba(255,255,255,0)
  • Gradient Kind: Radial
  • Radial Course: Proper
  • Get started Place: 30%
  • Finish Place: 30%

mobile services

Sizing

Move to the sizing settings subsequent and make allowance the row to soak up all the width of the display screen.

  • Make This Row Fullwidth: Sure
  • Use Customized Gutter Width: Sure
  • Gutter Width: 1

mobile services

Spacing

Upload some spacing values too. Those values will make certain the whole lot appears to be like excellent throughout all display screen sizes.

  • Left Padding: 0vw (Telephone & Pill), 15vw (Desktop)
  • Proper Padding: 0vw (Telephone & Pill), 15vw (Desktop)

mobile services

Customized CSS

We’re additionally striking the 2 columns proper subsequent to one another via including one line of CSS code within the complicated tab.

show: flex;

mobile services

Upload Textual content Module to Column 1

Upload H3 & Hyperlink Content material

Now we will be able to get started including modules! Upload a Textual content Module to the primary column with some H3 reproduction and a hyperlink.

mobile services

Background Colour

Then, pass to the background settings of the module and upload a background colour.

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

mobile services

Textual content Settings

Proceed via converting the textual content orientation within the textual content settings of the module.

  • Textual content Orientation: Heart

mobile services

Hyperlink Textual content Settings

Regulate the hyperlink textual content settings as smartly.

  • Hyperlink Font: Poppins
  • Linke Font Weight: Daring
  • Hyperlink Font Taste: Underline
  • Hyperlink Underline Colour: #000000
  • Hyperlink Textual content Colour: #000000
  • Hyperlink Textual content Measurement: 3vw (Telephone), 2vw (Pill), 1vw (Desktop)

mobile services

H3 Textual content Settings

Along side the H3 textual content settings.

  • Heading 3 Font: Poppins
  • Heading 3 Font Weight: Extremely Gentle
  • Heading 3 Textual content Colour: #000000
  • Heading 3 Textual content Measurement: 4vw (Telephone), 3vw (Pill), 2vw (Desktop)
  • Heading 3 Textual content Line Peak: 1.9em for a circle form or 3em for an oval one

mobile services

Spacing

To create a form out of this module, we’re going so as to add some customized margin and padding values within the spacing settings.

  • Left Margin: 5vw
  • Proper Margin: -5vw
  • Best Padding: 17vw (Telephone), 20vw (Pill), 15vw (Desktop)
  • Backside Padding: 17vw (Telephone), 20vw (Pill), 15vw (Desktop)

mobile services

Border

We’re turning the sq. right into a circle the use of rounded corners via including ‘100vw’ to each and every one of the vital corners.

mobile services

Field Shadow

And to create some intensity, we’ll upload a delicate field shadow.

  • Field Shadow Blur Energy: 100px
  • Shadow Colour: rgba(0,0,0,0.12)

mobile services

Clone Textual content Module 4 Instances

Now that we’re completed enhancing the primary Textual content Module, we will be able to pass forward and clone it 4 instances. Position two of the duplicates in the second one column.

mobile services

Regulate Replica #1

Spacing

Proceed via enhancing the primary replica’s spacing settings.

  • Best Margin: 20vw
  • Left Margin: -5vw
  • Proper Margin: 5vw

mobile services

Regulate Replica #2

Background Colour

Open the second one replica subsequent and alter the background colour.

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

mobile services

Spacing

Regulate the spacing settings too.

  • Best Margin: -5vw

mobile services

Regulate Replica #3

Background Colour

Then, open the 3rd replica and alter the background colour.

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

mobile services

Spacing

Regulate the spacing settings subsequent.

  • Best Margin: -5vw
  • Left Margin: -5vw
  • Proper Margin: 5vw

mobile services

Regulate Replica #4

Spacing

Open the final replica as smartly and upload some unfavorable peak margin to complete the design.

  • Best Margin: -5vw

mobile services

Let’s Get started Recreating Instance #2

mobile services

Upload New Phase

Directly to the second one instance! Upload a brand new phase for your web page.

mobile services

Upload Row #1

Column Construction

Proceed via including a brand new row the use of the next column construction:

mobile services

Upload Textual content Module

Upload H2 Content material

The primary module we’ll want is a Textual content Module. Input some H2 content material of your selection.

mobile services

H2 Textual content Settings

Then, pass to the design tab and alter the H2 textual content settings.

  • Heading 2 Font: Poppins
  • Heading 2 Textual content Alignment: Heart
  • Heading 2 Textual content Colour: #333333
  • Heading 2 Textual content Measurement: 7vw (Telephone & Pill), 4vw (Desktop)

mobile services

Upload Divider Module

Visibility

Upload a Divider Module proper beneath the Textual content Module. Make certain the ‘Display Divider’ choice is enabled.

mobile services

Colour

Then, pass to the design tab and alter the divider colour.

  • Colour: #333333

mobile services

Sizing

Mess around with the sizing settings as smartly.

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

mobile services

Upload Row #2

Column Construction

Proceed via including a brand new row to the phase the use of the next column construction:

mobile services

Background Colour

With out including any modules but, open the row settings and upload a white background colour.

  • Background Colour: #ffffff

mobile services

Sizing

Move to the sizing settings subsequent and make allowance the row to soak up all the width of the display screen.

  • Make This Row Fullwidth: Sure
  • Use Customized Gutter Width: Sure
  • Gutter Width: 1

mobile services

Spacing

Upload some customized margin and padding values subsequent to optimize the design for all display screen sizes.

  • Best Margin: 2vw
  • Backside Margin: 2vw
  • Best Padding: 10vw (Telephone & Pill), 5vw (Desktop)
  • Backside Padding: 10vw (Telephone & Pill), 5vw (Desktop)
  • Left Padding: 2vw (Telephone & Pill), 20vw (Desktop)
  • Proper Padding: 2vw (Telephone & Pill), 20vw (Desktop)

mobile services

Field Shadow

We’re the use of a delicate field shadow too.

  • Field Shadow Blur Energy: 50px
  • Shadow Colour: rgba(0,0,0,0.07)

mobile services

Customized CSS

Remaining however now not least, position each columns subsequent to one another via including a unmarried CSS code line to the principle part within the complicated tab.

show: flex;

mobile services

Upload Blurb Module to Column 1

Choose Icon

We will now get started including modules! The one module we want in column 1 is a Blurb Module. Choose an icon of your selection.

mobile services

Gradient Background

Then, upload a gradient background.

  • Colour 1: #7b28ef
  • Colour 2: #29b6e5
  • Gradient Course: 142deg

mobile services

Icon Settings

Regulate the icon settings subsequent.

  • Icon Colour: #ffffff
  • Icon Placement: Best
  • Use Icon Font Measurement: Sure
  • Icon Font Measurement: 5vw (Telephone & Pill), 4vw (Desktop)

mobile services

Sizing

And alter across the sizing settings.

  • Width: 48% (Telephone & Pill), 78% (Desktop)

mobile services

Spacing

We’re additionally including some customized margin and padding values to optimize the design throughout all display screen sizes.

  • Best Margin: 2vw (Telephone)
  • Best Padding: 8.5vw (Telephone), 9vw (Pill), 6vw (Desktop)
  • Backside Padding: 3vw (Telephone), 5vw (Pill), 4vw (Desktop)

mobile services

Border

Flip the module right into a circle subsequent via including ‘100vw’ to each and every one of the vital corners within the border settings.

mobile services

Field Shadow

We’re including a field shadow too.

  • Field Shadow Vertical Place: 10px
  • Field Shadow Unfold Energy: 5px
  • Shadow Colour: rgba(2,185,252,0.35)

mobile services

Upload Textual content Module #1 to Column 2

Upload H3 Content material

Directly to the second one column! The primary module we want there’s a name Textual content Module. Upload some H3 content material.

mobile services

H3 Textual content Settings

Then, pass to the design tab and alter the H3 textual content settings.

  • Heading 3 Font: Poppins
  • Heading 3 Textual content Measurement: 4vw (Telephone), 3vw (Pill), 2vw (Desktop)

mobile services

Spacing

Upload some customized spacing values subsequent.

  • Best Margin: 0vw (Telephone), 3vw (Pill & Desktop)
  • Left Margin: -20vw (Telephone & Pill), 0vw (Desktop)
  • Proper Margin: 0vw
  • Backside Padding: 2vw (Telephone & Pill), 1vw (Desktop)
  • Left Padding: 5vw (Telephone & Pill), 2vw (Desktop)

mobile services

Border

Along side a left border.

  • Left Border Width: 5px
  • Left Border Colour: #f4f4f4
  • Left Border Taste: Double

mobile services

Upload Divider Module to Column 2

Display Divider

The second one module we want is a Divider Module. Make certain the ‘Display Divider’ choice is enabled.

  • Display Divider: Sure

mobile services

Colour

Then, pass to the design tab and alter the divider colour.

  • Colour: #f4f4f4

mobile services

Types

Alternate the divider taste within the kinds settings subsequent.

  • Divider Taste: Double

mobile services

Sizing

Proceed via enhancing the other choices within the sizing settings.

  • Divider Weight: 5px
  • Peak: 0px

mobile services

Spacing

And mess around with the spacing values too.

  • Left Margin: -20vw (Telephone & Pill), 0vw (Desktop)

mobile services

Upload Textual content Module #2 to Column 2

Upload Content material

The following module we want in the second one column is any other Textual content Module. Upload some frame content material of selection.

mobile services

Textual content Settings

Then, pass to the design tab and alter the textual content settings.

  • Textual content Measurement: 2vw (Telephone), 1.7vw (Pill), 0.8vw (Desktop)
  • Textual content Orientation: Left

mobile services

Spacing

Mess around with the spacing values as smartly.

  • Best Margin: 0vw
  • Left Margin: -20vw (Telephone & Pill), 0vw (Desktop)
  • Proper Margin: 0vw
  • Best Padding: 3vw (Telephone & Pill), 2vw (Desktop)
  • Left Padding: 5vw (Telephone & Pill), 2vw (Desktop)

mobile services

Border

And upload a left border.

  • Left Border Width: 5px
  • Left Border Colour: #f4f4f4
  • Left Border Taste: Double

mobile services

Upload Button Module to Column 2

Upload Replica

The following and final module we want in the second one column is a Button Module. Upload some reproduction.

mobile services

Button Settings

Then, pass to the design tab and alter the button settings.

  • Use Customized Types for Button: Sure
  • Button Textual content Measurement: 2.5vw (Telephone), 2vw (Pill), 1vw (Desktop)
  • Button Textual content Colour: #4f77e8
  • Button Border Width: 1px
  • Button Border Colour: #4f77e8

mobile services

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

mobile services

Spacing

Regulate the spacing values as smartly.

  • Best Margin: 4vw (Telephone & Pill), 2vw (Desktop)
  • Left Margin: -20vw (Telephone & Pill), 0vw (Desktop)

mobile services

Clone Row Two times

Now that we’re completed enhancing the row and all of its modules, we will be able to clone it two instances.

mobile services

Alternate Icons

Remember to trade the icons for each Blurb Modules.

mobile services

Alternate Gradient Backgrounds

Regulate the gradient backgrounds as smartly.

  • Colour 1: #ff2885
  • Colour 2: #d6ac24

mobile services

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

mobile services

Alternate Field Shadow Colours

Fit the field shadow colour with the brand new gradient background.

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

mobile services

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

mobile services

Alternate Button Border & Textual content Colours

And entire the design via converting the button border and textual content colours.

  • Button Textual content Colour: #e96c54
  • Button Border Colour: #e96c54

mobile services

  • Button Textual content Colour: #4dcb93
  • Button Border Colour: #4dcb93

mobile services

Obtain The Cellular Products and services Sections for FREE

To put your palms at the loose cellular services and products sections, you’re going to first wish to obtain them the use of the button beneath. To realize get admission to to the obtain it is important to subscribe to our Divi Day by day e mail checklist via the use of the shape beneath. As a brand new subscriber, you’re going to obtain much more Divi goodness and a loose Divi Format pack each Monday! Should you’re already at the checklist, merely input your e mail cope with beneath and click on obtain. You’ll now not be “resubscribed” or obtain additional emails.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !necessary; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:sooner than { border-top-color: #ffffff !necessary; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:sooner than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:sooner than { border-top-color: clear !necessary; border-left-color: #ffffff !necessary; }
@media best display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:sooner than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:sooner than { border-top-color: #ffffff !necessary; border-left-color: clear !necessary; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { colour: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:sooner than { background: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !necessary } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .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 robust { 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 robust, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !necessary;}

Download For Free

Obtain For Loose

Sign up for the Divi Newlsetter and we will be able to e mail you a replica of without equal Divi Touchdown Web page Format Pack, plus lots of different wonderful and loose Divi sources, guidelines and tips. Apply alongside and you’re going to be a Divi grasp very quickly. In case you are already subscribed merely sort to your e mail cope with beneath and click on obtain to get admission to the format pack.

You’ve got effectively subscribed. Please test your e mail cope with to substantiate your subscription and get get admission to to loose weekly Divi format packs!

Preview

Now that we’ve long past via all of the steps, let’s take a last have a look at the cellular consequence of each examples.

Instance #1

mobile services

Instance #2

mobile services

Ultimate Ideas

On this put up, we’ve proven you two inventive techniques on find out how to exhibit services and products on cellular gadgets the use of Divi’s integrated choices best. We are hoping this mobile-first method will encourage you to get inventive as smartly. When you’ve got any questions or ideas, remember to depart a remark within the remark phase beneath!

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

WordPress Web Design

[ continue ]