Home › Home › Demo Setup › PetFinderPro 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

Section Title: Pets Recently Added for Adoption

Page Builder Element: PPRO Listing Posts

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

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 select 3\1 structure or number 6

Step 1: Add a Heading Element to the first Column

  1. Change the text to Pets Recently Added for Adoption
  2. Go to the Style tab and change the text color to #2D2D37
  3. Click on Typography and set these properties.
    • Font Family: Poppins
    • Font Size: 24px
    • Font weight 500
  4. Go to Advanced and add Margin Top: 70px

Step 2: Text Editor Element to the first Column

  1. Change the text to Popular Exclusive Listings In Our Directory
  2. Go to the Style tab and text color: #A2ADC7
  3. Click on Typography and set these properties
    • Text-Color: #797979
    • Font Family: Poppins
    • Font Size: 14px
    • Font Weight: 400
    • Line Height: 21
    • Letter Spacing: 0.5

Step 3: Text Editor Element to the second Column

  1. Change the text Go to Text and paste this content  <a style=”font-size: 14px; color: #70788d; font-weight: normal;” href=”http://petpro.listingprowp.com/?select=&amp;lp_s_loc=&amp;lp_s_tag=&amp;lp_s_cat=&amp;s=home&amp;post_type=listing”>See All</a>
  2. Go to the Style tab and align center, text color: #A2ADC7
  3. Click on Typography and set these properties
    • Font Family: Poppins
    • Font Size: 16px
    • Font Weight: 400
    • Line Height: 25

Step 4: Edit the second column, Right-click in the second column, and then edit the column and select these properties.

  1. Vertical Align: Bottom
  2. Horizontal Align: End

Step 5: Create a new section with a full-width structure.

Step 6: Add the PPRO Listing Posts Element in the section

    1. Go to the Content tab and Listings to show 3 and select recent listings
    2. Go to Advanced and add Margin Top: 20px

_______________________________________________________________________________________________________________________

Section 02

Section Title: Top Places for your pets

Page Builder Element: PPRO Listing Location

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

Section Setting

  1. Create a section and select 3\1 structure or number 6
  2. Click on the Style tab and set these properties
    • Background: Normal
    • Background Type: Classic
    • Color: #F5F7FC

Step 1: Add a Heading Element to the first Column

  1. Change the text to Top Places For Your Pets
  2. Go to the Style tab and change the text color to #2D2D37
  3. Click on Typography and set these properties.
    • Font Family: Poppins
    • Font Size: 24
    • Font weight: 500
  4. Go to Advanced and add Margin-Top: 70px

Step 2: Text Editor Element to the first Column

  1. Change the text to Popular Exclusive Listings In Our Directory
  2. Go to the Style tab and text color: #A2ADC7
  3. Click on Typography and set these properties
    • Font Family: Poppins
    • Font Size: 14px
    • Font Weight: 400
    • Line Height: 21
    • Letter Spacing: 0.5

Step 3: Text Editor Element to the second Column

  1. Change the text Go to Text and paste this content <a style=”font-size: 14px; color: #70788d; font-weight: normal;” href=”http://petpro.listingprowp.com/?select=&amp;lp_s_loc=&amp;lp_s_tag=&amp;lp_s_cat=&amp;s=home&amp;post_type=listing”>See All</a>
  2. Go to the Style tab and align center, text color: #A2ADC7
  3. Click on Typography and set these properties
    • Font Family: Poppins
    • Font Size: 16px
    • Font Weight: 400
    • Line Height: 25

Step 4: Edit the second column, Right-click in the second column, and then edit the column and select these properties.

  1. Vertical Align: Bottom
  2. Horizontal Align: End

Step 5:Create a new section with a Full-Width structure.

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: #F5F7FC

Step 6: Add the PPRO Listing Locations Element in the section

  1. Go to the Content tab Select your desired locations and select grid view

 

_______________________________________________________________________________________________________________________

Section 3

 

Section Title: Feature Pets for Adoption

Page Builder Element: PPRO Listing Posts

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

Step 1: Add Heading element

  1. Change the text to Featured Pets for Adoption 
  2. Go to the Style tab and change the text color to #2D2D37
  3. Click on Typography and set these properties.
    • Font Family: Poppins
    • Font size: 24px
    • Font weight 500
  4. Go to Advanced and add Margin-Top: 70px

Step 2: Add Text Editor Element

  1. Change the text to Popular Exclusive Listings In Our Directory
  2. Go to Style tab and Text-color: #A2ADC7
  3. Click on Typography and set these properties
    • Font Family: Poppins
    • Font Size: 14px
    • Font Weight: 400
    • Line Height: 21
    • Letter Spacing: 0.5

Step 3:Create a new section

Step 4: Add the PPRO Listings Posts Element 

  1. Go to the Content tab and Listings to show 3 and select Ads listings

 

_______________________________________________________________________________________________________________________

Section 4

 

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 the PPRO Call to Action Element in the new section

 

_______________________________________________________________________________________________________________________

Section 5

Section Title: People Talking About Us

Page Builder Element: PPRO Activities

For this, we need Heading + Text Editor and PPRO Activities Elements

Step 1: Add Heading Element 

  1. Change the text to People Talking About Us 
  2. Go to the Style tab and change the text color to #2D2D37
  3. Click on Typography and set these properties.
    • Font Family: Poppins
    • Font size: 24
    • Font weight: 500
  4. Go to Advanced and add Margin-Top: 70px

Step 2: Add Text Editor Element

Change the text to Popular Popular Exclusive Listings In Our Directory

  1. Go to Style tab and Text-color: #A2ADC7
  2. Click on Typography and set these properties
    • Font Family: Poppins
    • Font Size: 14px
    • Font Weight: 400
    • Line Height: 21
    • Letter Spacing: 0.5

Step 4: Create a new section

Step 3: Add the PPRO Activities element 

  1. Go to the Content tab and Activities to show 3

_______________________________________________________________________________________________________________________

 

Section Title: See How IT Works

Page Builder Element: PPRO Columns

For this, we need Heading + Text Editor and PPRO Columns Elements

Section Setting

  1. Create a section and select Full-Width structure
  2. Click on the Style tab  and set these properties
    • Background: Normal
    • Background Type: Classic
    • Color: #F5F7FC

Step 1: Add Heading Element 

  1. Change the text to People Talking About Us
  2. Align: Center
  3. Go to the Style tab and change the text color to #2D2D37
  4. Click on Typography and set these properties.
    • Font Family: Poppins
    • Font size: 24px
    • Font weight: 600
  5. Go to Advanced and add Margin-Top: 70px

Step 2: Add Text Editor Element

  1. Change the text to Popular Popular Exclusive Listings In Our Directory
  2. Go to Style tab and Text-color: #A2ADC7
  3. Align: Center
  4. Click on Typography and set these properties
    • Font Family: Poppins
    • Font Size: 14px
    • Font Weight: 400
    • Line Height: 21
    • Letter Spacing: 0.5

Step 3: Create a new section

Section Setting

  1. Create a section and select Full-Width structure
  2. Click on the Style tab and set these properties
    • Background: Normal
    • Background Type: Classic
    • Color: #F5F7FC

Step 4: Add the PPRO Columns Element 

  1. Add the columns icons ( Available in the Media ) if missings

 

_______________________________________________________________________________________________________________________

Congratulations! 

You have created your PetPro demo with Elementor successfullyÂ