The D.I.Y Agent Website

Creating your own personal website has never been easier than it is right now, for those who are prepared to spend a little time getting their hands dirty you can save yourself a heap of cash and learn a thing or two in the process.

We’ve created this step by step guide to help real estate agents get up and running with a personal website fast, even if you have no idea of what you're doing you can get a basic site up and running in under an hour.

This tutorial will get you familiar with a product called Squarespace which is a super simple website building tool that comes with hosting built in, the best part, it only cost $25 a month for a mobile, SEO and AMP optimised website.

Squarespace is a great product because it's not only simple to use, it also supports Facebook and Google Pixels and Google Analytics out of the box.

There really isn't much that you can't do with your Squarespace site.

In future posts were going to go expand upon this site to add additional pages, forms for lead generation and eventually we will look at how to integrate marketing automation to create a complete marketing hub.

What We'll Cover

  • Adding your logo and Styling
  • Header with CTA
  • About Summary
  • Testimonial Carousel
  • Cleaning Up

Let's Get Started

Before we can start we need to select a template and create an account at Squarespace.

  1. First got to Squarespace
  2. Select the black "Create Site" button from the top right of the site
  3. Search for a template called “HAYDEN”
  4. Hover over the template and select “Create site”
  5. Follow the instructions to create an account and carry on

You can use any template you like but this tutorial focuses on "Hayden" so please stick with it for now. Templates can be swapped and changed at any time, you won't lose any of your content or work, switching templates is like a new coat of paint.

image3.png

Once you have created your account you will be asked two questions. 

  1. Site name - this can be your name or the name of your team or business. For example, this could be “John Doe” or “John Doe Team”
  2. Site description - this should be kept simple and descriptive, see the example text below.

Example Text

Real estate agent Sydney's North Shore, specialising in Northbridge, Castlecrag, Middle Cove, Castle Cove and throughout Sydney’s North Shore.

We will revisit this in future steps where we’ll focus on SEO optimisation and keywords.

After you have completed these two questions you’ll see a vertical menu to the left of the screen containing “Pages”,  “Design” … this is the main Squarespace menu, from here you can access all areas of your site.

image4.png

The first thing we’re going to do is update the sites logo and basic styling to reflect our branding. Select “Design” then “Logo & Title”. From here you can either leave the site name entered earlier or upload your logo if you have one.

For the "Sites tag line" you can use the example text below.

Example text

Real Estate Agent Sydney's North Shore
image1.png

Okay, that’s the basics done, we can now move onto updating our sites styling.

Styling

At the top of the left-hand menu click the back arrow, this will take you to the "Design" menu, now click “Style Editor”, from here you can change the sites fonts and colours easily. You might be wondering how do I find the right items to change something, simply click the element on the right that you want to change and the style options that relate to that item will be displayed on the left, this allows you to quickly change a particular elements style very easily.

One thing we want to change right now it the “View Our Work” button, we want to make this really obvious and eye-catching to site visitors. If you click on the button you’ll see the style information related to the button appear in the left column. Change the button form an outline to a solid colour, select “Banner Button Style” and choose the “Solid” option from the drop-down menu. Next, change the button so that its edges are rounded by selecting “Banner Button Corner Style” and selecting the “Pill” option from the drop-down menu.

At the moment our button isn’t that eye catching, we want to make it easier to see against the background by giving it a contrasting colour that works with our branding. Select the “Banner Button Color” and change the colour to something that pops against the background, in our case were using orange.

Now that we have updated the styles to align with our branding, we can move onto updating the page layout and copy for the various homepage sections.

Head back to the main menu, click the back arrow at the top of the menu twice to return to the main menu, everything is auto-saved so don’t worry about saving. Now select the “Pages”.

Home Page

Editing a page is simple, from the main menu you can quickly move between all your sites pages and sections. To edit a page simply click its name and this will bring up the page to the right for editing.

image6.png

The Header

The first section we need to update is the “Header”, hover over “Intro” in the main menu and click the gear icon next to the label when it appears, once the modal loads you will see three tabs, “Basic”, “Media” and “Advanced”, select the "Media" tab. You should be able to see the image that is currently being used in our header, to change this image select "Remove" below the image and select the up arrow where the image used to be to upload your own image.

Next, select the "Basic" tab and replace the text in the “Description” text area with the example text below, edit as needed.

Example text

Team Joe Agent
Selling in Sydney’s North Shore
Book a Property Appraisal

Make sure the tagline (“Selling in Sydney’s North Shore”) is bold as this affects how the text is displayed, highlight the “Book a Property Appraisal” text and link it to the “Intro” section, for now, we will change this later. Click the “Save” button at the bottom of the modal.

image14.png

Pro Tips

  1. Use the largest image files you can find, Squarespace automatically optimises the image for you.
  2. Use an image of yourself or your team, you want site visitors to identify with you as a person, try to avoid images of your local area for your header image.
  3. Images that are in a landscape orientation and professionally taken work best.
  4. You can also use video as your background by selecting the “Video” tab in the "Media" modal, you can use any YouTube video just past the share link in the "Video URL" field.
image10.png

OK, now we’re getting there, with only a few minor changes we’re well on our way to creating a great looking personal or team real estate website.

The About Summary

Next, we're going to update the copy directly below the header image. From the main menu click the “Intro” page, this time you will see a dark banner appear at the top of the page on the right with a few options in white, click “Edit” to begin editing the page. Editing a page's text is similar using Microsoft Word, click the text area to edit and start typing, watch the video to see how it's done. Copy and paste the below example text into the existing text area, highlight the title and change it’s style to “H1” and make the description text style “Normal”, select all the text and centre it.

Example text

Team Joe Agent in Northbridge
McGrath Northbridge are experts in the residential markets of Sydney’s lower north shore and surrounding suburbs. With extensive knowledge of the local area, the sales and property management team at McGrath Northbridge pride themselves on offering personalised, professional and high quality real estate services for their clients.

Pro Tips

  1. In this section you’ll want to keep things short and sweet and quickly articulate your value proposition, you can elaborate on this later in the about section of your site.

Next, we want to add a label on top of each of the three interior images below so that our visitors know what each image links to.

To do this we’re going to change the settings for each image blocks.

Hover over the first image block and select edit. This will bring up a new modal with two tabs “Content” & “Design”, select the “Design” tab and then select the “Poster” option. This allows you to easily add any text you like on top of your image, click "Apply" to save your changes.

Now that you have reconfigured the image block you can type your text over the image, type “Sell” in the text area for the first image.

Please repeat the above for the remaining two images, use the labels “Buy” and “Learn”.

Later on, we will link these images to different pages of our site.

You can also replace the images the same way you did with the header by selecting remove and then uploading a new image when editing the image block.

Next, we want to update the text beneath each image with a suitable title and short description to help visitors better understand what the can find when they click the image.

Use the example text below, copy and paste it into each of the text blocks, use the special paste option shown in the video to remove all formatting from the text when pasting, this ensures your text looks correct.

Example Text

Sell
We’re with you every step of the way
Our team of dedicated sales professionals set you up for success by being able to quickly and effectively target the right buyers across across multiple channels.
Buy
What type of property are you looking for?
Let us find your perfect match, answer a few basic questions and we’ll email existing, new and off market opportunities as they become available.
Learn
We live and breath the local North Shore market
For the latest on the local property market, trends & property news subscribe to our blog.

Pro Tips

  1. When you plan to overlay images with text try to use images with a contrasting colour so that the text is easy to read.

Wow, we're almost done with the homepage, how easy is this?

The Testimonial Carousel

Now it's time to add a section to showcase all your testimonials. How often have you wished you had one place to store all your testimonials that could be easily added to over time?

Hover over the "Morue" page and select the gear icon when it appears and wait for the modal to load.

This section forms a visual break between the previous section and our testimonial section.

You can change the “Page Title” to something more familiar like “Testimonials” if you like. Locate the text area labelled "Description", copy and paste the example text below, make sure that the “What our customers say” is bold as it affects how it is displayed.

Example Text

What our customers say
Testimonials

Now select the “Media” tab and remove the existing picture and upload an image of your team or anything you like really, it’s up to you, click “Save” at the bottom of the modal and you're done.

To complete our testimonial section we’re going to add a new block called a “Summary” block, this clever block will provide you with an easy to manage rotating carousel for your best testimonials.

First, we need to create another "Blog" to house our testimonials. There are a few steps to this next part so watch the video to see what needs to be done.

A Squarespace a blog can be used for a number of things not just blogs, in this case, we're going to re-purpose it to store our testimonials and power our carousel.

First, create a new “Blog” page and add 2 - 3 of you most recent testimonials to the new blog, you can add as many as you like but let's keep it simple for now.

Each blog will contain the entire text of your testimonial and we will also create an expert of the testimonial which will be displayed in our carousel.

When creating testimonials it’s important to stick to a format for consistency. Use the properties address as the title, this serves a number of purposes which we will cover in future posts, always try to provide the name of the person who provided the testimonial and their role in the transaction, buyer, vendor.

When you have finished creating a few testimonials click the home arrow to go back to the main menu.

Now we're going to and add a summary block to the "Moreau" page, watch the video to see how this done.

Summary block configuration

  • "Content" set “Blog” to the "Testimonials" blog you just created
  • "Layout" change the "Items per row" to 1 and test alignment to centre
  • "Display" turn off thumbnails, turn on "show read more link" and set display "Featured display" to on

Delete the title above your new summary block also, hover over the text area and select bin icon.

Great work, you can add as many testimonials to your blog as you like, you can control the ones shown by flagging them as featured.

The summary block will automatically cycle through each of your featured testimonials and allow visitors to click through to your "testimonials" bog to read the full testimonial.

Pro Tips

  1. You can add listing images or a selfie with your vendor to the testimonial to tell a richer story.

Clean Up

We're all done, now it's time to clean up what we don't need, watch the video to see how this is done.

You can delete the additional images below the testimonial section by hovering over them and selecting the bin icon or you could replace them with some Auction photos, team photos it's up to you.

Once you finished cleaning up the testimonial section you can remove the additional pages for the site by dragging them into the not indexed area of the main menu.

This doesn't delete the pages but it does mean that they won't be displayed on the site. We do this because if you want to add a section back later you only need to drag into place and edit.

That’s it, our home page is ready, great work! It might seem like a lot but once you make a few changes it will be a very quick process to keep this site updated.


In our next post, we’ll look at creating our “Sell” page. In the meantime, if you have any questions or your struggling with something leave a comment or email our team at [email protected]

You can create and host a Squarespace site for $25 a month which is incredible value, you can buy an AU domain from GoDaddy for $22 and have it configured to point to your Squarespace site with very little work using the step by step instructions linked below.

Connecting a GoDaddy domain to your Squarespace site

If you already have a domain you can connect this as well but the process is slightly different depending on who the domain is hosted with. 

Connect domains to Squarespace

If you purchased a domain elsewhere and can’t transfer it to Squarespace, you can still use it for your Squarespace site by following a process called domain mapping. Visit our guide on connecting third-party domains for step-by-step help and guides for adding subdomains.