Preset Content is a useful tool for reusing and maintaining a set of content from one place without having to update multiple pages. This row displays content that is created and edited in the “Preset Content” area of the left-hand menu.

Good times to use preset content include:

• When you need the same content to show up in multiple places on the site.

• When a page has too much content or rows and because slow to edit on the backend of the site.

• Header and Footers (both global & page-specific footers)

• Maintaining a large number of image buttons

The Jumbotron row is mainly used for the hero unit of the homepage, or the headers of other pages.

It displays a main heading (H1) and options to add a subheading (H2) and paragraph text. A button can also be added, with all the normal options associated with buttons. The background can be a color, image, or youtube/vimeo video, and the height and video start/end times can be customized.

The option for using {page:title} is accessible for the H1 heading option and uses what you title the page as the H1.

Banners can be added to the bottom of Jumbotron rows.

The Jumbotron Banners include the functionality on regular callout banners but are created on the pages’s Jumbotron row. To enable a Jumbotron’s Banner, in the Banner Tab of the row, toggle “Include a banner?” to “Yes” and fill in the content.

Jumbotron Rows also support multiple images as a slideshow.

The Google Map row is a versatile tool for incorporating maps that span edge to edge on your website. While its functionality overlaps with the Google Map content block, opting for the map row is often a strategic design choice. This layout proves particularly beneficial for maps featuring numerous markers, such as tour routes or businesses with multiple locations.

Map

• This tab serves as the central hub for configuring your map. Here, you can input the address, specify the desired zoom level (e.g., Neighborhood, City, Region), and adjust the map’s height. If you have location taxonomy enabled, you can also select all the locations you wish to display on the map.

Map Styles

• Customize the visual appearance of your map using the Map Styles tab. Utilize tools like https://mapstyle.withgoogle.com/ to generate JSON code for your desired style and paste it into the dedicated field. Additionally, you can choose the icon, color, and size of the map markers to suit your design preferences.

Map Markers

• In cases where location taxonomy is not enabled, this tab allows you to manually add locations to the map. You can also use this section to override the link from the Map tab if a map marker needs to direct users to a specific location on the map.

Options

• Tailor the map’s functionality with a range of checkboxes in the Options tab. Enable features such as the search bar (only applicable with multiple markers), a list view of markers, or disable clustering of map markers. Additionally, you can choose to disable the default controls for the map to provide a more customized user experience.

Please see the Google Map Row example inserted above the footer:

A frequently used row, this allows you to display multiple activities. Which activities appear can either be set to All Activities, Activity Taxonomy Terms, or Manual.

All Activities

• If you select “All,” all activities will appear in the order that is selected in the activity settings. They can also be ordered based on a taxonomy in this setting.

Activity Taxonomy Terms

• In Activity Taxonomy Terms, only activities with certain taxonomies will display. You can select whether to include activities matching ANY of the Category terms OR only include activities matching ALL of the Category terms.

Manual Selection

• Using Manual Selection lets you search a dropdown or type in the specific activities you wish to use. This setting offers the greatest degree of control, but it will not automatically update to include new activities on the site and will require manual upkeep.

Under the options tab, you have the option to “Allow users to filter activities by taxonomy terms.” This will allow customers to filter your activities based on taxonomy terms.

“Show activities in list view.” will show one activity per row.

“Prioritize the top 2 activities of this grid.” will show the first 2 activities in a row, then following rows will follow the number of activities set under “Activities Per Row”.

“Show activities as a horizontal scrolling view.” will show activities in a scrolling view rather than stacking them in multiple rows.

Horizontal Scrolling Best Practices

• Not recommended for less than 4-5 activities
• Not recommended for more than 10 activities
• Not recommended on all activities pages
• Note: Automatic movement can be very distracting for a user, especially for people using screen readers or other browser extensions for accessibility.

In the example below, the option “Show activities as a horizontal scrolling view” is selected:

Adds a search functionality for activities or availability based on specific dates.

Search By Date will produce the best results on sites with lots of activities and lots of availabilities. If you decide to use Search By Date on your site, try a few searches and see if you are getting valuable results. If you are getting lots of No Result Messages, or are getting the same result for each day, the Search By Date is likely more distracting than helpful on your site.

By default, Search By Date will not show activities with only ‘call to book’ availabilities, so if most activities are call to book, it will not yield a lot of results. You can select the option to “Show call to book availabilities in search results.” This should be used sparingly since the goal of the Search by Date row is to make booking activities online easier for customers.

In the example Search By Date row below, “Show three days of availability upon page load” setting is selected:

This is a very important row in our FareHarbor Websites, it’s a great way to draw attention to a bestselling activity.

This row works similarly to an activity content block in that it pulls the image and information from the activity itself, so there are very few options available.

Content Tab:

• Select an activity from the dropdown, this is selecting which activity you’d like to display

Appearance Tab:

• Choose which Featured Activity Row Style under the Featured Activity Row Style field

  • Full Width – meaning this will span the full row:

    • The full width style supports the “Use slideshow instead of single image.”

  • Checkered (Two Column) – meaning the content will appear on one side and the primary activity photo will appear as the other half of the row

    • The checkered pattern requires every other consecutive featured activity row to be flipped to achieve the desired effect.
    • The checkered style supports the “Use slideshow instead of single image.”
    • The user can override the background settings to set the content column background. under the Background field in the Appearance tab

Options Tab: The following are the style options you can apply to the featured activity:

• Use Learn More buttons on this activity instead of Book Now.
• Include both Learn More and Book Now buttons.
• Flip this row to feature the image on the left and content on the right
• Add additional top and bottom padding to this row. (Does not work with Full Width Style or Background – Shared with Row Above)
• Use the first slideshow photo instead of the header of the activity page.

Testimonials is a feature to add any type of reviews to a FareHarbor Site.

Testimonials will have a review title, content, attribution (ex: TripAdvisor, Google, Facebook, a person’s first name and last initial, their username on a review site, a journal or publication, etc), a star-rating and an option to upload photos.

Testimonials themselves are created and managed in the “Testimonials” section which is just below Cards in the left-hand menu. Add all testimonials in this area first. Then, once testimonials are added, insert the “Testimonials Row” on the desired webpage. You will be able to select from the library of testimonials added in the previous step.

A slideshow row displays activities or images in a horizontal scroll.

There are 3 types of slideshow row options:

• Multiple Activity slideshows that allow you to select multiple activity items and then those items scroll sideways displaying one at a time.

• Standard Slides that are formatted just like a Jumbotron Row, but with the ability to create a multiple jumbotron scrolling row.

• Image Slides that display only images with no text, buttons etc. These display differently than photo gallery slideshows and maybe be preferable for mobile vs. desktop or vice versa

Image Slides

Image Slides are just images that span the full width of the page. They can be great for gallery pages for high quality sites.

Standard Slides

Most commonly, we use standard slides. Standard slides can display large images that span edge to edge just like image slides, but with Standard Slides there are options to include text including a heading and paragraph as well as a button. This makes them a far better choice for hero units or headers.

The Standard Slides have 2 main uses as a homepage hero unit: 1) to display the same text and button on each slide, often directing people to the all activity page. 2) To allow each slide to represent something different (for instance, one slide might be general and include a button linking to the all activity page, while the next slide might feature and describe the bestselling activity, where the button links to the single activity page. It is best practice not to have too many slides as people don’t pay attention for long. 3 is the minimum and 6 is the max.

In the Standard Slides example below, a custom image is uploaded, and “include a button” setting is checked:

Multiple Activity Slides

Multiple Activity Slides are just slides that look like Activity Grids. These can be helpful for seasonal activities, or just as another way to include more activities (maybe after a single activity slide upselling the #1 activity, a multiple activity slide can follow and include the #2 and #3 bestsellers).

Multiple Activity Slides supports the ability to override the background settings:

Cards can be used to display or showcase virtually anything in a similar style to that of an activity grid. It can be used for employees (on a bio page), landmarks on a sightseeing tour, different whales that may be seen on a cruise, and virtually any other application.

Cards themselves are created and managed in “Cards” which is just below Activities in the left-hand menu. They can include an image, headings, content and icons, and can be grouped into collections which can be displayed all at once.

The Card Grid Row allows card post types to be displayed on the site. Which cards appear can either be set to All Cards, Card Taxonomy Terms, or Manual.

If you select “All,” all cards will appear. In Card Taxonomy Terms, only activities with certain taxonomies will display. You can select whether to include cards matching ANY of the Category terms OR only include cards matching ALL of the Category terms. Using Manual Selection lets you search a dropdown or type in the specific cards you wish to use. This setting offers the greatest degree of control, but it will not automatically update to include new cards on the site and will require manual upkeep.

Under the options tab, you also have the option to filter cards by taxonomies within the grid and what order the taxonomies appear and terms appear is the order you arrange them within the content tab. You can also use sub term filtering by adding a sub term label on the taxonomy in Card Settings. The filter and prioritization of the cards should NOT be used together.

This row allows for an image to be used edge to edge on a screen and ensures an image isn’t cropped when shown on two very different screen sizes.

A mobile-friendly version of the graphic can be uploaded as a separate image. It’s best practice to include a mobile version of an image that has a more vertical layout if there is text included on the graphic.

This is the primary building row in FH Sites.

• These rows include 1-4 columns, where each column might contain any of the various content blocks that are available to use.
• A row spans edge to edge, and the background for each row (set in the Row’s Options) will occupy the entire width of the page.
• When only 1 or 2 columns are being used, there is an option to make the row(s) occupy a more narrow section of the page, and with 2 columns you can choose the size of the first column (anywhere from ¼ to ¾ of the page width).

An activity grid allows you to display more than one activity. Most of the time it highlights the most popular activities and typically appears on the homepage and activity category pages.

An example of when to use the Activity Grid Block instead of the Activity Grid Row (see above) would be if you want a vertical activity grid in one column and then have an H3 and text etc in the opposite column.

There are multiple ways to filter activities in an Activity Grid Block.

• All Activities – shows all activities on your site
• Activity Taxonomy Terms – allows you to set the taxonomy filters to only show activities that match
• Manual Selection – allows you to manually choose the activities to display
• Default Featured Activities – will only show activities that you include in the Featured Activities section under Settings > Activity Settings
• Events Only – will only show activities that you set as an event on each individual activity page within the Options tab

Additional things to check:

• Be sure to check the mobile layout after publishing.
• Be sure to select relative activities based on activity grid location. For example, if on a “cruises” page, display cruise activities.
• Be sure to show the most popular activities first.

Button combination options and Horizontal Scrolling can be used the same as in Activity Grid Rows (see above).

Website breadcrumbs are like a trail of virtual breadcrumbs that show where you are on a website and the path you took to get there, making navigation easier.

• This block automatically displays breadcrumbs for the path this page is nested under. This is great for SEO and navigation for users.
• If you’d rather set breadcrumbs globally on every page of your site, visit Appearance > Look & Feel > Global Breadcrumbs. Enabling breadcrumbs there means you won’t need to add individual breadcrumbs blocks on every page.
• Breadcrumbs are a great tool if you are using parenting/landing pages. Try adding these under your Jumbotron or Hero Unit for increased visibility.
• You can align to the left, right, or center, under options.

This block automatically displays the business hours info defined in the Business Hours tab located in Company Settings.

A button is a clickable element that leads the user to a destination chosen by the site author. There are default destinations in the theme such as other pages on the website or checkout for a particular product. If one of the default destinations doesn’t meet your needs, buttons can also direct users to a custom URL.

Button Action – Where should this button take the user?

Lightframe – Single Item

• This is similar to the default Book Now button. You can select a specific activity from the dropdown menu, or input manual FareHarbor Item ID’s.
• Entering a FareHarbor Item ID will override the activity dropdown selection.
• The shortname set in Settings > Company Settings will be used by default.
• If this lightframe should pull from a dashboard other than the one set in Settings > Company Settings, fill in the FareHarbor Shortname Override field with the alternative shortname.

Lightframe – New Booking for a Specific Availability

• Typically used only for off events. As soon as the availability has passed, this will no longer be bookable.
• The most important part of selecting this option is to fill out the FareHarbor Availability ID input field.
• You can easily find the availability ID by visiting your dashboard, visiting the calendar view for a specific activity, selecting the specified availability, then grabbing the ID from the URL (I.E: fareharbor.com/shortname/dashboard/items/89719/calendar/items/89719/availabilities/134255909/)

Lightframe – Multi Item Availability Calendar

• The Multi-Item Availability Calendar will show all availabilities for any activity included in the dashboard’s default flow.
• To change the booking flow used in the calendar, add a Flow ID to the FareHarbor Flow ID field.
• To find the Flow ID of a different booking flow visit your dashboard and go to Settings -> Booking Flows. The Flow ID is listed in the ID column.
• You can create a new flow in your dashboard by going to Settings -> Booking Flows -> New Flow.
• Under Lightframe Options checking “Show full item information instead of just showing calendars” will show the customer more details within the lightframe rather than only showing the calendar of availabilities.

Lightframe – Items Grid

• The Items Grid will show all public activities available in the dashboard by default.
• To only show specific activities, include the Item IDs in the Filtered FareHarbor Item IDs field.
• To use a booking flow, add a Flow ID to the FareHarbor Flow ID field.
• You can create a new flow in your dashboard by going to Settings -> Booking Flows -> New Flow.
• Under Lightframe Options checking “Show full item information instead of just showing calendars” will show the customer more details within the lightframe rather than only showing the calendar of availabilities.

Page or Activity

• This allows you to link to another Page or Activity on your site.

Custom URL

• This allows you to link to external sites or include any specific URL you’d like to link to.
• It’s best to make sure that Open this link in a new tab is selected if the link goes to another website.

Button Appearance

Corner Rounding (not found within the button block, visit: Appearance → Look and Feel → Styles → Corner Rounding)

• This controls the border radius on buttons, activity blocks, menus, form elements, and other miscellaneous elements.

Appearance Tab

• Make this button larger.
  • Makes button taller
• Reduce this button’s visual prominence.
  • Creates outline border color with transparent fill on buttons. Good for using when two buttons are next to each other and you want to establish priority for one.
• Stretch to the full width of the containing column.
  • Stretches to the full width of the column you are using. If the button is too long, you can go to the Col Options tab and check “Add padding in this column to give it more white space”
• Emphasize the subheading on this button.
  • Makes subheading larger (underneath main label) Button icons will sit to the left of the subheading if one is set.
• Hide on Desktop
  • Hides the button on desktop devices.
• Hide on Mobile
  • Hides the button on mobile devices.
• Label
  • Something actionable like “Book Now,” “Take a Tour,” or “Choose a Cruise.” Try to be specific and have the label reflect the action.
• Sub Label
  • OPTIONAL: A qualifier like “50% off” or “Live Availability”.
• Button Icons
  • Great for specific purpose buttons. For example, a directions button could easily use the map marker, or a read more button could use open pages.
• Color
  • Change the color of the button. By default, all buttons will assume the primary site color if a different color isn’t chosen.
• Horizontal Alignment
  • Aligns the button to its left, center, or right

This block will display a calendar on the page (not as a lightframe) of all the items that can be booked in the Lightframe Item Grid or Calendar from within your FareHarbor Dashboard.

• The Items Grid will show all public activities available in the dashboard by default.
• To only show specific activities, include the Item IDs in the Filtered FareHarbor Item IDs field.
• Be sure to include the specified Flow ID, Price Sheet ID, and ASN or REF tag based on the specific purpose of the calendar.
• A full width calendar is quite large and can take a while to load depending on the number of activities and availabilities included in the calendar.
• Placing full width or full item calendars on the homepage will increase load times.
• To decrease the size of calendar, add additional columns to the Multi Column Row.

Functions the same as a card grid row type (see above), but by using it as a block it can be used side by side with other content.

• This block automatically displays the Email, Alt Email, Phone, Alt Phone, WhatsApp Number, and Formatted Location (or Google Maps location if Formatted Location field is empty) defined in Settings > Company Settings > Contact Info.
• This block is mainly used in footers and on contact pages.
• You can also add custom contact info in Settings > Company Settings > Contact Info if needed.

• Enter the physical address. This block will automatically pull the address included in the Google Map section of Company Settings.
  • Keep in mind when you change the address in Company Settings, all Google Map blocks will not automatically update.
• Map Styles
  • You can select an icon used as the map marker if multiple map markers have been set.
• Map Markers
  • Custom URL to link marker to
  • Remember to include http:// or https:// at the beginning of the web address if linking to another site. If a link is added, the marker information will be ignored.
• Additional Markers
  • Great for companies with multiple locations or storefronts. Also good if you have a P.O. mailing address vs physical location.
• Typically these maps are on contact pages, directions pages, or in some instances, in the footer.

• Gravity forms blocks are a great way to insert forms anywhere quick and easy.
• When using this block a form is required to be selected. If a form is not selected the page will not save and an error will occur.
• All forms created using the Gravity Forms plug-in will be accessible under the dropdown under the Select a form field.
• You can affect the properties that display with the form under Options:
• By default the form title and description will be displayed.
  • You can hide the title and description of the form by selecting their respective checkbox

• Heading blocks are a very important aspect for content hierarchy. They range from H1 to H5, with H1 being considered the most important and H6 the least. The heading tags are used to briefly describe the topic of the page or content on the site.
  • Don’t use headings simply to make text BIG or bold! That can be done in a Rich Text block.
• Heading Type
  • H1 headings should be main headings and there should ONLY be 1 per page, followed by H2 headings, then the less important H3, and so on.
  • The Heading Text field of the Jumbotron Row is automatically an H1.
• Heading Size
  • This can be used to adjust the size of a heading while keeping the heading type the same.
• Heading Color
  • This can be used to change the color of the heading.
• Options Tab
  • Includes various options to change the appearance of the heading.

This block adds images, which can be pulled from the Media Library section within Wordpress or be uploaded directly.

To replace an image in the block click the pencil icon on an image and select a new image. Remember that replacing media via blocks will replace only the image in that specific block.

• Select image from Media Library or upload your own photo. Make sure you have the Caption, Title, Description, and Alt Text filled out with relative keywords to the page and company.
• You can crop the image under Options (Defaults to no cropping (uses the image’s natural aspect ratio)
  • Portrait (3:4) Tall and Skinny
  • Square (1:1)
  • Landscape (4:3) Use with larger about paragraphs
  • HD (16:9) Most common size for ½ column rows.
  • Panorama (12:5) Good for filling space or to equalize column heights.

This will add a button with an image that can be pressed or clicked by the users. They are a way to link to other pages with a grid. You can for example link certain pages that show different activity categories (e.g. “Jeep Tours” and “Canyoneering”). They can also be used to link to external websites (for example featured articles).

• Image buttons require the same action as stated above in the Buttons section.
• You can set the style of your image buttons in Appearance → Look and Feel → Styles Tab → Image Button Style (This controls the global visual style of image buttons.)
  • Plain (Text over darkened image, text bottom-left)
  • Plain Centered (Text over darkened image, text center)
  • Bar in Middle (Text with color backdrop over center of image)
  • Bar on Bottom (Text with color backdrop over bottom of image)

This block will add your instagram feed to your site. See this page for more information on how to setup your feed.

The block is used to show affiliate companies or partners via links with images (usually logos). A benefit of using this block to display images and/or logos is that it can standardize the image sizes in the collection. Each image/logo added has the option to be it’s full size or a pre-set option of “small, medium, or large”.

• Upload .png logos with transparency for a clean looking display.
  • You can also attach links to their websites.

• Generates a list of links that can act like a secondary menu
• Generate a Menu set in Appearance → Menus
• Most commonly used in the Global Footer for showing Site Map.
• Note: you can’t make menus from this block, only display menus created already. Menus themselves are created in the Appearance section > Menus.

A photo gallery lets you add photos in rows and columns. It can be viewed as a grid, which shows all images at once, or as a slideshow where one image is shown at a time.

• Click the blue “Add to gallery” button to choose photos.
• Grids on mobile always show with 3 columns on MK.
• Set cropping aspect ratio and slideshow height under “Options” tab.
• Make sure you check the photo gallery design and spacing on mobile as well.

• This block shows a list of Preset Content Blocks to choose from and adds preset content into the flow of a multicolumn row
• To add preset content options to use in a block, go to the Preset Content tab in the menu, select “Use as block instead of row?”, and add a sequence of blocks to be used in multicolumn rows throughout the site.
• This is similar to Preset Content ROWS.

This block will pull blog posts from “Blog Posts” area of the Wordpress menu and show the recent blog posts (up to 20) in a card grid (by default – in rows of three), horizontal scroll, or vertical scroll orientation.

• Can select a specific category of posts to show. (Must attribute categories to individual blog posts first) Blog Posts → Blog Categories

Basic text editing tools, and probably the most common block used other than buttons. You can easily edit font colors, sizing, block quotes, boldness, headings, etc in this block.

• Except where required, avoid creating headings in this block. The Heading block has more style options for large text and helps keep track of heading structure.
• Media can be added to rich text blocks to include images in line with text. Typically it’s better to include media with using one of the media related blocks (Image block, Photo Gallery, Slideshow) because those blocks have more style options.
• When copy & pasting content from other sites, be sure to check the “Text” tab and make sure there is no rogue css or html attached.

This is a great tool for condensing large amounts of non-important text. Most commonly used for FAQ pages, but can also be used on activity pages for Cancellation Policy, Privacy Policy, Hours, etc.

• If you add a Section Title and leave the Section Content blank, the Section Title will show as a heading instead. This can be used to group sections under headings without building separate Heading and Sectioned Content blocks.
• Make sure you are not hiding important information that should be visible as soon as a user lands on a page.
• Can be used on activity pages in the Extra Blocks section.
  • Good for Cancellation Policy, What to Bring, etc.
• Sectioned content boxes will always appear white.

Use separators to equalize column heights, add padding to rows, or for design purposes. You can set the color, width, and thickness of a separator.

You can also upload an image as a separator to replace the default straight line with something more unique.

Separator Height

• Chooses how much height you want. Example, if you choose Medium (80px), you will get padding top: 40px, and padding bottom: 40 px.

Separator Width

• Choose how long the horizontal line should be. Example, if you choose Default, the horizontal line will be short and stubby, 40px.

Horizontal Rule Thickness

• Choose how thick you want the line to be. If None is selected, no horizontal line will display, and the Separator Width does not matter.

Separator Color

• The default color for the separator will be the secondary color chosen under Look & Feel > Colors. You can override the color in this field.

Separator Image

• Choose a .png image as a separator.

This block is used to add a single activity to a multicolumn row. These are useful when you want to display additional information in that same row alongside the single activity.

A slideshow block displays blocks with content and images in a horizontal scroll. This block is useful when you want to display additional information in that same row alongside the slideshow block.

There are 2 types of slideshow block options:

• Standard Slides that allow you to add text and buttons.

• Image Slides that display only images with no text, buttons etc. These display differently than photo gallery slideshows and maybe be preferable depending on the design.

This block displays icons corresponding with the social media urls defined in Company Settings.

• If you only want to show specific social media icons, you can check the platforms you wish to exclude under “Excluded Social Media Links”.

Social Share links will prompt the user to share this page on their own Facebook, X (Twitter), or via Email.

A Testimonial is a feature to add any type of review to a FareHarbor Site. This block functions in the same way as the row Testimonials, but here you are able to add a testimonial within a multicolumn row.

Each testimonial will have a review title, content, attribution, a star-rating and an option to upload photos. They are created and managed in “Testimonials,” which is just below Cards in the left-hand menu.

Copy the link to the video from YouTube or Vimeo and paste it into the box.

Step 1. Hover over the desired layout you want to save as a present content. For example: hover over a multi-column row.

Step 2. You should see a Globe icon display on the right upper corner with the other icons that says “Save as Preset Content”. If you do NOT see the Globe icon over the row, column, or block you are hovering over, please “Update”, “Publish”, or “Save as Draft” the page. The Globe icon will not display if the row, column, or block has not been saved on the page first.

Step 3. Click on the Globe icon, the Row, Column, or Block should have transformed into a Preset Content block, with a default name, ex: Saved Preset Content – Multi Column Row – Save a Row Column or Block as a Preset Content”

Watch Video: Save as a preset content