In this article we are presenting the ShortPoint Text Design Element, which is available starting from ShortPoint version 6.9.35.x. With this element, you can add the text information to your page and make it eye-catching, thanks to the richer text formatting bar and some awesome snippets we created for you. Trust us, you would never think that the text could be this awesome :)


Let's have a closer look at the Text Design Element.

TABLE OF CONTENTS

Prerequisite:

  • You have a ShortPoint version 6.9.35.x or higher. Click here to check and download the latest available version of ShortPoint.

Adding ShortPoint Text to the page


The Text Design Element can be easily added to your pages using ShortPoint Page Builder.

  • Modern page:

You can start with adding a ShortPoint web part to your page by clicking the plus sign and selecting ShortPoint from the list of the web parts. 



Then, click the blue Insert button to open the ShortPoint Page Builder.



Note: If adding the ShortPoint web part for the first time, Info Design Element will be added automatically. Click the cross icon to remove it. Then, click the blue Insert button to open the Page Builder.

  • Classic page:

1. Choose the Insert tab in the Ribbon.

2. Click the blue Insert button.


Then, select the Text Design Element from your ShortPoint Page Builder menu:  



Use the Content tab to add the text content you would like to be displayed on your page. 



Click Insert after you have added the text or continue formatting it.

Features


1. Content tab 

The text formatting bar in the Text Design Element has more editing options to make your text as awesome as you want it.

You can make your text bold (1), italic (2), underlined (3) and strikethrough (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).



There are other new or improved formatting options, we would like to tell you more about: text and background color (1), font family (2), paragraph format (3), capitalized text (4) and the code view (5).


1.1. Color


Changes the color of the text or the color of text background. 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. 



1.2. 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 Fonts, Fonts.com, Adobe Typekit, or manually), they will be displayed in the list of the fonts. Simply choose it from the drop down menu.


1.3. Paragraph format


Change the format of your text paragraphs using this feature. 

If you have 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. 



1.4. Capitalized Text


Use the All Caps or Small Caps icons (shown in the animation) to make all text capitalized or small-capitalized accordingly.



1.5. Code view


Use this option to update the HTML code of your Text Design Element. You are definitely going to use this feature if you would like to design your text with the custom-built snippets we have created for you. Scroll down to the Custom CSS paragraph of this article for more information.

2. Settings tab


Here you can find some general settings you can apply for your Text Design Element. 



2.1. Style


With the Style option you can customize the color of your text. Colors are picked up from the default color settings of your Site Collection. To change the text color, select it from the drop-down of the Text Color option, as shown below:


Note: The Text Color will be overwritten using editor colors from the Content tab.


2.2. Shadows


Use this feature to add or change the shadow of your text.



At the top part of the Shadows section there is a Text Shadow Preview, which shows all your adjustments in a real time. It helps you to set the shadow you find perfect for your text. There are following options to customize Shadows: 

  • 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.

You can play around with these options and customize the Shadows style as much as you like. 


For example, we have set the vertical and horizontal distances, added some level of blur and chosen the color of the shadow from the color picker. Here is how our result looks like: 



2.3. Line Settings


This feature allows you to customize your text line settings.



There are following options to customize Line Settings:

  • Line Height. This option allows you to change the spacing between the lines of your text. Simply use the slider button to adjust the lines' height.
  • Letter Spacing. This option allows you to change the spacing between the letters of your text. Simply use the slider button to adjust the letter spacing.

You can play around with these options and customize the Line Settings as much as you like. 


For example, we have set the line height of 1.5 to and letter spacing of 2. This is how our result looks like:



Do you have any links in your text element? This feature is for you then. It allows you to change the links' style.



There are following options to customize Link Styles:

  • Link Color. This color will be used as a 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.

You can play around with these options and customize the Link Styles as much as you like. 


For example, we have set the link color as success, link hover color as success-dark and link visited color as danger-light. This is how our result looks like:


3. Spacing


Need to change the spacing? It is also possible. Please, switch to the Spacing tab.

Using the options in this tab, you will be able to change the inner spacing (padding) and outer spacing (margin) for the text content of your element on different devices.



3.1. Custom Padding


This option allows you to set the padding - 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. 

For example, this is how it will look like if you put 20% padding-right value:


Even though in most cases applying different padding on small screens are not necessary, you can still modify it as you wish. If you enable Apply different padding for Tablet Devices and/or Apply different padding for Mobile Devices options, the same fields - Top, Right, Bottom and Left - will open. Type the padding value to the respective fields: 



Note: The same padding settings will apply to the element on all the devices if you decide not to customize padding settings for tablets and cellphones.


3.2. Custom Margin


This option allows you to set the margin - 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. 


For example, this is how it will look like if you put 20% margin-top value:


Even though in most cases applying different margins on small screens are not necessary, you can still modify it as you wish. If you enable Apply different margin for tablet Devices and/or Apply different margin for Mobile Devices options, the same fields - Top, Right, Bottom and Left - will open. Type the margin value to the respective fields: 


4. Custom CSS


Need more customization? Have your own CSS code you would like to use for your text? Or can't wait to try our awesome custom-built text manipulation snippets? If you answered "Yes" to any of the previous questions, this paragraph is for you.


Switch to the Custom CSS tab. 



If you have your own custom CSS code that you find perfect for your text, simply add it to the Custom CSS field. We have basic and advanced Custom CSS tutorials in case you need some help.


And we are happy to introduce you the snippets. Say hello to them! They can make your text 3D-styled, multicolor it, add a rainbow shadow or even apply some space magic to it. Check this article to select the snippet you would like to use: Creative Custom CSS snippets for Text Design Element.

Chose it? Great! Now, paste the CSS code from the article to the Custom CSS field:



Go back to the Content tab and select the Code View option from the text formatting bar. Copy the HTML code from the article and paste it here. Don't forget to replace the text with your own :)



This is the end result we get, using the 3D Text Effect snippet:

Example


And here is the example of the page after the Text Design Element was customized:



Related articles: