Explore Appearances

Summary

The colors, fonts, imagery, and layout of your Explore Page can be customized in Appearances. This article covers how to set up an appearance group for your Explore pages.

Want a video walkthrough? Check out this video from our client success team.

Note
For more information on using appearance settings for Target and Recommend Tracks, see this article.

Important Things to Note:

  • Make sure you select the correct Appearance group when adjusting the Explore page appearance settings
    imageExample of adding an Appearance
  • You can create a new appearance group or clone an existing appearance group by clicking Add Appearance
    imageAdd Appearance menu button

  1. Click the gear icon at the top right of the page. Select Appearances from the drop-down menu.
    imageAppearances menu item
  2. Select the appearance group you want to edit, or create a new appearance group.
    imageAppearance group

    Note
    You can also clone an existing appearance group.
    imageClone Appearance dropdown list
  3. Select the Explore tab.
    imageExplore tab as seen in the main menu

Hero Appearances

The Hero section is the top of your Explore Page.
imageExample of a Hero section

Warning
Remember to regularly save your changes by clicking Save Explore Settings at the bottom of the Explore tab.
imageSave Explore Settings button
  1. Select the layout for your Hero section:
    • Cover Image: Just the hero banner, with no logos
    • Branded: Hero banner with a logo
    • Partnership: Hero banner with two logos
    • Personalized: Hero banner with two logos and one headshot
Note
Check out these Explore Use Cases for examples of what these layouts look like in action!
  1. Click the color box to select a background color for the hero section.
    imageColor box for selecting a background color
  2. Click Hero Image to select a background image for the hero section.
    imageHero background image example
  3. Click Upload to add a new image, or select one of your existing images. Click Save.
    imageUpload button
  4. Select either Fixed or Fill for your hero image.

    Fixed: Ensures that the same portion of the background image will always be shown.
    Use this setting if your hero image has text or other styling which shouldn’t be cut off.
    imageExample of a Hero image fixed
    Fill: Responsive to the size of the window, ensuring that the background image always fills the Hero section. The background color will never show.
    image
    Example of a Hero image filled

    imageImage of the Fixed and Fill radio buttons

     

  5. If you select Branded, Partnership, or Personalized: Click each logo to upload and select an image.
    imageExample of logos to upload
  6. Select the font settings for your Hero Title and Subtitle.
    Note
    If you want to use a font which isn’t listed, you can contact support to have the font added to your PathFactory instance.

    imageImage of Hero title and subtitle dropdown lists


Body Appearances

The body of your Explore page is where all of your content assets are displayed.

Warning
Remember to regularly save your changes by clicking Save Explore Settings at the bottom of the Explore tab.
imageSave Explore Settings button
  1. Select the layout for your content assets.
    imageLayout dropdown list

    Grid: All content assets are displayed in a grid.

    • Content assets will be in the order determined by the underlying content track.

    Check out this use case to see what grid looks like.

    Topic Carousel: Content assets are grouped by topic.

    • Any topic which has been tagged to 3 or more content assets in the underlying content track can appear as a carousel
    • Content assets will appear in the topic carousels of each topic they have been tagged with, meaning they can appear multiple times on the Explore page in different topic carousels
    • All content assets from the track which are not used in any of the topic-based topic carousels will be grouped together in a “More Content” carousel
      • You can rename the “More Content” carousel when you’re setting up an Explore page
      • If all of the content assets have been included in at least one topic carousel, the “More Content” carousel will not be displayed.
      • There is no way to delete the “More Content” carousel.

    Check out this use case to see what topic carousel looks like.

  2. Click the color box to select a background color.
    imageLayout dropdown list – grid
  3. Set the text settings for your Explore page’s Title and Description.
    imageText settings dropdown lists
  4. Set the font settings for the content asset labels.
    Note
    Content titles (the names of the content assets) will always be displayed. When setting up your Explore page, you can choose whether or not the Content Type and Featured labels will be displayed.

    imageContent styles dropdown lists

  5. Select the font settings for the search and filter functions.

    Things to note:

    • The search button and the filters will have the same styling
      imageSearch bar and filters for the Explore page
    • When setting up your Explore page, you can choose whether or not the search bar and filters will be displayed.

    imageSearch and filter style dropdown lists


Advanced Customization

The Advanced Customization feature allows you to add scripts to the header, body, or footer of your Explore Page.

Warning
We strongly recommend working with your web team to ensure the code you use is complete.
For example, if your website is hosted on a CMS (eg. Drupal) you must ensure the code is exportable.

Example:
Use Advanced Customization to add your company’s website header to an Explore page, ensuring consistent branding.
imageExample of advanced customization

  1. Click Advanced Customization.
    imageAdvanced customization button
  2. Enter your code in the appropriate sections. Click Save.
    imageExample of html code
Updated on November 28, 2022

Was this article helpful?

Need Support?
Can't find the answer you're looking for? Don't worry we're here to help!
CONTACT SUPPORT