elizabeth verar how to copy a landing page using divi

How to Copy a Landing

Page Using Divi

Why is there a need to

copy a Landing Page?

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.

On your WP Dashboard,

Add New Pages

Type the name/title of your

New Page, then click

Publish

Click the link to view the

New Page

This is how it will look

like on a New Page

When creating a landing

page, you have to plan

and determine how many

sections you need for the

layout

Click Edit Page to go

back to Dashboard

Select Blank

Page for the

Template,

click Update

to save

changes

Here are the steps to

remove sidebars from your

page

These elements on the right

side are called sidebar

On the dashboard, go to

Widgets on Appearance

Use the dropdown key and

click delete

Elements of the sidebar has

been deleted from the

dashboard

Sidebar elements are now

gone from the site page

Steps to edit Header

elements

Go to Menus on Appearance

Click on Create a new Menu

Assign a name e.g. Main

Menu, then click Create

Menu

Put a check mark on the

items you want to include and

click Add to Menu

Items on the Menu Structure

shows the elements you

added on the Main Menu

Put a check mark on the

Primary Menu then Click on

Save Menu

Click on Manage with Live

Preview

These are the elements

added to the Main Menu

Go back to Dashboard and

click All Pages. Click Edit

on Sample Conversion Lab

This is where you edit

individual pages

In the meantime, go to the

site which you want to copy

This is the image of the

page to be copied

Copy

image

and

save in

another

folder

This is the copied image

saved in a different folder

Go back to Edit Page and

click on Use the Divi

Builder

This is the image of the Divi

Builder

Click where the arrow is

pointed to include background

image

Select a Background Color,

then Save

Click Insert Column

Select ½ and ½

Click the Insert Module(s) on

the left side

Select Image

Select a Background Image

Supply a Title

and an Alt

Text name.

Click Set as

Background

This is the uploaded image

Click Insert Module on the

Right

Choose Text

Select Light for Text Color

Highlight the text and click

on Link above text to

remove the Link below

Click Save and Exit

Click on Dropdown to select

Font Size

Click Update then view the

page

On the Advanced Design

Setting, adjust font size and

header font style

Adjust Top Margin using

Custom Padding, click key to

preview, then exit

Preview

This is the edited Header text

with the image

Click Insert Module to create a

Button

Click Button

Select General Settings to

makes changes on url settings,

Text for Button, Text color

Use Advanced Design Settings to

navigates changes for the button

Click where the arrow is

pointed to make changes on

the middle module

Use General Settings to make

changes on the Middle Module

Click on Standard Section to

create another section of

modules

Select your choice of section

or module

For this section, select the

single horizontal section

Click on the (+) sign or

anywhere on the line

Select Text

Use General Settings to edit Text

Color, Orientation and Content

Click Save

Use Advanced Design Settings

to fix Header Font Size, Text

Color, Text Background, etc

Remember to

always click

Update in

order to keep

changes in

your work

This is the final result of my

first section

This is the next section to be

copied

Click to create another

Section

Select the 3-column

This is the 3-column

section

Click one module at a time

Click on Image

Make sure that the

images you are going to

copy are already copied

into a folder

Click Upload an image and

select from your folder

Images have been uploaded

These are the images

uploaded

Click Insert Module to add

text on each of them

Click on Text

This is how it looks like

Click where the arrow is

pointed to add Text

Use General Settings to fix Text

Color, Orientation, and Content

Click in the middle to preview and hit

Save and Exit

Go back to the Edit Page

and click Update to save

your work. Then open page

on a separate Tab to

preview

From this point, Click on

Enable Visual Builder to make

adjustments on the settings

Divi Visual Builder allows

easy editing of your work

Click on where the arrows are

pointed to make changes on

margins, text fonts, text colors, etc.

then click Save

Click on the image to adjust

position to the center

The Image Settings Pop-up

will help you edit your image

This is the final copied section

Next section to be copied

Once you are done editing,

click on the Exit Visual Builder

Again, click on Standard Section

to create another module

Select the two columns

Click on the left column to

insert image

Select Image

In the General Settings,

upload an image

Make sure that your

image for the section has

already been uploaded

Click on the next module to

insert text

Click Text

Click Update to save

your work, then open

page to a new tab

Enable the Visual Builder

to edit minor things on

the page

Another way to add section

or module is to click (+) sign

This is the final section

copied

This is another section to be

copied

Click Regular

Use (+) sign below to add

another section. Select 3

column section

Select Image

Click Upload Image

and Save

Click on the (+) signs one at

a time to upload your images

These are the uploaded

images

Click Regular

Select Horizontal Line

Select Text

Type your text below the

Content, Save

Click General to fix Text Settings

such as color, orientation, etc.

save

These were done on the

Visual Builder

This is the final section

Click on the blue mark below

to add another section

Click on Regular to

Insert Section

Click on the single

horizontal line

Click on the gear of the

Blue Section

Work on the Background Color,

image, etc. on the General Section

Click on the Gray (+)

below then select Text

Type your content as

shown below and Save

Use General to manipulate text

font, orientation and content

Click on the green (+) below

and select the horizontal

section

Select the Button

Use the General Section to

manipulate your Button Text,

alignment, color, etc.

On Design Section, fix the button

background color, text, size, etc

Click Save

This is what I re-created from

a different website

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