How can we help you today?

How to Customize the Animate Design Element

This article will walk you through customizing the Animate Design Element and its basic features.


Animate Design Element


TABLE OF CONTENTS


Prerequisite


Interactive Tutorial

Click Get Started to learn how to customize the Animate Design Element:



NOTECheck out Animate Features to learn more about the OOTB options you can customize.

Step-by-step Tutorial

Follow the steps below for a detailed guide on how to customize the Animate Design Element:


Step 1: Edit the ShortPoint Web Part

  • Go to the SharePoint page you want to use and click Edit.


Edit

  • Click the ShortPoint tag.
  • Select the pencil icon.

Step 2: Switch to Grid Mode

NOTEThe Animate Design Element is currently only available in Grid Mode.


  • Click the Switch to Grid Mode icon.


Switch to Grid Mode icon


Step 3: Insert the Animate Design Element

  • Click the gray plus icon.


Gray plus icon


  • Use the search box to look for Animate and click it.

Step 4: Add Content

  • Click anywhere around the white area to start editing content.
  • Write and customize the content you want to display.


NOTECheck out Animate Features to learn more about the options you can use in the Rich Text Editor.

Step 5: Select Animation Type

  • Navigate to the Animation tab.
  • Select the Animation Type you want to use.
  • Then, customize the Animation according to your preference.
  • Once satisfied, click Insert.


NOTECheck out Animate Features to learn more about the OOTB options you can customize.

Step 6: Save

  • Then, click the eye icon to see your page in real-time.


eye icon

  • Click Save to apply all your changes.


Save


Animate Features

Below are the options you can find in the Animate Settings window:


A. Content tab

The Content tab allows you to edit the content of the Animate Design Element. 


content tab


It has a Rich Text Editor, which allows you to customize how your text will appear on your page. It has the following options:


Rich Text editor


1Bold
makes the format of the text Bold
2Italic
makes the format of the text Italic
3Underlinemakes the format of the text Underline
4Text Color
allows you to change the color of your text
5Font Family
allows you to change the font of your text. 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 fonts.
6Font Size allows you to change the size of your text
7Paragraph Format
allows you to specify the heading of the text
8Undoallows you to undo your last action
9Redo
allows you to redo your last action
10More Rich opens more options in the Rich Text Editor
11Background Color
allows you to add a background color to the text
12Strikethrough 
allows you to add a strikethrough to your text
13Clear Formatting
clears the formatting of the text selected
14Ordered Listallows you to create an ordered list using numbers
15Unordered Listallows you to create an unordered list using bullet points
16Align
allows you to change the alignment of the text
17All Caps
capitalizes the selected text
18Small Caps
turns the selected text into small letters
19Code View
allows you to edit the text in code view
20Insert Linkallows you to insert a link
21Insert Table allows you to insert a table
22Insert Video
allows you to insert a video
23Insert Image
allows you to insert an image



The Rich Text Editor also has ShortPoint Inline Design Elements. You can see them by clicking the ShortPoint icon:


ShortPoint icon


It has the following options:


Inline Design Elements


1Buttonallows you to insert a button
2Linkallows you to insert a link
3Tooltipallows you to insert a tooltip
4Popover
allows you to insert a popover
5Abbreviationallows you to add an abbreviation
6Dropcapallows you to show drop-cap
7Label 
allows you to add a label
8Emphasisallows adding emphasis
9Icon allows you to add an icon
10Emoticonallows you to add an emoticon


NOTECheck out Introducing Inline Design Elements Feature for ShortPoint Page Builder Live Mode and ShortPoint Page Builder Grid to learn more about Inline Design Elements.

B. Animate tab

The Animate tab allows you to select the Animation Type and customize how the animation appears on your page. It has the following options:


Animate tab


TypeTypeallows you to choose the animation style of the content.
Show on initShow on initwhen enabled, the content will be displayed by default.
DurationDurationallows you to modify how long you want the animation to last. By default, it is set to half a second.
DelayDelayallows you to customize how long before the animation will play.
OffsetOffset
allows you to choose where the animation should kick off. By default, it is set to 75%.

C. Visibility Tab

The Visibility tab allows you to modify the people and the devices that can see the Animate Design Element. It has the following options:


Visibility tab


PEOPLE AND GROUP

This ShortPoint is visible only forThis ShortPoint is visible only for
allows you to assign the people the Animate Design Element will be visible.
Do not show it forDo not show it forallows you to assign the people whom you do not want to show the Animate Design Element.
Enable advanced settingsEnable advanced settings
when enabled, additional settings will appear.
Enable support for other groupsEnable support for other groupsenable this option if you want to support visibility to AD Group, Office 365 Group, or Security Group.
NOTE: Check out How to Set ShortPoint Element Visibility to Active Directory Security Group to learn more about this option.
Use group namesUse group names
By default, ShortPoint will use Group ID on the backend. Enable this option if you want to use Group Name instead. This is useful if you want to keep the same visibility settings when migrating from one site to another.


DEVICES

Do not show ShortPoint on the following devicesDo not show ShortPoint on the following devices
allows you to choose the devices where you want the Animate Design Element to be shown.

D. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Animate Design Element. 


NOTECheck out our support article on How to Insert Custom CSS into a Design Element? (Basic Tutorial) to know more about Custom CSS.


Custom CSS tab


That’s it! You now know how to customize the Animate Design Element. Try using these amazing features on your pages.


Related articles:







Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 56 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more