Adding text to pages of your site is one of the most common parts of building a website. It’s also really easy with Articulation using the Rich Text component. To use the component, click and drag it onto your page. You’ll then see the text-editing toolbar show as well as some default text in the element.
Text styling and content options
With the options on the toolbar you can do the following and more:
- Header tags - Use the dropdown to change from Normal text to one of three Heading options. Tip: If you are looking to add an H1 tag to a page for SEO purposes, choose the Heading 1 option.
- Text styling
- Bold
- Italic
- Underline
- Strikethrough
- Text color
- Text background color
- Text size
- Alignment
- Lists - You can make bulleted lists and numbered lists
- Link - Select text and choose what you want to link to.
- Image - Use this to upload an image to the text component. Once added you can click on the image and choose how you want text to wrap around the image.
- Remove styling - Select text and click the Tx button to remove any styling. This is helpful if you paste text in and run into issues from hidden styling.
Component settings
You can manage options for the component as a whole by clicking on the gear icon on the text editing toolbar. In the panel on the left you’ll then see these options:
- Text color - This controls the overall color of text in the entire component. You can override this for specific text using the text color option on the toolbar. You can set a different text color on hover for the component by clicking Hover at the top of the panel and using the text color option there.
- Font - This option allows you to specify a different font for text within the component.
- Opacity - With this option you can set an opacity level for the component. If you click on the Hover option at the top of the panel, you can set a different opacity level when hovering over the component.
- Margin - Margin is the space around the component, and can be set separately for all four sides.
- Padding - Padding is space within the component, and can also be set separately for all four sides.