elizabeth verar how to copy a landing page using divi

136
How to Copy a Landing Page Using Divi

Upload: epverar

Post on 12-Jan-2017

41 views

Category:

Education


0 download

TRANSCRIPT

Page 1: Elizabeth verar how to copy a landing page using divi

How to Copy a Landing

Page Using Divi

Page 2: Elizabeth verar how to copy a landing page using divi

Why is there a need to

copy a Landing Page?

Page 3: Elizabeth verar how to copy a landing page using divi

Some people would like to

duplicate the Landing Page

of another website and

recreate their own. This is

one way of re-defining and

re-designing your own

website.

Page 4: Elizabeth verar how to copy a landing page using divi

On your WP Dashboard,

Add New Pages

Page 5: Elizabeth verar how to copy a landing page using divi

Type the name/title of your

New Page, then click

Publish

Page 6: Elizabeth verar how to copy a landing page using divi

Click the link to view the

New Page

Page 7: Elizabeth verar how to copy a landing page using divi

This is how it will look

like on a New Page

Page 8: Elizabeth verar how to copy a landing page using divi

When creating a landing

page, you have to plan

and determine how many

sections you need for the

layout

Page 9: Elizabeth verar how to copy a landing page using divi

Click Edit Page to go

back to Dashboard

Page 10: Elizabeth verar how to copy a landing page using divi

Select Blank

Page for the

Template,

click Update

to save

changes

Page 11: Elizabeth verar how to copy a landing page using divi

Here are the steps to

remove sidebars from your

page

Page 12: Elizabeth verar how to copy a landing page using divi

These elements on the right

side are called sidebar

Page 13: Elizabeth verar how to copy a landing page using divi

On the dashboard, go to

Widgets on Appearance

Page 14: Elizabeth verar how to copy a landing page using divi

Use the dropdown key and

click delete

Page 15: Elizabeth verar how to copy a landing page using divi

Elements of the sidebar has

been deleted from the

dashboard

Page 16: Elizabeth verar how to copy a landing page using divi
Page 17: Elizabeth verar how to copy a landing page using divi

Sidebar elements are now

gone from the site page

Page 18: Elizabeth verar how to copy a landing page using divi

Steps to edit Header

elements

Page 19: Elizabeth verar how to copy a landing page using divi

Go to Menus on Appearance

Page 20: Elizabeth verar how to copy a landing page using divi

Click on Create a new Menu

Page 21: Elizabeth verar how to copy a landing page using divi

Assign a name e.g. Main

Menu, then click Create

Menu

Page 22: Elizabeth verar how to copy a landing page using divi

Put a check mark on the

items you want to include and

click Add to Menu

Page 23: Elizabeth verar how to copy a landing page using divi

Items on the Menu Structure

shows the elements you

added on the Main Menu

Page 24: Elizabeth verar how to copy a landing page using divi

Put a check mark on the

Primary Menu then Click on

Save Menu

Page 25: Elizabeth verar how to copy a landing page using divi

Click on Manage with Live

Preview

Page 26: Elizabeth verar how to copy a landing page using divi

These are the elements

added to the Main Menu

Page 27: Elizabeth verar how to copy a landing page using divi

Go back to Dashboard and

click All Pages. Click Edit

on Sample Conversion Lab

Page 28: Elizabeth verar how to copy a landing page using divi

This is where you edit

individual pages

Page 29: Elizabeth verar how to copy a landing page using divi

In the meantime, go to the

site which you want to copy

Page 30: Elizabeth verar how to copy a landing page using divi

This is the image of the

page to be copied

Page 31: Elizabeth verar how to copy a landing page using divi

Copy

image

and

save in

another

folder

Page 32: Elizabeth verar how to copy a landing page using divi

This is the copied image

saved in a different folder

Page 33: Elizabeth verar how to copy a landing page using divi

Go back to Edit Page and

click on Use the Divi

Builder

Page 34: Elizabeth verar how to copy a landing page using divi
Page 35: Elizabeth verar how to copy a landing page using divi

This is the image of the Divi

Builder

Page 36: Elizabeth verar how to copy a landing page using divi

Click where the arrow is

pointed to include background

image

Page 37: Elizabeth verar how to copy a landing page using divi

Select a Background Color,

then Save

Page 38: Elizabeth verar how to copy a landing page using divi

Click Insert Column

Page 39: Elizabeth verar how to copy a landing page using divi

Select ½ and ½

Page 40: Elizabeth verar how to copy a landing page using divi

Click the Insert Module(s) on

the left side

Page 41: Elizabeth verar how to copy a landing page using divi

Select Image

Page 42: Elizabeth verar how to copy a landing page using divi

Select a Background Image

Page 43: Elizabeth verar how to copy a landing page using divi

Supply a Title

and an Alt

Text name.

Click Set as

Background

Page 44: Elizabeth verar how to copy a landing page using divi

This is the uploaded image

Page 45: Elizabeth verar how to copy a landing page using divi

Click Insert Module on the

Right

Page 46: Elizabeth verar how to copy a landing page using divi

Choose Text

Page 47: Elizabeth verar how to copy a landing page using divi

Select Light for Text Color

Page 48: Elizabeth verar how to copy a landing page using divi

Highlight the text and click

on Link above text to

remove the Link below

Page 49: Elizabeth verar how to copy a landing page using divi

Click Save and Exit

Page 50: Elizabeth verar how to copy a landing page using divi

Click on Dropdown to select

Font Size

Page 51: Elizabeth verar how to copy a landing page using divi

Click Update then view the

page

Page 52: Elizabeth verar how to copy a landing page using divi

On the Advanced Design

Setting, adjust font size and

header font style

Page 53: Elizabeth verar how to copy a landing page using divi

Adjust Top Margin using

Custom Padding, click key to

preview, then exit

Preview

Page 54: Elizabeth verar how to copy a landing page using divi

This is the edited Header text

with the image

Page 55: Elizabeth verar how to copy a landing page using divi

Click Insert Module to create a

Button

Page 56: Elizabeth verar how to copy a landing page using divi

Click Button

Page 57: Elizabeth verar how to copy a landing page using divi

Select General Settings to

makes changes on url settings,

Text for Button, Text color

Page 58: Elizabeth verar how to copy a landing page using divi

Use Advanced Design Settings to

navigates changes for the button

Page 59: Elizabeth verar how to copy a landing page using divi

Click where the arrow is

pointed to make changes on

the middle module

Page 60: Elizabeth verar how to copy a landing page using divi

Use General Settings to make

changes on the Middle Module

Page 61: Elizabeth verar how to copy a landing page using divi

Click on Standard Section to

create another section of

modules

Page 62: Elizabeth verar how to copy a landing page using divi

Select your choice of section

or module

Page 63: Elizabeth verar how to copy a landing page using divi

For this section, select the

single horizontal section

Page 64: Elizabeth verar how to copy a landing page using divi

Click on the (+) sign or

anywhere on the line

Page 65: Elizabeth verar how to copy a landing page using divi

Select Text

Page 66: Elizabeth verar how to copy a landing page using divi

Use General Settings to edit Text

Color, Orientation and Content

Page 67: Elizabeth verar how to copy a landing page using divi

Click Save

Page 68: Elizabeth verar how to copy a landing page using divi

Use Advanced Design Settings

to fix Header Font Size, Text

Color, Text Background, etc

Page 69: Elizabeth verar how to copy a landing page using divi

Remember to

always click

Update in

order to keep

changes in

your work

Page 70: Elizabeth verar how to copy a landing page using divi

This is the final result of my

first section

Page 71: Elizabeth verar how to copy a landing page using divi

This is the next section to be

copied

Page 72: Elizabeth verar how to copy a landing page using divi

Click to create another

Section

Page 73: Elizabeth verar how to copy a landing page using divi

Select the 3-column

Page 74: Elizabeth verar how to copy a landing page using divi

This is the 3-column

section

Page 75: Elizabeth verar how to copy a landing page using divi

Click one module at a time

Page 76: Elizabeth verar how to copy a landing page using divi

Click on Image

Page 77: Elizabeth verar how to copy a landing page using divi

Make sure that the

images you are going to

copy are already copied

into a folder

Page 78: Elizabeth verar how to copy a landing page using divi

Click Upload an image and

select from your folder

Page 79: Elizabeth verar how to copy a landing page using divi

Images have been uploaded

Page 80: Elizabeth verar how to copy a landing page using divi

These are the images

uploaded

Page 81: Elizabeth verar how to copy a landing page using divi

Click Insert Module to add

text on each of them

Page 82: Elizabeth verar how to copy a landing page using divi

Click on Text

Page 83: Elizabeth verar how to copy a landing page using divi

This is how it looks like

Page 84: Elizabeth verar how to copy a landing page using divi

Click where the arrow is

pointed to add Text

Page 85: Elizabeth verar how to copy a landing page using divi

Use General Settings to fix Text

Color, Orientation, and Content

Page 86: Elizabeth verar how to copy a landing page using divi

Click in the middle to preview and hit

Save and Exit

Page 87: Elizabeth verar how to copy a landing page using divi

Go back to the Edit Page

and click Update to save

your work. Then open page

on a separate Tab to

preview

Page 88: Elizabeth verar how to copy a landing page using divi

From this point, Click on

Enable Visual Builder to make

adjustments on the settings

Page 89: Elizabeth verar how to copy a landing page using divi

Divi Visual Builder allows

easy editing of your work

Page 90: Elizabeth verar how to copy a landing page using divi

Click on where the arrows are

pointed to make changes on

margins, text fonts, text colors, etc.

then click Save

Page 91: Elizabeth verar how to copy a landing page using divi

Click on the image to adjust

position to the center

Page 92: Elizabeth verar how to copy a landing page using divi

The Image Settings Pop-up

will help you edit your image

Page 93: Elizabeth verar how to copy a landing page using divi

This is the final copied section

Page 94: Elizabeth verar how to copy a landing page using divi

Next section to be copied

Page 95: Elizabeth verar how to copy a landing page using divi

Once you are done editing,

click on the Exit Visual Builder

Page 96: Elizabeth verar how to copy a landing page using divi

Again, click on Standard Section

to create another module

Page 97: Elizabeth verar how to copy a landing page using divi

Select the two columns

Page 98: Elizabeth verar how to copy a landing page using divi

Click on the left column to

insert image

Page 99: Elizabeth verar how to copy a landing page using divi

Select Image

Page 100: Elizabeth verar how to copy a landing page using divi

In the General Settings,

upload an image

Page 101: Elizabeth verar how to copy a landing page using divi

Make sure that your

image for the section has

already been uploaded

Page 102: Elizabeth verar how to copy a landing page using divi

Click on the next module to

insert text

Page 103: Elizabeth verar how to copy a landing page using divi

Click Text

Page 104: Elizabeth verar how to copy a landing page using divi

Click Update to save

your work, then open

page to a new tab

Page 105: Elizabeth verar how to copy a landing page using divi

Enable the Visual Builder

to edit minor things on

the page

Page 106: Elizabeth verar how to copy a landing page using divi

Another way to add section

or module is to click (+) sign

Page 107: Elizabeth verar how to copy a landing page using divi

This is the final section

copied

Page 108: Elizabeth verar how to copy a landing page using divi

This is another section to be

copied

Page 109: Elizabeth verar how to copy a landing page using divi

Click Regular

Page 110: Elizabeth verar how to copy a landing page using divi

Use (+) sign below to add

another section. Select 3

column section

Page 111: Elizabeth verar how to copy a landing page using divi

Select Image

Page 112: Elizabeth verar how to copy a landing page using divi

Click Upload Image

and Save

Page 113: Elizabeth verar how to copy a landing page using divi

Click on the (+) signs one at

a time to upload your images

Page 114: Elizabeth verar how to copy a landing page using divi

These are the uploaded

images

Page 115: Elizabeth verar how to copy a landing page using divi

Click Regular

Page 116: Elizabeth verar how to copy a landing page using divi

Select Horizontal Line

Page 117: Elizabeth verar how to copy a landing page using divi

Select Text

Page 118: Elizabeth verar how to copy a landing page using divi

Type your text below the

Content, Save

Page 119: Elizabeth verar how to copy a landing page using divi

Click General to fix Text Settings

such as color, orientation, etc.

save

Page 120: Elizabeth verar how to copy a landing page using divi

These were done on the

Visual Builder

Page 121: Elizabeth verar how to copy a landing page using divi

This is the final section

Page 122: Elizabeth verar how to copy a landing page using divi

Click on the blue mark below

to add another section

Page 123: Elizabeth verar how to copy a landing page using divi

Click on Regular to

Insert Section

Page 124: Elizabeth verar how to copy a landing page using divi

Click on the single

horizontal line

Page 125: Elizabeth verar how to copy a landing page using divi

Click on the gear of the

Blue Section

Page 126: Elizabeth verar how to copy a landing page using divi

Work on the Background Color,

image, etc. on the General Section

Page 127: Elizabeth verar how to copy a landing page using divi

Click on the Gray (+)

below then select Text

Page 128: Elizabeth verar how to copy a landing page using divi

Type your content as

shown below and Save

Page 129: Elizabeth verar how to copy a landing page using divi

Use General to manipulate text

font, orientation and content

Page 130: Elizabeth verar how to copy a landing page using divi

Click on the green (+) below

and select the horizontal

section

Page 131: Elizabeth verar how to copy a landing page using divi

Select the Button

Page 132: Elizabeth verar how to copy a landing page using divi

Use the General Section to

manipulate your Button Text,

alignment, color, etc.

Page 133: Elizabeth verar how to copy a landing page using divi

On Design Section, fix the button

background color, text, size, etc

Page 134: Elizabeth verar how to copy a landing page using divi

Click Save

Page 135: Elizabeth verar how to copy a landing page using divi

This is what I re-created from

a different website

Page 136: Elizabeth verar how to copy a landing page using divi

References: http://conversionlab.no/ http://workfromhomebeawesome.com/lesson9/