DrivePro Demo for ListingProWP With WPbakery

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

For WPBakery Page Builder Users

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

Section 01

Page Builder Element: DPRO Partners

For this, we need DPRO Partners, DPRO Single Logo, and HTML Elements

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

Step 1: Add DPRO Partners Element

Step 2: Append the new Element DPRO Single Element Logo

  1. Add your logo in the image section

Step 3: Edit the row and set the below properties.

  1. Row Type: Full Width- Center content
  2. Background Color:#eaf0f9

Step 4: Edit the Column And go to Design options

  1. Margin-top: 20px

Step 5:  Add HTML RAW Element in the New Column

  1.   Add the below code in this Element
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2600 131.1" preserveAspectRatio="none">

          <path class="elementor-shape-fill" d="M0 0L2600 0 2600 69.1 0 0z"></path>

          <path class="elementor-shape-fill" style="opacity:0.5" d="M0 0L2600 0 2600 69.1 0 69.1z"></path>

          <path class="elementor-shape-fill" style="opacity:0.25" d="M2600 0L0 0 0 130.1 2600 69.1z"></path></svg>

 

__________________________________________________________________________________________________________________________

Section 02

Section Title: Drive BY Style

Page Builder Element: DPRO Categories

For this, we need Text Block and DPRO Categories Element

Step 1:Add Text Block Element

  1. Add the below code to this Element
          <h2 style="color: #1f2b59; font-size: 59px; text-align: center; margin-bottom: 20px;"><em><b>DRIVE BY STYLE</b></em></h2>

<div class="elementor-element elementor-element-fd02330 elementor-widget elementor-widget-text-editor" data-id="fd02330" data-element_type="widget" data-widget_type="text-editor.default">

<div class="elementor-widget-container"><p style="text-align: center; color: #314070; margin-bottom: 20px;"><strong>Explore the world's largest automotive marketplace</strong></p></div></div>

 

Step 2: Add Listing Categories Element

  1. Select: 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 HTML, Text Block, and DPRO How It Works Elements

Step 1: Add HTML RAW Element in the New Column

  1. Add the below code to this Element
          <svg xmlns="http://www.w3.org/2000/svg" style="transform: rotate(180deg);" viewBox="0 0 2600 131.1" preserveAspectRatio="none">

          <path class="elementor-shape-fill" d="M0 0L2600 0 2600 69.1 0 0z"></path>

          <path class="elementor-shape-fill" style="opacity:0.5" d="M0 0L2600 0 2600 69.1 0 69.1z"></path>

          <path class="elementor-shape-fill" style="opacity:0.25" d="M2600 0L0 0 0 130.1 2600 69.1z"></path></svg>

 

Step 2: Edit the Column and go to the Design Options

  1. Margin-bottom: -12px

Step 3: Edit the Row

  1. Select Row type: Full width

Step 4: Add Text Block Element

  1. Add the below code to this Element
<h2 style="color: #1f2b59; text-align: center; margin-bottom: 20px;"><b>HOW IT WORKS</b></h2>

<div class="elementor-element elementor-element-fd02330 elementor-widget elementor-widget-text-editor" data-id="fd02330" data-element_type="widget" data-widget_type="text-editor.default"><div class="elementor-widget-container"><p style="text-align: center; color: #7a7a7a; margin-bottom: 20px;"><strong>If You Give People The Opportunity To Do The Right Thing, You’ll Rarely Be Disappointed</strong></p></div></div>

 

Step 5: Edit the Column: Go to design options and select the below properties

  1. Padding-Top: 25px
  2. Padding-Bottom: 25px

Step 6: Add DPRO How it Works Element in the same section

  1. Add Step 1, step 2, and step 3 images if they are missing.
  2. Also, edit the content once to show it on the frontend in the WPBakery

__________________________________________________________________________________________________________________________

Section 04

Section Title: Browse By

Page Builder Element: DPRO Taxonomies

For this, we need HTML, Text Block, and DPRO Taxonomies Elements

Step 1: Add HTML RAW Element in the New Column

  1. Add the below code to this Element
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.5 19.6" preserveAspectRatio="none">

          <path class="elementor-shape-fill" style="opacity:0.33" d="M0 0L0 18.8 141.8 4.1 283.5 18.8 283.5 0z"></path>

          <path class="elementor-shape-fill" style="opacity:0.33" d="M0 0L0 12.6 141.8 4 283.5 12.6 283.5 0z"></path>

          <path class="elementor-shape-fill" style="opacity:0.33" d="M0 0L0 6.4 141.8 4 283.5 6.4 283.5 0z"></path>

          <path class="elementor-shape-fill" d="M0 0L0 1.2 141.8 4 283.5 1.2 283.5 0z"></path></svg>

 

Step 2: Go to the Design Options

  1. Margin-top: -12px

Step 3: Edit the Row

  1. Select Row type: Full width

Step 4: Add Text Block Element

  1. Add the below code to this Element
<h2 style="color: #1f2b59; text-align: center; margin-bottom: 20px;"><b>Browse By</b></h2><div class="elementor-element elementor-element-fd02330 elementor-widget elementor-widget-text-editor" data-id="fd02330" data-element_type="widget"data-widget_type="text-editor.default"><div class="elementor-widget-container"><p style="text-align: center; color: #7a7a7a; margin-bottom: 20px;"></p></div></div>

 

Step 5: Edit the Row

  1. Select row type: Full width-Content center

Step 6: Add DPRO Taxonomies Element in the same section

  1. Select your desired Locations, Category, and Tags

 

__________________________________________________________________________________________________________________________

Section 05

Section Title: TOP PICKS FOR YOU

Page Builder Element: LP Listings by ID

For this, we need HTML, Text Block, and LP Listings by ID Elements

Step 1: Add HTML RAW Element in the New Column

  1. Add the below code to this Element
          <svg xmlns="http://www.w3.org/2000/svg" style="transform: rotate(180deg);" viewBox="0 0 2600 131.1" preserveAspectRatio="none"><path class="elementor-shape-fill" d="M0 0L2600 0 2600 69.1 0 0z"></path><path class="elementor-shape-fill" style="opacity:0.5" d="M0 0L2600 0 2600 69.1 0 69.1z"></path><path class="elementor-shape-fill" style="opacity:0.25" d="M2600 0L0 0 0 130.1 2600 69.1z"></path></svg>

Step 2: Go to Design options and add Margin-bottom: -12px

Step 3: Edit the Row

  1. Select row type: Full-width

Step 4: Add Text Block Element in the new column

  1. Add the below code to this Element
<h2 style="color: #1f2b59; text-align: center; margin-bottom: 20px;"><b>TOP PICKS FOR YOU</b></h2>
<div class="elementor-element elementor-element-fd02330 elementor-widget elementor-widget-text-editor" data-id="fd02330" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container"><p style="text-align: center; color: #7a7a7a; margin-bottom: 20px;"><strong>Exclusively Hand-Picked </strong>Dealerships</p>
</div></div>

Step 2: Edit the Row

  1. Select row type: Full width-Content center
  2. Background Color: #eaf0f9

Step 3: Add LP Listings by ID in the same section

  1. Listing Layout: Grid View
  2. Style: Grid Style 2

__________________________________________________________________________________________________________________________

Section 06

Page Builder Element Title: What Do They Say?

For this, we need Text Block and  Image Elements

Step 1: Add Text Block Element in the new column

  1. Add the below code to this Element
<h2 style="color: #1f2b59; text-align: center; margin-bottom: 20px;"><b>WHAT DO They Say?</b></h2>

Step 2: Add the Single Image Element

  1. Click on the menu button and convert it into ⅓ columns

Step 3: Edit the Image element and set the below properties.

  1. Image Source: Media Library
  2. Upload your image
  3. Image size: Full

Step 4:  Add the Text Block Element in the first column

  1. Add the clients content and align it to the Center
  2. Go to Design Options Margin-Top: 10px

Step 5:  Add the Single image Element

  1. Edit the image element and set the below properties.
    • Image Source: Media Library
    • Upload your image
    • Image size: 60×60
    • Alignment: Center
  2. Go to Design options and set the below properties
    1. Margin-top: 20px
    2. Margin_bottom: 20px

Repeat this step two more times

Note: This Element is actually made with the Elementor, so we have tried our best to make this similar to the Elementor

         

__________________________________________________________________________________________________________________________

Section 07

Section Title: Auto Industry Trends

Page Builder Element: LP Blog Grids

For this, we need HTML, Text Block, and LP Blog Grids Elements

Step 1: Add HTML RAW Element in the New Column

  1. Add the below code to this Element
<svg xmlns="http://www.w3.org/2000/svg" style="transform: rotate(180deg);" viewBox="0 0 2600 131.1" preserveAspectRatio="none">

<path class="elementor-shape-fill" d="M0 0L2600 0 2600 69.1 0 0z"></path>

<path class="elementor-shape-fill" style="opacity:0.5" d="M0 0L2600 0 2600 69.1 0 69.1z"></path>

<path class="elementor-shape-fill" style="opacity:0.25" d="M2600 0L0 0 0 130.1 2600 69.1z"></path></svg>

 

Step 2: Go to Design Options

  1. Margin-bottom: –12px

Step 3: Edit the Row

  1. Select row type: Full-width

Step 4: Add Text Block Element in the new column

  1. Add the below code to this Element
<h2 style="color: #1f2b59; text-align: center; margin-bottom: 20px;"><b>Auto Industry Trends</b></h2>

Step 5: Edit the Row

  1. Select row type: Full width-Content center
  2. Background Color: #eaf0f9

Step 6: Add LP Blog Grids in the same section

  1. Layout: Blog Grid
  2. Category: News (3 Posts )

__________________________________________________________________________________________________________________________

Section 08

Section Title: Frequently Asked Questions

Page Builder Element: DPRO FAQ

For this, we need Text Block and DPRO FAQ Elements

Step 1:    Add Text Block Element in the new column

  1. Add the below code to this Element
<h2 style="color: #1f2b59; text-align: center; margin-bottom: 20px;"><b>Frequently Asked Questions</b></h2>

 

Step 2: Edit the Row

  1. Select row type: Full width-Content center

Step 3:  Add DPRO FAQ Element and convert it into ½ columns

  1. Add the Questions and answers according to your own

Step 4:   Add the FAQ Element in the second columns

  1. Add the Questions and answers according to your own

 

__________________________________________________________________________________________________________________________

Section 09

Section Title: Car

Page Builder Element: DPRO Columns

For this, we need Image, HTML, Text Block and DPRO Columns Element

Step 1: Add the Single Image element

  1. Image Source: Media Library
  2. Add Car image
  3. Image size: 80×80
  4. Margin-left: 400px

Step 2: Add HTML RAW Element in the New Column

  1. Add the below code to this Element
<svg xmlns="http://www.w3.org/2000/svg" style="transform: rotate(180deg);" viewBox="0 0 2600 131.1" preserveAspectRatio="none">

<path class="elementor-shape-fill" d="M0 0L2600 0 2600 69.1 0 0z"></path>

<path class="elementor-shape-fill" style="opacity:0.5" d="M0 0L2600 0 2600 69.1 0 69.1z"></path>

<path class="elementor-shape-fill" style="opacity:0.25" d="M2600 0L0 0 0 130.1 2600 69.1z"></path></svg>

 

Step 3: Go to Design Options

  1. Margin-top: -30px

Step 4: Edit the Column, Go to design options and set the below properties

  1. Margin-top: 100px
  2. Margin-bottom: -12px

Step 5: Add Text Block Element in the new column

  1. Add the below code to this Element
<h2 style="color: #fff; text-align: center; margin-bottom: 20px;"><b>It's a smooth ride with us.</b></h2>

<div class="elementor-element elementor-element-fd02330 elementor-widget elementor-widget-text-editor" data-id="fd02330" data-element_type="widget"data-widget_type="text-editor.default"><div class="elementor-widget-container"><p style="text-align: center; color: #7a7a7a; margin-bottom: 20px;"></p></div></div>

 

Step 6: Edit the Row

  1. Select row type: Full width-Content center
  2. Background Color: #363ecf

Step 7: Add DPRO Columns Element

  1. Edit the content once in WPBakery

 

__________________________________________________________________________________________________________________________

Section 10

 

Page Builder Element: DPRO Stats

For this, we need the DPRO Stats Element

Step 1: Add the DPRO Stats element in the new section

  1. Text color: #ffffff

Step 2: Edit the row and select the below properties

  1. Select row type: Full width-Content center
  2. Background Color: #ff7300

__________________________________________________________________________________________________________________________

Congratulations!

You have created your DrivePro with WP Bakery successfully

203 views