Overview

Wrenhaven Homes is the website of a custom luxury home builder. Future home owners look through your signature models, walk each floor plan in 2D and 3D, choose finishes and extras, and see the price of the build change as they go. When they are ready, they ask for a consultation, and their choices come with them.

Behind the website is the staff area. This is where you answer consultation requests, keep the models, prices, floor plans and photos up to date, show the homes you have finished, and edit the words and pictures on every page of the website.

Visitors plan their home on the website; the request reaches the staff area with every choice they made.

Who this manual is for

• Whoever answers clients: chapters 1 to 3 (signing in, the staff area, messages).
• Whoever looks after the homes: chapters 4 to 7 (models, floor plans, options and prices, built homes).
• Whoever looks after the website: chapters 8 to 10 (media library, pages, settings).
• Everyone: chapter 12 shows the website the way your visitors see it.

What you need

• A computer, tablet or phone with an up-to-date web browser.
• The address of your website, for example https://www.yourdomain.com.
• Your staff user name and password. The first one is set up in chapter 1.

1. Signing in

The staff area opens from the Staff sign in link at the bottom of every page, or straight from https://www.yourdomain.com/AdminLogin.

The staff sign-in page.

The first sign-in

The very first time the website starts, it makes one administrator account for you, with the user name admin and a password made just for your site.

1. On the computer the website runs on, open the sign-in page. A First sign-in box shows the user name and the password. The same details are in the file appConfig/initial-admin.txt in the website folder, which is the easy way to read them on a server.
2. Type the user name and password and press Sign in.
3. Choose your own password, 8 characters or more, type it twice and press the button.

The First sign-in box, shown only on the computer the website runs on.

Right after the first sign-in you choose your own password.

From then on the First sign-in box and the file are gone, and only your own password works.

Everyday sign-in

Type your user name and password and press Sign in. You stay signed in on that browser until you press Sign out at the top right of the staff area.

Locked out

• Lost the first password before using it: delete appConfig/initial-admin.txt on the server and open the sign-in page again on the server. A new one is made.
• Forgot your own password: ask whoever looks after the server to delete data/staff.json. The next visit to the sign-in page on the server shows a new first password, and you choose your own again. Your models, pages, photos and messages are not touched.

2. The staff area

After you sign in, the staff area opens on the Dashboard. The menu on the left is the same on every screen. The panel on the right changes, and the page never reloads, so moving between panels is instant.

The Dashboard. The menu on the left stays the same on every screen.

The menu

The top bar

• View site opens the public website in a new tab, so you can check a change you just saved.
• Sign out ends your session on this browser.

Lists and forms

Every list works the same way: click a row to open it. The form opens over the list; Save keeps your changes, Close or the ✕ leaves without saving. If you have changed something, you are asked before anything is lost. Delete always asks you to confirm first.

On a phone

The staff area works on a phone too. Tap ☰ at the top left to open the menu. Lists turn into cards you can scroll.

3. Messages

Every consultation request sent from the website lands in Messages, newest first. The red number next to Messages in the menu counts the ones nobody has opened yet.

Messages, newest first, with buttons to show one status at a time.

Finding a message

Use the buttons above the list to show only some messages: Unread, or one status such as New or Waiting for them. Each button shows how many messages it holds. To find one person, type a name, email or the reference code in the search box. All shows everything again. Long lists have Previous and Next at the bottom.

Reading a request

Click a row to open the message. Opening it marks it as read. When the visitor came from a model or the Pricing page, the message already lists:

• the model they chose,
• the options they picked,
• the estimate they saw,
• whether they already own a lot, and when they would like to start.

So you can call them back knowing exactly what they are thinking of, without asking them to repeat it.

A request with the model, options and estimate the visitor chose.

Status and notes

Set the Status as you work, and add a short Note for staff, for example when you called and what was agreed. Then press Save. Visitors never see the status or the note.

More actions

• Mark as unread puts the message back in the Unread count, as a reminder.
• Delete removes the request and its notes for good, after you confirm.

4. Models

Models lists the home designs on your website: the size, base price, number of photos, the floor plan and whether the model is shown. Two buttons at the top switch between Models and Option packages (chapter 6).

Your models, with size, base price, photos, floor plan and website status.

Editing a model

Click a model to open it. The form has four parts.

Details

• Name and Style, for example The Briar and Modern farmhouse.
• One-line summary shown under the name, and a longer Description for the model page.
• Bedrooms, Baths (use .5 for a half bath), Living area in square feet, Levels, Garage and Build time in months.
• Shown on the website: untick to hide a model. A hidden model keeps all its data but is not listed or priced.
• Featured on Home: tick to show the model in the models part of the Home page.

The top of the model form: details, website switches and the start of the price.

Price and options

The Base build price is the house as drawn with standard finishes, without land. Below it, tick the options this model offers. Only ticked options are offered to visitors on this model, and the website ignores any other option even if someone tries to add it.

Photos and Rooms inside

Photos are the outside pictures, up to 12; the first one is the picture on the model's card. Rooms inside are the interior pictures, up to 10. Each picture shows its number. Use ◀ and ▶ to change the order and ✕ to take a picture off the model (it stays in the media library).

Choosing photos

Press Choose photos or Choose interior photos. The window shows every picture in the media library.

1. Type in the search box to find pictures by name or description.
2. Click a picture to add it; its number shows the order. Click it again to remove it.
3. Upload new adds a picture from your computer straight into the library and the list.
4. Press Use these, then Save on the model.

Choose photos: click pictures in the order you want them.

Adding a model

Press Add model at the top of the list, fill in the details, choose photos and press Save. Then press Floor plan to draw its plan (chapter 5).

Deleting a model

Open the model and press Delete. The model, its price and floor plan are removed from the website; its photos stay in the media library. If you only want to take it off the website for a while, untick Shown on the website instead.

5. Floor plans

Each model has a floor plan. Visitors see it on the model page as a 2D drawing, and with one click as a 3D model they can turn and zoom. You draw the plan once, as a list of rooms and openings, or convert it from a drawing, and the website does the rest.

Opening the editor

In Models, open a model and press Floor plan. The editor shows a live drawing at the top, and the lists of rooms and of doors and windows below it. Every change you type shows in the drawing straight away.

The floor plan editor with the live drawing at the top.

How sizes work

All numbers are in feet, measured from the top-left corner of the house.

A room 12 ft from the left, 6 ft from the top, 24 ft wide and 16 ft deep.

Floors

The buttons at the top pick the floor you are editing. Type in the box next to them to rename it, for example Ground floor or Upper floor. Add floor adds another level. Each floor becomes its own button on the website.

Rooms

Each row is one room: its Name, its Kind, and X, Y, Width and Depth. The Kind sets the room's colour in 2D and 3D: living, dining, kitchen, bed, bath, office, entry, hall, stairs, closet, laundry, garage or balcony. Add room adds a row; ✕ removes one. Click a room in the drawing to find its row in the list.

Rooms, then doors and windows, one row each.

Doors and windows

Each row is one opening: its Kind (door, window, or open for a wide gap without a door), its Direction, and X, Y and Length.

• h, along a horizontal wall: the opening sits on a wall running left to right, starting at X.
• v, along a vertical wall: the opening sits on a wall running top to bottom, starting at Y.

An opening must sit on the edge of a room.

Converting a drawing

Already have the plan as a picture, for example from your architect? The editor can turn it into rooms, doors and windows for you.

1. Pick the floor at the top, then press From file to choose a JPG, PNG or WebP picture on your computer, or From media library to use one you uploaded before.
2. The editor reads the walls, doors and windows and asks how wide the floor is from left to right, in feet. The number shown is worked out from the model's living area, so usually you only press Convert. The depth follows the shape of the drawing.
3. The rooms appear in the drawing and in the list as Room 1, Room 2 and so on. Give each room its name and kind, check the sizes, then press Save floor plan.

A line drawing like this converts well.

The editor asks for the width of the floor, already filled in.

The same drawing as rooms, doors and windows, ready to name and save.

Saving the plan

Press Save floor plan. The website checks the plan first: rooms on one floor must not overlap. If two do, the message names both rooms, and nothing is saved until you move one of them. See it in 3D opens the model's page on the website at the floor plan, so you can turn the saved plan in 3D. The line under the drawing shows the number of rooms, openings and the area of the floor, which is a quick way to check your numbers against the model's living area.

6. Options and prices

Every estimate on the website, on the model page, the Pricing page and the consultation form, is worked out the same way, so a visitor sees the same number everywhere and the same number reaches you in Messages.

The same calculation is used on every page of the website.

The design and permits fee is rounded to the nearest hundred dollars.

Option packages

In Models, press Option packages. The list shows every option, its group, its price, and how many models offer it.

Option packages with the fee at the top.

Groups

Adding or changing an option

Press Add option, or click an option to change it. Fill in the Name, a short Description, the Group and the Price, then Save. A new option is not offered anywhere yet: open each model it belongs to and tick it under Options offered on this model.

An option: name, description, group and price.

Delete removes the option from every model and from new estimates. Requests already in Messages keep what the client chose.

The design and permits fee

At the top of Option packages, type the fee as a percent, from 0 to 15, and press Save fee. It is shown as its own line on every estimate.

Base prices

Each model's base build price is set in the model itself (chapter 4). The Pricing page lists every shown model with its base price, the fee and the total, side by side.

7. Built homes

Built homes are the finished houses you show off on the Built homes page, newest first. The three newest also appear on the Home page.

Built homes, newest first.

Adding or changing a home

Press Add home, or click a home to change it.

• Name and Place, for example Millbrook residence in Millbrook Ridge.
• Model: the model it was built from. Visitors can jump from the home to that model and its price.
• Year finished and Living area.
• Description: describe the house, not the owners.
• Photos: up to 8, in order; the first one is the card picture.
• Shown on the website: a home needs at least one photo to be shown.

A built home: details, model, photos and website switch.

Deleting a home

Open the home and press Delete. It is removed from the website; its photos stay in the media library.

8. Media library

The Media library holds every photo and video on the website. Models, built homes and pages all pick their pictures from here.

The Media library with the upload button and filters.

Uploading

Press Upload photos or videos and choose up to 20 files at a time.

• Photos: JPG, PNG, WebP or GIF, up to 8 MB each.
• Videos: MP4, up to 30 MB each. You can change the video limit in Settings.

The website checks each file is really the kind of file its name says, and turns down anything else.

Finding files

Use All, Photos or Videos, or type in the search box. Under each picture you see its size and where it is used, for example used once.

Describing a picture

Press Edit under a picture. The window shows the file, its size, when and by whom it was added, and every place it is used. Write a few words in Description for screen readers saying what the picture shows; this helps people who cannot see the picture, and search engines. You can also add a Note for staff. Then Save.

One picture with its description and where it is used.

Deleting files

Press Delete under a picture and confirm. The file is removed for good. A picture that is still used by a model, a built home or a page cannot be deleted: the website tells you where it is used, so you can replace it there first. This keeps the website from ever showing a broken picture.

9. Pages

Pages is where you change the words, buttons and pictures of every page of the website: Home, Models, Pricing, Built homes, About and Contact. Pick a page with the buttons at the top. What you see is laid out like the page itself, in blocks from top to bottom.

The Home page in Pages: click any text to change it.

Changing words

Click any text and type. A small bar appears for Bold, Italic, Link, • List and Clear. Write {name} anywhere to show the business name from Settings, so the page stays right if the name ever changes.

Buttons and pictures

• A button has two boxes: the words on it, and the page it opens (for example Models or Contact, or a full address starting with https://).
• On a picture, press Change to choose another one from the media library, or Remove to take it away.

Moving and hiding blocks

• Drag a block by its handle at the top left, or use the up and down arrows, to move it.
• Hide keeps a block but takes it off the page; press it again to show it.
• The bin removes a block when you save. Use Hide if you might want it back.
• Blocks marked From your data fill themselves from the rest of the staff area. You can change their words and move or hide them, but not remove them.
• Add block adds text, steps, questions, a call to action and more to any page.

Blocks from your data

Each page has its own From your data blocks. Their small label, title and text are the top of that part of the page.

The Models page: the All models block, then a call to action you can change.

The Contact page: the steps on the left are yours to change.

Saving a page

Press Save page. The page is live at once; View page opens it so you can check. If you switch to the other page or leave Pages with unsaved changes, you are asked first.

Versions

Versions lists the page as it is now and the last five saved versions, with who saved them and when. Press Restore to put an earlier version back. The current one stays in the list, so you can always switch back.

Versions keeps the last five saves of each page.

10. Settings

Settings holds the business details shown on every page of the website.

Settings: business details and the video size limit.

Business

• Business name: shown in the header, the footer and wherever a page uses {name}.
• Tagline: one short line about your company.
• Phone, Email, Address and Opening hours: shown on the Book a consultation page and in the footer.

Media

Largest video upload sets the biggest video, in MB, the Media library accepts: 1 to 100. Photos are always limited to 8 MB.

Press Save settings. The new details show on the website at once.

Run mode

The last box shows that the website runs in Production mode. This is set by whoever installed the website and does not need changing.

11. My account

My account shows your name, user name and what you can use. Here you change your password.

My account: your details and the password form.

Changing your password

1. Type your Current password.
2. Type the New password twice, 8 characters or more.
3. Press Save new password.

Any other place you are signed in, such as another computer or your phone, is signed out. The browser you are using stays signed in.

12. The website

This chapter shows what your visitors see, so you know what each change in the staff area does.

From browsing to a request in Messages, without retyping anything.

Home

The page top with its picture and two buttons, your featured models with their base prices, the newest built homes, and the blocks you set up in Pages.

Models and the model page

Models lists every shown model, with filters for bedrooms and levels. Each model has its own page with the photo gallery, the key numbers, the base price and the price with design and permits, a description, what is included as standard, and the interior photos.

A model page: gallery, key numbers and prices.

The floor plan

The plan opens in 2D with one button per floor. Visitors tap a room to see its size. 3D view builds the same plan in 3D: drag to turn it, use + and − to zoom, and ↻ to go back to the start.

The same plan in 2D and in 3D.

Pricing a home

Under the plan, Price your model lists the options this model offers. The estimate on the right changes with every click, and shows the price per square foot. Request a consultation carries the model and the chosen options to the consultation form. The Pricing page shows every model side by side, and the same option picker.

Options on the left, the estimate on the right.

Built homes

Finished homes with a filter by model. A click opens the photos with the place, year, size and model, and a button to price that model.

Book a consultation

The steps on the left come from Pages, Contact. The form asks for a name, email, optional phone, the model, whether they own a lot, when they would like to start, and anything else. When they come from a model or Pricing, their options and estimate are already filled in. Sent requests appear in Messages at once.

The consultation form with the chosen model and options.

On phones

Every page fits phones and tablets. The menu folds into ☰.

13. Good to know

Keeping a copy of your data

Everything you enter in the staff area is kept in the data folder of the website, and uploaded pictures in images/uploads. Ask whoever looks after the server to copy these two folders regularly, and always before the website is updated, so nothing you entered is overwritten.

Checklist for a new model

1. Upload the outside and interior pictures in the Media library, and describe each one.
2. In Models, press Add model, fill in the details and the base price, tick the options it offers, choose the photos, and save.
3. Press Floor plan, add the floors, rooms, doors and windows, and save.
4. Tick Featured on Home if it should be on the Home page.
5. Press View site and look at the model page, the plan in 2D and 3D, and the estimate.

Common questions

A model does not show on the website.

Open it and check Shown on the website is ticked.

An option does not show on a model.

Open the model and tick the option under Options offered on this model.

A built home says Hidden.

It needs at least one photo, and Shown on the website ticked.

I cannot delete a picture.

It is still used somewhere. The message says where; choose another picture there first.

A drawing will not convert.

The editor could not find the walls. Try a cleaner black-and-white version of the plan, or one without furniture and colours. You can always type the rooms in by hand.

The floor plan will not save.

Two rooms on the same floor overlap. The message names both rooms; change the X, Y, Width or Depth of one of them.