Lead Listing Landing Pages

The Listing Landing Page has several features that can be customized if it does not fit your branding.  For example, you can change the blue background on the contact form to the right, as well as all fonts.  Below is a detailed list of the customizable options.

Click here more details around the Listing Landing Page and tips on how to use it to increase your leads. 

Listing Details CSS Options

• 
  To change the font size of the listing address font (the first line):
  .sidx-container .sidx-listing-landing-1 .sidx-landing-address {
  font-size: 45px !important;
  }

  To change the font style of the listing address text (the first line):
  .sidx-container .sidx-listing-landing-1 .sidx-landing-address {
  font-family: 'font family name' !important;
  }

  To change the font color of the listing address font (the first line):
  .sidx-container .sidx-listing-landing-1 .sidx-landing-address {
  color: #hexcode !important;
  }

• 
  

  
  *To change the font size of the listing details font (the small text under address):
  .sidx-container .sidx-listing-landing-1 .sidx-landing-details {
  font-size: 14px !important;
  }

  *To change the font style of the listing details text (the small text under address)
  .sidx-container .sidx-listing-landing-1 .sidx-landing-details {
  font-family: 'font family name' !important;
  }

  *To change the font color of the listing details font (the small text under address):
  .sidx-container .sidx-listing-landing-1 .sidx-landing-details {
  color: #hexcode !important;
  }
  
  Note - if you want to keep the information inline, do not apply a font size of more than 20px.

• 
  
  *To change the font size of the price:
  .sidx-container .sidx-listing-landing-1 .sidx-landing-price {
  font-size: 50px !important;
  }

  *To change the font style of the price text:
  .sidx-container .sidx-listing-landing-1 .sidx-landing-price {
  font-family: 'font family name' !important;
  }

  *To change the font color of the price:
  .sidx-container .sidx-listing-landing-1 .sidx-landing-price {
  color: #hexcode !important;
  }

• 

  
  *To change the font size of the public remarks section (text below images):
  .sidx-container .sidx-listing-landing-1 .sidx-landing-desc {
  font-size: 20px !important;
  }

  *To change the font style of the public remarks section (text below images):
  .sidx-container .sidx-listing-landing-1 .sidx-landing-desc {
  font-family: 'font family name' !important;
  }

  *To change the font color of the public remarks section (text below images):
  .sidx-container .sidx-listing-landing-1 .sidx-landing-desc {
  color: #hexcode !important;

Photo CSS Options

• By default, the images are squared off with a 0px border radius. You may want to make the border radius appear more round in shape.

  .sidx-container img {
  border-radius: 50px !important;
  }

  The image below is an example of the border radius set to 50px.

  

Contact Form CSS Options

• To change the contact form background color (the blue box to the right of images):
  .sidx-container .sidx-listing-landing-1 .sidx-landing-photos-form .sidx-landing-form {
  background: #hexcode !important;
  }
• To add padding to the form fields (make them bigger)
  .sidx-container .sidx-listing-landing-1 .sidx-landing-form-fields .sidx-landing-input
  padding: 20px !important;
  }
• To change the font size of the text inside the form fields:
  .sidx-container button, .sidx-container input, .sidx-container keygen, .sidx-container select, .sidx-container textarea { font-size: 20px !important;
  }
• To change the border radius (make the fields more round): .sidx-container .sidx-listing-landing-1 .sidx-landing-form-fields .sidx-landing-input {
  border-radius: 50px !important;
  }

Form Header

• *To change font size of the form heading:
  .sidx-container .sidx-listing-landing-1 .sidx-landing-form-heading {
  font-size: 20px !important;
  }

• *To change the font of the form heading text:
  .sidx-container .sidx-listing-landing-1 .sidx-landing-form-heading {
  font-family: 'font-family name' !important;
  }

• *To change the font color of the form heading:
  .sidx-container .sidx-listing-landing-1 .sidx-landing-form-heading {
  color: #hexcode !important;
  }

"Get Full Details Instantly" Button

• The text of the button itself cannot be edited from "Get Full Details Instantly".

  *To change the background color of the "get full details instantly" button:
  .sidx-container .sidx-listing-landing-1 .sidx-landing-form-button, .sidx-container .sidx-listing-landing-1 .sidx-landing-form-button:hover {
  background: #hexcode !important;
  }

• *To change font size of the "get full details instantly" button:
  .sidx-container .sidx-listing-landing-1 .sidx-landing-form-button, .sidx-container .sidx-listing-landing-1 .sidx-landing-form-button:hover {
  font-size: 20px !important;
  }

• *To change the font of the "get full details instantly" button text:
  .sidx-container .sidx-listing-landing-1 .sidx-landing-form-button, .sidx-container .sidx-listing-landing-1 .sidx-landing-form-button:hover {
  font-family: 'font-family name' !important;
  }

• *To change the font color of the "get full details instantly" button:
  Change the font color or font family of the form heading:
  .sidx-container .sidx-listing-landing-1 .sidx-landing-form-button, .sidx-container .sidx-listing-landing-1 .sidx-landing-form-button:hover {
  color: #hexcode !important;
  }

• *To change the border color of the "get full details instantly" button, you will have to set a border of at least 1px and specify the type of border, in this case, it's solid:
  .sidx-container .sidx-listing-landing-1 .sidx-landing-form-button, .sidx-container .sidx-listing-landing-1 .sidx-landing-form-button:hover {
  border: 1px solid #hexcode !important; 
  }

• *To change the border radius of the "get full details instantly" button:
  .sidx-container .sidx-listing-landing-1 .sidx-landing-form-button, .sidx-container .sidx-listing-landing-1 .sidx-landing-form-button:hover {
  border-radius 0px !important;
  }

• *To change the padding of the "get full details instantly" button:
  .sidx-container .sidx-listing-landing-1 .sidx-landing-form-button, .sidx-container .sidx-listing-landing-1 .sidx-landing-form-button:hover {
  padding: 25px 45px !important;
  }