The Problem
Buildium is a great portfolio management and rent collection tool for property managers. But from a design and SEO perspective, the standard public website Buildium offers leaves something to be desired. That something is flexibility and control.
To show you what I mean, take a look at the website we created for our property management client using the limited range of tools and settings provided by Buildium.
Now check out the external site we built for them in WordPress, integrating the same data and features from Buildium.
As you can see, we were able to take control of the layout, colors, features, and user experience, allowing us to craft a landing page that better accomplishes the company’s marketing goals, while making it easier for renters and owners to find what they’re looking for.
The Solution
By integrating Buildium into your WordPress site, you can get a lot more design flexibility, plus all of WordPress’s built-in SEO advantages, like search-optimized URLs (pretty permalinks), automatic metadata creation, and image optimization, to name just a few. This is important because better UX design and SEO = more people finding your company online.
KNR Property Management is a hardworking property management team here in Gainesville, Florida. Within a month of us framing out KNR’s Buildium features—tenant and owner logins, rental listings, the tenant application form—in a beautifully designed and optimized WordPress site, KNR climbed to the first Google search results page for “Gainesville property management”.
This article walks you through how you can do the same for your property management business in three steps:
- Install WordPress site and theme
- Get Started with WordPress and Elementor
- Integrate Buildium Features
If you already have a WordPress site, great! You’re ahead of the game. Feel free to skip ahead to step 3. And now, without further ado…
1. Installing WordPress
WordPress is a powerful open source content management system that’s easier than ever to get up and running. These days most web hosting services offer a one-click WordPress installation option. This guide is geared toward marketing folks and business owners with a DIY streak, not web developers, so we’re going to show you what the one-click WordPress installation looks like.
We use SiteGround, a hosting service that specializes in WordPress support. Siteground’s WordPress installation wizard walks you through the process of creating a login, selecting a design template, known as a “theme”, and installing key plugins. In the background Siteground creates all the software files and databases you need to make the site run.
Here’s what Siteground’s WordPress installation page looks like:
Leave the “Install with WordPress Starter” box checked to trigger the wizard when you click Install. From there you’ll be asked to choose a theme from a limited selection of free theme options. If you don’t find one that seems appropriate for your site, or you don’t like the options available, not to worry. You can change it at any time. We’ll circle back to theme customization in Step 2.
After you’ve selected a starter theme you’ll be asked if you want to install any popular plugins. Plugins are apps that extend WordPress’s core functionality. Two must-have plugins are Elementor Website Builder and Yoast SEO. Both are free and offer premium paid options. Elementor allows you to rapidly prototype, refine, and templatize web pages, all without knowing how to code. Yoast SEO performs useful SEO audits and suggests areas where you can improve your findability. You can always install or remove plugins through the WordPress admin panel.
When the installation wizard concludes, you should be redirected to the WordPress login so you can start customizing your site. Login using the username and password you entered during the installation wizard and you should be good to go.
Pro tip: The login page that brings you to the WordPress admin panel will always be formed like this: https://mydomain.com/wp-admin. Remember to substitute mydomain.com for your own domain name.
2. Getting Started with WordPress and Elementor
Now that we have WordPress installed, let’s create some page templates. To save time we recommend purchasing a premium theme. When you buy a commercially developed theme you get 1) professionally designed templates and 2) building block templates tailored to your niche, so you don’t have to completely reinvent the wheel when you begin adding content. Commercial themes typically include a landing page with a header, footer and a navigation menu; a contact page; an about page; and sometimes more page templates focused on your niche. A good place to start your theme search is themeforest.net. We’ve written a guide to finding the right WordPress theme, so be sure to check that out for tips on avoiding common pitfalls.
You can install a new theme at any time by navigating to the WordPress admin panel, clicking on Appearance > Themes > Add New, and following the prompts to upload the theme. Remember to activate your theme. The active theme appears in the top left (see below).
Now, you may be tempted to click that blue Customize button to start customizing your theme. Hold off on that. We’re going to install an Elementor Template Kit that will make your life easier. Essentially, Elementor is going to take over templating and theme customization duties from the basic theme.
As I mentioned in the previous step, Elementor is a powerful, free drag-and-drop tool for designing and building web pages. If you haven’t installed it yet, install it now by clicking Plugins > Add New and searching for “Elementor”. Once you’ve found it and installed it, make sure to activate it as you did with your theme.
Elementor makes it easy and intuitive to visually edit your logo and global colors, customize your header and footer elements, and create new pages from templates. Of course it helps if you know a little HTML and CSS, especially when it comes to fine-tuning your design, but you can usually get by without it.
For the KNR site we took the additional step of installing an Elementor Template Kit called Financerr, purchased at Themeforest ($24) that is designed to work together with the free Hello Elementor base theme. (You may also need to install the Envato Elements plugin to license and manage the Elementor Template Kit. Just follow the developer’s instructions for importing the kit.)
WPBakery and Elementor each have their advantages, but which is better for building professional-grade websites? Read more
It may seem like there are a lot of steps to get an Elementor-powered site up and running, but you’ll thank me later when you see how easy it is to create and customize pages. Don’t get me wrong, you can create a beautiful and fully functional website using a WordPress theme alone, and we do this quite a bit, but we like the additional layer of flexibility we get with Elementor. And we save a bundle by not having to hire a designer.
Now, there’s really a million ways you can go in terms of design and features, but we’re going to keep things simple for now and focus on creating a few basic pages from templates and framing out key Buildium features in those page. Before we move on, you may want to watch the brief Elementor tutorial below. Take a moment to play around with Elementor.
3. Building Pages from Templates and Integrating Buildium Features
Creating the Home Page
To create the home page, click Pages > Add New and click the blue Edit with Elementor button. In the sequence below we start with a blank Elementor page. Clicking the green button (if your template kit required Envator Elements) shows me a list of templates that come with the template kit. The gray button shows a list of all your templates, including ones you’ve created yourself. Click the green button, then select the Home template, click Insert, and voila.
In the next sequence you can see the result of the work we did to tweak and align the design with the company’s branding guidelines. One thing I want to point out here is the Services section. We used the grid of Icon Boxes in the right column to link to the most popular Buildium features. The Maintenance Request box and the Rent Payments box actually link to the same Tenant Portal on Buildium, but we wanted to make it easy for tenants to use the maintenance request feature, which helps KNR track requests in one convenient place.
Alright, now we’re cooking! The Icon Boxes you see in use above is a standard Elementor component. We styled them up and linked each box to the appropriate Buildium page.
Note: Most template kits will be optimized for mobile, but you should still demo your site on a mobile device and tablet so you can make any necessary adjustments for smaller screens. That requires some knowledge of CSS and HTML, and is beyond the scope of this article. If you need help, don’t hesitate to reach out.
Next, let’s add links to the login portals for both tenants and owners.
Tenant and Owner Login Buttons
We extended the header template that came with the kit by adding another row with two columns that sits atop the logo and main menu. An Icon List did the trick for the buttons. You can see them in the top right of the sequence below. We chose the lock icon to indicate that these links are for tenants and owners only. The orange hover color is drawn from the company’s brand colors. The last step was to enter the links to the respective Buildium Resident and Owner login pages.
Pretty easy, right? Let’s do another one.
Link to Rental App in Navigation Bar
Buildium’s tenant application form UX is first-rate, and you get your branding at the top of the form, so we don’t need to improve on that at all. We just want to link to it in the main menu. To accomplish that, let’s head back to the WordPress control panel. Remember how to get there? (Hint: https://yourdoman.com/wp-admin) All of the items in the nav – For Rent, About, Contact, FAQs, Blog – point to Elementor pages we’ve already created using templates. For the Tenant Application item, however, we’ll use a Custom Link. Start by clicking Appearance > Menus. Next, create a Custom Link, filling in the URL and Navigation Label fields. The URL should look like this:
https://mydomain.managebuilding.com/Resident/rental-application/
Substituting mydomain for your Buildium subdomain.
Then click the Add to Menu button. When you’re happy with the order (you can drag and drop to change) make sure to click the Publish button in the top left to make the changes live. That step is not obvious and easy to miss.
OK, let’s add one more Buildium feature.
Rental Listings Page
For the rental listings page we began by creating a basic one-column page layout in Elementor and gave it a title with some introductory text. Beneath the heading and text we dropped an Elementor HTML element, and within that element we copied and pasted an iframe that pulls rental listings from our client’s Buildium subdomain.
The iframe code you need should look something like this:
As in the rental app URL, replace the knrpropertymanagement piece with the name of your own Buildium subdomain. (For future reference, bookmark Buildium’s page on embedding listings in an external website.) The process and result looks like this:
Next Steps
Well, that should be enough to get you started creating a sweet WordPress site and loading it up with Buildium features.
The next step to building a great property management website is creating quality content that tells your company’s story and signals to Google that your site provides the most useful, relevant, and authoritative information to people searching for a property manager in their region. To that end, you may want to set up a blog — very easy to do in WordPress — and deploy a content marketing strategy to start driving organic traffic to your site.
In terms of UX and SEO, we’ve only scratched the surface, but we’ll have to leave it here for now. Let us know how it’s going, and be sure to check back here for more tips and tricks on building out your property management/real estate web presence!