In this article we will show you the new text editing experience in Visual Builder and Wireframe Builder.


This article is for you if:

  • You have to the ShortPoint SPFx Visual Builder version 8.0.x.xx or later.
  • You use Office 365 (SharePoint Online) environment.

TABLE OF CONTENTS


General

Text Design Element - a builder block for the rich text content


All rich text contents inside the existing Design Elements are converted to the Text Design Elements after the migration.


In Visual Builder and Wireframe Builder the Text Design Element is now being used as a building block, and it replaced the rich text content.


Note: To know more about migration to Visual Builder, check our solution article Migrating into ShortPoint Visual Builder.

Using inline Design Elements inside the text content


Inline Design Elements are not fully supported: you cannot use them in between two text content parts. 


Very soon they will be added as editing options that you can choose directly from the text editor. Check this solution article for a current workaround: Known Issue: Inline Design Elements are Not Fully Supported in Wireframe Builder.


Non-licensed users: editing information in content-holder Design Elements


The text content in content-holder Design Elements can be changed after the license expiration. You can freely edit the Text Design Element: change the font, background and text colors, update the linked text etc.


The content-holder Design Elements are:

  • Column, 
  • Accordions,
  • Alert,
  • Animate, 
  • Background, 
  • Frame,
  • Info,
  • List,
  • Panel,
  • Tabs,
  • Templates,
  • TOC Content,
  • Toggles,
  • Well.


For example, if you have a Panel Design Element with the text content inside:


1. You will not be able to change the Panel settings (title, subtitle, style, icon etc.).

2. You will be able to change the Panel text content - Text Design Element(s) inside it.


Visual Builder mode
Wireframe Builder mode




Adding text content to content-holder Design Elements


Visual Builder


When you add the content-holder Design Element inside the column, a Text Design Element with some dummy text content will be added by default:




Wireframe Builder


Click inside the content area and add the text. A Text Design Element will be added by default:



Editing text content


Visual Builder


In Visual Builder you can edit the text content in an EasyPass Active mode and in an inline edit mode.


EasyPass Active mode


Activate the EasyPass Active mode for the Text Design Element and open its settings by clicking the cog wheel icon.



Customize the text content using the Text editing options.


Note: Check our solution article to know more about Visual Builder EasyPass feature.

Inline edit mode


Double click inside the Text Design Element to open the Inline Froala Editor and start editing the text on the fly:



You will not see the display action and borders for the Text Design Element after entering inline edit mode. 

Customize the text content using the Text editing options.


To exit the inline edit mode and hide the Froala editor, click outside the borders of the Text element:




Wireframe Builder


In Wireframe Builder you will be able to edit the text content as separate Text Design Elements or enter an inline edit mode in the Content tab for the content-holder Design Elements.


Edit text content in Text Design Element settings


Hover over the existing Text Design Element and click the cog wheel icon to open the settings:



Customize the text content using the Text editing options.


Inline edit mode for content-holder Design Elements


You can open the settings of the content-holder Design Element and edit the text content from the Content tab directly, using the inline edit mode.


Hover over the existing content-holder Design Element and click the cog wheel icon to open the settings:



Switch to the Content tab:



Double click inside the content area. The inline Froala editor will appear at the top:



Customize the text content using the Text editing options.


Text editing options


Design (Visual Builder) tab / Settings tab (Wireframe Builder) 


Visual BuilderWireframe Builder


Use the Design tab in Visual Builder or Settings tab in Wireframe Builder to set:

  • Style. 
    • Text Color. Apply text color for the whole content.
      Note: This color could be overwritten using editor colors in the Content tab.
    • Text Alignment. Align the whole text content to left, right, center or justify the alignment.

  • Shadows. Use this feature to add or change the shadow of your text.
    • Shadow Preset. Choose the shadows style from the drop-down of this option.
    • Vertical Distance. Use the slider button to adjust the vertical distance between the text and its shadow.
    • Horizontal Distance. Use the slider button to adjust the horizontal distance between the text and its shadow.
    • Blur. If you want to make your text blur, this option is for you. Use the slider button to set the desired level of blur.
    • Shadow Color. You may change the shadow color with this option. Simply choose it from the drop-down menu of this option or click the color icon to open the color picker to have a wider range of color options.

  • Line Settings.
    • Line Height. Set the spacing between the text lines. Simply use the slider button to adjust the lines' height.
    • Letter Spacing. Set the spacing between the letters. Simply use the slider button to adjust the letter spacing.

  • Link Styles.
    • Link Color. Set the color for all your unvisited links.
    • Link Hover Color. If you would like to apply some different color to the link when you hover over it, simply choose it from the drop-down. 
    • Link Visited Color. If you would like to apply some different color to the visited link, simply choose it from the drop-down.

      Note: the default colors that are set for the links are as following: link color - blue, link hover color - blue underlined, link visited color - light violet. 

Content tab


Use the Content tab to open the text editor and modify separate text parts.


Visual Builder
Wireframe Builder

 

Basic formatting options


You can make your text bold (1), italic (2), underlined (3) and strike-through (4), change its size (5), text alignment (6), make the text an ordered (7) or unordered (8) list, add hyperlinks (9) or clear the formatting (10).


Wireframe Builder:


Visual Builder:


Additional formatting options

There are additional formatting options: color (1) of the text (1a) and its background (1b), font family (2), paragraph format (3), capitalized text (4) and the code view (5).


Wireframe Builder:


Visual Builder:


Color

Change the color of the text (1a) or the color of text background (1b). You can go with:


  • ShortPoint Colors: presents the colors set up in your Theme Builder.

           Note: text/background color will be synced with the one set in TB and updated along with it.

  • Other Colors: suggests other popular colors.

  • HEX color: you can use a HEX color code here to find the exact color you need. 

Font Family

Change the font of the text with this feature.


If you have any custom fonts, previously added to the Theme Builder (check these articles on how to add custom fonts from Google FontsFonts.com, Adobe Typekit, or manually), they will be displayed in the list of the fonts. Simply choose it from the drop down menu.


Paragraph format

Change the format of your text paragraphs using this feature. 

If you set some parameters (color, line spacing etc.) for the Headings in your Theme Builder (Fonts and Typography > Headings), and then apply it to the paragraph of your text, it will be in the same format. Same as with colors, changing the Headings settings in the Theme Builder, will automatically adjust your text paragraphs settings in the Text Design Element.


Note: you will not see the right colors applied for your headings in the Preview mode (this is a known issue to be fixed). However, colors will be changed after you save the page. 

Capitalized text

Use the All Caps or Small Caps icons to make all text capitalized or small-capitalized accordingly.


Code view

Use this option to update the HTML code of your Text Design Element. You will be using this option if you would like to design your text with the custom-built snippets, that you can apply in the Custom CSS of the Text Design Element.  


Note: Check how to use the custom-built snippets: Creative Custom CSS snippets for Text Design Element.

Spacing tab


Visual Builder
Wireframe Builder


Use the Spacing tab to change the inner spacing (padding) and outer spacing (margin) for the text content of your element on different devices.

  • Custom Padding. Set the inner spacing of the text content.
    By default, the padding values are set in px (pixels), but you may as well use the percentage, %. Simply type the desired spacing for the top, bottom, left and right sides.

  • Custom Margin. Set the outer spacing of the text content.
    By default, the margin values are set in px (pixels), but you may as well use the percentage, %. Simply type the desired spacing for the top, bottom, left and right sides.
Note: To know more about setting the spacing, check our solution article: Managing Paddings and Margins for ShortPoint Elements.

Visibility tab


Control who you want the Text Design Element to be visible to using the Visibility tab as well as select the devices on which it will be displayed.


Visibility settings are coming soon to Visual Builder. Please, set them using the Wireframe Builder 


Visual Builder
Wireframe Builder


Note: To know more about setting the visibility, check our solution article: Managing Visibility of ShortPoint Design Elements.

Custom CSS tab


Use your own custom CSS code if you need more customization for your text or add custom-built snippets.


Visual Builder
Wireframe Builder


Note: Check more about the Custom CSS tab here: Custom CSS Tab for ShortPoint Design Elements.

Related articles: