Sample Sidebar Module

This is a sample module published to the sidebar_top position, using the -sidebar module class suffix. There is also a sidebar_bottom position below the menu.

Sample Sidebar Module

This is a sample module published to the sidebar_bottom position, using the -sidebar module class suffix. There is also a sidebar_top position below the search.
S5 Typed Text

Search our Site

The typed text extension will display text as shown below. You can add any HTML like a strong, href, etc tag to style the output. We've created 2 classes to place on the text so that the animated typing will only show on desktops. The reason for this is that the text doesn't wrap down to the next line on mobiles and other small screen devices. So you'll see the class "s5_typedstring_desktop" which hides the animation on mobile. And then then class "s5_typedstring_mobile" which shows alternate text in the animated text area for mobile:

We help you achieve the best outcome We help you achieve the premier outcome We help you achieve the most excellent outcome for your project

We help you achieve the
most excellent outcome for your project



The code used for this is below:

<div class="s5_typedstring s5_typedstring_desktop">
<span>We help you achieve the best outcome</span>
<span>We help you achieve the premier outcome</span>
<span>We help you achieve the most excellent outcome for your project</span>
</div>
<span id="typed" class="s5_typedstring_desktop" style="white-space:pre;"></span>
<h1 class="s5_typedstring_mobile s5_pc_center">We help you achieve the<br> <span class="s5_highlight1">most excellent outcome</span> for your project</h1>


Line 1 Line 2 Line 3


How to use?

You can use any of the sample code above but basically the script works as follows. Anything inside the first DIV with the class "typed1" is what the script will use to output as typed text. Then the span with the id="typed1" on it is where the script will output these lines of text and animate them. Both the class and id of "typed1" are set in the plugin admin area. You can set them to whatever you want. Just be sure to change both typed1 to whatever you enter in the plugin admin. You can see in our second example we did "typed2". Again this is just what we made up and entered in the admin of the plugin.