Using a blank design or fully 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 text panel on your page.
When you hover over a setting in your design, a tooltip will display telling you more about it.
The following options are available in the settings for a Text panel:
Specify a name for the panel, this will appear in the Layers palette.
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.
Select the style of font for the selected typeface - e.g. bold
Transform text to uppercase.
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.
Set opacity of text content.If set to 100, the text is fully opaque.
Set how the text should be sized:
Fixed – use the size specified in the font field above·
Fit to panel – for paragraph text, the text will automatically resize to fill the panel·
Fit to width – Text will scale to fit the entire width of the panel (unless height is too small)
Select a pre-set rotation for the text:·
90 degrees anti-clockwise
90 degrees clockwise
Set alignment of the text
Body 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.
Bold font style
Specify the font style to use when text is styled as bold in the content editor.
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.
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.
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.
Set the opacity of the panel.If set to 100, the panel is fully opaque.
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,top 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.
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.
Although a font and back colour have been chosen, no alignment has been selected, making the text poorly positioned in the panel.
Applying some simple settings (as seen in the Settings palette above) creates a well formatted and edited panel.
Other articles in the ‘Panels Palette’ series
Want to see more?