Home Page

Home Page

Knowledge Base > Open Floor Plan > Home Page

in Open Floor Plan

Open Floor Plan is designed to be used with or without IDX. This guide will cover setting it up with Equity IDX widgets, but can be replaced with alternative widgets. Where applicable we have noted alternatives. If using IDX, make sure you have activated IDX features in the theme by installing and activating the IDX Broker plugin.

Home Top

You will need to create a Soliloquy slider to use in the Home Top widget area. Refer to theme documentation on Soliloquy
  1. Log in to your WordPress site.
  2. Hover over “Appearance” in the left menu until a sub-menu appears.
  3. Click “Widgets” in the sub-menu.
  4. On the left you will see your available widgets. On the right you will see your available “Widget Areas”. You can drag and drop widgets into widget areas.
  5. Locate the “Home Top” widget area on the right side of the page.
  6. Hover over the widget area title until you see an arrow appear to the right of the text.
  7. Click the arrow to expand the widget area.
  8. Locate the “Soliloquy” widget on the left side of the page.
  9. Click on “Soliloquy” widget and drag it into the “Home Top” widget area you expanded earlier.
  10. Do not give the widget a title.
  11. Select a slider to display.
  12. Click Save

Home Middle

Home Middle 1

The Home Middle 1 widget area is configured to use the Equity – IDX Quick Search.
Alternative: WP Listings – Search widget

  1. Visit the Appearance > Widgets page
  2. Expand the Home Middle 1 widget area
  3. Add the Equity – IDX Quick Search widget to the Home Middle 1 widget area
  4. Give it a title
  5. Select a city list
  6. Enter Search button text
  7. Select Horizontal orientation
  8. Tick the checkboxes for Advanced and Map Search links
  9. Click the Save button

Home Middle 2

The Home Middle 2 widget area is configured to use the Equity – IDX Property Showcase.
Alternative: WP Listings – Featured Listings widget

  1. Visit the Appearance > Widgets page
  2. Expand the Home Middle 2 widget area
  3. Add the Equity – IDX Property Showcase widget to the Home Middle 2 widget area
  4. Give it a title
  5. Select a property type to display
  6. Tick the checkboxes to “Show image” and “Use rows”
  7. Select 3 listings per row
  8. Enter max number of listings to display
  9. Click the Save button

Home Middle 3

The Home Middle 3 widget area uses the theme’s column, icon box, and button shortcodes for a call to action section. Refer to the theme demo shortcodes page for available shortcodes and usage: Shortcodes

  1. Visit the Appearance > Widgets page
  2. Expand the Home Middle 3 widget area
  3. Add the Text widget to the Home Middle 3 widget area
  4. Don’t enter a title
  5. Copy and paste the following code:
  6. Modify the text and URLs as needed
  7. Click the Save button

Home Bottom

Home Bottom Left

The Home Bottom Left is configured to use the Equity – Featured Posts widget but you can use any other available widget here.

  1. Visit the Appearance > Widgets page
  2. Expand the Home Bottom Left widget area
  3. Add the Equity – Featured Posts widget to the Home Bottom Left widget area
  4. Give it a title
  5. Enter 4 (or more) for the number of posts to display
  6. Select to show the post title, and display a content limit of 180 characters.
  7. Click the Save button

Home Bottom Right

The Home Bottom Right section is configured for the Equity – Custom Menu widget. You must create a menu first. Refer to the theme documentation on creating Menus

  1. Visit the Appearance > Widgets page
  2. Expand the Home Bottom Right widget area
  3. Add the Equity – Custom Menu widget to the Home Bottom Right widget area
  4. Enter a title
  5. Select your custom menu
  6. Click the Save button

Adding icons

Open Floor Plan uses a custom menu of IDX pages, with icons, in the Home Bottom Right widget area. To set up this menu:

On the Appearance > Menus page:

  1. Click IDX Pages on the left and check boxes for the menu items to add, and click “Add to menu”
  2. Drag and Drop the menu items in the order you want
  3. Change the title if desired
  4. Add a CSS Class for any of the available Font Awesome icons. Icon classes begin with “fa-“. Icons used in the demo:
    • fa-search
    • fa-search-plus
    • fa-map-marker
    • fa-dashboard
    • fa-globe
    • fa-tag
    • fa-home
    • fa-envelope
  5. If you do not see the CSS Classes field:

    1. Click “Screen Options” in the upper right of the Menus page
    2. Tick the checkbox for CSS Classes
  6. Click Save Changes