This article outlines how to add Headings, create buttons for links and Calls to Action and add grids (tables).
In your Peppered Dashboard it is possible to:
- Use predefined styles like Headings, buttons, and grid layouts for consistent website appearance
- Create stylish buttons in text fields using the Dashboard's text/HTML editor
- Utilize the "Source code" option to check and edit HTML code directly
- Create anchors for easy navigation within longer pages
- Use responsive grid layouts with 2 or 3 columns for organized content presentation
Content Style Options
A lot of content fields in the Dashboard feature a text/HTML editor.
Other fields in the Dashboard are what we call "plain text" fields, which do not have any styling options. Usually because styling is not useful, or would lead to issues in the text format.
The Dashboard text/HTML editor typically looks like this (in dark mode), and can be found in a lot of modules to add content:
While most of the features are easy enough to understand, others might need some extra clarification.
Menu items of the editor
- Edit: The most useful item to note here is the "Source code" option. It shows the html code that has been created in the background. Use it to check for any issues.
- Format: Here you will find most text styling options like Bold, Italic, etc
- Insert: Most notable here is the option to add anchors: Anchors are hidden elements on a page you can link to. Select a place in your text you want use as an anchor and choose Insert > Anchor. Give the anchor a name in the pop-up:
Any hyperlink you now create can link to that anchor, very useful for longer pages to quickly guide your visitor to the area you inserted the anchor. To add a Anchor link see the Adding Anchors to a Page section of the Pages module article.
Paragraph options
The paragraph drop-down contains all the predefined styles available for your website. By using these styles, your content will automatically us your brand fonts and styling.
Headings
Use Heading 2, Heading 3 and Heading 4 to add headings and subheadings to your texts. Heading 1 is not available as it is already used for the title of the Page, Story or Production.
Buttons
The Button style can be applied to any text.
First select the text you want to turn into a link, then click the ‘link’ 🔗 icon and enter the URL.
When the link is created, select the link text again and apply the Button style from the paragraph drop-down. This will make the link look like a button on the website.
Grid (2 column & 3 column)
The grid layout option creates a responsive grid with 2 or 3 columns. To set up a grid, first create some bullet points in your texts. Each bullet point will represent a column.
When you have added all your “columns”, highlight all the text and apply the Paragraph style "Grid" to create a responsive grid.
Related articles