Creating Agent Profile Pages on Squarespace
Our goal for this project was to create an agent profile template that we could easily duplicate for new agents that join our team providing them with an individualized landing page.
This is not a simple task because of Squarespace’s lack of flexibility, but with some research we have managed to create a good working draft.
To begin with we started with a template we liked from Zillow:
I started laying out the blocks to mimic the layout using an Image card for the basic info and then adding a text box on the right side for the professional information (which I moved up from its low down position on the Zillow profile).
I used a stock image from thispersondoesnotexist.com and a basic bio from a bio writing guide. Setting up the basic layout was not too complicated, but later came two requests that were a little more tricky.
Tricky tasks:
Adding a link to the cellphone number and email:
This was not straightforward as the link adding functionality does not initially seem compatible with anything other than a standard URL. After some research I discovered there are two ways to handle this:
A. Adding mailto: XXXX for the email link and tel: XXX for the phone number link. For example:
B. To click on the settings cog (right side of the above image) and choose from several different link options.
The second request was:
2. To make the image smaller on mobile.
This proved to be extremely complicated for what is supposed to be a mainstream no-code platform. There is no simple way to just adjust image size and it needs to be done by adding code in Design >> Custom CSS
This is the custom code I added
This code shrinks images on the website when displayed on mobile by 60%. If we see that it causes other formatting problems elsewhere on the website we may need to seek another solution.
To summarize
We have a basic agent profile template up and running Here.