Divi UI Challenge #6 – Phone App Promo
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…

Video Tutorial
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:
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 NowGet 1 Free Divi Layout Pack, Child Theme or Plugin
In your Inbox. Once a month. Every month.
