Skip to main content

: Story bar

  • Updated

How to find these settings...

  1. Online Store
  2. Customize (Theme Editor)
  3. Header
  4. Left column, access content blocks using black arrow next 'Header'

By default, menus with sub links will be simple dropdowns.  You can choose to customize the dropdown to use a mega menu, story bar or contact bar.  Each will have additional options and promotions.

 

Recommended reading

In this section...

 

Settings

Link title

Type the menu title you want to associate the block to.  NOTE: This must match the title capitalization and punctuation exactly:

bespoke-mega-menu-link-title-2.png

 

Custom link color

Choose a custom color for the link title

 

Image height

DESKTOP

The height is a percentage of the height of the screen when viewed on device with screen greater than 768px wide. 10% is the minimum, and it steps up by 1 to a maximum of 100%

 

Image

Desktop image

The desktop image will be displayed when the container is greater than 768px wide. NOTE: Background images can use Focal Points to specify the main focus of the image. Learn more about Focal Points

 

Insta filter

App like filters can be applied to your desktop image

 

Mobile image

The mobile image will be displayed when the container is less than 768px wide. NOTE: Background images can use Focal Points to specify the main focus of the image. Learn more about Focal Points

 

Insta filter

App like filters can be applied to your mobile image

 

Text

HEADING

Title of the section or feature

 

Heading font

Choose either the 'Primary' or 'Secondary' heading font set in Theme Settings > Typography

 

Heading outline

Choose from 1 of 7 options:

  • None: No outline will be applied
  • No background: An outline will be applied to the text, but the background will be transparent
    • Thin
    • Default
    • Thick
  • Background: An outline will be applied to the text, and the background color will be applied
    • Thin
    • Default
    • Thick

 

Heading size

Set the heading size with the slider. 18px is the minimum, and it steps up by 6 to a maximum of 240px

 

Bottom margin

Customize the bottom margin of the heading from the default to a dynamic value. -100px is the minimum, and it steps up by 5 to a maximum of 100px

 

Color

Choose a custom color for the heading

 

Responsive size

By default, text will resize based on the size of the screen.  Uncheck this option to keep the text a consistent, static size.  Useful when using negative margins on preceding sections

 

SUBHEADING

Sub title of the section or feature

 

Subheading font

Choose either the 'Primary' or 'Secondary' heading font set in Theme Settings > Typography

 

Subheading outline

Choose from 1 of 7 options:

  • None: No outline will be applied
  • No background: An outline will be applied to the text, but the background will be transparent
    • Thin
    • Default
    • Thick
  • Background: An outline will be applied to the text, and the background color will be applied
    • Thin
    • Default
    • Thick

 

Sub heading size

Set the heading size with the slider. 18px is the minimum, and it steps up by 6 to a maximum of 240px

 

Bottom margin

Customize the bottom margin of the subheading from the default to a dynamic value. -100px is the minimum, and it steps up by 5 to a maximum of 100px

 

Color

Choose a custom color for the subheading

 

Show text border

Add a border between the headings and the text

 

Text

A text block for basic formatting including bold, italic, formatted lists & linked text

 

Link 1

Add a link using the link picker or type your own

 

Link text 1

Add a text to describe what action to take for the link

 

Style 1

Choose 1 of 3 styles:

  • Text
  • Primary button
  • Secondary button

 

Link 2

Add a link using the link picker or type your own

 

Link text 2

Add a text to describe what action to take for the link

 

Style 2

Choose 1 of 3 styles:

  • Text
  • Primary button
  • Secondary button

 

Text/Heading alignment

Text can be aligned to the left, right or centered to the container

 

Text color

Choose a custom color for the text

 

Text color hover

Choose a custom color for the text hover

 

Button text color *

Choose a custom color for the button text hover

 

Line color

Choose a custom color for the lines and borders

 

Background color

Choose a custom color for the background

 

Background color gradient

Choose a custom gradient for the background

 

Background/Overlay color opacity *

When a background color has been selected, control the opacity with the slider. 0% is the minimum, and it steps up by 1 to a maximum of 100%

 

* NOTE: May not be available on all sections, blocks or templates