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