How to Create a Virtual Summit Landing Page with Divi

Jul 1, 2020 | Everything Divi for WordPress




Promoting a virtual event involves a number of promotional strategies. Creating an inviting landing page is one of them. Creating a landing page for your virtual summit is the perfect way to make your audience curious. With the right combination of sections, you can invite, inform, and collect registered attendees. Today we’ll show you how to create a virtual summit landing page with five sections. The design includes duotone images and scrolling section dividers. We’ve also included a downloadable JSON file if you want to skip the step-by-step tutorial. In the folder, you’ll also find the header and footer graphics in both PNG and AI.

Let’s get to it!

Preview

Let’s take a look at the landing page design on different screen sizes.

Desktop

how-to-create-a-virtual-summit-landing-page-with-divi How to Create a Virtual Summit Landing Page with Divi

Tablet

how-to-create-a-virtual-summit-landing-page-with-divi-1 How to Create a Virtual Summit Landing Page with Divi

Mobile

how-to-create-a-virtual-summit-landing-page-with-divi-2 How to Create a Virtual Summit Landing Page with Divi

Download The Virtual Summit Landing Page for FREE

To lay your hands on the free virtual summit landing page layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Virtual Summit Landing Page Sections

In order for your landing page to do its job, it needs a specific set of sections. Apart from catching the viewer’s eye, landing pages must also convert. A virtual summit landing page, for example, needs to include relevant information and a call to action. All sections must flow from one to the other seamlessly for the viewer to feel inspired to act and sign up.

We’ve included the following sections in the Virtual Summit Landing Page:

Header

The header section includes important information like the title of the summit and the date of the event. This is the most important information, that’s why it’s at the very top. No header is complete without a call to action and easy navigation to the rest of the page.

In our design, we’ve included two buttons with anchor links that navigate to the speakers and schedule sections. Most importantly, we’ve included a button with a link to the register section. Throughout the page, all the “register” buttons look the same, in order to have visual unity in the design.

how-to-create-a-virtual-summit-landing-page-with-divi How to Create a Virtual Summit Landing Page with Divi

Information

The second section is an informational section that incites the viewer to consider attending the virtual summit.  In the design, we’ve added four blurbs and an image that can be easily changed into a video. The blurbs list four reasons to attend the summit and the image (or video) is the visual to support the decision.

how-to-create-a-virtual-summit-landing-page-with-divi-1 How to Create a Virtual Summit Landing Page with Divi

The Speakers

In the next section, you’ll find a set of six person modules. This is where you present the speakers that will participate in the summit. Each module includes the following elements:

  • Image
  • Name
  • Position
  • Description
  • Social media links

Make sure to input all the relevant information for each speaker. Also, try and use the same amount of lines in the body text to keep the design looking crisp. As you can see, we used a duotone color effect on all the speakers’ photos to give the design an interesting look and feel. There is a step by step tutorial below on how to achieve this effect in Photoshop.

If you have more than six speakers, simply duplicate the row or clone modules into rows with more or fewer columns.

how-to-create-a-virtual-summit-landing-page-with-divi-2 How to Create a Virtual Summit Landing Page with Divi

The Schedule

The schedule section is next. In this area, we’ve elegantly shared the summit’s schedule and made sure it’s structural. To keep the style of the text design, make sure to change the content but not the heading levels. Try and keep the content to about the same length so the design stays neat.

Rows are organized by days with a title image and a group of blurbs. At the bottom of the last column you can find a call to action button for the audience to register.

how-to-create-a-virtual-summit-landing-page-with-divi-3 How to Create a Virtual Summit Landing Page with Divi

Register

Last but not least is the registration section. We’ve included a countdown timer to add a sense of urgency. The contact form should be directly linked to your RSVP list so that each invitee is registered automatically.

Throughout the virtual summit landing page design, you’ll find three buttons that navigate to this section for optimized lead generation.

how-to-create-a-virtual-summit-landing-page-with-divi-4 How to Create a Virtual Summit Landing Page with Divi

Create a Duotone Gradient Map with Photoshop

Open Image in Adobe Photoshop

If you’d like to mimic the duotone images in our design, follow the steps below. First, open an image in Photoshop.

how-to-create-a-virtual-summit-landing-page-with-divi-5 How to Create a Virtual Summit Landing Page with Divi

Open Adjustments and Select Gradient Map

Open the adjustments toolbar and click on the gradient map. In the properties tab, double-click on the gradient bar to open the settings popup.

how-to-create-a-virtual-summit-landing-page-with-divi-6 How to Create a Virtual Summit Landing Page with Divi

Adjust Gradient Colors

In the gradient settings, double-click on each color to customize the settings.

To achieve the effect of our design, adjust gradient as follows:

  • Gradient Type: Solid
  • Smoothness: 100%
  • Opacity Stop #1: 100%
  • Color Stop #2
    • Dark Purple #202060
    • Position: 19%
  • Midpoint:
    • Opacity Midpoint: 85%
    • Color Midpoint: 50%
  • Opacity Stop #2: 55%
  • Color Stop #
    • Violet #f895f8
    • Position: 100%

how-to-create-a-virtual-summit-landing-page-with-divi-7 How to Create a Virtual Summit Landing Page with Divi

how-to-create-a-virtual-summit-landing-page-with-divi-8 How to Create a Virtual Summit Landing Page with Divi

Save as a Custom Gradient Map

Add a name for your gradient and click on new to save it. It’ll then be stored in your gradient library. Save the image for the web at 700px tall. Repeat the process with as many images as you need. After applying the gradient map, select your saved gradient.

how-to-create-a-virtual-summit-landing-page-with-divi-9 How to Create a Virtual Summit Landing Page with Divi

1. Create Header Section

Add New Section

Background

Let’s start recreating the virtual summit landing page. Create a new page and open it with the Divi Builder. Before adding rows, add a background image and gradient to a new section. You’ll find the background graphic in the downloadable folder above.

  • Background Gradient
    • Color 1: #1f4068
    • Color 2: #202040
  • Background Image: Header Graphic

how-to-create-a-virtual-summit-landing-page-with-divi-10 How to Create a Virtual Summit Landing Page with Divi

how-to-create-a-virtual-summit-landing-page-with-divi-11 How to Create a Virtual Summit Landing Page with Divi

Sizing

Adjust the min height next.

  • Min Height: 1050px

how-to-create-a-virtual-summit-landing-page-with-divi-12 How to Create a Virtual Summit Landing Page with Divi

Spacing

The spacing as well.

  • Top and Bottom Padding
    • Table and Phone: 90px

how-to-create-a-virtual-summit-landing-page-with-divi-13 How to Create a Virtual Summit Landing Page with Divi

Visibility

Finally, adjust the visibility settings in the advanced tab.

  • Horizontal and Vertical Overflow: Hidden

how-to-create-a-virtual-summit-landing-page-with-divi How to Create a Virtual Summit Landing Page with Divi

Add New Row

Column Structure

Add a row with three columns. Select the 1/2, 1/4, 1/4 column structure.

how-to-create-a-virtual-summit-landing-page-with-divi-14 How to Create a Virtual Summit Landing Page with Divi

Sizing

Adjust the sizing of the row as follows:

  • Width: 90%
  • Max Width: 1800px
  • Alignment: Center

how-to-create-a-virtual-summit-landing-page-with-divi-15 How to Create a Virtual Summit Landing Page with Divi

Spacing

\Add some top margin too.

  • Top Margin: 200px

how-to-create-a-virtual-summit-landing-page-with-divi-16 How to Create a Virtual Summit Landing Page with Divi

Column 2, 3 Settings

Spacing

Adjust the settings for columns 2 and 3. First the spacing

  • Top Margin: 30px

how-to-create-a-virtual-summit-landing-page-with-divi-17 How to Create a Virtual Summit Landing Page with Divi

Visibility

Then, hide the columns on phone.

  • Disable on: Phone

how-to-create-a-virtual-summit-landing-page-with-divi-18 How to Create a Virtual Summit Landing Page with Divi

Add 1st Text Module To Column 1

Text

Add a first text module in column 1. Insert the title as H1 content.

  • Body: H1 Content

how-to-create-a-virtual-summit-landing-page-with-divi-19 How to Create a Virtual Summit Landing Page with Divi

Heading Text

In the design tab, style the heading text next.

  • Heading Level: H1
  • Font: Alata
  • Weight: Bold
  • Alignment: Center
  • Color: Off White #eaeaea
  • Size
    • Desktop: 85px
    • Tablet: 70px
    • Phone: 44px
  • Letter Spacing: 2px
  • Line Height: 1.1em
  • Text Shadow: 1st Option
  • Shadow Color: rgba(o,0,0,0.26)

how-to-create-a-virtual-summit-landing-page-with-divi-20 How to Create a Virtual Summit Landing Page with Divi

Add 2nd Text Module to Column 1

Text

Add a second text module. Insert the date as H2 content.

  • Body: H2 Content, July 15+16, 2020

how-to-create-a-virtual-summit-landing-page-with-divi-21 How to Create a Virtual Summit Landing Page with Divi

Heading Text

Style the heading text next.

  • Heading Level: H2
  • Font: Alata
  • Weight: Regular
  • Alignment: Center
  • Color: Fucshia  #b030b0
  • Size
    • Desktop and Tablet: 60px
    • Phone: 45 px
  • Line Height: 1.3em

how-to-create-a-virtual-summit-landing-page-with-divi-22 How to Create a Virtual Summit Landing Page with Divi

Spacing

Add some spacing too.

  • Bottom Padding: 20px

how-to-create-a-virtual-summit-landing-page-with-divi-23 How to Create a Virtual Summit Landing Page with Divi

Add Button Module to Column 1

Text

Add a button module for the call to action.

  • Button: Register

how-to-create-a-virtual-summit-landing-page-with-divi-24 How to Create a Virtual Summit Landing Page with Divi

Link

Add the anchor link.

  • Link URL: #Register

how-to-create-a-virtual-summit-landing-page-with-divi-25 How to Create a Virtual Summit Landing Page with Divi

Alignment

Move over to the design tab and set the alignment.

  • Button Alignment: Center

how-to-create-a-virtual-summit-landing-page-with-divi-26 How to Create a Virtual Summit Landing Page with Divi

Button Custom Styles

Style the button too.

  • Text Size
    • Desktop: 30px
    • Tablet: 25 px
    • Phone: 20px
  • Text Color: White #ffffff
  • Background: Purple #602080
  • Border Radius: 35px
  • Letter Spacing: 1px
  • Font: Alata

how-to-create-a-virtual-summit-landing-page-with-divi-27 How to Create a Virtual Summit Landing Page with Divi

Spacing

Finally, adjust the spacing.

  • Top Margin
    • Tablet and Phone: 15px
  • Top Padding: 2px

how-to-create-a-virtual-summit-landing-page-with-divi-28 How to Create a Virtual Summit Landing Page with Divi

Add Button Module to Column 2

Text

Move over to column 2 and add a button module. Add the copy of your choice.

  • Button: Speakers

how-to-create-a-virtual-summit-landing-page-with-divi-29 How to Create a Virtual Summit Landing Page with Divi

Link

Next, add an anchor link.

  • Link URL: #Speakers

how-to-create-a-virtual-summit-landing-page-with-divi-30 How to Create a Virtual Summit Landing Page with Divi

Alignment

In the design tab, set the alignment.

  • Button Alignment
    • Desktop: Right
    • Tablet and Phone: Center

how-to-create-a-virtual-summit-landing-page-with-divi-31 How to Create a Virtual Summit Landing Page with Divi

Button Custom Style

Adjust the custom button styles as well.

  • Text Size: 24px
  • Text Color: White #ffffff
  • Background: Transparent
  • Letter Spacing: 1px
  • Button Font: Alata
  • Border Radius: 0px

how-to-create-a-virtual-summit-landing-page-with-divi-32 How to Create a Virtual Summit Landing Page with Divi

Box Shadow

Finally, add a box shadow.

  • Box Shadow: 4th option
  • Horizontal Position: 0px
  • Vertical Position: 5 px
  • Shadow Color: Fuchsia: #b030b0

how-to-create-a-virtual-summit-landing-page-with-divi-33 How to Create a Virtual Summit Landing Page with Divi

Clone Button Module to Column 3

Clone Button

Clone the button in column 2 and place the duplicate module in column 3.

how-to-create-a-virtual-summit-landing-page-with-divi-34 How to Create a Virtual Summit Landing Page with Divi

how-to-create-a-virtual-summit-landing-page-with-divi-35 How to Create a Virtual Summit Landing Page with Divi

Adjust Button Module

Text

Change the text in the cloned button.

  • Button: Schedule

how-to-create-a-virtual-summit-landing-page-with-divi-36 How to Create a Virtual Summit Landing Page with Divi

Link

Change the anchor link too.

  • Link URL: #Schedule

how-to-create-a-virtual-summit-landing-page-with-divi-37 How to Create a Virtual Summit Landing Page with Divi

Alignment

Don’t forget to change the alignment as well.

  • Button Alignment
    • Desktop Left

how-to-create-a-virtual-summit-landing-page-with-divi-38 How to Create a Virtual Summit Landing Page with Divi

Add New Row

Column Structure

Add a new row with two equal columns.

how-to-create-a-virtual-summit-landing-page-with-divi-39 How to Create a Virtual Summit Landing Page with Divi

Sizing

Adjust the gutter width first.

  • Custom Gutter Width: 2

how-to-create-a-virtual-summit-landing-page-with-divi-40 How to Create a Virtual Summit Landing Page with Divi

Spacing

Add spacing next.

  • Top Margin
    • Phone: -35px

how-to-create-a-virtual-summit-landing-page-with-divi-41 How to Create a Virtual Summit Landing Page with Divi

Visibility

Then adjust the visibility of the row.

  • Disable on: Tablet and Desktop

how-to-create-a-virtual-summit-landing-page-with-divi-42 How to Create a Virtual Summit Landing Page with Divi

Clone Button Module & Place Duplicate in Column 1

Clone Button

Clone the button module in column 2 of the previous row and place the duplicate module in column 1 of the new row.

how-to-create-a-virtual-summit-landing-page-with-divi-43 How to Create a Virtual Summit Landing Page with Divi

how-to-create-a-virtual-summit-landing-page-with-divi-44 How to Create a Virtual Summit Landing Page with Divi

Adjust Button Module

Button Custom Style

Adjust the text in the new button.

  • Text Size: 20px

how-to-create-a-virtual-summit-landing-page-with-divi-45 How to Create a Virtual Summit Landing Page with Divi

Box Shadow

Modify the box shadow as well.

  • Vertical Position: 4px

how-to-create-a-virtual-summit-landing-page-with-divi-46 How to Create a Virtual Summit Landing Page with Divi

Add Cloned Button Module to Column 2

Clone Button

Duplicate button module from column 3 in the previous row. Paste it in column 2 of this row.

how-to-create-a-virtual-summit-landing-page-with-divi-47 How to Create a Virtual Summit Landing Page with Divi

how-to-create-a-virtual-summit-landing-page-with-divi-48 How to Create a Virtual Summit Landing Page with Divi

Adjust Button Module

Text

Adjust the text content in the cloned button.

  • Text: Schedule

how-to-create-a-virtual-summit-landing-page-with-divi-49 How to Create a Virtual Summit Landing Page with Divi

2. Create Info Section

Add New Section

Background

To create the information section, add a new section and style the background first.

  • Background Gradient
    • Color 1: #202040
    • Color 2: #202060

how-to-create-a-virtual-summit-landing-page-with-divi-50 How to Create a Virtual Summit Landing Page with Divi

Spacing

Add some padding too.

  • Top Padding: 170px
  • Bottom Padding: 5px

how-to-create-a-virtual-summit-landing-page-with-divi-51 How to Create a Virtual Summit Landing Page with Divi

Visibility

Finally, adjust the visibility settings in the advanced tab.

  • Horizontal and Vertical Overflow: Hidden

how-to-create-a-virtual-summit-landing-page-with-divi How to Create a Virtual Summit Landing Page with Divi

Add New Row

Column Structure

Add a new row with one column. We’ll call this the title row.

how-to-create-a-virtual-summit-landing-page-with-divi-52 How to Create a Virtual Summit Landing Page with Divi

Sizing

Set the sizing next.

  • Width: 80%
  • Max Width: 1800px

how-to-create-a-virtual-summit-landing-page-with-divi-53 How to Create a Virtual Summit Landing Page with Divi

Add Text Module

Text

Add a text module.

  • Body: H2 Content – Why attend the Digital Marketing Virtual Summit?

how-to-create-a-virtual-summit-landing-page-with-divi-54 How to Create a Virtual Summit Landing Page with Divi

Heading Text

In the design tab, style the heading text.

  • Heading Level: H2
  • Font: Alata
  • Text Color: White #ffffff
  • Size
    • Desktop: 55px
    • Tablet: 45px
    • Phone: 40px
  • Letter Spacing: 2px
  • Line Height: 1.1 em

how-to-create-a-virtual-summit-landing-page-with-divi-55 How to Create a Virtual Summit Landing Page with Divi

Add Divider Module

Line

Now add a divider module and style the line in the design tab.

  • Line Color: Fuchsia #b030b0

how-to-create-a-virtual-summit-landing-page-with-divi-56 How to Create a Virtual Summit Landing Page with Divi

Sizing

Adjust the sizing next.

  • Divider Weight: 50px
  • Max Height: 50px

how-to-create-a-virtual-summit-landing-page-with-divi-57 How to Create a Virtual Summit Landing Page with Divi

Scroll Effects

In the advanced tab, add a horizontal scroll effect.

  • Enable Horizontal Motion
  • Desktop
    • Starting Offset: -6
    • Mid Offset: 50% / 0
    • Ending Offset: 6
  • Tablet and Phone
    • Stating Offset: -4
    • Mid Offset: 50% /0
    • Ending Offset: 4

how-to-create-a-virtual-summit-landing-page-with-divi-58 How to Create a Virtual Summit Landing Page with Divi

Add New Row

Column Structure

Now add a new row with three columns. Select the 1/2, 1/4, 1/4 column structure.

how-to-create-a-virtual-summit-landing-page-with-divi-59 How to Create a Virtual Summit Landing Page with Divi

Sizing

Before adding modules, adjust the row sizing.

  • Width: 80%
  • Max Width: 1800px

how-to-create-a-virtual-summit-landing-page-with-divi-60 How to Create a Virtual Summit Landing Page with Divi

Column 1 Settings

Spacing

Also, adjust the spacing of the first column.

  • Top Padding: 20px

how-to-create-a-virtual-summit-landing-page-with-divi-61 How to Create a Virtual Summit Landing Page with Divi

Add Image Module to Column 1

Image

Now add an image module to column 1. Use one of your images with the duotone effect.

  • Image: Photo with duotone effect

how-to-create-a-virtual-summit-landing-page-with-divi-62 How to Create a Virtual Summit Landing Page with Divi

Border

Adjust the borders too.

  • Rounded Corners: 15px

how-to-create-a-virtual-summit-landing-page-with-divi-63 How to Create a Virtual Summit Landing Page with Divi

Add Blurb Module to Column 2

Text

Move on to column 2 and add a blurb module. Insert the content.

  • Title: Make New Connections
  • Body: Descriptive Content

how-to-create-a-virtual-summit-landing-page-with-divi-64 How to Create a Virtual Summit Landing Page with Divi

Image

Upload the number 1 image which you can find in the downloadable folder.

  • Image: PNG of #1

how-to-create-a-virtual-summit-landing-page-with-divi-65 How to Create a Virtual Summit Landing Page with Divi

Image & Icon

Adjust the placement of the image next.

  • Placement: Top
  • Alignment: Left

how-to-create-a-virtual-summit-landing-page-with-divi-66 How to Create a Virtual Summit Landing Page with Divi

Title Text

Style the title text too.

  • Heading Level: H4
  • Font: Alata
  • Color: White #ffffff
  • Size: 23px

how-to-create-a-virtual-summit-landing-page-with-divi-67 How to Create a Virtual Summit Landing Page with Divi

Body Text

Don’t forget to style the body text.

  • Font: Open Sans
  • Color: White #ffffff
  • Size: 14px
  • Letter Spacing: 1px

how-to-create-a-virtual-summit-landing-page-with-divi-68 How to Create a Virtual Summit Landing Page with Divi

Custom CSS

Finally, add some extra padding with custom CSS to the blurb title in the advanced tab.

  • Blurb Title: padding-bottom: 15px;
padding-bottom: 15px;

how-to-create-a-virtual-summit-landing-page-with-divi-69 How to Create a Virtual Summit Landing Page with Divi

Clone Blurb Module & Place Duplicate in Column 2

Clone Blurb

Duplicate 1st blurb in column 2.

how-to-create-a-virtual-summit-landing-page-with-divi-70 How to Create a Virtual Summit Landing Page with Divi

Content

Update the content.

  • Title: New Title
  • Body: New Descriptive Text

how-to-create-a-virtual-summit-landing-page-with-divi-71 How to Create a Virtual Summit Landing Page with Divi

Image

Then, change the number image. You can find the new one in the downloadable folder.

  • Image: PNG of #2

how-to-create-a-virtual-summit-landing-page-with-divi-72 How to Create a Virtual Summit Landing Page with Divi

Delete Column 3 & Clone Column 2

Clone Column

In the row settings, delete the 3rd column and duplicate the 2nd. Make sure you return the column structure to 1/2, 1/4, 1/4.

how-to-create-a-virtual-summit-landing-page-with-divi-73 How to Create a Virtual Summit Landing Page with Divi

how-to-create-a-virtual-summit-landing-page-with-divi-74 How to Create a Virtual Summit Landing Page with Divi

how-to-create-a-virtual-summit-landing-page-with-divi-75 How to Create a Virtual Summit Landing Page with Divi

Adjust Blurb 1 in Column 3

Content

Update the text content in the cloned blurb.

  • Title: New Title
  • Body: New Descriptive Text

how-to-create-a-virtual-summit-landing-page-with-divi-76 How to Create a Virtual Summit Landing Page with Divi

Image

Change the number image as well.

  • Image: PNG of #3

how-to-create-a-virtual-summit-landing-page-with-divi-77 How to Create a Virtual Summit Landing Page with Divi

Adjust Blurb 2 in Column 3

Content

Modify the content of this blurb too. First the text.

  • Title: New Title
  • Body: New Descriptive Text

how-to-create-a-virtual-summit-landing-page-with-divi-78 How to Create a Virtual Summit Landing Page with Divi

Image

Then, change the number image.

  • Image: PNG of #4

how-to-create-a-virtual-summit-landing-page-with-divi-79 How to Create a Virtual Summit Landing Page with Divi

3. Create Speakers Section

Add New Section

Background

Moving on to the section for the speakers. Add a new section and style the background.

  • Background Gradient
    • Color 1: #202060
    • Color 2: #162447

how-to-create-a-virtual-summit-landing-page-with-divi-80 How to Create a Virtual Summit Landing Page with Divi

Visibility

Adjust the visibility settings in the advanced tab.

  • Horizontal and Vertical Overflow: Hidden

how-to-create-a-virtual-summit-landing-page-with-divi How to Create a Virtual Summit Landing Page with Divi

Clone Title Row & Place Duplicate in New Section

Duplicate Row

Duplicate the title row from the section above and place the duplicate in the cloned section. We’ll call this, title row 2.

how-to-create-a-virtual-summit-landing-page-with-divi-81 How to Create a Virtual Summit Landing Page with Divi

how-to-create-a-virtual-summit-landing-page-with-divi-82 How to Create a Virtual Summit Landing Page with Divi

Adjust Text Module

Text

  • Title: New title content – The Speakers
  • how-to-create-a-virtual-summit-landing-page-with-divi-83 How to Create a Virtual Summit Landing Page with Divi

    Heading Text

    Then, style the H3 text settings in the design tab.

    • Heading Level: H3
    • Font: Alata
    • Size
      • Desktop: 100px
      • Tablet: 80px
      • Phone: 45px

    how-to-create-a-virtual-summit-landing-page-with-divi-84 How to Create a Virtual Summit Landing Page with Divi

    Custom CSS

    Adjust the CSS ID in the cloned text module as well.

    • CSS ID: Speakers

    how-to-create-a-virtual-summit-landing-page-with-divi-85 How to Create a Virtual Summit Landing Page with Divi

    Adjust Divider

    Line

    Next, change the line color of the divider module.

    • Line Color: Purple #602080

    how-to-create-a-virtual-summit-landing-page-with-divi-86 How to Create a Virtual Summit Landing Page with Divi

    Add New Row

    Column Structure

    Now add a new row with 5 equally-sized modules.

    how-to-create-a-virtual-summit-landing-page-with-divi-87 How to Create a Virtual Summit Landing Page with Divi

    Sizing

    Adjust the sizing of the row as follows:

    • Width: 80%
    • Max Width: 1800px
    • Equalize Column Height: Yes

    how-to-create-a-virtual-summit-landing-page-with-divi-88 How to Create a Virtual Summit Landing Page with Divi

    Spacing

    Add some spacing too.

    • Top Margin: 40px

    how-to-create-a-virtual-summit-landing-page-with-divi-89 How to Create a Virtual Summit Landing Page with Divi

    Add Person Module to Column 1

    Text

    Add the first person module to column 1.

    • Name: Person’s Name
    • Position: Person’s Position
    • Social Media Profiles: Person’s Profiles
    • Body: Descriptive Text

    how-to-create-a-virtual-summit-landing-page-with-divi-90 How to Create a Virtual Summit Landing Page with Divi

    Image

    Upload the image of the speaker with the color effect. We recommend a 550 x 770 px image size.

    • Image: Photo with duotone effect

    how-to-create-a-virtual-summit-landing-page-with-divi-91 How to Create a Virtual Summit Landing Page with Divi

    Image

    Add some rounded corners to the image next.

    • Image Rounded Corners: 15px

    how-to-create-a-virtual-summit-landing-page-with-divi-92 How to Create a Virtual Summit Landing Page with Divi

    Title Text

    Then, style the title text.

    • Heading Level: H4
    • Font: Alata
    • Size: 33px

    how-to-create-a-virtual-summit-landing-page-with-divi-93 How to Create a Virtual Summit Landing Page with Divi

    Body Text

    Style the body text as well.

    • Font: Open Sans
    • Size: 14px
    • Letter Spacing: 1px

    how-to-create-a-virtual-summit-landing-page-with-divi-94 How to Create a Virtual Summit Landing Page with Divi

    Position Text

    Don’t forget the position text.

    • Font: Alata
    • Size: 20px

    how-to-create-a-virtual-summit-landing-page-with-divi-95 How to Create a Virtual Summit Landing Page with Divi

    Custom CSS

    Finally, add some custom CSS for extra padding.

    • Member Image: padding-bottom: 10px;
    padding-bottom: 10px;
    • Title: padding-bottom: 20px;
    padding-bottom: 20px;
    • Member Position: padding-bottom: 20px;
    padding-bottom: 20px;

    how-to-create-a-virtual-summit-landing-page-with-divi-96 How to Create a Virtual Summit Landing Page with Divi

    Duplicate Column 1

    Clone Column

    In the row settings, delete columns 2-5. Duplicate column 1 four times.

    how-to-create-a-virtual-summit-landing-page-with-divi-97 How to Create a Virtual Summit Landing Page with Divi

    how-to-create-a-virtual-summit-landing-page-with-divi-98 How to Create a Virtual Summit Landing Page with Divi

    Adjust Content for New Person Modules

    Text

    Update the content in all the cloned modules. First the text.

    • Name: New Person’s Name
    • Position: New Person’s Position
    • Social Media Profiles: New Person’s Profiles
    • Body: New Descriptive Text

    how-to-create-a-virtual-summit-landing-page-with-divi-99 How to Create a Virtual Summit Landing Page with Divi

    Image

    Then the image.

    • Image: New image with duotone effect (550x700px)

    how-to-create-a-virtual-summit-landing-page-with-divi-100 How to Create a Virtual Summit Landing Page with Divi

    4. Create Schedule Section

    Add New Section

    Background

    Now we’ll create the schedule section. Add a new section and style the background as follows:

    • Background Gradient
      • Color 1: #162447
      • Color 2: #1f4068

    how-to-create-a-virtual-summit-landing-page-with-divi-101 How to Create a Virtual Summit Landing Page with Divi

    Visibility

    Adjust the visibility settings in the advanced tab.

    • Horizontal and Vertical Overflow: Hidden

    how-to-create-a-virtual-summit-landing-page-with-divi How to Create a Virtual Summit Landing Page with Divi

    Clone Title Row 2

    Duplicate Row

    Clone the title row from the section above and paste it in this section.

    how-to-create-a-virtual-summit-landing-page-with-divi-102 How to Create a Virtual Summit Landing Page with Divi

    how-to-create-a-virtual-summit-landing-page-with-divi-103 How to Create a Virtual Summit Landing Page with Divi

    Adjust Text Module

    Text

    Change the title content.

    • Title: The Schedule

    how-to-create-a-virtual-summit-landing-page-with-divi-104 How to Create a Virtual Summit Landing Page with Divi

    Custom CSS

    Change the CSS ID in the cloned text module.

    • CSS ID: Schedule

    how-to-create-a-virtual-summit-landing-page-with-divi-105 How to Create a Virtual Summit Landing Page with Divi

    Adjust Divider

    Line

    Change the color of the divider as well.

    • Line Color: Fuchsia #b030b0

    how-to-create-a-virtual-summit-landing-page-with-divi-106 How to Create a Virtual Summit Landing Page with Divi

    Add New Row

    Column Structure

    Now, add a new row with three equally-sized columns.

    how-to-create-a-virtual-summit-landing-page-with-divi-107 How to Create a Virtual Summit Landing Page with Divi

    Sizing

    Adjust the sizing of the row.

    • Width: 80%
    • Max Width: 1800px

    how-to-create-a-virtual-summit-landing-page-with-divi-108 How to Create a Virtual Summit Landing Page with Divi

    Spacing

    Add some spacing too.

    • Bottom Margin: 50px

    how-to-create-a-virtual-summit-landing-page-with-divi-109 How to Create a Virtual Summit Landing Page with Divi

    Add Text Module to Column 1

    Text

    Add a text module to the first column. Insert the content.

    • Body: H3 Content – Day 1

    how-to-create-a-virtual-summit-landing-page-with-divi-110 How to Create a Virtual Summit Landing Page with Divi

    Heading Text

    Move over to the design tab and style the heading text.

    • Heading Level: H3
    • Color: White #ffffff
    • Size: 50px

    how-to-create-a-virtual-summit-landing-page-with-divi-111 How to Create a Virtual Summit Landing Page with Divi

    Spacing

    Add some spacing next.

    • Top Padding: 20px
    • Left Padding: 30px

    how-to-create-a-virtual-summit-landing-page-with-divi-112 How to Create a Virtual Summit Landing Page with Divi

    Add Call To Action to Column 1

    Text

    Now add a call to action module with some content of your choice.

    • Title: Day’s theme title – Inbound Marketing
    • Body: Descriptive Text

    how-to-create-a-virtual-summit-landing-page-with-divi-113 How to Create a Virtual Summit Landing Page with Divi

    Background

    Add an image background too.

    • Background image: Image with duotone effect

    how-to-create-a-virtual-summit-landing-page-with-divi-114 How to Create a Virtual Summit Landing Page with Divi

    Heading Text

    In the design tab, style the heading text.

    • Heading Level: H3
    • Font: Alata
    • Color: White #ffffff
    • Size: 26px
    • Letter Spacing: 1px

    how-to-create-a-virtual-summit-landing-page-with-divi-115 How to Create a Virtual Summit Landing Page with Divi

    Body Text

    Style the body text next.

    • Font: Alata
    • Color: White #ffffff
    • Size: 15px

    how-to-create-a-virtual-summit-landing-page-with-divi-116 How to Create a Virtual Summit Landing Page with Divi

    Spacing

    Add some spacing too.

    • Top Margin: -120px

    how-to-create-a-virtual-summit-landing-page-with-divi-117 How to Create a Virtual Summit Landing Page with Divi

    Border

    Then, style the border.

    • Rounded Corners: 15px

    how-to-create-a-virtual-summit-landing-page-with-divi-118 How to Create a Virtual Summit Landing Page with Divi

    Custom CSS

    Finally, add custom CSS for extra styling.

    • Promo Description
      • border-radius: 15px;
      • background-color: #162447;
      • padding-left: 25px;
      • padding-right: 25px;
      • padding-bottom: 40px;
    border-radius: 15px; background-color: #162447; margin-top: 500px; padding-bottom: 40px; padding-bottom: 40px;
    • Promo Title
      • background-color: #q62447
      • margin-top: 500px
      • padding-bottom: 40px
      • padding-bottom: 40px
    background-color: #q62447; margin-top: 500px; padding-bottom: 40px; padding-bottom: 40px;

    how-to-create-a-virtual-summit-landing-page-with-divi-119 How to Create a Virtual Summit Landing Page with Divi

    Add Text Module to Column 2

    Text

    Move over to column 2 and add a text module. Follow this content structure:

    • Body
      • Date: H4 Content
      • Speaker: H5 Content
      • Topic: H6 Content
      • Description: Paragraph Content

    how-to-create-a-virtual-summit-landing-page-with-divi-120 How to Create a Virtual Summit Landing Page with Divi

    Text

    In the design tab, style the text.

    • Font: Open Sans
    • Size: 14px
    • Letter Spacing: 1px
    • Alignment: Left

    how-to-create-a-virtual-summit-landing-page-with-divi-121 How to Create a Virtual Summit Landing Page with Divi

    Heading Text

    Then style all the heading levels.

    • Heading Level: H4
      • Font: Alata
      • Weight: Bold
      • Size: 40px
    • Heading Level: H5
      • Font: Alata
      • Size: 25px
      • Line Height: 1.5em
    • Heading Level: H6
      • Font: Alata
      • Style: Italics
      • Size: 19px
      • Line Height: 1.5em

    how-to-create-a-virtual-summit-landing-page-with-divi-122 How to Create a Virtual Summit Landing Page with Divi

    how-to-create-a-virtual-summit-landing-page-with-divi-123 How to Create a Virtual Summit Landing Page with Divi

    how-to-create-a-virtual-summit-landing-page-with-divi-124 How to Create a Virtual Summit Landing Page with Divi

    Border

    Style the border too.

    • Style: Bottom Border
    • Width: 3px
    • Color: Fuchsia #b030b0

    how-to-create-a-virtual-summit-landing-page-with-divi-125 How to Create a Virtual Summit Landing Page with Divi

    Clone Text Module 2 Times

    Clone Text Module

    Duplicate the 1st text module twice.

    how-to-create-a-virtual-summit-landing-page-with-divi-126 How to Create a Virtual Summit Landing Page with Divi

    Adjust New Text Modules

    Text

    Change the content in the cloned text modules.

    • Body
      • Date: New H4 Content
      • Speaker: New H5 Content
      • Topic: New H6 Content
      • Description: New Paragraph Content

    how-to-create-a-virtual-summit-landing-page-with-divi-127 How to Create a Virtual Summit Landing Page with Divi

    Remove Border of 3rd Text Module

    Border

    Remove the border of the last module in the column.

    • Bottom Border Width
      • Desktop: 0px
      • Tablet and Phone: 3px

    how-to-create-a-virtual-summit-landing-page-with-divi-128 How to Create a Virtual Summit Landing Page with Divi

    Delete Column 3 & Clone Column 2

    Clone Columns

    In the row settings, delete column 3. Duplicate column 2.

    how-to-create-a-virtual-summit-landing-page-with-divi-129 How to Create a Virtual Summit Landing Page with Divi

    how-to-create-a-virtual-summit-landing-page-with-divi-130 How to Create a Virtual Summit Landing Page with Divi

    Remove & Adjust Text Modules

    Delete Text Module

    Erase the 3rd text module in the cloned column.

    how-to-create-a-virtual-summit-landing-page-with-divi-131 How to Create a Virtual Summit Landing Page with Divi

    Adjust Content

    Update the content in each new text module.

    • Body
      • Date: New H4 Content
      • Speaker: New H5 Content
      • Topic: New H6 Content
      • Description: New Paragraph Content

    how-to-create-a-virtual-summit-landing-page-with-divi-132 How to Create a Virtual Summit Landing Page with Divi

    Clone Button Module & Place Duplicate in Column 3

    Clone Button

    Copy the “register” button in the header section and paste it below the last text module in column 3.

    how-to-create-a-virtual-summit-landing-page-with-divi-133 How to Create a Virtual Summit Landing Page with Divi

    how-to-create-a-virtual-summit-landing-page-with-divi-134 How to Create a Virtual Summit Landing Page with Divi

    Adjust Button Module

    Alignment

    Change the alignment of the button to left.

    • Button Alignment: Left

    how-to-create-a-virtual-summit-landing-page-with-divi-135 How to Create a Virtual Summit Landing Page with Divi

    Button Custom Style

    Adjust the text size a little.

    • Text Size
      • Desktop and Tablet: 25 px
      • Phone: 20px

    how-to-create-a-virtual-summit-landing-page-with-divi-136 How to Create a Virtual Summit Landing Page with Divi

    Clone 1st Row of Schedule Section

    Clone Row

    Duplicate the 1st row in the schedule section.

    how-to-create-a-virtual-summit-landing-page-with-divi-137 How to Create a Virtual Summit Landing Page with Divi

    Adjust Text Module in Column 1

    Text

    Change the content in the cloned text module.

    • Body: Day 2

    how-to-create-a-virtual-summit-landing-page-with-divi-138 How to Create a Virtual Summit Landing Page with Divi

    Adjust Call To Action Module

    Text

    Adjust the content of the call to action module.

    • Title: New day’s theme title
    • Description: New descriptive content

    how-to-create-a-virtual-summit-landing-page-with-divi-139 How to Create a Virtual Summit Landing Page with Divi

    Background

    Change the background image as well.

    • Background Image: New image with duotone effect

    how-to-create-a-virtual-summit-landing-page-with-divi-140 How to Create a Virtual Summit Landing Page with Divi

    Adjust Text Modules

    Text

    Adjust the content in the text modules too.

    • Body
      • Date: New H4 Content
      • Speaker: New H5 Content
      • Topic: New H6 Content
      • Description: New Paragraph Content

    how-to-create-a-virtual-summit-landing-page-with-divi-141 How to Create a Virtual Summit Landing Page with Divi

    5. Create Register Section

    Add New Section

    Background

    The final section is dedicated to the registration. Add a new section and style the background as follows. You’ll find the footer graphic in the download folder above.

    • Background Color: Purple #602080
    • Background Image: Footer Graphic
    • Image Position: Top Center

    how-to-create-a-virtual-summit-landing-page-with-divi-142 How to Create a Virtual Summit Landing Page with Divi

    how-to-create-a-virtual-summit-landing-page-with-divi-143 How to Create a Virtual Summit Landing Page with Divi

    Spacing

    Adjust the spacing of the section as well.

    • Top Padding: 70px
    • Bottom Padding: 120px

    how-to-create-a-virtual-summit-landing-page-with-divi-144 How to Create a Virtual Summit Landing Page with Divi

    Visibility

    And change the visibility settings in the advanced tab.

    • Horizontal and Vertical Overflow: Hidden

    how-to-create-a-virtual-summit-landing-page-with-divi How to Create a Virtual Summit Landing Page with Divi

    Add New Row

    Column Structure

    Now add a new row with one column.

    how-to-create-a-virtual-summit-landing-page-with-divi-145 How to Create a Virtual Summit Landing Page with Divi

    Add Divider Module

    Visibility

    Add an invisible divider to act as the anchor link for the section.

    • Show Divider: No

    how-to-create-a-virtual-summit-landing-page-with-divi-146 How to Create a Virtual Summit Landing Page with Divi

    CSS ID

    Insert the CSS ID that links to all the “register” buttons.

    • CSS ID: Register

    how-to-create-a-virtual-summit-landing-page-with-divi-147 How to Create a Virtual Summit Landing Page with Divi

    Add New Row

    Column Structure

    Add a second row with two equal columns.

    how-to-create-a-virtual-summit-landing-page-with-divi-148 How to Create a Virtual Summit Landing Page with Divi

    Sizing

    Adjust the row’s sizing settings.

    • Custom Gutter Width: 4
    • Width: 80%
    • Max Width:: 1800px

    how-to-create-a-virtual-summit-landing-page-with-divi-149 How to Create a Virtual Summit Landing Page with Divi

    Add Countdown Timer Module to Column 1

    Text

    Add a countdown timer module to the first column. Add the content and date of the event.

    • Title: Descriptive Title
    • Date: Starting Date

    how-to-create-a-virtual-summit-landing-page-with-divi-150 How to Create a Virtual Summit Landing Page with Divi

    Background

    Style the background next.

    • Background Gradient
      • Color 1: #1f4068
      • Color 2: #162447

    how-to-create-a-virtual-summit-landing-page-with-divi-151 How to Create a Virtual Summit Landing Page with Divi

    Title Text

    In the design tab, style the title text.

    • Heading Level: H4
    • Font: Alata
    • Alignment: Center
    • Color: White #ffffff
    • Size
      • Desktop and Tablet: 30px
      • Phone: 25x

    how-to-create-a-virtual-summit-landing-page-with-divi-152 How to Create a Virtual Summit Landing Page with Divi

    Numbers Text

    Style the numbers text too.

    • Font: Alata
    • Color: White #ffffff
    • Size
      • Desktop: 55px
      • Tablet: 35px
      • Phone: 25px

    how-to-create-a-virtual-summit-landing-page-with-divi-153 How to Create a Virtual Summit Landing Page with Divi

    Label Text

    Also, the label text.

    • Font: Alata
    • Size: 9px

    how-to-create-a-virtual-summit-landing-page-with-divi-154 How to Create a Virtual Summit Landing Page with Divi

    Sizing

    Then, adjust the sizing of the row.

    • Width
      • Sizing: 100%

    how-to-create-a-virtual-summit-landing-page-with-divi-155 How to Create a Virtual Summit Landing Page with Divi

    Spacing

    Add some padding too.

    • Top and Bottom Padding: 60px

    how-to-create-a-virtual-summit-landing-page-with-divi-156 How to Create a Virtual Summit Landing Page with Divi

    Border

    Finally, style the border.

    • Rounded Corners: 15px

    how-to-create-a-virtual-summit-landing-page-with-divi-157 How to Create a Virtual Summit Landing Page with Divi

    Add Contact Form Module to COlumn 2

    Elements

    Add a new contact form module to column 2. Remove the message field.

    • Message Field: Remove

    how-to-create-a-virtual-summit-landing-page-with-divi-158 How to Create a Virtual Summit Landing Page with Divi

    Fields Layout

    Enter the settings for each field. In the design tab, under layout, click on “make fullwidth”. Do the same for the second field.

    • Layout: Make fullwidth

    how-to-create-a-virtual-summit-landing-page-with-divi-159 How to Create a Virtual Summit Landing Page with Divi

    Text

    Go back to the general contact form settings and add some content.

    • Title: Descriptive title
    • Success Message: Your message
    • Submit Button: Register

    how-to-create-a-virtual-summit-landing-page-with-divi-160 How to Create a Virtual Summit Landing Page with Divi

    Fields

    Then, style the fields as follows:

    • Background Color: Transparent
    • Text Color: White #ffffff
    • Focus Background Color: Transparent
    • Focus Text Color: White #ffffff
    • Font: Alata
    • Size
      • Desktop: 22px
      • Tablet and Phone: 18px
    • Letter Spacing: 1px

    how-to-create-a-virtual-summit-landing-page-with-divi-161 How to Create a Virtual Summit Landing Page with Divi

    how-to-create-a-virtual-summit-landing-page-with-divi-162 How to Create a Virtual Summit Landing Page with Divi

    Title Text

    Style the title text as well.

    • Heading Level: H4
    • Font: Alata
    • Color: White #ffffff
    • Size
      • Desktop and Phone: 30px
      • Phone: 24px
    • Letter Spacing: 1px

    how-to-create-a-virtual-summit-landing-page-with-divi-163 How to Create a Virtual Summit Landing Page with Divi

    Button Custom Styles

    Adjust the button custom styles too.

    • Text Size: 20px
    • Text Color: White #ffffff
    • Background Color: Blue #1f4068
    • Border Radius: 15px
    • Letter Spacing: 1px
    • Font: Alata
    • Top Margin: 10px
    • Top Padding
      • Tablet and Phone: 60px

    how-to-create-a-virtual-summit-landing-page-with-divi-164 How to Create a Virtual Summit Landing Page with Divi

    how-to-create-a-virtual-summit-landing-page-with-divi-165 How to Create a Virtual Summit Landing Page with Divi

    Border

    Don’t forget to adjust the border-radius.

    • Rounded  Corners: 15px
    • Border Width: 2px
    • Color: White #fffff

    how-to-create-a-virtual-summit-landing-page-with-divi-166 How to Create a Virtual Summit Landing Page with Divi

    Custom CSS

    Finally, add custom CSS for extra padding.

    • Contact Title: padding-bottom: 30px;
    padding-bottom: 30px;

    how-to-create-a-virtual-summit-landing-page-with-divi-167 How to Create a Virtual Summit Landing Page with Divi

    Preview

    We’re done! Let’s take a look at the landing page design again across different screen sizes.

    Desktop

    how-to-create-a-virtual-summit-landing-page-with-divi How to Create a Virtual Summit Landing Page with Divi

    Tablet

    how-to-create-a-virtual-summit-landing-page-with-divi-1 How to Create a Virtual Summit Landing Page with Divi

    Mobile

    how-to-create-a-virtual-summit-landing-page-with-divi-2 How to Create a Virtual Summit Landing Page with Divi

    That’s a Wrap

    You made it! How does your virtual summit landing page look? Use this design for your own virtual summit or for a web design client. The navigation is optimized for conversion with just the right amount of information. We added scrolling section dividers for a little visual extra too.

    Let us know what you think in the comments. Did you download the layout or did you follow the steps?

    Source

    WordPress Development

    SEO NEWS

    seo news

    Domain Registration
    GET YourName.com Today

    We’re listening.

    Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

    SHARE IT HERE:

    Subscribe ToThe Weekly SEO Trade News Updates

    Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

    Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

    Excellent! Now check your email to confirm your subscription.