HOMEPAGE

Quick Link:

From the Squarespace site left navigation, let’s start with the Homepage.

First, we have to update the Title and Description of the page. To do so, please hover on the homepage and click the gear icon.

Afterwards, a screen will pop up on the left side of the page with the page configuration details. Kindly replace the label “Company Name” and “Area” with their corresponding details that are specified on the Jira ticket.

Don’t forget to click SAVE.

Next, on the homepage banner section and the Homepage-C Top which is the section under the Banner, again replace only the label “Company Name” and “Area” with the corresponding client details.

To edit these sections, hover at the top of the red dashed rectangular line, and click EDIT

To save the changes, scroll down a bit and wait for the options to come out. Click SAVE

Next is the Home Listings section. We need to configure the listings on the Home Search site to generate the listing results on this section. But first, let’s discuss how the tab label works.

The tab labels “Main Area” and “Secondary Area” are basically the names of the primary area/s provided by the client. Just take note that a client’s Primary Area can be made up of more than one city or area. Please see more details below:

If there are,

• Two Primary Areas - This will fill exactly the number of columns we have on the Home Listings section. (For an instance, if the client’s primary areas are Greenville and Simpsonville, the first tab will be labeled “Greenville” and the second tab as “Simpsonville”)

• One Primary area - if only one area is provided please use the area name as the label of the first tab and set the second tab as “Featured Listings”

• More than two Primary Areas - if more than two areas were provided, label the first tab as “All Listings” and the second tab as “Featured Listings”

After naming the home listing tabs, proceed now with the listings itself.

On the Featured Listings which is usually placed on the second tab, the code we’re using to generate these listings is:

//*Featured Listing Default Code*//

<div class="YLOPO_resultsWidget" data-search='{"featured":"t"}'></div>

Go to the Client’s Jira Ticket and look for the Home Search site links.

You’ll notice that there are always two links provided under the Home Search website detail. The Home Search Site is the IDX-connected site where leads can view the listed properties. The .ylopo is the defaulted Home Search Site and this is usually set up and works first before the Search.

Try to make an area search on both Home Search Sites to check if which one is working. Please note that if the Search. is working, we will use this one regardless if the .ylopo is working as well.

Open the home search site. On the URL add /widgets (ex. https://portal.ylopo.com/widgets) to open the configuration page of the listings.

Scroll down and go to Gallery Configuration Section, then click on the EDIT SEARCH.

Go back to the Jira ticket and look for the Primary area specified. Search the areas on the Widget and Click “See Listings” to generate the code.

Please base the code to generate on the number of communities provided on the ticket. If there are more than two primary areas, kindly search all the areas before clicking the “See Listings” button. But if there are only one or two, please make a separate search for each (Please follow the tab name as explained above).

Copy the code above and open the Squarespace site. Under the Home Listings, hover on the first block and edit:

Click on the widget line option, type in Code and click the code icon.

Paste the code you copied from the widget, and Save.

Now for the second tab, the content for this may differ for each client sites similar to how the label works. Please see more details below:

For Featured Listings, use the following code:

//*Feature Listing*//

<div class="YLOPO_resultsWidget" data-search='{"featured":"t"}'></div>

For two primary areas, get the label of the second tab you’ve updated and make a search and click on “See listings”

Go to the second block on the section and click edit, add a code widget and paste the code from the See listings code.

Then Save.

After you update the home listings section, let’s move on to the section just below the Home Listing section:

On this section, the What’s your Home Worth and Why List With Us are already connected to their specific pages. As for the Search New Homes for Sale, you might want to double check if any links are already connected to it by clicking this part.

If you weren’t redirected to another page, please hover on the Read More text and click Edit. Type the words “Read More”, highlight the texts and click the Edit link icon on the text tool and add the home search site domain you’ll be using (search. or .ylopo)

The section after the three-part icons is the Explore Our Neighborhoods.

There’s no need to edit this section as this automatically displays all the areas that will be added on the Communities page (which will be discussed later on).

Similar to the  Explore Our Neighborhoods, the Our Team section will also automatically display the agents that will be added on the Team page (again, will be discussed later on).

Moving on, let’s proceed with the Contact Us just below the Our Team section.

On this section, we only have to update the Contact Us Map. To edit the map block, hover the map > Click Edit

Remove the Map block by simply clicking the trash icon as highlighted below.

Once you’ve removed the existing map, hover on the block and click on the dark line for widgets and add a new map. Adding a new one will automatically populate the business address you have specified on the Business Information setting.

After you applied the changes, double check the map and click Save.

Next and the last part of the homepage update is the Footer section.

It was mentioned earlier that for the initial draft, we may based how the logos are set up on the Branded site from the Home Search site of the client.

If the logo used on the Header and Footer section of the Home Search site are the same, we don’t have to make any changes with the logo on the footer.

But if the footer logo is different from the header, we will have to hide the current logo and add the logo that must be shown on the footer section.

To do so, add the following CSS code on the site by going to DESIGN > CUSTOM CSS

div#ylopoFooterCopyrightBlock img {

    display: block;

}

.column-width-3.footer-logo-and-copyright-container img{

display: none;

}

//*Logo Margin top footer*//

.footer-logo-and-copyright-container {

   margin-top: -24px;

}

Once the code has been added, the logo will be hidden from the section and our next step is to add the correct footer logo to be used. To apply the changes, hover on the copyright section and click edit.

Add an image by clicking on the dark line for widgets (content blocks). Add the image > Click Apply.

Before saving the changes, update the copyright texts under the footer logo. Remove the first three special characters from the texts and replace the Company Name with the client’s company name specified in Jira.

Please see sample below:

And lastly for the footer section, make sure that the map view part is updated with the client’s business address. Kindly follow the steps we applied on changing the map on the Contact Us section.

Congratulations! You’ve finished the necessary updates for the Homepage. Let’s proceed to the next page which is the Contact Us page.