Using a blank design or editable template gives you full control of the way a panel will look, so the Settings palette is essential for creating a good design.

The Settings palette will become active when you have selected a Story panel on your page. 

Top tip!
When you hover over a setting in your design, a tooltip will display telling you more about it.

The settings are similar to those in a Text panel, but you can control the headline and strapline as well as the body text.

The following options are available in the settings for a Story panel:

PANEL NAME

Specify a name for the panel, this will appear in the Layers palette.  

HEADLINE     

Include?
Ticked by default. Unticking this option will remove the headline from the text editor and hide its settings.  

Font
Select the typeface and size for the body text. Text size is specified in points. Uploaded fonts will appear in a list at the top of the drop-down menu under My Fonts. 

Style
Select the style of font for the selected typeface - e.g. bold  

Uppercase  
Transform the headline text to uppercase.  

Colour
Set text colour.  Use the colour picker or specify a precise colour using a six-digit hex code, such as #79ba93. This method is recommended for accurately replicating a brand colour. 

Opacity
Set opacity of text content. If set to 100, the text is fully opaque.  

Alignment
Set alignment of the text

  • Left
  • Centre
  • Right
  • Justified  

Headline additional options
To access additional options, click the icon as shown below:

Text spacing: Char
Set the amount of space between characters.  

Text spacing: Word
Set the amount of space between words.  

Text spacing: Line
Set the line height for the text.  

Text spacing: Para
Set the space between paragraphs of text.  

Text spacing: Pad
Set the amount of space below the headline,creating a gap between the headline and the strapline.  

STRAPLINE

The strapline settings are the same as the Headline with one exception:

Text spacing: Pad
Set the amount of space below the strapline, creating a gap between the strapline and body text.   

BODY

The body settings are the same as the Headline and include the following additional options. Click the icon as shown below

List spacing: Indent
Set the amount of space between a list in the body text and the edge of the panel.  

List spacing: Text
Set the space between the list bullet/number and the text in the list.  

List spacing: Before
Set the amount of space above the list.  

List spacing: After
Set the amount of space below the list.  

List spacing: Gap
Set the amount of space between list items.  

Bold font style
Specify the font style to use when text is styled as bold in the content editor.  

Body headings

Font
Select the typeface and size for the heading text. Text size is specified in points. Uploaded fonts will appear in a list at the top of the drop-down menu under My Fonts. 

Style
Select the style of font for the selected typeface - e.g. bold  

Colour
Set text colour. Use the colour picker. or specify a precise colour using a six-digit hex code, such as #79ba93. This method is recommended for accurately replicating a brand colour. 

Opacity
Set opacity of text content.If set to 100, the text is fully opaque.

Text spacing: Char
Set the amount of space between characters.  

Text spacing: Word
Set the amount of space between words.  

Text spacing: Before
Set the amount of space above the heading.  

Text spacing: After
Set the amount of space below the heading. 

PANEL 

Keyline Colour
Specify the colour for the border around the edge of the panel. Use the colour picker. or specify a precise colour using a six-digit hex code, such as #79ba93. This method is recommended for accurately replicating a brand colour.

Keyline Width
Specify the width of the border around the edge of the panel

  • 0 - no border
  • A single value (e.g. 5) - will set a border of uniform thickness around the panel
  • Specifying four comma-separated values (e.g 0,0, 5, 0) will set a value for each side of the panel. In order, these are top, right, bottom and left.  

Back Colour
Set the background colour of the panel. Use the colour picker or specify a precise colour using a six-digit hex code, such as #79ba93. This method is recommended for accurately replicating a brand colour.

Opacity
Set the opacity of the panel. If set to 100, the panel is fully opaque.  

Corner Radius
Setting values in this field will round the corners of the panel

  • 0 - no rounding
  • A single value (e.g 20) will round all four corners by the same amount
  • Specifying four comma-separated values (e.g.0,0,20,20) will set a value for each corner. In order, these are top left,t op right, bottom right and bottom left.  

Position X & Y
Specifies the position of the top left corner of the panel.  

Width & Height
Shows the current width and height of the panel. New values can be entered into the fields.  

Margins
Set the amount of space between the edge of the panel and its content.

By default, these values are all linked to be the same. Clicking the chain-link icon in the centre of the margin fields will break this link, allowing a different value to be entered for top,bottom, left and right.  

Flow Text
Flow text from one story panel to another. Full instructions can be found below.  

Using 'Flow Text Into'

Multiple story panels can be added to your design and set up so the text flows from one to the next, inheriting settings from the first story panel and creating a column effect.

  • Add two story panels
  • Select the first story panel followed by the Flow Text Into option in the Settings palette.
  • Click the next story panel
  • The panels will now be linked and any text entered into the first story will flow into the second story panel.
  • To flow text into a further panel select the second panel, followed by the Flow Text Into option and then click the third panel.

Example

Bad example
Although font colours and a back colour have been chosen, they are inconsistent, and no alignment has been selected, making the text poorly positioned in the panel.

Good example
Applying some simple settings (shown in the Settings palette above) creates a well formatted and edited panel.

Did this answer your question?