Introduction
Typewriter is a Joomla plugin adds dynamic, customizable typewriter text animations to Joomla sites, enhancing user engagement with minimal setup. This documentation covers the installation, configuration, and usage of the Typewriter plugin.
Download
Downloading the Extension
Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.
Store: Alternatively, you can download the extension from the "Downloads" section in our store. If you are a new user, you need to create an account using the same email address you used for the purchase.
Click to download the extension package: Typewriter_UNZIP.zip
Unzipping the Package
Use any file unzipper tool or WinRAR to unzip the Typewriter_UNZIP.zip package. After unzipping, you will find the following contents:
- plg_typewriter.zip: This is the installation file compatible with Joomla 4.x and Joomla 5.x.
- ReadMe.txt: Contains vital information about the current version of the extension.
Installing the Extension
To install the extension, log in to the backend of your Joomla website.
- For Joomla 4 & 5: Navigate to Extensions > Install, then click on the "Upload Package File" tab. Click "Browse" to select the installation file (
plg_typewriter.zip
), then click "Upload and Install."
A success message will be displayed once the installation is complete.
Configuration
After installation, the plugin needs to be configured to suit your requirements. Access the plugin settings by navigating to Extensions > Plugins, and find System - Typewriter in the list.
General Settings
- Default Speed: Set the default typing speed in milliseconds.
- Default:
200
- Default:
Usage
To use the Typewriter plugin, insert the shortcode with your desired text and settings into your Joomla articles or custom HTML modules. Below are some examples demonstrating various configurations.
Basic Usage
{typewriter text1="Welcome to Our Website" text2="We Offer Amazing Services" text3="Get in Touch with Us" /}
This will display the typewriter effect with the specified texts using default speeds and cursor settings.
Custom Typing and Erasing Speeds
{typewriter text1="Fast Typing" text2="Slow Erasing" typingSpeed="50" erasingSpeed="200" /}
This configuration sets the typing speed to 50 milliseconds per character and the erasing speed to 200 milliseconds per character.
Delay Before Erasing
{typewriter text1="Pause Before Erasing" delayBeforeErasing="3000" /}
This adds a 3-second pause before the text starts erasing after it has been fully typed.
Custom Cursor Settings
{typewriter text1="Custom Cursor" cursorColor="#FF0000" cursorThickness="0.2em" /}
This example sets the cursor color to red and the cursor thickness to 0.2em for better visibility.
Multiple Instances
{typewriter text1="First Instance" text2="With multiple texts" typingSpeed="100" erasingSpeed="50" delayBeforeErasing="1000" cursorColor="#0000FF" cursorThickness="0.15em" /}
{typewriter text1="Second Instance" text2="With different settings" typingSpeed="200" erasingSpeed="100" delayBeforeErasing="2000" cursorColor="#00FF00" cursorThickness="0.1em" /}
This example demonstrates how to use multiple instances of the typewriter effect on the same page, each with different settings.
Features
- Customizable Typewriter Text: Add dynamic, engaging typewriter text animations to your Joomla site.
- Flexible Speed Settings: Control typing and erasing speeds, as well as delays before erasing.
- Custom Cursor: Personalize the cursor's color and thickness for better visibility.
- Multiple Instances: Use multiple typewriter effects on the same page with different settings.
FAQ
-
How do I set the typing speed?
- Use the
typingSpeed
attribute in the shortcode.
- Use the
-
Can I customize the cursor?
- Yes, use the
cursorColor
andcursorThickness
attributes in the shortcode.
- Yes, use the
-
How do I add a delay before erasing?
- Use the
delayBeforeErasing
attribute in the shortcode.
- Use the
-
Can I use multiple typewriter effects on the same page?
- Yes, you can use multiple instances of the shortcode with different settings.
Troubleshooting
- Text Not Displaying: Ensure the plugin is enabled and the shortcode is correctly added to your content.
- Incorrect Speed Settings: Verify the
typingSpeed
anderasingSpeed
attributes in the shortcode. - Cursor Not Visible: Check the
cursorColor
andcursorThickness
settings.
For further assistance, visit the Infyways Support page.