DrivePro Demo for ListingProWP With Elementor

Home › Home › Demo Setup › DrivePro Demo for ListingProWP With Elementor....

For Elementor Page Builder Users

We are going to make the below sections with different page builder elements.

Section 01

 

Page Builder Element: DPro Partners Element

For this, we need DPro Partners Element

Please go to your WordPress admin dashboard and Edit your desired page with Elementor page builder and create a new section and then follow the below steps

Section Setting

  1. Create a section and then edit the section
  2. Click on the Style tab and set these properties
    •  Background: Normal
    • Background Type: Classic
    • Color: #EAF0F9
    • Shape Divider: Custom
    • Type: Tilt Opacity
    • Width: 100
    • Height: 75
    • Flip: Yes
  3. Click on the Advanced tab and add Padding-Bottom: 75px

Step 1:    Add the DPro Partners Element

  1. Add your partner’s logo and if you want to add more then click on add new items or click on the copy icon.
  2.  Click on the Style tab: Uppercase
  3. Click on the Advanced tab and set these properties
    • Padding-Top: 25px
    • Padding-Bottom: 100px

__________________________________________________________________________________________________________________________

Section 02

Section Title: DRIVE BY STYLE

Page Builder Element: Listing Category

For this, we need Heading + Text Editor and Listing Category Elements

Step 1: Add Heading Element

  1. Change the text to  DRIVE BY STYLE
  2. Font: Bold
  3. Size: XXL
  4. Align: Center
  5. Go to the Style tab and change the text color to #1F2B59
  6. Click on Typography and set these properties.
    • Font Family: Abril Fatface
    • Font weight:  Bold
    • Transform: Uppercase
    • Style: Italic

Step 2: Add Text Editor

  1. Change the text to  Explore the world’s largest automotive marketplace
  2. Font: Bold
  3. Go to the Style tab and Align: Center
  4. Text color to #000000
  5. Click on Typography and set these properties.
    • Font family: Roboto
    • Font size: 18px

Step 3:   Add the Listing Category Element in the same section

  1. Category style: Boxed View 2
  2. Select your desired Categories.

__________________________________________________________________________________________________________________________

Section 03

 

Section Title: How it Works

Page Builder Element: DPro How it Works

For this, we need Heading + Text Editor and DPro How it Works Elements

Section Setting

  1. Create a section and then edit the section
  2. Click on the Style tab and set these properties
    • Background: Normal
    • Background Type: Classic
    • Color: #EAF0F9
    • Shape Divider: Click on Top
    • Type: Tilt Opacity
    • Width: 100
    • Height: 75
    • Flip: Yes
    • Click on Bottom
    • Type: Fan Opacity
  3. Click on the Advanced tab and set these properties
    • Margin-Top: 50px
    • Padding-Top: 100px
    • Padding-Bottom: 150px

Step 1: Add Heading Element

  1. Change the text to  HOW IT WORKS
  2. Size: XL
  3. Html tag: H3
  4. Align: Center
  5. Go to the Style tab and change the text color to #1F2B59
  6. Click on Typography and set Font Family: Abril Fatface

Step 2: Text Editor

  1. Change the text to  If You Give People The Opportunity To Do The Right Thing, You’ll Rarely Be Disappointed
  2. Font: Bold
  3. Go to the Style tab and Align Center
  4. Change the text color to #7A7A7A
  5. Click on Typography and set the Font family: Roboto

Step 2:   Add the DPro How it Works Element in the same section

  1. Add the Step 1, step 2, and step 3 images ( If missing )

__________________________________________________________________________________________________________________________

Section 04

Section Title: Browse By

Page Builder Element: DPro Listing Taxonomies

For this, we need Heading and DPro Listing Taxonomies Elements

Section Setting

  1. Click on the Advanced tab and set the Margin-Top: 50px

Step 1: Add Heading Element

  1. Change the text to Browse By
  2. Align: Center
  3. Go to the Style tab and change the text color to #1F2B59
  4. Click on Typography and set the Font Family: Abril Fatface

Step 2:   Add the DPro Listing Taxonomies Element in the same section

  1. Select your desired Locations, Type, Make, and Experiences.

__________________________________________________________________________________________________________________________

Section 05

Section Title: Top Picks for You

Page Builder Element: Listing Posts by ID

For this, we need Heading + Text Editor and Listing Posts by ID Element

Section Setting

  1. Create a section and then edit the section
  2. Click on the Style tab and set these properties
    • Background: Normal
    • Background Type: Classic
    • Color: #EAF0F9
    • Shape Divider: Click on Top
    • Type: Mountains
    • Width: 199
    • Height: 149
    • Click on Bottom
    • Type: Fan Opacity
  3. Click on the Advanced tab and set the Padding-Top: 136px

Step 1: Add Heading Element

  1. Change the text to Top Picks For You
  2. Align: Center
  3. Go to the Style tab and change the text color to #1F2B59
  4. Click on Typography and set the Font Family: Abril Fatface

Step 2: Text Editor

  1. Change the text to  If You Give People The Opportunity To Do The Right Thing, You’ll Rarely Be Disappointed
  2. Font: Bold
  3. Go to Style tab and Align Center
  4. Change the text color to #7A7A7A
  5. Click on Typography and set the Font family: Roboto

Step 2:   Add the Listing Posts by ID Element in the same section

  1. Select the below properties
  2. Layout: Grid View
  3. Layout style: Grid Style 2
  4. Click on the Advanced tab and set the Margin-Bottom: 25px

__________________________________________________________________________________________________________________________

Section 06

 

Section Title: What Do They Say?

Page Builder Element: Testimonials

For this, we need Heading + Image + Testimonials and Again Image Elements

Step 1: Add Heading Element

  1. Change the text to What Do They Say?
  2. Align: Center
  3. Go to the Style tab and change the text color to #1F2B59
  4. Click on Typography and set these properties.
  5. Font Family: Abril Fatface
  6. Click on the Advanced tab and set these properties
    • Margin-top: 50px
    • Margin-Bottom: 50px
    • Margin-Right: 50px
    • Margin-Left: 50px

Section Setting

  1.  Create a new section with 3 columns then edit the section
  2. Click on the Advanced tab and set the Margin-Top: 60px

Step 2:  Add an image Element in the first column and add the image.

  1. Go to style tab and select the below properties
  2. Border-Top: 10px
  3. Border-right: 10px
  4. Box shadow: Color rgba(0, 0, 0, 0.5)
  5. Click on the Advanced tab and set these properties
    • Margin-Bottom: -19px
    • Border tab: Box shadow color: rgba(0, 0, 0, 0.19)

Step 2:  Add the Testimonials Element  in the same column

  1. Add the content according to your project.
  2. Add the client’s image name and title.
  3. Image position: Top
  4. Align: Center
  5. Go to Style tab and Text color: #7A7A7A
  6. Font size: 13px
  7. Style: Italic
  8. Click on the Advanced tab > and set these properties
    • Padding-Top: 50px
    • Padding-Bottom: 50px
    • Padding-Right: 50px
    • Padding-Left: 50px
    • Border tab > Border radious
    • Bottom: 10
    • Left: 10

Step 3:  Add the image element in the same column

  1. Add your brand logo
  2. Image size: Full
  3. Go to Style tab and add Width: 18px
    • Box shadow: rgba(0, 0, 0, 0.5)

Please complete the other two columns like this

__________________________________________________________________________________________________________________________

Section 07

 

Page Builder Element: Images

For this, we need four Image Elements

Section Setting

  1. Create a new section with 4 columns then edit the section
  2. Click on the Advanced tab and set the Margin-Top: 100px

Step 1:    Add an image Element in the first column and add the image.

  1. Go to the Style tab and select the below properties
    • Width: 50px
    • CSS Filters: Brightness 50
  2. Click on the Advanced tab and set the Margin-Top: 15px

Repeat this step, 3 more times with the same settings

__________________________________________________________________________________________________________________________

Section 08

Section Title: Auto Industry Trends

Page Builder Element: Blog Grids

For this, we need Heading and Blog Grids Elements 

Section Setting

  1. Create a section and then edit the section
  2. Click on the Style tab and set these properties
    • Background: Normal
    • Background Type: Classic
    • Color: #EAF0F9
    • Shape Divider: Click on Top
    • Type: Tilt Opacity
    • Flip: On
    • Click on Bottom
    • Type: Clouds
    • Invert: On
    • Brings to Front: On
  3. Click on the Advanced tab and set these properties
    • Margin-Top: 100px
    • Padding-Top: 150px
    • Padding-Bottom: 153

Step 1: Add Heading Element

  1. Change the text to Auto Industry Trends
  2. Size: Large
  3. HTML tag: H3
  4. Align: Center
  5. Go to the Style tab and change the text color to #1F2B59
  6. Click on Typography and set the Font Family: Abril Fatface

Step 1: Add the Blog Grids Element

__________________________________________________________________________________________________________________________

Section 09

 

Section Title: Frequently Asked Questions

Page Builder Element: DPRO FAQ

For this, we need Heading and DPRO FAQ Elements

Section Setting

  1. Click on the Advanced tab and set these properties
    • Margin-Top: 57px
    • Margin-Bottom: 57px

Step 1: Add Heading Element

  1. Change the text to Frequently Asked Questions
  2. Size: Large
  3. HTML tag: H3
  4. Align: Center
  5. Go to the Style tab and change the text color to #1F2B59
  6. Click on Typography and set the Font Family: Abril Fatface

Section Setting:

  1. Create a new section with Two Columns

Step 2: Add the DPRO FAQ Element in the first column

  1. Add your Question and answers according to you.

Step 3:  Add the DPRO FAQ Element in the Second column

  1. Add your Question and answers according to you

__________________________________________________________________________________________________________________________

Section 10

Car Section

Section Title: It’s a smooth ride with us.

Page Builder Element: DPRO Columns

For this, we need an image + Heading and DPRO Columns Elements

Step 1: Add an image Element in the new section

  1. Add the pink color car image from the Media
  2. Click on the Advanced tab and set these properties
  3. Margin-Bottom: -35px
  4. Margin-Left: 193px

Section Setting

  1. Click on the Advanced tab and set the Padding-Top: 150px

Step 1: Add Heading Element

  1. Change the text to It’s a smooth ride with us.
  2. Size: Large
  3. HTML tag: H3
  4. Align: Center
  5. Go to Style tab and change the text color to #1F2B59
  6. Click on Typography and set these properties.
  7. Font Family: Abril Fatface
  8. Click on the Advanced tab and set the Margin-Bottom: 50px

Step 2: Add the DPRO Columns Element

  1. Add First, second and third columns icons ( if missing )

__________________________________________________________________________________________________________________________

Section 11

Page Builder Element: DPRO Stats

For this, we need the DPRO Stats Element

Section Setting

  1. Create a section and then edit the section
  2. Click on the Style tab and set these properties
  3. Background: Normal
  4. Background Type: Classic
  5. Color: #FF7300

Step 1: Add DPro Stats Element

  1. Edit the element and Text color: #FFFFFF

 

__________________________________________________________________________________________________________________________

Congratulations!

You have created your DPRO demo with Elementor successfully

154 views