There are elements of each block which are editable in the same way.
WYSIWYG bar
This is an action bar for you to change the format, layout and style of text. The functions on the toolbar are standard text formatting functions similar to those used in MS Word
Starting from the left, the icons have different actions:
- Undo (and the dropdown arrow let's you undo/redo) - this undoes the last action, which can also be done by clicking ctrl + z (PC) or cmd + z (Mac).
- Copy to clipboard (and dropdown arrow lets you copy, cut and paste) - copies/pastes from your clipboard.
- Find and Replace - lets you look up words or phrases and replace them.
- Bold - makes selected text bold, or the text you're about to input bold.
- Italic - makes selected text italic, or the text you're about to input italic.
- Unordered list - makes bullet points.
- Ordered lists - makes bullets in numbered list.
- Decrease indent - decreases text indent so it's more to the left/right (depending on alignment). This is mainly used for ordered/unordered lists, but can be used with normal text.
- Increase indent -increases text indent so it's more to the left/right (depending on alignment), similar to tabbing text. This is mainly used for ordered/unordered lists, but can be used with normal text.
- Formats - lets you select text formats set up on the system. These can be set up via Brand and Skinning > Brand Elements > Typography in Settings. Note that if you currently don't have UI typography enabled, you'll need to contact support to add formats via the old way, or receive assistance with setting this up on QA and migrating to Production.
- Styles -lets you select webstyles set up on the system. Again, these can be set up or amended via Brand and Skinning > Brand Elements > Typography in Settings, unless this isn't currently configured, in which you'll need to contact support to amend the current styles.
- Text colour - applies colour selected previously. Dropdown arrow can be used to select other colours set up via Colours in Brand Elements.
- Text Background colour - applies colour selected previously to add a background colour to the selected text or text you're about to input. Again, the dropdown arrow can be used to select other colours set up via Colours in Brand Elements.
- Alignment - allows you to select alignment for text and images, and more options available in the dropdown.
- Image insert - allows you to insert images or videos into the page. See Image/Video insert page for more info on how to use this.
- Table - insert table with options to customise layout using the dropdown arrow. See Rich text block page for more information on how to set this up.
- Insert special characters - allows you to insert special characters which may not be available on the keyboard. Use the dropdown arrow to insert superscripts and subscripts.
- Links/Anchors - inserts links to text or images. See Working with Links and Anchors for more information on how to set this up.
- Accessibility - checks page content to make sure it meets accessibility compliance. See Accessibility page for more info.
- Source code - lets you view and amend the block in HTML. Can be helpful if you understand or work better in HTML/inline CSS.
General Options
In the Options tab in each block, you can set the background colour and the height of the block (except the rich text block) as well as any padding required. You also have a full width toggle which makes the page responsive to screen sizes.
Colours
Every block has a variety of colour options, which are set up via Colours in Brand Elements.
To apply the required colour, you can select the colour from the swatches, or if these aren't availble, you can input a HEX code or RGB reference. You can also set the transparency of the colour.
Transparent - set the A value to 0
Full colour - set the A value to 100 for solid colour
If you'd like your colour to be transparent - so the end user can see the background image for example then set the A value to >0 but <100 or use the slider.
