For this week’s Divi UI Challenge we bring you a Phone App Promo Section. We utilised some (very simple) image/graphic-editing tools for this tutorial, and, as usual, we pulled this one together using mainly the standard Divi Builder with just a handful of minor CSS tweaks.

You can follow along our step-by-step guide below or jump on over to our YouTube page for the video tutorial.

Here’s what we’ll be building today…

Ok, Let’s go! Firstly from your Dashboard homepage in the top function bar select +New and Page

Give your page a title (App Landing Tile) and in the far right function column under Template select Blank Page (this removes the footer and menu from the page which makes it a bit easier to design when previewing back and forth).

Now click on Use the Divi Builder.

 

Today we’re going to be working with the Visual Builder again, so click on the Visual Builder Icon.

This wil bring up an ’empty’ section that looks something like this.

Firstly we’re going to add our background color in, so click on the Section Settings Icon in the top left corner.

Scroll down to Background Color and select/insert your chosen color (Light Grey, #f7f7f7). Save & Exit by pressing the Green Tick in the bottom right.

Now click on the Green + Icon in the centre to Add a Row, and we’re going to choose a half/half row.

This will automatically (in the Visual Builder) bring up the Module Options for the Left Hand Module  Exit out of this for now as we’ll come back to this module later. Do this by clicking on the red X.

 

Click on Row Settings.

And under Design Settings

Select Upload for Background Image and select your image from the Media Library (or upload something new to your library).

Now, our image is something we have (very very simply) created in Affinity Designer (similar to Adobe Illustrator). It is essentially a ‘slice’ shape with a gradient fill that we have then exported as a .svg image file. .svg files are typically smaller files and keep things sharp and crisp. You can also export as a .png or .jpeg file if you’d prefer. To upload .svg files to WordPress you will need to install a plugin to allow. Here’s our image below.

WARNING: There is a good reason WordPress doesn’t allow .svg file uploads by default. The basic reason is that .svg files can include executable code. This means that if someone else was to upload an .svg file to your site by a form for example, they could potentially be uploading malicious code. So if you do install a plugin that lets you upload .svg, make sure you disabled it once you’ve uploaded your file, Just to be safe.

Save & Exit

Now this will come up with something like this.

So to fix, click back on Row Settings.

And under CSS Settings

Scroll down to Main Element and insert

background-size: cover;

Save & Exit

Should be looking something like this.

Now in the Right Hand Module of our Row we’re going to add a Call to Action.

So click on the + Icon in the right hand module and select Call to Action

Under the Call to Action – General Settings, fill in as follows.

Title:  Lorem ipsum dolor sit amet (from lorem2.com)

Button URL: #

URL Opens: In the Same Window

Button Text: Visit App Store

Use Background Color: Toggle to NO

Text Color: Light

Text Orientation: Left

Content: Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. (from lorem2.com)

Now, over in Design Settings.

Fill in as follows.

Max Width: Leave blank

Header Font: Abel

Header Font Size: 62px

Header Text Color: Leave as is

Header Letter Spacing: 0px

Header Line Height: 1.1em

Body Font: Arimo

Body Font Size: 18px

Body Text Color: Leave as is

Body Letter Spacing: 0px

Body Line Height: 1.7em

Scroll down to….

Use Custom Styles for Button: Toggle to YES

Button Text Size:  20px

Button Text Color: #e863a0 (we used one of the deep pink colors from our gradient ‘slice’ background’)

Buton Background Color: White

Button Border Width: Leave as is (2)

Button Border Color: White

Button Border Radius: Toggle right up (to 100px) -this gives the rounded edges on the button.

Button Letter Spacing: 1px

Button Font: Abel

Add Button Icon: Default

Button Icon: we selected the icon below

Now, over on CSS Settings

We’re going to add some box-shadow. Now if you’ve followed us for a while, you’ll know we’re a fan of the good ‘ol Box Shadow…. and also a fan of using a CSS Generator to help us achieve it. Because sometimes….. ‘nobody got time for dat’

So, pop on over to cssmatic.com and input the following.

Then Copy the text generated in the Box to the left and Paste it back in the CSS Settings under Promo Button. 

Save & Exit

Now, pop back into Row Settings

And under Design Settings

Change the Background Color to White (this will give the whole (row) box a more defined outline against our grey background)

And under CSS

We’re going to Paste the same Shadow-Box generated code in the Main Element Section (just add under our previously added ‘background size’ code)

Save & Exit

And we should be looking something like this.

Looking good!

Next, we’re going to add our image to the Left Hand Module. So, click on the + Icon to add a New Module.

Select Image

And click on Upload Next to Image URL. Here you can select your image from your Media Library or upload a new file.

Obviously, our image is a nicely mocked-up phone app. We produced this using a couple of free resources we found. We can’t include the resources in the download because of licensing, but you can certainly check them out and choose to use them yourself.

Free Graphic Resources used in Tutorial:

• https://ui8.net/products/ios-photography-ui

• https://dribbble.com/shots/3023207-Free-iPhone-Frontal-Mockup-PSD

Once, you’ve uploaded your image scroll down in the General Settings to Image Alignment and change to Centre. 

Then pop over to Design Settings

And set the Image Max Width to 320px.

Save & Exit

And the last thing we want to do is re-format the padding on our Call to Action. 

So back into Row Settings

And over in Design Settings

Scroll down to Column 2 Custom Padding and insert the following

Top: 160px Right: 60px Bottom: (leave blank) Left: (leave blank) 

Now, one of the great features of the Divi Builder is the easy ability to see how things look across the different screen sizes, and apply different padding/margins across these sizes. Because if you now click on this little symbol to the right of your Custom Padding boxes

You’ll be able to see (in the Visual Builder) how it will look across the varying screens – and in this case you can see that our padding does not translate well.

So, click on the Tablet tab and input 80px across all fields

And on the Smartphone tab input 40px across all fields.

Should be looking pretty good!

Amazing! Well done everyone for following along! Another week down! Let us know if there’s anything you’d like us to tackle in upcoming UI Challenges in the comments section below.

The Download

Want to add this to your Divi Library? Here’s the download for the section. Remember you’ll need to unzip the file to get the uploadable .json file.

Note that we have removed the iPhone image from the download as although it has been compiled using free resources, the licensing on these resources is unclear. We have linked to the original sources in the tutorial should you want to compile them yourself.

Download Now