Introduction

The "Hero Block" refers to the first section that is typically seen on an IDX website with the large image, and text on top. Because of its prominent location on the Home page, this is an important block to configure correctly. The instructions to do so are found below:

Summary

• Adding Hero Block
  • Background
  • Content
  • Search Section
• Size Recommendations
  • Image Background Type 
  • Video Background Type

Adding Hero Block

The first block you will see on the Home page is the "Hero Block." Click the "Edit" icon on the top-right of that specific block in order to configure this block.

 There are three tabs in this block editor: (1) Background, (2) Content, and (3) Search Section.

Background

You can configure all of the settings for the block background here. Choose your preferred background type: (a) Image, (b) Slideshow, or (3) Video. When you choose "Image" as the background type, you need to upload the image both for desktop size and mobile size. If you do not upload an image for the mobile screen size, Lofty will use the desktop image instead.

When you choose the "Slideshow" type, you need to upload multiple images for desktop size and mobile size. If you do not upload an image for mobile size, Lofty will use the desktop images instead. You can then choose the transition effect (slide or fade effect), the slide transition time (in seconds) can also be adjusted here. The "Show Dots" will determine whether the noticeable dots display on the images so that visitors know there are more images to slide between. 

When you choose the "Video" type, you need to upload the video first. The Lofty CMS Tool supports YouTube URLs or uploaded MP4 files with the maximum size being 50MB. After uploading a video, you can choose a video preview image in cases where you do not want to show the first picture of the video. After uploading the video, you can configure the video play settings:

• Auto Play: The video will be played automatically if this checkbox is selected. If this checkbox is not selected, the video will only be played after the visitor clicks the play button that appears in the background.
  • **Please note that this setting only applies on desktop-sized devices as the video cannot autoplay in mobile browsers. 
• Inline Play: This setting will only be shown when "Auto Play" is not selected. After selecting this option, the video will be played directly in the background when a site visitor clicks on the play button. If not selected, the video will be played in a pop-up after the visitor clicks the play button.
• Auto-Adjusted Height: If selected, the block height will be adjusted automatically according to the video height in order to show as much of the video as possible. 
• Show Progress Bar: If this is not selected, the video progress bar will be hidden. 
• Show Mute Option: If this is selected, the mute option will be shown in the right corner.

You can turn on the "Different Background Type for PC and Mobile" in order to choose a different type for each device. This is ideal for video as auto-play does not work on mobile devices. 

The "Background Size" can also be adjusted in this block for both desktop device sizes and mobile device sizes. First, choose the size type. Lofty recommends the "Aspect ratio" type because it will be responsive for devices with different screen sizes. Other types available include "Exact Height" and "Full Screen." If you choose "Exact Height," you will need to define the specific pixel height.

The last background setting is that of the "Background Overlay." With this setting, you can add an opacity layer above the background. You are able to choose the color for this opacity layer.

Content

In the "Content & Search Position," section you can also choose the relative position of the content (heading and subheading) to the search section: Top-Bottom or Left-Right.

In the "Heading and Subheading" section, you can edit the content and style of the heading and subheading. Note that you can change the alignment of the heading and subheading in the text editor.

If you want to show an image (typically a team/company logo) in the heading and subheading part, you can change the heading type from text to image in the setting for "Heading Content-Type." The position of this image can also be adjusted as center, left, or right. 

Search Section

In the tab for "Search Section," you can edit the search section of the hero block. First of all, choose your preferred search style: None, Advanced Search Bar, Tab+Search bar, Button.

Note: Do not display any search options on the hero block. 

Advanced Search Bar: Choose the search fields that you want to display here. For now, the only options available are the following: Price, Beds, Baths, Property Type, and Purchase Type.

Tab+Search Bar: Define the default text in the search bar for the Sell My Home and Home Evaluation tab. You can also choose the name format and whether a name and phone are required.

Button: You can add up to four buttons at most. Edit the button text, style, and destination URL by clicking the "Edit" button for each button on the button list. You can also adjust the order of the buttons.

Size Recommendations

There are four different hero block styles and each style has slightly different size recommendations.

Image Background Type 

Hero Style 1

Desktop Size Recommendation: 1440 x 480 pixels
Mobile Size Recommendation: 750 x 500 pixels  

Hero Style 2

Desktop Size Recommendation: 1440 x 635 pixels
Mobile Size Recommendation: 750 x 640 pixels 

Hero Style 3

Desktop Size Recommendation: 1440 x 635 pixels
Mobile Size Recommendation: 750 x 452 pixels 

Hero Style 4

Desktop Size Recommendation: 1440 x 740 pixels
Mobile Size Recommendation: 750 x 1334 pixels

Video Background Type

As far as file size, the video can be no bigger than 50 MB.

Hero Style 1, Style 2, Style 3

For all three of these styles, we recommend keeping the default values which are as follows:

Hero Style 4

We recommend the following settings as default:

Questions?

If you have any questions regarding this topic or any others, please reach out to our Support Team via email at <support@lofty.com>, by phone at 1 (855) 981-7557, or by chat with us through your Lofty CRM.