Instantly add eye-catching, scroll stopping style and effects to your site page text with easy to use and easy to customize short-codes
Method 1 (Easy): Using Text Effect Sections on Site Pages
With this method, you simply add the Text Effects sections to individual Site Pages and then use the Text Effect short codes to instantly add the effects and styles. The effects stay contained to the page only so you can have different effects and settings on various pages of your site. You can also use the Site Builder copy feature to duplicate the effects across other pages, but any future changes would need to be made on every page.
Instructions:
Make sure you have the Text Effects PowerUp installed to your site by checking the Apps page
Open up a Site Page where you would like to use this PowerUp
Add one of the Text Effect sections by searching for Text Effects and then selecting of the included sections
Open up the section you just added and optionally modify any of the Text Effect section settings
There are two short codes you will need for each Text Effect. One short code tag will be used at the beginning of the text and the other short code tag will be used at the end of the text that you want to use the effect on. Each Text Effect short code tag id can also be customized
Using a Text Effect inside of a "simple" text section setting
Copy the Text Effect short code that will be used to indicate the start of the text. For example, if you selected the Highlight Text Effect, then you would copy the short code <highlight>
Open up another section on the page and paste this short code at the beginning of the text.
Move your cursor to the location where you would like the effect to stop, and paste in the second corresponding short code. For example </highlight>.
Using a Text Effect inside of a WYSIWYG rich text section setting
Inside the WYSIWYG editor, click on the < > to enter code mode
Location the item that you wish to apply the Text Effect on.
If you wish to apply the effect to the entire item, for example a heading. You could add
class="highlight"if you wish to apply the effect to a portion of the item, then you will need to add <span class="highlight"> your text... </span>
Repeat the process as needed. You can have multiple Text Effects on the page and also use them in combination to create some pretty amazing effects
When using a custom Tag ID, be sure to not include any spaces. if you do, they will be replaced by a dash. You can have different effects of the same type on the same page as long as they have different Tag ID's.
For example, if you want to highlight text on a light background with one color and highlight text on a dark background with a light color, you would have two Highlight sections included on the page, each one having it's own Tag Id property.
Method 2 (Advanced): Creating Your Own CSS Stylesheet
With this advanced method, you do not have to use the Text Effects sections on a page by page basis. You can manage your Text Effect short codes on a custom page of your site, and then "publish" them to your Site Footer Code settings so that they can be accessible from any Site Page and inside your Course Lessons
You must use this method if you want to use Text Effects inside the course player lessons and also with our Player Snips PowerUp
Instructions:
Create a new Custom Page that will act as your library of Text Effects
Change the security of the page so that only you can view it
Remove the default Banner that is normally on a custom page by default
Add the Text Effects Export CSS section to the page
Now add the Text Effects sections that you wish to use on your pages
As you add each section, an example will be shown along with specific instructions for each Text Effects short code
Configure each Text Effect setting according to your desired behaviors and styles
When you are satisfied with your settings, then Download the CSS file by clicking on the Download CSS button
Upload the file to a "dummy course" using a download lesson type
Preview the lesson and copy the url
Paste the url into the Text Effect Export CSS url setting
Click the Copy Code button
Paste the code into your Site Footer Code settings and click Save.
Now you can use the Text Effects short codes that you included on this page in any Site Page or Course lesson
You will need to repeat this process any time you want to make a change to your Text Effects. You can treat each file that you downloaded as a "version" in case you need to revert back to an older style.
Be sure to replace the previous snippet when updating your Site Footer Code settings
Additional Walkthrough