Customizing Your Super Theme Design: Card Options

What are card options?

Card Options allow you the flexibility of updating the look and feel of your site with the click of a button. For example, there are different ways to display agent information on listings, offices and so on to allow you to highlight what's most important to your brand. 

How to view and select card options

1. Go to Settings > Super Theme
2. Click on the Card Options tab.
3. Select which style of card you'd like for each card option
4. Click the green "Save Settings" button in the upper right-hand corner of the screen.

The changes you've selected will be updated on the front end of your website.

Types of Cards

We currently support eight different cards on your website:

• Page Banners
• Property Cards
• Agent Cards
• Area Cards
• Office Cards
• Market Insights Cards
• Market Summary Cards
• Blog Cards

To learn more about each card type, including style options and where the cards display, read below.

Page Banners

Page Banner designs will enhance the display of your Theme Photos and Header Images on all website pages where you have chosen to display a photo at the top of the page. There are 5 styles to choose from:

1. Basic: the image will display as uploaded, no treatment applied
2. Fade: a fade effect will be applied to the image, starting from the bottom of the image
3. Accent: an overlay filter based on your site's Primary color will be overlaid on the image
4. Gradient: a gradient effect based on your site's Primary color will be overlaid on the image
5. Desaturated: the colors in the image will be desaturated to give a more subtle feel to the image

Property Cards

Property cards are used to display listings across your website, usually multiple cards at a time. Clicking on a property card will take a user to the Property Detail Page for that listing. Property cards appear on many pages on your website, including:

• Within search results and on Search Pages
• On Agent Profiles, where the agent's active and sold listings are displayed
• On Area Profiles, if you have selected search results to display for that Area
• On Office Pages, where the Office's active and sold listings are displayed
• On Property Details Pages, where similar listings are displayed 

There are 4 different styles to choose from.

By default, Property Cards in search results will display your Agent's or Office information on your exclusive listings. If you'd like to turn this feature off, you can select the box labeled "Hide Exclusive Search Results Office/Agent Attribution." 

Agent Cards

Agent Cards are used to display key information about your Agents across the website in relevant places. Clicking on an Agent Card will take a user to that agent's Agent Profile. Agent Cards appear on several pages on your website, including:

• The Agent Roster page, /agents on your website
• On Office pages, where Agents associated with that Office are displayed
• On Property Details pages, if the listing is owned by one of your Agents or if a lead is logged in and currently working with an Agent
• On your website's Homepage, if you have selected "Featured Agents" as one of your homepage sections

Agent Cards have four different Card Options. For select styles, you have the additional option to change the Background Color on your Agent Cards for an even more customized look.

Area Cards

Area Cards are used to highlight an Area local to your market, based on Area Profiles that you have created on your site. Clicking on an Area Card will take a user to that specific Area Profile. Area Cards appear on several pages on your website, including:

• The Areas Index page, /areas, which shows all Primary Area Profiles you have created on your site. Brokerages commonly link to this page from their Primary Navigation.
• On Property Details Pages, which automatically pull in the nearest Area based on the specific property's information
• On other Area Profiles, if you have chosen to display Nearby Areas or Sub-Area Profiles
• On your website's Homepage, if you have selected "Area Profiles" as one of your homepage sections

Area Cards have four different Card Options. For select styles, you have the additional option to change the Background Color on your Area Cards for an even more customized look.

Office Cards

Office Cards are used to display Office information, based on Area Profiles that you have created on your site. Clicking on an Office Card will take a user to that specific Office page on your website. Office Cards appear on several pages on your website, including:

• The Office Roster page, /offices, which shows all Offices that you have created on your site that are enabled for website display.
• On Area Profiles, when you have Associated Offices as part of your Area Profile page design and an Office is added to the individual Area Profile.

Office Cards have three different Card Options. For select styles, you have the additional option to change the Background Color on your Office Cards for an even more customized look.

Market Insights Cards

Market Insights cards are used to display statistics about the local real estate market. Cards will only display for Market Insights that you have created on your site. Clicking on a Market Insight card will open up a small window that displays additional statistics for that market.

Market Insights cards appear on two page types on your website, including:

• On Area Profiles, when you have the Market Insights Snapshot module enabled as part of your Area Profile page design.
• On Property Details pages, when the listing in question is in a location for which you have created a Market Insight report. 

Market Insight Cards have two different Card Options. For select styles, you have the additional option to change the Background Color on your Office Cards for an even more customized look.

Market Summary Cards

Market Summary cards are used to display summary stats generated by your Market Insight reports, which can currently be found and configured on Market Insights pages. These cards are not clickable. 

There are 4 different styles to choose from.

In addition, there are three other customization options available for Market Summary cards:

• Market Summary Card Background Color: This option allows you to change the background color of the individual cards.
• Enable or Disable Background Gradient: Choose to display a color gradient based on your theme colors on each card.
• Show Charts When Applicable: An interactive chart will appear on the card for relevant stats. When a user hovers over the chart, they can see historical data points directly on the chart.

Blog Cards

Blog cards are used to display individual blog posts. Clicking on a blog card will take a user to that specific blog post.

Users can choose to display or hide the following information on a blog card:

• Show Image: Display the Featured Image associated with the blog
• Show Title: Display the Post Title 
• Show Author: Display the Author's Name
• Show Post Date: Display the date that the post was published
• Show Summary: Display the beginning of the blog post on the card
• Show Read More Button: Display a button that says "Read More" to encourage a user to click through and read the post