Real Geeks 101: Customize the Look of Your Website

In this training you're taken through personalizing your Real Geeks website by updating the look of the site. Review the items discussed in the "Customize the Look of Your Website" training by clicking an option below.

 

Training Content:

Tables can't be imported directly. Please insert an image of your table which can be found here.

 

 

Site Backend

To edit your website, you'll need to head over to your Site Backend.

Access your Site Backend from leads.realgeeks.com → Click "Settings" from the left hand navigation → "Edit Website".

 

Once in your Site Backend bookmark the page for quick access!

For more information on bookmarking pages, click here.

Back to Top

 

Update Your Logo

Update your logo from "Site Settings" located in your Site Backend. 

Once in your Site Settings, Select the "Template Options" tab and add your logo to the following two fields:

  • Detail Page Photo or Logo (this is the logo displayed on your Property Detail Pages)
  • Header Logo (this is the logo displayed in the top left of your site)

Press "Save" at the bottom of the page and allow your changes to save before navigating away from the page.

Quick Tips

Rectangular logos work best (recommended size is 400px x 86px)

Want to remove the background from your logo? → remove.bg (third-party website)

Need to resize your logo? → Click here to learn more

Want to create a NEW logo? → Click here to learn more

Back to Top

 

Update Your Header Image

Your Header Image is the background image or video located at the top of the pages on your website. Update your Header Image from "Site Settings" located in your Site Backend. 

Once in your Site Settings, Select the "Template Options" tab and add or update your Header Image from the "Header Image" field by using one of the following options:

  • Gallery Image or Video - Select "Open Gallery" to use an image or video from our gallery. 
  • Custom Image or Video - Select "Pick image or Video" to upload an image from your device. 
  • Use Default - Select this option to use the Real Geeks default website header image.

Press "Save" at the bottom of the page and allow your changes to save before navigating away from the page.

Quick Tips

Use images of landscapes, home interiors, home exteriors (recommended size - 2200px x 720px)

Video background must be .MP4 file, 8 MB max

FREE high quality imagesunsplash.com (third-party website)

FREE high quality images AND videospexels.com (third-party website)

Back to Top

 

Update Your Search Orientation

Depending on your website template, the orientation of the search box at the top of the pages on your website can be adjusted using the "Horizontal Homepage Search" field in your Site Settings. To change your search orientation:

  1. Head to your Site Backend → "Site Settings"
  2. Open the "Template Options" tab
  3. Using the "Horizontal Homepage Search" field at the top of the page...
    • Set the field to "True" for a centered, rectangular search orientation
    • Set the field to "False" or "Use Default" for a left-aligned, square search orientation
  4. SAVE at the bottom of the page and allow your changes to save before navigating away from the page.

Quick Tips

The "Horizontal Homepage Search" field only applies to older website design templates using the criteria search form: Molly, Miranda, and Miranda Thin.

The Anna website design template uses a type-ahead search form that will not be affected by updating this field.

To learn how to preview your website using a different design template, click here.

Back to Top

 

Update Your Navigation Bars

You have three Navigation Bars on the main pages of your website, and another that runs across the bottom of your Home Valuation tool. All of your navigation bars can be updated individually by:

  1. Head to your Site Backend → "CONTENT" → "Navigation Bars"
  2. Click on the name of the navigation bar you wish to update
  3. Click, hold, and drag the Navigation Bar Item number to reorder items
  4. Edit the "Anchor Text" to change what visitors see/click on 
  5. Scroll to the bottom of the page and add to the empty item to add a new item:
    • Type - Typically set to "Custom Link", "Contact Link" will display a contact form when clicked by a visitor
    • URL - A link to the page you want listed on the Navigation Bar
    • Anchor Text - Text displayed on the Navigation Bar that visitors will see/click
  6. Remove an item by checking the box on the right side of the item and SAVING your changes

Quick Tips

Primary Top Navigation Bar - Runs across the top width of your site

Primary Bottom Navigation Bar - Runs across the bottom width of your site

Secondary Bottom Navigation Bar - Located at the very bottom of your site, displays the areas on your website

Seller Leads Navigation Bar - Runs across the bottom of your Home Valuation tool

Secondary Top Navigation Bar - No longer exists on current website design templates (feel free to delete)

Back to Top

 

Using The Design Editor

From your Design Editor you can change the template/design your site is using as well as the colors of the elements on your site. Changes made in the Design Editor are applied site-wide, meaning the template/design or color scheme selected will apply to ALL pages of your website.  

  1. Head to your Site Backend → "Site Settings" "Design Editor"
  2. Under "Basic Options" you can change your website template/design using the "Designs" setting to adjust the overall look and feel of your site
  3. Under "Basic Options" you can change your website's colors using the "Color Variations" setting to select a pre-set color scheme
  4. Under "Advanced Options" you can change your website's colors individually by typing in color hex codes or using the color palette sliders
  5. Changes made here will be saved to the Design Editor automatically - to apply your changes to the website, be sure to click "Save" at the bottom of the editor window.

Quick Tips

Undo Button  - Undo your last change, use this button as many times as necessary to reverse  changes one at a time

Reset Button - Reset ALL changes made, use this button to go back to your website's current state

Back to Top