Customize with text styles in a Content element

Text styles serve an important role in communication, especially by adding clarity, structure, and emphasis so that site visitors can stay engaged with your content. Structured formatting improves readability and makes information easier to digest. 

This article will show you how to customize your text in a Content element with text styles found in the styles dropdown.

In this Article

• Where text styles can be applied
• Step 1: Add a Content element
• Step 2: Add your text
• Step 3: Add styling to your page

Where text styles can be applied

Text styles can be added in many places throughout Composer. Here are a few examples of places where you might want to be creative with text styles: 

• Resource file descriptions
• Post body text
• Form content fields
• Page Pops
• Calendar event descriptions (Calendar Manager or New Calendars module)

Step 1: Add a Content element

After you add a Content element to your page, selecting Click here to add content will bring up the Finalsite text editor, allowing you to type or paste in text, add images, and more.

Step 2: Add your text

Before you will style your text, it's important to have the text inserted into the text editor content area, whether you type the content or paste it from another word processing software. Be sure to clear the formatting so that you're not bringing in extra, unwanted code.

• Start typing your content into the white space.
• Paste text in the white space from another source but be sure to clear formatting using these key shortcuts:
  
  • Ctrl + Shift + V = PC computer
  • Cmd + Shift + V = Apple computer

We'll use Lorem Ipsum for you to see what it looks like when text whose formatting has been stripped out will look inside of a Content element.

To use an alternate text style, first set the default style as described above and the re-highlight that treatment, use the styles dropdown to select the other option for that style, sometimes labeled alternative, or "2".

Step 3: Apply styling to your page

Here are all of the options in the Styles dropdown and how you can add that styling to a Composer page.

	Citation and Blockquote Citation: Use this styling to give credit to sources, build credibility, and help readers verify information. Highlight full quotation and citation, then use the quotation mark icon in the formatting menu to create a blockquote. Re-highlight the citation text and use the Styles dropdown to select Citation style. " Blockquote:  Highlight external content, making it clear that the words come from someone else and not the author. These are great for testimonials and reviews. See what your built in citations and blockquotes will look like by checking out your Style Guide!
	Buttons in Styles dropdown Important Notes The buttons appearing in the Styles dropdown are not used to create actual buttons. Buttons are inserted using the Links button in your editing toolbar. The Styles dropdown serves as a reference for available button colors and class names.  For proper button creation, refer to this guide.
	Lead-in and callout-content  lead-in styling: This type of formatting can be used to emphasize the beginning of a section, paragraph, or sentence to improve readability and engagement, drawing attention to key points. callout-content: This styling makes a section of your text stand out with a line on the side and more spaced out text.
	Table styling Adding style to a table isn't done in the Styles dropdown but there are two other ways you can do this: Option #1: Copy and paste a table from style guide Navigate to your Production Branch > Style Guide.  Scan to see if you have a table included. If you do, click Copy element in top right corner element settings. Click Add element button and paste the table onto the page where you'd like it to display. Click Edit content and change the content in the table to meet your needs. Delete any rows or columns. Use the Table Properties as needed.  Option #2: Add a table through a Content element Click the table icon to Add a table to a Content element. In the Table Properties window that appears, find the Class dropdown.  From the Class dropdown, select one of your table styling options to apply to your table. Click OK.  Pro tip Always check tables in mobile preview. More than 2-3 columns may cause formatting issues including those requiring a horizontal scroll.