Index

Applying a style to your text in Flexitive is done from the Text Settings panel, on the left-hand side of the editor. 


At the top of the Text Settings panel, there is the option to either change either the Text Box, or to make change Inline. If you choose the Text Box option, each style change will affect the entire text box. 


Many of our styles give the option of applying the style to only a portion of the text box, which can be done in the Inline section of the text settings panel.



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, click on the text box and open the Text Settings panel. On the Text Settings panel select the Inline tab. In the text box, highlight the portion of text where you’d like to apply your different styling option, and then apply the style in the Text Settings panel.


Selecting a Font


By default, any text added to Flexitive will use Open Sans font. To change the font of your text to a different font, select the text box on the canvas and open the Text Settings panel on the left-hand side of the editor.


Under the Text Settings panel, you'll see the Font options. To change the font for your design, open the Font Selection Dropdown and choose a font to apply to the text box.



You can change the Font to any font in Flexitive, and if the font you need isn't available, you can always Upload Your Own. If you would like to use a specific font in your design, you can search for it, using the search option in the fonts dropdown.


 
Changing the font for the text box in the Text Settings panel will apply the font change to the entire text box. To change the font for a specific portion of text, select the Inline Tab of the Text Settings panel, highlight the portion of text you wish to have different, and apply the font change.

Bold and Italic Emphasis (Font Styling)


After you have selected a font, you can choose a Font Styling for your text box. You can use Font Styling to italicize the font or make the font weight light or heavy. I.e Making the font weight heavy would make it bold.

To style your text, select your text box on the canvas and open the Text Settings panel. Now, open the Font Styling Dropdown and select a style for your font. This can be found directly under the Font Selection Dropdown.



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


Applying a font style to the text box will affect the entire text box. To apply a font styling to a specific portion of the text box, click on the text box and open the Inline Tab of the Text Settings panel. Then, highlight the portion of text you want to be styled differently, and apply the font style.

 

Clear Formatting


The Clear Formatting button allows you to quickly restore the default settings of a text box. To find the 'Clear Formatting' button, select the text box you would like to clear the formatting of on the canvas and open the Text Settings panel. Scroll down in the Text Settings panel to find the 'Clear Formatting' button. 



Clicking the Clear Formatting button will automatically make the following changes to the whole text box:

  • The font will revert back to the default 'Open Sans' font, with 'Normal 400' styling and weight
  • The colour of the text will revert back to the default grey colour, and any highlights in the text will be removed
  • The alignment of the text will be shifted to right aligned
  • Any Underlines, Strike-throughs or URLs in the text will be removed


Clicking the Clear Formatting button does not change:

  • The font size, line height or text tracking of your text
  • The copy in the text box
  • The Scrolling and Opacity settings for the text box

Font Colour


Changing the colour of your text is done using the Flexitive Colour Picker. To change the colour of your text, select the text box on the canvas, and open the Text Settings panel on the left-hand side of the editor. Scroll down to the Text Colours section and click the Colour box.



Clicking the Colour box will open the Flexitive Colour Picker. In the colour picker, you can select the colour in 3 ways: 


  • The Colour Bar on the right-hand side of the colour picker
  • Input a specific hex code for your colour
  • Select a colour that you have recently used.

To change the opacity of the text, use the Opacity Slider.



When adding a highlight to your text, select the Highlight Colour box. By default, the Highlight Colour of text is set to be transparent.


To change the background colour of the text box, select the Background Colour box. The Background Colour is set to be transparent by default. This style will affect the entire text box. 



You can choose to apply a font colour and/or highlight to an entire text box or to a specific portion of the text box.

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.


To Add a Drop Shadow to Text: 

  1. Select the text element from the canvas or 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



Drop Shadows are customizable. Learn more about customizing your drop shadow: Customize your Drop Shadow


Drop Shadows can also be applied to images, GIFs, and Animated SVGs. You can find a guide here: Adding a Drop Shadow to Images

Text Alignment


To adjust the alignment of your text, select your text box on the canvas and open the Text Settings panel on the left-hand side of the editor. Scroll down in the Text Settings panel 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 portion of text, click on the text box and open the Inline Tab of the Text Settings panel, select the portion of text you wish to change the alignment of, and apply the change.


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. 


Text Direction


By default, text in Flexitive is set to go in a 'Left-to-Right' direction. However, if you are using a language that requires your text to be read 'Right-to-Left', you may want to change this text direction option.


To change the direction of your text, open the Text Settings panel and scroll down to the Text Direction settings. Here, you can either set your text direction as 'Left-to-Right', as as 'Right-to-Left'.

   


Changing text direction will apply to the entirety of your 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 is the size of the text in your text box. This is measured in Pixels and can be set from any value from 1 to 100 pixels.

 

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 spacing is called Line Height in Flexitive. The Line Height specifies the amount of space above and below the text and the value can be set to 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


When setting font size in Flexitive, you also have the option to set the Paragraph styling for the text. This allows you to have 'Heading' text in your text boxes.



By changing the Paragraph Styling for text, the font size will grow depending on which 'Header' option you chose. After choosing a paragraph styling other than 'Normal', you will be able to control how large the text is by changing the multiplier, shown to the right of the 'Paragraph Styling' option.


Lock Font Size


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


Using Lock Font Size will affect the entire text box.


Superscripts and Subscripts


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



Clicking the Superscript option will allow you to create text that sits above the line of text in your design.



Clicking the Subscript option will allow you to create text that sits below the line of text in your design.



You can also change the size of the Superscript and Subscript text in your design by adjusting the 'Sub/Superscript Size' input.


Scrolling Text


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


Text Wrap

 

As you resize a text box in your design, the text in the design will wrap depending on the width of the text box. In the Text Settings panel, you can control how your text will wrap.


To find the 'Text Wrap' option, select your text and open the Text Settings Panel. In the 'Text Box' tab, scroll down to find the 'Text Wrap' options. By default, text in Flexitive is set to wrap by word, and you can also set it to wrap by letter, or not at all.



Wrap Words


By default, text in your designs will be set to 'Wrap Words'.



When the Text Wrap option is set to Wrap Words, text will wrap full words when the bounding box becomes too small to contain the text on a single line. However, if the length of a word is longer than the width of the text box, the text in that word will wrap by letter.



Wrap Letters


In the Text Wrap options, you can choose to have your text wrap by letter.




When the Text Wrap option is set to Wrap Letters, text will wrap individual letters when the bounding box becomes too small to contain the text on a single line.



Don't Wrap


In the Text Wrap option, you can choose to not have your text wrap by selecting 'Don't Wrap'.



By setting the Text Wrap options to 'Don't Wrap', the text in your text box will ignore the width of the text box, and always be placed on a single line.

Auto-Resize Text Box


When working with a Flexitive text box, you can set text boxes to automatically resize based on the length of the text in your design by turning the 'Auto-Resize Text Box' toggle in the 'Text Settings Panel' to On.



Text set to auto-resize will automatically expand or collapse to match the width and height of the text in the text box. This is perfect when creating automated variations, when working with templates, or when creating buttons in Flexitive.

 

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.

Inline Only Options - List & Insert


With Flexitive, you can also style your text as a bulleted or numbered list, insert an image or a hyperlink.


You can read more about inserting images and hyperlinks here: Adding an Image or Hyperlink.