Oldal kiválasztása

How to Design a Power Page with Divi Theme in 17 Minutes?

Szerző: | divi

So you have written a 10K+ words long article, a.k.a. power page?  Next challenge is to get people to read through your content. If you have not written your power page yet, follow this guide anyway to learn how to create the perfect design for it.

When you see how the end result looks like, that may also inspire you to start writing.

By the end of this article, you’ll be able to create a stunning design for your power page with the Divi Theme, that your readers will fall in love with.

With the „create-copy-paste” method you’ll only have to do this once and use this for all you power pages

Let’s get right to it:

What’s a “Power Page”

Power Page is a term – invented by Backlinko.com – for a super detailed article. Backlinko.com was founded by Brian Dean, an internationally recognized SEO expert. If you want to look at the best example, here’s my favorite power page design from Backlinko.com: The Definitive Guide To SEO In 2019

Contents

STEP #1

How to install the Divi Theme &
How to create a WordPress post. 
Skip if you already know this.

STEP #2

How to design fullscreen
chapter headers

STEP #3

How to design the
„contents” part?

.

STEP #4

How to optimize text for readability and how to add images to the text?

STEP #5

How to save & export your power page layout to be able to reuse it with your next article?

.

STEP #1

Basics: How to install the Divi Theme & How to create a WordPress post

Skip this if you already know it, and go to step#2

How to get the Divi Theme?

Divi is one of the most popular premium wp themes, that comes with a visual page builder. You can buy Divi at elegantthemes.com. Once bought, Divi theme can be used on unlimited domains. Yearly access and updates are $89, lifetime access and lifetime updates for $249.

[affiliate links, all open in new tab]

How to upload the Divi Theme?

After purchase, log in to elegantthemes.com members area, download Divi (Divi.zip: 6,5 M) and copy your API key. (To copy Divi API key, go to Account – Your API Key)

Divi theme

 In your WordPress dashboard, go to:

  1. Appearance > Themes > Add new > Upload theme
  2. Browse and find divi.zip on your computer and hit: Install theme
  3. Go to Appearance > Themes, hover over Divi Theme’s thumbnail and click Activate

Once activated a new menu item will appear in your wp dashboard: Divi

Add divi theme

How to activate Divi Theme’s API key?

  1. Hover over „Divi” and select: „Theme Options”
  2. Go to:  Updates and type your eleganthemes.com’s username and paste API key
  3. Click: Save changes.

That’s it, your Divi Theme is up and running, and with API activated you’ll get the all the feature updates (and there’s a lot of them)

divi api

 

How to Create a „Power Page Ready” WordPress Post?

Login to your WordPress dashboard, and on the of your page hover over “new” and select post.

Enter your power page’s title, and also type a short and sweet URL.

Click the „Use Divi Builder” button and some other options will show up in your right sidebar, titled: „Divi Page Settings”

  • Page Layout: Fullwidth
  • Dot Navigation:  Off
  • Hide Nav Before Scroll: Default
  • Post Title: Hide

divi post options

These options will give you a clean page and will remove all the WordPress default settings.
(Such as post title, post meta, and sidebar)

As long as you are designing your article, publish the post as private: In the right sidebar, you’ll see a box titled: „Publish”, here in the „visibility” section choose „private” and hit publish.

This way no one else can see your post, but you.

(That „private:” label in the front of your post’s title will disappear when you set visibility to „public”)

Now we are ready to design that power page.

STEP #2

How to design fullscreen chapter headers?

The chapter headers divide your content into consumable chunks and help your reader to navigate between chapters.

The main header starts your article. We have the post’s title, the author’s name in it, and also a nice image or icon, to make it memorable.

Secondary headers, one for each chapter. These ones will also function as jump links, people can jump right to them from the „contents” block.  We will design one header, and duplicate as many times as needed. We will just change the background color and the main icon.

Let’s see how:

How to design the main header, that starts your power page?

Just a heads up: Where are we now?

Divi theme is installed and set, WordPress post is created, default wp-options are removed. What we have now is a nice clean white page.

Here’s how a power page design lays out:

  1. Main header
  2. Contents part
  3. Chapter #1 header + Chapter #1 text
  4. Chapter #2 header + Chapter #2 text
  5. Chapter #X header + Chapter #X text

So in your wp dashboard go to „Posts” and in post editor click: „Use visual builder”

divi visual builder

(Divi theme’s visual builder lets you create your content on the front end, in real time)

Divi theme builder’s logic: section (blue), row (green), module (gray)

Divi page builder divides your content into:

  • sections (blue),
  • within sections you have rows (green) that can have multiple columns, and within rows you have
  • modules (gray)

for any function or design element you’d like to see: text, image, video, audio, countdown timer, custom code, you name it.

Divi theme builder's logic: section (blue), row (green), module (gray)

When visual mode loads, choose: „Design from scratch”

How to design your power page’s title?

A new section (blue) is already there, so insert a new one column row (green), and then insert a module: „post title”. This will – surprisingly – display the title of your post.

The first thing to do is set a background color for the section.

But first, power page color rules:

  • Each chapter header need a different background color – to make the readers visually understand which part of your article they are reading.
  • Background colors must be pastel colors, not too bright, also not too pale.
  • Chapter header’s background colors must harmonize with each other. (Unless your power page will look like as if your neighbor’s nephew designed it exchange for Big Mac Menu.)

How to choose background colors?

The easiest way to choose the right background colors is to head over to //coolors.co/ and hit „start the generator, it’s free” button.

color palette

This will give you a nice color palette with matching colors. Hit „generate” as many times as you want, until you see the color palette that you like.

Copy colors’ hex. codes.

Back to your post editor, in Divi Theme’s visual mode. Hover over the section (blue) and hit the „gear” icon to enter settings.

Section settings > content > Background > Choose background color: paste your color’s hex code. (with or without the hashtag #, it matters not)

divi section bacgkround

When background color is set, let’s format the post title:

Hover over the post title module (grey) and click the gear icon to go to module settings:
These are the setting we use at divicool.com:
Post title settings > Content > Elements:

  • Show Title: Yes
  • Show Meta: Yes
  • Show Author: Yes
  • Show Date: No
  • Show Post Categories: Yes
  • Show Comments Count: No
  • Show Featured Image: No

divi post title elements

Save your work by clicking the green tick icon.

And also save the page: in the bottom of the page, click the purple circle with the three horizontal dots in it, then click the „save” icon.

With this done, format the title and meta text:

Post title settings > Design > Title text

  • Title font-weight: Ultra Bold
  • Title font style: TT (uppercase)
  • Title text alignment: center
  • Title text color: #ffffff (white)
  • Title font size: 45 px (tablet: 30px, phone: 25px)
  • Title line height: 1.3em
  • Title text shadow: The first one in the block
    (soft shadow – but that’s just optional – if you like text shadows)

Still in Post title settings > Design > Title text

  • Meta elements font style: TT (uppercase)
  • Meta elements text alignment: center
  • Meta text color: #00000 (black)

divi post title design

How to design your power page’s intro text?

The intro text goes to another row (green) this time with two columns, one for the text, the other for the image.

Hover over your existing row (with the post title module in it) and a green plus icon will appear, click on it to add a new row (green)

Choose a two column (1/2 – 1 /2) layout.
Into the left column insert a text module.

Now borrow some sample text from //www.lipsum.com/

This Lorem Ipsum stuff is just a simple dummy text of the printing and typesetting industry. Copy a few paragraphs and paste it into your text module editor – but switch to HTML mode to make sure there’s no extra HTML stuff in the paragraph.

Follow these steps to be able to set the right formatting of text elements:

  • Select a line, set it to Heading 2
    (makes sure to press enter at the end of the line before, unless it will set your whole text to H2)
  • Select another line, and set it to heading 3
  • Select a few more lines and make them an unordered list.
  • Select a few more lines and make them an ordered list.
  • Select a word, and make it a link (chain icon)

We have everything we need, now let’s format those elements for good readability
In the visual builder, hover over text module and click the gear icon to enter:

Text module settings > Design

H2 settings

  • H2 font-weight: Ultra Bold
  • H2 text size: 32px
  • H2 line-height: 1.2em

H3 settings

  • H3 font-weight: Ultra Bold
  • H3 text size: 25px
  • H3 line-height: 1.3em

Text settings

  • Font size: 19px
  • Line height: 1.9em

Unordered list settings
Text module settings > Design > Text > click on the unordered list icon:

  • Unordered list line-height: 1.7em

Ordered list settings
Text module settings > Design > Text > click on the numbered list icon:

  • Numbered list font-weight: Semibold
  • Numbered list line-height: 1.9em

Link settings:
Text module settings > Design > Text > click on the chain icon

  • Link font style: U (underline)
  • Link underline color: #ffffff (white)
  • Link text color: #ffffff (white)

divi text module

When all these settings are done, go to „advanced” tab > CSS id and classes >
CSS id > type: mytext

This will be important later. Because headings’ padding cannot be set, only line height. We will type a few lines of custom CSS when all text formatting is done.

Save your work by clicking the green tick icon.

And also save the page: in the bottom of the page, click the purple circle with the three horizontal dots in it, then click the „save” icon.

divi save the page

How to insert an image or an icon to the main header?

There are two types of images, you are going to need to design your power page:

  1. Images for readability, such as huge icons in the header section.
  2. Illustrative images (screenshots, photos etc) inserted into longer text sections.

Let’s start with images for readability.

Custom designing these icon-like images can be time-consuming, so here is how to get in done quickly:

Go to //www.flaticon.com/

Scroll down a bit and find: “Best packs of the month” and hit the browse button. It’s important to choose a pack, and not to search and download icon one by one. The icons in one pack are designed to harmonize with each other.

flaticon.com

If you, let’s say, have 6 chapters, you are going to need 7 icons, one for each chapter and one for the main header.

Click on a pack you like (There are 1K+ pages of icon packs, if you catch yourself being on the 5th page, you probably have overcomplicated it)

Click on an icon, and choose PNG

Download size:

  • 256 px for chapter header icons
  • 512 px for main header icon

(If you choose free download you must credit the author.)

When you are done, go to your WordPress dashboard, on the top of your page hover over NEW and select media. Upload icons all at once.

wordpress upload images

Go back to the visual builder, hover over the right column, and insert an image module
At the image section, click the gear icon to be able to browse your image from wp library
Your image will appear.

If you find it too big, go to:

Design > Sizing

  • Decrease image size and set module alignment to center.
  • Still in this „design” section, scroll down to find: „Animation” and select „Bounce”
  • This will give your image a bouncing effect on load, it’s a great way to make a strong first impression.

divi image sizing

How to design chapter headers?

A chapter header is very similar to the main header, the difference is, that it does not contain the post title, so it needs a larger sized heading 2.

Enable visual builder!

First scroll back to the text module we created in the main header section, right click on it then choose: „copy module”

divi copy a module, row, or section

In visual builder: add a new section, add a new row with two columns: 1/ 2 – 1/ 2

In the left column, hover over the grey plus icon, right click on it and choose „paste module”

In this text module options, increase the H2 size to 40 px, and make it uppercase (TT).

Hover over the section (blue) hit the gear icon to enter settings and at the background section define a solid color, that you copied before from your //coolors.co/ palette.

With this done, you can insert your icon (saved previously from //flaticon.com)

Add a new image module to the right column and enter its settings: click the gear icon to be able to browse your image from wp library.

  • In this „design” section, scroll down to find: „Animation” and select „Bounce”
  • Still, in the design section, find „sizing” and set image width to 70%

Then head over to advanced tab, choose CSS id and class, and type „Chapter-1″ into the CSS id field. This ID makes the in-page jump links able to jump right to this chapter.

If you need other chapter headers – of course, you do – just copy the whole section (hover over the section, right click, then choose: „copy section”)

divi section css id

Paste section where you want to see it, but keep these 3 rules in mind:

  • Don’t forget to change the CSS ID, to „chapter_2″ and so on.
  • Don’t forget to change the background color
  • Don’t forget to change the icon

STEP #3

How to design the „contents” part?

 We are going to design the contents part with icons. 

  • 1 big icon,
  • a short title, and
  • description will stand for each chapter. 

The ideal layout is two rows with three icons in each row.

These icons will also work as jump links, a reader clicks on one, and the content will scroll down to the chapter.

Divi theme has the so-called blurb module for this function.

Here’s how to do it:

How to add the contents title?

In visual editor add a new section, a new one-column row, insert a text module and type in: „contents”. That’s the title of the contents part.

Go to the ‘design’ tab:

  • Text font weight: ultra bold
  • Font size: 35px
  • Text orientation: center
  • Spacing > Custom padding: 30px top, 30px bottom

How to add the contents icons?

Insert another row (green) under the previous one, this time make it 3 columns. In the left column insert a blurb module. That’s a module that can have an image, a title, and a description.

divi blurb module

  • In the title field type: chapter 1
  • In the text field type a 3-4 lined text that sums up your chapters content, for e.g.: „How to install and activate Divi Theme”

Still under the content tab, find: „Image and icon” and browse an icon from your WordPress library. (Icons were previously downloaded from //flaticon.com and uploaded into your wp’s media lib.)

Our method is, to design one content block perfectly, then duplicate it. That’s what I like to call the „create-copy-paste method.”

Head over to design tab (still in blurb module options) and set these:

  • Title font-weight: ultra bold
  • Title font style: TT (uppercase)
  • Title text alignment: center
  • Title text size: 15px
  • Title letter-spacing: 2px
  • Body text alignment: center
  • Body text size: 16px;

When all is set, hover over the module, right-click, and select copy module. Then paste is to the other column, and so on, until all modules are in their space.

How to make contents icons jump links?

Enter blurb module’s options to find: „LINK”

Into title link URL and also into module link URL type: #chapter-1

divi blurb module linking

This will jump into chapter one. Type #chapter2 in the next blurb’s link field, and so on and so on..

Jump links in blurbs must be the same as the CSS ID’s in the chapter headers.

When you type the link in blurb modules, you must add a hashtag into the front: #chapter-1
When you type the link in chapters’ sections’ CSS ID field, you must NOT add a hashtag: chapter-1

 

STEP #4

How to optimize text for readability?

Where are we now?

Main header, chapter headers, the contents part are ready. Nothing left to create, but the text block. The parts between chapter headers.

Just a heads up: Here’s how a power page design lays out:
 

  • Main header – DONE
  • Contents part – DONE
  • Chapter #X header – DONE
  • Chapter #X text – READY TO GO.

How to add the main text module?

Under a chapter header, add a new section and a new one column row.

Scroll up a bit and copy the text module from a chapter header, then paste is here, in the new row.
Almost everything is already set, but we need bigger H2 headers, and fancier blockquote elements, and dark colored links.

So go to text module settings, design, heading text, and modify H2 to:

  • Font-size: 40px;
  • Font-style: normal (not uppercase)

Then go to the text content, select a few lines, and click the blockquote icon (bold quotes)

Go back to text module options, then text, then click the icon with the bold quotes:

  • Blockquote text-size: 26px;
  • Blockquote border-weght: 10px;
  • Blockquote border color: #000000 (black)

divi text design blockquote

Still, in the text module options:

select the link icon, and set the link color and the link underline color to #000000 (black)

Stay a bit longer here, in the text module settings, and scroll down to “admin label” to type something like this: chapter #1 text.

This comes handy when you are editing the post in the regular wp post editor: you will see which text element is which. 

How to make the text narrower?

Now the text is too wide, make it narrower for readability

divi row size

Hover over the row (green) that contains this text module, and click the gear icon to enter settings, go to:

  • Design > Sizing
  • Use custom with: YES
  • Set with, in percent (not in pixels) to 60%

How to add extra padding to headings?

Everything seems fine now, but we need to add some extra padding to heading 2 and 3. It can be done with some custom CSS.

At the bottom of the page, click the purple circle with the three horizontal dots in it. Then click the purple gear icon: go to advanced, then custom CSS, and type this:

#mytext h2,
#mytext h3
{
padding-top: 25px;
padding-bottom: 25px;
}

Save your work by clicking the green tick icon.

And also save the page: in the bottom of the page, click the purple circle with the three horizontal dots in it, then click the „save” icon.

How to add images to the text?

Divi theme’s visual editor is not the best solution to add images to larger texts.  For this, save your work and switch back to the default WordPress editor, but still use the Divi builder:

Find your text module, click the three horizontal lines to enter settings.

Switch the text editor to fullscreen mode. This will make the “add media” button disappear, but no worries, there is a keyboard shortcut to it: 

Press Alt + Shift + m to insert an image into your post.

Make sure that there is an image in your text for every second scroll – unless your text will look boring. 

 

STEP #5

How to export your power page layout to be able to reuse it with your next article?

One of the best things, that I like about the Divi Theme is that any elements can be saved to a library, exported to my computer, and reused.

So once you design your power page’s layout, you can reuse it anytime. Just set different backgound color, add other icon, and paste text.  All the format settings will stay the same.

You can reuse your design in the same wordress installation and also in an other Divi, under a different domain.

Here’s how to do it:

How to save and load layout to use it in the same WordPress for another post?

In your visual builder, on the bottom of the page, click on the purple circle, and hit the downward pointing arrow icon. (it’s on the left side)

Divi save layout

This saves the layout into your Divi library.

Enter a layout name, for e.g.: “PowerPageLayout” and hit save.

Next time you create a new post and switch to the visual builder, choose:

  • “Premade layout” then
  • Your saved layouts.

Divi load layout

Once you click on your saved layout, it loads within a few seconds, and all you have to do is paste your texts, change colors and icons. Formatting will remain the same.

How to export and import layout to use it in other WordPress installation?

In your visual builder, on the bottom of the page, click on the purple circle, and hit the upward /downward pointing arrows icon (it’s on the right side)

This exports your layout into your computer

Enter an export file name, for e.g.: “PowerPageLayoutExport” and hit Export Divi Builder Layout.

Export Divi Builder Layout

When this is done, go to any other WordPress dashboard that also has the Divi Theme installed, and:

  • Hover over Divi
  • Choose Divi Library
  • Hit Import/export, choose “import”
  • Browse your file and click: “Import Divi Builder Layouts”

Import Divi Builder Layouts

When the layout is imported, you can choose it as a premade layout next time you create a post.

About

About

the author

Hi, I am Norbert Erdélyi (pronounce: air-day-ee) the author of divicool.com. I am one of the most sought after online marketing experts in my country, Hungary.  I’ve been designing websites since 2001,  and have been using Divi since 2014. 

 If you got some value from my post, I’d appreciate a Facebook share.