Disclaimer


WebDev By The Bay is not affiliated with nor is this post endorsed by any company mentioned in this post. 

All opinions belong to the author of this post.

All Copyrights and Trademarks belong to their respective owners.

Blue Prints!

Just like building a house, you need blue prints for your website to keep clear about what you are building.

What are we building?

In this post, we are building a real estate website.

Bill of Materials:

  1. Domain name
  2. Hosting or create a subdomain on your server.
  3. Install WordPress
  4. Add the Astra Theme to the new WordPress installation
  5. Install the WPL plugin from Realtyna
  6. Install the following free block editor plugins:

    Kadence Blocks – Gutenberg Page Builder Toolkit

    Stackable – Gutenberg Blocks
    Ultimate Addons for Gutenberg

Lay the Foundation!

Let’s setup our Astra Theme before we dive into to designing our pages and posts.

Either from the side panel or the Themes page click the Customize option for the Astra Theme.

Global – Typography – Base Typography and set the Font Family to Lato or another family if you prefer.

Global – Colors – Base Colors:
Text: #3a3a3a
Theme: #ffffff
Link: #0274be
Link Hover Color: #3a3a3a
Background Color: none

Global – Container:

Global - Container Settings
Global Container Settings

Click Header – Transparent Header

Click the checkbox Enable on Complete Website

Breadcrumbs – set to none

Sidebar – Default Layout:
No Sidebar

HomePage Settings: Set Homepage to Home

Everything else is set to their default settings.
Click Publish and then the close button for the Customizer.

Setup the Listings!

In the side panel, click WPL then Settings.

There are a lot settings here but the one we are interested in is 3/4 down the page under Sample Properties. If you do not have your own properties, you can click the Add Sample Properties. You can always delete or hide these properties later.

WebDev By The Bay - Real Estate Demo - WPL Add Sample Properties
WebDev By The Bay – Real Estate Demo – WPL Add Sample Properties

In the side panel or from the WPL home page, click WPL Data Structure.

This is where you can add Property Types and Listing Types.

Property Types – Categories for this website are Residential, Commercial and Land.

Property Types: Office, Apartment, Single Family, Duplex, Ranch Style, Mobile Home, and Villa.

WPL Property Types
WPL Property Types

Listing Types: For Sale, For Rent, Vacation Rental

Room Types: Bedroom, Living Room, Guest Room, Dining Room, Kitchen, Extra Room, Master Bedroom, Walk in Closet, Bathroom, Laundry room, Story room, Study room, Family room, Game Room, Entertainment

WPL Room Types
WPL Room Types

Next in the WPL panel click Listing Manager. From here we can add new listings, update and or remove existing listings.

Let’s add a new listing. This will also be the same screen when you want to update a listing.

Click Add Listing

Then fill in all the information and once you’re finished, you will need to click the Finalize button at the top of the Panel options, Finalize is the submit button for this listing form.

There is even an Information message “Remember to finalize!” because it’s easy to forget this step and then you’re left wondering, why is my property not showing up?

WPL - Add a new Listing
WPL – Add a new Listing

Create the Pages!

Next we need to create the pages for our website:

  1. Home
  2. Vacation Rental
  3. For Rent
  4. For Sale
  5. Properties
  6. Blog

Page Structure

Home Page – 5 sections:

Section 1:

Header Image: Add the Ultimate Addons block called Section and set the Section-Background to an image of your choice, I chose one of the sample images we added with WPL. Then set the Section layout to Full Width.

WebDev By The Bay - Real Estate Demo - Full-Width-Button
WebDev By The Bay – Real Estate Demo – Full-Width-Button

Spacing

Padding
Top: 592
Bottom: 319
Left: 0
Right: 0

Margin
Top: -59
Bottom: -241
Left: 0
Right: 0

Spacing settings for the home page header background Image.
Spacing settings for the home page header background Image.

Background

Background Type: Image
Image Position: Bottom Center
Attachment: Scroll
Repeat: No Repeat
Size: Auto
Image Overlay Type: Color (set to default)
Opacity: 43

Background settings for the home page header background Image.
Background settings for the home page header background Image.

Section 2:

Top 3 Properties

We use the Advanced Columns block from Ultimate Addons for Gutenberg to create 3 columns. Each column contains an Info Box block from Kadence Blocks to show a property image and information about the property.

Advanced Column Layout: 3 columns
Leave all other settings to the default values. The vertical position of the columns is controlled by the bottom margin setting in the header image.

Section 3:

Property Search and listings

Section 4:

Marketing materials and a Call to Action button so the viewer can contact us.

Section 5:

Latest Blog Posts

Vacation Rental Page – 1 Section:

Header Image: None

Section 1:

When you added the WPL plugin, WPL automatically creates several pages: Vacation Rental, For Rent, For Sale and Properties.

Let’s see how you can add the WPL Property Search in case you wish to create another property listing type page.

Create a test page and add the Classic Editor to add the WPL search to the page. The Classic Editor can be added with a couple of different methods.

The first method is by placing your cursor in one of the block place holders and start by typing a forward slash which is sometimes referred to as a forward wack /, then type the letter c, like so, /c and this will popup this box and then you can select classic.

WebDev By The Bay - Selecting the classic editor from within the page
WebDev By The Bay – Selecting the classic editor from within the page

A second method would be to select the Classic editor from the add button at the top of the editing window and selecting Classic under the Formatting Section.

WebDev By The Bay - Select Classic from the Formatting Section
WebDev By The Bay – Select Classic from the Formatting Section

Next – Click the [W] button in the Classic editor options. This will show the following dialog box.

WPL ShortCodes dialog box
WebDev By The Bay – WPL ShortCodes dialog box

View your page and make adjustments from the classic editor.

WebDev By The Bay - Real Estate Demo - Properties Page
WebDev By The Bay – Real Estate Demo – Properties Page

For Rent Page – 1 Section:

Header Image: None

Section 1:

Property Search

For Sale Page – 1 Section:

Header Image: None

Section 1:

Property Search

Properties Page – 1 Section:

Header Image: None

Section 1:

Property Search

Blog Page – 1 Section:

Header Image: None

Section 1:

Blog Posts – Add the Ultimate Addons for Gutenberg block: Post Timeline

That’s it! This block will now surface all your posts marked public.

There are other Block types you can choose, I just happen to like this type.

I hope you found this post useful and please check out our walk through video of WPL on the WebDev By The Bay’s Youtube channel.