Generally within HubSpot CMS, you would probably use HubDB to populate content like real estate listings. But, not every level of CMS Hub includes HubDB, so that is where FreeHold comes in with an effective solution! Whether you want to customize the listing options, or you want to use the functionality for a completely different purpose or industry, YOU CAN!
Moving ahead, you will see the term "properties" used, as that is what the intended usage for FreeHold. HOWEVER, you can use this for ANY industry... car dealership, equipment rentals, vehicle rentals, or really any type of scenario where you are showcasing various products or types of products to sell. Endless options! But for the purpose of this article... properties.
[ See our demo Property Blog here ]
Properties Blog
The starting point is to create a HubSpot Blog for your property listings. In the interest of not re-creating the wheel, HubSpot already has a great tutorial for creating your blog. So if you need help with this first step, click here to see that post.
Within that setup, you will select a template for both the Blog Listing and Blog Post views. Be sure to select your FreeHold theme, but be aware that this theme includes two blog post and two blog listing templates. For this, be sure to select:
- Blog Post: Freehold - Property Listings Blog Post
- Blog Listing: Freehold - Properties Blog List
As the listing module defaults to 3 posts per row, we recommend setting the blog parameter "Number of posts per listing page" to 12, or another multiple of 3. It will default to 10.
Property Blog Posts
Now, time to create your property listing posts! Go to the blog area, select your Properties Blog (if not already selected), and create a new blog post. Note that a HubSpot blog post (at the time of this article creation) is still locked in and not able to use all of the normal themes drag-n-drop capabilities. So the page is already laid out and ready for you. Any changes to that layout would have to be done at a code level.
This is a VERY customized blog post template with tons of options, so let's walk through how to make this work for you!
General Post Settings:
Click on the "Settings" tab towards the top of the page.
- Blog Title. This would be best to be the actual address of your property, like "123 Main St", or whatever else will work best for you. It will display as the H1 of the page, but will also show in the listing page and related modules.
- Page Title. Click the link "Customize blog's page title". This will open the Page Title option. This should also contain the property address, but the difference here is that it will be used for search engines. This should also contain your company name and anything else that would be effective for SEO.
- Blog URL. The content slug will auto-populate based on your title, but you can customize as needed. If you happen to be cloning a previous post, be sure to update this setting!
- Author. This is a required field. You can have on general author that you put all of your properties under, but our recommendation is that you use the author for realtors, brokers, etc. This way, you can use the HubSpot author listing functionality to generate a property listing of properties associated with a particular agent!
- Tags. Select and/or create your desired tags here, which are used to categorize your properties. There is a filter on the listing page that will populate these tags. You can also setup the recent posts module to pull listings from a specified tag if you need to. You could have tags like: Residential, Commercial, Apartments, Single Family Homes, Foreclosures, etc.
- Meta Description. Also required. Create an effective SEO-driven description for your property that will be used for search engine purposes.
- Featured Image. Select or Upload an image that will be the main image to represent this property in any listing views or a shared link on social media.
Image Slider
You will see a blank white box under your title, which is where your property images will display. You may also see default images already. Click on that box, or scroll way down on the left panel to "Image Slider", and click to enter the settings. The image fields are:
- Style Fields. Click the Styles tab and you can edit the background color used for this section of the page and behind the images.
- Properties. This is a repeater field where you can edit existing slides, add / delete slides, drag to re-order, etc.
- Edit Slide. Click the edit icon on an existing slide or click "Add" to create a new one. There is one item to setup and that is to select the "Property Image". Set an appropriate alt text for the image and desired settings for the rest. Images will be managed by the module to fill the available space already. Here, you should be loading images that showcase your property, inside and out.
When finished, click "Apply Changes". You will return to the main Image Slider panel and you should see your images in the editor view. Click "Home" in the breadcrumbs in the top left to return to the page settings.
Form Setup for Info Request
To the right of the image slider, you'll find a position to load a form. Click on that box to open the form module editor. The intent is for this form to be an information request for the displayed property.
- Form Title. This will default to "Request Information". Edit this as desired.
- Choose a Form. Select your HubSpot form that you wish to use for this. Create a new form if needed. For design purposes, this should be a very simple form so it fits the intended space. Best fit would be First Name, Last Name, Email and Phone. You can setup the form options within the form editor for notifications and such, or you can set those options right here within the page.
When finished, click "Home" in the breadcrumbs in the top left to return to the page settings.
Property Values
Now it's time to setup the main details for your property! There is a long list of fields and options on the left panel for the many property values that you can set.
NOTE: While the default fields here are for properties, you CAN update them. You can create a child theme off of FreeHold (if you haven't already) and then clone the property post template to the child theme. There is a list of text values at the top of that template file where. you can customize all of these values to be worded differently or to support a completely different usage!
Also, note that any value that you leave blank will be skipped on any page or listing display.
- City, State. This is intended to be a combination of City and State for your property. For example, you could put "Indianapolis, IN".
- Zipcode. Enter the zip code for your property.
- Price. Enter the price for your property. This should be just the numbers, but can include commas. The currency symbol is handled separately from this field.
- Currency Symbol. This will default to "$" for US Dollars. You can modify this if you need to display a different currency.
- Reduced Price. Check this box if you want to designate this property as having a recently reduced price. This will display a tag with "Reduced" (or your customized text) on the property image on this page as well as listing views.
- Sold. Check this box if you want to designate this property as having been SOLD. This will display a tag with "Sold" (or your customized text) on the property image on this page as well as listing views.
- New Listing. Check this box if you want to designate this property as being a new listing. This will display a tag with "New Listing" (or your customized text) on the property image on this page as well as listing views.
- Property Type. Enter the type of property, like "Single Family Home", "Apartment", etc.
- # Bedrooms. Enter the number of bedrooms, number only.
- # Bathrooms. Enter the number of bathrooms, number only.
- Square Feet. Enter the square footage of the property, number only.
- Acres. Enter the amount of acreage for the property, number only.
- Estimated Mortgage. Enter the estimated mortgage number here. Include your desired currency symbol.
- Estimated Taxes. Enter the estimated tax amount here. Include your desired currency symbol.
- MLS #. Enter the MLS number for this property listing.
- Price Per Sq Ft. Enter the price per square feet, including your desired currency.
- Year Built. Enter the year the property was built.
- County. Enter the county where your property is located.
- Township. Enter the township where your property is located.
- School District. Enter the school district that your property is located in.
- HOA Fees. Enter the Homeowner Association fees for this property. Display with desired currency and occurrence, like "$240/year".
- Parking. Enter a short description of the available parking like "Attached 2-Car Garage".
- Water. Enter the water utility available for this property, like "City".
- Sewer. Enter the sewage utility available for this property, like "City".
Now, you should save the page and then refresh the browser to make sure your in-progress page reflects all of your newly provided property details. The page is starting to come together!
Agent Details
Continuing down the left side, you'll find fields for the real estate agent. This is intended to give details and contact information of the person to contact about this property.
- Agent Name: Enter the name of your listing agent, broker, etc.
- Agent Image: Select or upload an image for your listing agent. Set appropriate settings for alt text, etc. The template will lock the image into an appropriate size for the design.
- Agent Title/Position. Enter the title or position for the agent.
- Agent Company/Department. Enter the company, agency, department or whatever applies for this agent.
- Agent Work Phone. Enter the office/work telephone number for the agent. Enter using whatever format you desire.
- Agent Work Phone. Enter the office/work telephone number for the agent. Enter using whatever format you desire.
- Agent Cell Phone. Enter the cell/mobile telephone number for the agent. Enter using whatever format you desire.
- Agent Email. Enter the email address for the agent.
- Agent Profile Link. This is a rich text field that defaults to providing a link. You should not put anything else here except a link. Update the "View Profile" text to whatever you'd like, if needed. Then setup the link to go to your agent's profile page. This theme includes an Agent Listing template that is intended for this usage. You can provide details, a contact form, filtered property listings, etc on that page.
Now, you should save the page and then refresh the browser to make sure your in-progress page reflects all of your newly provided agent information. Almost there!
Tabs Module
The tabs module is a full-featured module that allows you to provide whatever information you want to support your listing. The default content gives information for the community, schools, demographics and property history. You can use that as a starting point or add/delete as needed.
Click "Tabs" in the left panel to find all of the settings for this module. Configure as desired.
Property Details - Blog Content
Scroll all the way up on the left to "Blog Content". Click this to get the full blog content editor where you can type in whatever else you want. This will be the core of the page, under the slider and featured details, and above the tab module. Use this section to tell all of the great things about your property!
Publish Your Property
Now, your property listing is ready to publish! Click "Publish" in the top right corner to launch this post and make it available on your property blog listing page and any module that pulls data from this blog.
Update Related Modules
There are two modules related to the properties blog that you'll want to modify to line up with what you've configured for the property posts.
Blog Listings - Properties Module:
This is the module intended to be used on the properties blog listing page. You can see some of the settings here in this screenshot. You will choose which data displays within the listing module, but you can also configure things like the currency symbol and value labels. For example, if you want to list "Bedrooms" instead of the default "Bed", you can do so! If you don't want to show Acres in the list view, disable it.
Now, if you updated the blog fields and labels and (for example) replaced "Acres" with "Exterior Color", then you'll want to change that label within the listing module to match.
Besides Price and the City/State field, the module has 4 customizable values. You can enter the displayed value label. It shows in parenthesis what the default label is. These specific 4 fields (bedrooms, bathrooms, square feet, and acres) will connect from the blog posts to the listing modules... so consider these your four main features. Update them accordingly in the blog post template, while keeping in mind how you'll want to use them in the related modules.
Recent Property Posts Module:
This is the module that is intended to display a few (defaults to 3) posts from the properties blog. This is used on the FreeHold Home page template. It has many of the same options as the blog listing module noted above. You'll set the same labels for fields and tags (like "Reduced").
With this setup, if you clone and customize the labels of the properties blog post template, you will not need to clone these modules.