Skip to main content

Branches

The Branches widget creates a tabbed navigation interface with accompanying content panels. This allows you to highlight multiple segments, features, or categories in a compact and visually engaging layout.

note

Custom widgets are described as they are defined for our standard (Mosaic) front-end theme. If the description does not match what you see on the screen, this is due to further customization that has been carried out specifically for your webshop's theme.

  • The Intro title is the title displayed at the top of the widget.
  • The Intro description adds a paragraph of supporting text underneath the title.
  • Set the Background color of the entire widget. The choice that you make is translated to an actual color on the basis of your front-end's style sheet.
  • Set the Text color of intro title and intro description.
  • If Enable for horizontal navigation is checked, the navigation items are arranged horizontally instead of vertically.
  • If Show a scroll indicator is checked, a scroll hint icon is shown when content overflows in horizontal mode.
  • If Enable to show an arrow icon in the navigation items is checked, a right-pointing arrow icon is shown next to each navigation item in vertical mode.
  • Each branch represents one tabbed navigation item with an associated content panel. Click + ITEM for every branch you want to add. You can add as many branches as needed.
note

You can delete the most recently added branch by clicking - LAST ITEM. Any branch also has a button at the end of the list of fields with the word ITEM and an icon of a trash can: click this to delete the branch.

Branches​

The first branch is active by default. Navigation titles and corresponding content titles are derived from the same field. Note that all fields within a branch are optional, but leaving all fields empty may result in an incomplete layout.

  • The Background color of list item determines the background color of the navigation item when it is active or when the user hovers the mouse over it. The choice that you make is translated to an actual color on the basis of your front-end's style sheet.
  • The Text color of list item determines the text color of the navigation item when it is active or when the user hovers the mouse over it. The choice that you make is translated to an actual color on the basis of your front-end's style sheet.
  • The Navigation + content title is the title used for the navigation item as well as the corresponding content panel.
  • A Font Awesome Navigation icon may be added, that is shown in the navigation item. Use the Font Awesome names (e.g. map-marker, clock).
  • The Background color content determines the background color of the content panel when it is active or when the user hovers the mouse over it. The choice that you make is translated to an actual color on the basis of your front-end's style sheet.
  • The Text color of content determines the color of text in the content panel when it is active or when the user hovers the mouse over it. The choice that you make is translated to an actual color on the basis of your front-end's style sheet.
  • Under Paragraph, enter the text to describe the selected branch. You may use HTML. Add rel="noopener noreferrer" to external links for security.
  • You can configure up to two Buttons per branch.
    • The Button text is the text that is shown in the button.
    • A Font Awesome Button icon can be added, that is shown in front of the button text. Use the Font Awesome names (e.g. map-marker, clock). If Button icon right is checked, the icon is displayed to the right of the button text instead of in front of it.
    • Select the Color of the button. The choice that you make is translated to an actual color on the basis of your front-end's style sheet.
    • If you enter the target of a link, clicking the button will take the user there. This can be a webshop page or an external URL. If Open link in a new tab is checked, the link will open in a new browser tab.
  • You may select an Image to be shown alongside the content. If so, specify the Image Alt (that is, the description of the image for screen readers and search engines).