Index

Styling your text in Flexitive is done in the Text Settings panel on the left-hand side of the editor. 

Use the Text Box tab to apply styles to the entire text box, or the Inline tab to apply styles to a selected portion of text.


Adding More Than One Style to a Text Box

With Flexitive, it’s possible to have more than one styling option apply to a single text box.

To include more than one styling option in a single text box:

  • Select the text box on the canvas

  • Open the Text Settings panel

  • Switch to the Inline tab at the top of the panel 

  • Highlight the portion of text you want to style differently

  • Apply the style using the options in the panel.


Selecting a Font

Flexitive supports over 900 Google fonts. By default, any text added to Flexitive will use the Open Sans font. 

To change the font:

  • Select the text box on the canvas

  • Open the Text Settings panel

  • Under the Font section, open the Font Selection Dropdown 

  • Choose any font to apply to the text box.


Use the Search option in the Font dropdown to search for a particular font.


If a font isn’t available, you can Upload a Custom Font. 

Bold and Italic Emphasis (Font Styling)

After selecting a font, you can apply Font Styling to adjust the weight or style of your text, including italicizing text and making the font weight light or heavy (bold).


To apply font styling:

  1. Select the text box on the canvas

  2. Open the Text Settings panel

  3. Open the Font Styling dropdown under the Font Selection Dropdown and select a style for your font.


The number of available styles will vary from font to font. If the styling you need isn't available by default, you can Upload a Custom Font with that style.

Lock Font Size

The Lock Font Size toggle allows you to set the font size to be the same across all sizes. You can find more information here: What is the Lock Font Size toggle?

Using Lock Font Size will affect the entire text box.


Font Size, Line Height, and Text Tracking

To adjust the Font Size, Line Height, and Text Tracking for text in your design, select your text box and open the Text Settings panel. 


  • Font Size controls the size of the text in your text box and is measured in pixels. Use the Font Size slider to increase or decrease the font size, or enter a specific value in the input field.

    • Font Size can be different for every size of the design, but if you want to set your font size to be the same across all of your design sizes, you can use the Lock Font Size toggle.

  • Line Height (sometimes called line spacing) specifies the amount of space above and below the text and can be set from 0.01 to 2 EM.

  • Text Tracking allows you to adjust the spacing between letters in your text. The default value is 0 EM, and the value for Text Tracking can be set from -1 to 1 EM.

Changes to any of these settings only affect the size that you are working in and will affect the entirety of the text box when changed.

Paragraph Styling

Use Paragraph Styling to quickly apply heading or body text formatting to your text box.


To apply Paragraph Styling:

  1. Select the text box on the canvas

  2. Open the Text Settings panel

  3. Under Paragraph Styling, choose from Normal or a heading option like Heading 1, Heading 2, etc.

When a heading style is applied, the font size will automatically scale based on the header type. 

You can adjust this further by editing the multiplier shown to the right of the Paragraph Styling option. Adjusting this multiplier changes the size of all text using that heading style universally across all text boxes and all design sizes.


Font & Highlight Colors

You can change the color of the text and highlight of a text box using the Flexitive Color Picker.

To change the color of your text or text highlight:

  1. Select the text box on the canvas

  2. Open the Text Settings panel

  3. Scroll down to the Text Colors section

    1.  Click the Color box to change the font color 

    2.  Click the Highlight Color box to change the color of the text highlight.


Clicking the Color or Highlight Color box will open the Flexitive Color Picker. By default, the highlight color of text is set to be transparent.

In the Color Picker, you can: 

  1. Use the color bar on the right-hand side

  2. Enter a specific hex code

  3. Select a color that you have recently used

  4. Use the Opacity Slider at the bottom to change the opacity.

Background and Border Colors

Under the Background section, you can customize the background and border of a text box to highlight important text, improve readability, or create call-to-action buttons.

  • Background Color

    • Choose a background color for your text box. By default, the background is transparent.

  • Border Color

    • Choose a color for the border surrounding your text box.

  • Border Width

    • Adjust the thickness of the border; the default is 0 px (no border).

  • Border Radius

    • Round the corners of the text box. A 0 px border radius gives square corners, while increasing the radius rounds the corners.


Text Alignment

To adjust the alignment of your text:

  1. Select your text box on the canvas

  2. Open the Text Settings panel on the left-hand side of the editor

  3. Scroll down to the Alignment options.


You can adjust both the horizontal and vertical text alignment options for your text element.

The horizontal alignment options are:

  • Right Aligned 

  • Center Aligned 

  • Left Aligned

  • Justified 

The vertical alignment options are:

  • Top

  • Middle

  • Bottom

To apply Text Alignment to a specific paragraph of text:

  1. Click on the text box

  2. Open the Inline tab of the Text Settings panel

  3. Select the portion of text you wish to change the alignment of and apply the change. This will affect the entire paragraph of text, meaning everything before and after a hard line break.

Underline and Strikethrough

To add an Underline or Strikethrough to your text in Flexitive:

  1. Select the text box on the canvas

  2. Open the Text Settings panel

  3. Navigate to the Styles section

  4. Click the Underline or Strikethrough button to turn the style on or off. 

Underline and strikethrough can be applied to the entire text box or to a selected portion of text using the Inline tab.

Superscripts and Subscripts

To add Superscripts or Subscripts to your text in Flexitive, scroll down to the Styles section in the Text Settings panel.

  • Superscript text will sit above the line of text in your design. 

  • Subscript text will sit below the line of text in your design.


You can change the size and position of the Superscript and Subscript text in your design:


  • Sub/Superscript Size - Use the input field to increase or decrease the size of your Sub/Superscript text.

    • Min Size: 0.01x

    • Max Size: 1x

  • Sub/Superscript Position - Use the input fields to control the line height of the Sub/Superscripts.

  • Min Position: 0.01 EM

  • Max Position: 2 EM.

Text Wrap

As you resize a text box in your design, the text will wrap depending on the width of the text box. You can control text wrapping in the Text Settings panel, under the Text Wrap section. 

By default, text in Flexitive is set to wrap by word.

  • Wrap Words

    • Text wraps full words when the bounding box becomes too small to contain on a single line. By default, text in your designs will be set to Wrap Words.

  • Wrap Letters

    • Text wraps individual letters when the bounding box becomes too small for a single line.

  • Don't Wrap

    • Text will ignore the width of the text box and remain on a single line.

Auto-Resize Text Box

Use the Auto-Resize Text Box option to have a text box automatically adjust its width or height based on the text content. This is particularly useful when creating CTA buttons, for text elements in templates, and dynamic text boxes populated by a data feed or data source. 

To enable Auto-Resize Text Box:

  1. Select the text box on the canvas

  2. Open the Text Settings panel

  3. Turn Auto-Resize Text Box ON.

 

For more information on how to use the Auto-Resize Text Box feature in Flexitive, check out our support article on the Auto-Resizing Text Box.

Text Direction

By default, text in Flexitive is set to read in a Left-to-Right direction. If you use a language that reads Right-to-Left, you can change the text direction.

To change the direction of your text:

  1. Open the Text Settings panel

  2. Scroll down to the Text Direction settings 

  3. Here, you can either set your text direction as Left-to-Right or as Right-to-Left.   



Changing text direction affects all sizes.

Clear Formatting

Use the Clear Formatting button to restore a text box to its default settings: Open Sans font and grey text color.

Drop Shadow

Use the drop shadow effect to add depth and dimension to your text. Drop shadows can help to improve the legibility of text elements. Turning on the Drop Shadow for a text box will affect the entire text box.

To Add a Drop Shadow to Text: 

  1. Select the text element from the canvas or the Layers panel 

  2. Open the Text Settings panel from the left-hand side 

  3. Scroll to the Drop Shadow option 

  4. Toggle Drop Shadow ON.


You can customize Drop Shadows. Learn more about customizing your drop shadow: Customize your Drop Shadow.

Rotation

You can easily rotate your text element to any degree, both clockwise and anti-clockwise, on the canvas.

Learn how to add Rotation to Text.

Scrolling Text

When working with text boxes containing large blocks of text, you may want to allow the text to scroll. Learn more about Scrolling Text here: Scrolling Text.

Inline Only Options - List & Insert

Using the Inline tab of the Text Settings panel, you can apply additional styling options to selected text within a text box. 


Numbered Lists

  • Format your text into numbered lists to create step-by-step instructions or ordered sequences.

  • Bulleted Lists

    • Format your text into bulleted lists to organize content or highlight key points.

  • Table

    • Insert a table directly into your text box. You can customize the table by setting the number of rows and columns.

  • Insert Image

    • Place an image directly within your text box to support your content or enhance design elements.

  • Hyperlink

    • Add clickable hyperlinks to direct viewers to external websites, landing pages, or other resources.

    • Click the Remove Hyperlink button to remove a link from your text.

Learn more about inserting images and hyperlinks here: Adding an Image or Hyperlink.