WeddingPro 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

wedding1

Section Title: Top Services Providers

Page Builder Element: WPRO Listing Posts

For this, we need WPRO Listing Posts Element

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 WPRO Listing Posts Element

  1. Show listings: 3
  2. Listings Type: Ads Listings

Step 2:  Edit the Row and set the below properties.

  1. Row Title: Top Services Providers
  2. Row Description: Popular Exclusive Listings In Our Directory
  3. Title Color: #1a1b1b
  4. Row Type: Full Width- Center content
  5. Background Color: #f4f9f9

Step 2:   Edit the column and go to the Design Option tab and select the below details.

  1. Margin-Top: 40px
  2. Margin-Bottom: 40px

__________________________________________________________________________________________________________________________

Section 02

wedding2

Section Title: All Wedding Vendor Categories

Page Builder Element: WPRO Categories

For this, we need WPRO Categories Element

Step 1:  Add WPRO Categories Element

  1. Select your desired Categories

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

  1. Row Title: All Wedding Vendor Categories
  2. Row Description: Easily find an expert for any part of your wedding
  3. Row Type: Full Width- Center content

Step 3:  Edit the column and go to the Design Option tab and select the below details.

  1. Margin-Top: 40px
  2. Margin-Bottom: 40px

__________________________________________________________________________________________________________________________

Section 03

wedding3

Section Title: Featured Wedding Venues

Page Builder Element: WPRO Listing Posts

For this, we need WPRO Listing Posts Element

Step 1:  Add WPRO Listing Posts Element

  1. Listings to show: 3
  2. Listing Type: Recent Listings

Step 2: Edit the Row and set the below properties.

  1. Row Title: Featured Wedding Venues
  2. Row Description: Leading North East Wedding Venues that are worth exploring further
  3. Row Type: Full Width- Center content
  4. Background Color: #f4f9f9

Step 3:   Edit the column and go to the Design Option tab and select the below details.

  1. Margin-Top: 40px
  2. Margin-Bottom: 40px

__________________________________________________________________________________________________________________________

Section 04

wedding4

Section Title: Explore our services by Cities

Page Builder Element: WPRO Locations

For this, we need WPRO Locations Element

Step 1: Add WPRO Locations Element

  1. Select your desired Locations

Step 2: Edit the Row and set the below properties.

  1. Row Title: Explore our Services by Cities
  2. Row Description: See Services In These Cities
  3. Row Type: Full Width- Center content

Step 3:  Edit the column and go to the Design Option tab and select the below details.

  1. Margin-Top: 40px
  2. Margin-Bottom: 50px

__________________________________________________________________________________________________________________________

Section 05

wedding5

Section Title: Testimonials

Page Builder Element: WPRO Activities

For this, we need WPRO Activities Element

Step 1:  Add WPRO Activities Element

  1. Select your desired Locations

Step 2: Edit the Row and set the below properties.

  1. Row Title: Testimonials
  2. Row Description: Popular Exclusive Listings In Our Directory
  3. Row Type: Full Width- Center content

Step 3:   Edit the column and go to the Design Option tab and select the below details.

  1. Margin-Top: 40px
  2. Margin-Bottom: 40px

__________________________________________________________________________________________________________________________

Section 06

wedding6

Section Title: News & Tips

Page Builder Element: WPRO Blogs

For this, we need WPRO Blogs Element

Step 1:  Add WPRO Blogs Element

  1. Blogs to show: 3

Step 2:  Edit the Row and set the below properties.

  1. Row Title: News & Tips
  2. Row Description: Checkout latest news and articles from our blog
  3. Row Type: Full Width- Center Content

Step 3:   Edit the column and go to the Design Option tab and select the below details.

  1. Margin-Top: 40px
  2. Margin-Bottom: 40px

__________________________________________________________________________________________________________________________

Section 07

wedding7

Section Title: How It Works

Page Builder Element: WPRO Columns

For this, we need WPRO Columns Element

Step 1:   Add WPRO Columns Element

  1. Add your columns icons if missing

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

  1. Row Title: How IT Works
  2. Row Description: Our goal is to make your journey easy.
  3. Row Type: Full Width- Center Content
  4. Background Color: #f4f9f9

Step 3:    Edit the column and go to the Design Option tab and select the below details.

  1. Margin-Top: 40px
  2. Margin-Bottom: 40px

__________________________________________________________________________________________________________________________

Section 08

 
wedding8

Section Title: Wedding Venues by States

Page Builder Element: WPRO Locations

For this, we need WPRO Locations Element

Step 1:Add WPRO Locations Element

  1. Select your desired Locations
  2. Style: Name Only

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

  1. Row Title: Wedding Venues by States
  2. Row Description: Popular Exclusive Listings In Our Directory
  3. Row Type: Full Width- Center Content

Step 3:   Edit the column and go to the Design Option tab and select the below details.

  1. Margin-Top: 40px
  2. Margin-Bottom: 40px

__________________________________________________________________________________________________________________________

Section 09

wedding9

Element Title: Are you a Pet Vendor?

Element Name in the Page builder: WPRO Call to Action

For this, we need WPRO Locations Element

Step 1:  Add WPRO Call to Action Element

Step 2:  Edit the Row and set the below properties.

  1. Background color: #f4f9f9

Step 3:   Edit the column and go to the Design Option tab and select the below details.

  1. Margin-Top: 40px
  2. Margin-Bottom: 20px

__________________________________________________________________________________________________________________________

Section 10

wedding10

Section Title: Our Famous Partners

Page Builder Element: WPRO Partners

For this, we need WPRO Partners and WPRO Single Logo Element

Step 1:  Add WPRO Partners Element

Step 2:  Append the New Element WPRO Single Element Logo

  1. Add your Logo in the Image section

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

  1. Row Title: OUR FAMOUS PARTNERS
  2. Row Type: Full Width- Center Content
  3. Backgrund Color: #28b5bb

Step 4:  Edit the column and go to the Design Option tab and select the below details.

  1. Margin-Top: 40px
  2. Margin-Bottom: 40px

__________________________________________________________________________________________________________________________

Congratulations!

You have created your WeddingPro demo with WPBakery successfully

PetFinderPro 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

Section Title: Pets Recently Added for Adoption

Page Builder Element: PPRO Listing Posts

For this, we need PPRO Listing Posts Element

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 PPRO Listing Posts Element

  1. Show listings: 3
  2. Listings Type: Recent Listings

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

  1. Title Position: Left
  2. Row Title: Pets Recently Added for Adoption
  3. Row Description: Popular Exclusive Listings In Our Directory
  4. Title line Background Color: #a2adc7
  5. Row Type: Center content

 

__________________________________________________________________________________________________________________________

Section 02

Section Title: Top Places for your Pets

Page Builder Element: PPRO Locations

For this, we need the PPRO Locations Element

Step 1:  Add PPRO Locations Element

  1. Select your desired Locations
  2. Button Text: See All
  3. Button Link: http://petpro.listingprowp.com/?select=&lp_s_loc=&lp_s_tag=&lp_s_cat=&s=home&post_type=listing

Step 2:  Edit the Row and set the below properties.

  1. Title Position: Left
  2. Row Title: Top Places For Your Pets
  3. Row Description: Popular Exclusive Listings In Our Directory
  4. Title line Background Color: #1a1b1b
  5. Row Type: Full Width- Center content
  6. Background Color: #f5f7fc

__________________________________________________________________________________________________________________________

Section 03

Section Title: Featured Pets for Adoption

Page Builder Element: PPRO Listing Posts

For this, we need PPRO Listing Posts Element

Step 1:  Add PPRO Listing Posts Element

  1. Show listings: 3
  2. Listings Type: Ads Listings
  3. Button Text: See All
  4. Button Link: Click Here

Step 2:   Edit the Row and set the below properties.

  1. Title Position: Left
  2. Row Title: Featured Pets for Adoption
  3. Row Description: Popular Exclusive Listings In Our Directory
  4. Title line Background Color: #1a1b1b
  5. Row Type: Full Width- Center content

 

__________________________________________________________________________________________________________________________

Section 04

Section Title: Are you a Pet Vendor?

Page Builder Element: PPRO Call to Action

For this, we need PPRO Call to Action Element

Step 1:     Add PPRO Call to Action Element

  1. Title: Are you a Pet Vendor?

 

__________________________________________________________________________________________________________________________

Section 05

Section Title: People Talking About Us

Page Builder Element: PPRO Activities

For this, we need PPRO Activities Element  Element

Step 1:    Add PPRO Activities Element

  1. Activities to Show: 3

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

  1. Title Position: Left
  2. Row Title: People Talking About Us
  3. Row Description: Popular Exclusive Listings In Our Directory
  4. Title line Background Color: #a2adc7
  5. Row Type: Full Width- Center content

__________________________________________________________________________________________________________________________

Section 06

Section Title: See How It Works

Page Builder Element: PPRO Columns

For this, we need PPRO Columns Element

Step 1:  Add PPRO Columns Element

  1. Edit element and add your columns icons if missing

Step 2:  Edit the column and go to the Design Option and add Margin-Bottom: 70px

__________________________________________________________________________________________________________________________

Section 07

Section Title: OUR FAMOUS PARTNERS

Page Builder Element: PPRO Partners

For this, we need PPRO Partners and PRO Single Logo Elements

Step 1:Add PPRO Partners Element

Step 2: Append the new element PPRO Single Element Logo

  1. Add your Logo in the Image section

Step 2: Edit the Row and set the below properties.

  1. Row Title: OUR FAMOUS PARTNERS
  2. Title Color: #ffffff
  3. Row Type: Full Width- Center content
  4. Background Color: #669c9b

 

__________________________________________________________________________________________________________________________

Congratulations!

You have created your PetPro with WPBakery successfully

MedicalPro 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

Section Title: OUR PARTNERS FOR HEALTH

Page Builder Element: MD Partners

For this, we need MD Partners and MD Single Logo 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 MD Partners Element

Step 2:  Append the New Element MD Single Element Logo

  1.  Add your Logo in the Image Section

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

  1. Title color: #fffff
  2. Row Title:    OUR PARTNERS FOR HEALTH
  3. Row Type: Full width-content center
  4. Background Color: #465be0
  5. Extra Class Name: mp-small-title-class

__________________________________________________________________________________________________________________________

Section 02

Section Title: SOME OF OUR MOST VISITED DOCTORS

Page Builder Element: MD Listing

For this, we need MD Listing Element

Step 1:Add MD Listings Element

  1. Posts per page: 15

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

  1. Row Title: SOME OF OUR MOST VISITED DOCTORS

__________________________________________________________________________________________________________________________

Section 03

Section Title: FIND THE TOP DOCTORS BY SPECIALTY, CONDITION, PROCEDURE, OR LOCATION

Page Builder Element: MedicalPro Taxonomy List

For this, we need MedicalPro Taxonomy List Element

Step 1:Add MedicalPro Taxonomy List Element

Select your desired Category, Features, Hospital, and Location

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

  1. Row Title:    SOME OF OUR MOST VISITED DOCTORS
  2. Title Color: #000000

__________________________________________________________________________________________________________________________

Section 04

Section Title: SEE HOW IT’S WORKS

Page Builder Element: MD Content Box

For this, we need MD Content Box and LP Single Content Box Elements

Step 1: Add MD Content Box Element

  1. Select your desired Category, Features, Hospital, and Location

Step 2: Append the New Element LP Single Content Box Element

  1. Title: Find the Right Doctors
  2. Upload the search icon image ( If missing )
  3. Icon Background color: #fff4e1

Step 3: Append the New Element LP Single Content Box Element

  1. Title: Book An Appointment
  2. Upload the content icon image ( If missing )
  3. Icon Background color: #e7fcf9

Step 4: Append the New Element LP Single Content Box Element

  1. Title: Meet In-Person/ Virtual
  2. Upload the Heart icon image ( If missing )
  3. Icon Background color: #fee0f6

Step 5: Edit the Row and set the below properties.

  1. Row Title:    SEE HOW IT’S WORKS
  2. Row Type: Full width-content center

__________________________________________________________________________________________________________________________

Section 05

Page Builder Element: Images

For this, we need Two images Elements

Step 1:   Add the Image Element in the same section

  1. Add the below  Rectangle image if missing from the media
  2. Click on the Advanced tab and set the Margin Top: -70px

Step 2:   Add the image element again in the same section

  1. Add the below image in the element if missing from the media

__________________________________________________________________________________________________________________________

Section 06

Section Title: DOCTORS REVIEWS

Page Builder Element: MD Activities

For this, we need MD Activities and Text block Elements

Step 1: Add MD Activities Element

  1. Posts per page: 4

Step 2:  Edit the Row and set the below properties.

  1. Row Title: DOCTOR REVIEWS
  2. Row Description: SHARING YOUR EXPERIENCE CAN CONNECT SOMEONE TO THE CARE THEY NEED.
  3. Row Type: Full-width Content Center
  4. Background Color: #465be0
  5. Extra Class Name: mp-small-title-class

Step 3: Add Text Block Element and convert it into ¼

  1.  Add the below code to this Element
 <h2 style="color: #ffffff; text-align: center;"><strong>2,00,000 +</strong></h2>
<p style="color: #ffffff; text-align: center;">Happy Patients</p>
  1. Edit the row and set the below properties.
    • Row Type: Full-width content center
    • Background Color: #4357cf
  2. Edit the Column go to Design Options and select the below properties
    • Padding-Top: 50px
    • Padding-Bottom: 50px

Add the Text block element in the other three columns with the same settings

__________________________________________________________________________________________________________________________

Section 07

Section Title: BENEFITS OF JOINING US

Page Builder Element: MD Columns

For this, we need MD Columns Element

Step 1:Add MD Columns Element

  1. Add Column left image ( if missing )
    • Add the First icon ( If missing )
    • Add the Second icon ( If missing )
    • Add the Third icon ( If missing )

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

  1. Row Title: BENEFITS OF JOINING US
  2. Background Color: #ffffff

 

__________________________________________________________________________________________________________________________

Section 08

Page Builder Element: MD Facts Element

For this, we need MD Facts Element

Step 1: Add MD Facts Element

  1. Add the First fact image ( If missing )
  2. Add the Second fact image  ( If missing )
  3. Add the Third fact image  ( If missing )

Step 2: Edit the Row and set the below properties.

  1. Row Type: Full-Width center content
  2. Background Color: #ffffff

 

__________________________________________________________________________________________________________________________

Section 09

Section Title: As Featured In

Page Builder Element: MD Partners

For this, we need MD Partners and MD Single Logo Element

Step 1: Add MD Partners Element

Step 2: Append the new Element MD Single Element Logo

  1. Add your logo in the image section

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

  1. Title color: #fffff
  2. Row Title:    As Featured In
  3. Row Type: Full width-content center
  4. Background Color: #4357cf

__________________________________________________________________________________________________________________________

Congratulations!

You have created your MedicalPro with WPBakery successfully

LawyersPro 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

Section Title: Stats

Page Builder Element: LPRO Stats

For this, we need LPRO Stats Element

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 LPRO Stats Element

  1. Set these details if you want this as like on the demo
    1. First Stat Number: 100
    2. First Stat Unit: YRS
    3. First Stat Details: Of matching people to attorneys
    4. Second Stat Number: 98
    5. Second Stat Unit: %
    6. Second Stat Details: Lawyers listed are verified
    7. Third Stat Number: 10
    8. Third Stat Unit: M
    9. Third Stat Details: Monthly visit our network
    10.  Fourth Stat Number: 100
    11. Fourth Stat Unit: +
    12. Fourth Stat Details: Practice areas covered 
  2. Text-Color: #9da3be

Step 2: Row Setting:

  1. Row Type: Full-width center content
  2. Background-color: #282d41

__________________________________________________________________________________________________________________________

Section 02

Section Title: Our Top Rated Lawyers

Page Builder Element: LPRO Listings Posts

For this, we need LPRO Listings Posts Element

Step 1:     Add LPRO Listings Posts Element

  1. Show listings: 6
  2. Edit the Row and set the below properties.
    1. Row Title: Our Top Rated Lawyers
    2. Row Description: Popular Exclusive Listings In Our Directory
    3. Title Color: #1a1b1b
    4. Row Type: Full Width- Center content
  3. Edit the column and go to the Design Option tab and add Margin-Top: 70px

__________________________________________________________________________________________________________________________

Section 03

Section Title: How It Works

Page Builder Element: LPRO Columns

For this, we need LPRO Columns Element

Step 1: Add LPRO Columns Element

Step 2: Row Setting:

  1. Row Title: How it works
  2. Row Description: It’s easy to find and book a lawyer and also to share your experience.
  3. Row-Type: Full Width Center content
  4. Background-color: #282d41
  5. Extra Class: dark-bg

Step 3: Columns Setting:

  1. Margin-Top: 70px
  2. Margin-Bottom: 70px

__________________________________________________________________________________________________________________________

Section 04

 

Element Title: Browse Attorneys

Element Name in the Page builder: LPRO Listings taxonomies

For this, we need LPRO Listings taxonomies Elements

Step 1:  Add LPRO Listings taxonomies Element

  1. Select your desired Locations, Practice area, Legal topics, and Features.

Step 2:  Edit the Row and set the below properties.

  1. Row Title: Browse Attorneys
  2. Row Description: Find Your Attorney By Different Types
  3. Title Color: #1a1b1b
  4. Row Type: Full Width- Center content

Step 3Edit the column and go to the Design Option tab and select the below details.

  1. Margin-Top: 70px
  2. Margin-Bottom: 70px

__________________________________________________________________________________________________________________________

Section 05

Page Builder Element: LPRO Activities

For this, we need LPRO Activities Element

Step 1: Add the LPRO Activities Element.

  1. Activities to show: 6

Step 2:  Row Setting:

  1. Row-Type: Full Width Center content
  2. Background image: Blue ( In the Media )
  3. Extra Class: dark-bg

Step 3: Columns Setting:

  1. Margin-Top: 70px
  2. Margin-Bottom: 70px

__________________________________________________________________________________________________________________________

Section 06

Element Title: From Our Blogs

Element Name in the Page builder: LPRO Blogs Posts

For this, we need LPRO Blogs Posts Element

Step 1: Add LPRO Blogs Posts Element

Step 2: Edit the Row and set the below properties.

  1. Row Title: From Our Blogs
  2. Row Description: See Services in These Cities
  3. Title Color: #1a1b1b
  4. Row Type: Center

Step 3Edit the Column and go to the Design Option tab and select the below properties.

  1. Margin-Top: 70px
  2. Margin-Bottom: 70px

__________________________________________________________________________________________________________________________

Section 07

Section Title: Featured In

Page Builder Element: LPRO Partners

For this, we need LPRO Partners and LPRO Single Logo Element

Step 1:  Add LPRO Partners Element

Step 2:  Append the new Element LPRO Single Element Logo

  1. Add your logo in the image section

Step 4:  Edit the Row and set the below properties.

  1. Row Title: Featured In
  2. Row Type: Full Width Center content
  3. Background Color: #282d41

Step 5Edit the Column and go to the Design Option tab and select the below properties.

  1. Margin-Top: 70px
  2. Margin-Bottom: 70px

__________________________________________________________________________________________________________________________

Congratulations!

You have created your LawyersPro demo with WPBakery successfully

EventPro 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

Section Title:  Upcoming Events

Page Builder Element: Event Posts

For this, we need the Event Posts Element

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 Event Posts Element

  1. Events Type: Upcoming Events

__________________________________________________________________________________________________________________________

Section 02

Section Title:  Experiences to Explore

Page Builder Element: Event categories

For this, we need the Event Categories Element

Step 1:   Add Event Categories Element

  1. Select your desired Categories

Step 2:   Edit the row and set the below properties

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

 

__________________________________________________________________________________________________________________________

Section 03

 

Section Title:  Top Destination

Page Builder Element: Event Locations

For this, we need the Event Locations Element

Step 1:        Add Event Locations Element        

  1. Select your desired Locations

__________________________________________________________________________________________________________________________

Section 04

 

Section Title:  Explore Groups

Page Builder Element: Group Posts

For this, we need the HTML and Group Posts Elements

Step 1:   Add RAW HTML Element

  1. Add the below code to this Element
<div class="ep-section-title-container row"><div class="col-md-12"><h2>Explore Groups </h2><p class="ep-sub-title col-md-6">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</p></div></div>

Step 2:    Create a new Row and add the Group Posts  Element section

  1. Events Per Page: 3
  2. Edit the Column and go to Design Options
    • Margin-top: 40px
    • Margin-Bottom: 40px

 

__________________________________________________________________________________________________________________________

Section 05

Section Title:  Explore the World

Page Builder Element: Event Posts

For this, we need the HTML and Group Posts Elements

Step 2:        Add the Event Posts  Element in the new section

  1. Select event type: All events

__________________________________________________________________________________________________________________________

 

Congratulations!

You have created your EventPro with WPBakery Successfully

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 4Add 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 5Add 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