Installing Builder Addons
Installing Builder Addons is exactly the same as installing WordPress plugins.
To install the addon:
- Firstly, download the addon zip file from the link provided in your Themify Member Area.
- NOTE: some browsers (eg. Safari) auto extract zip files automatically. Right-click on the download link and select "Save Linked File As" and it will allow you to download as a zip file.
- Login to your site's admin area.
- Navigate to WP Admin > Plugins > Add New.
- Now, click the "Upload Plugin" link.
- Select "Browse" and navigate to the plugin zip file which you downloaded in the first step and then select the "Install Now" button.
- This will initiate the plugin installation process, and once finished, you can then activate the plugin.
Importing the addon demo layout
Each addon zip file contains a sample Builder data file which you can import to your site. It helps you to understand how the addon demo is created.
To import the addon demo data:
- First, extract addon zip file to your local computer
- You should have a folder of the addon. Inside there is a folder named "sample", and inside that folder there is a Builder data file in a zip format (eg. "addon_name_sample-builder-layout.zip").
- To import the Builder layout, login to admin and then go to the page frontend where you want to import the Builder layout. From the top admin bar > select Themify Builder > Import / Export > Import, upload the sample zip file.
Using the Typerwriter Addon
Once the addon is installed, you will find it on the Themify module panel. The module is available in both backend and frontend edit mode (just like all standard modules).
In the backend: you will find the Typewriter module in the Themify Custom Panel.
On the frontend: you can see the modules after turning on the Builder from top admin bar > Themify Builder > Turn On Builder.
- Drag and drop a Typewriter module in a row
- The options below will appear
- 1) Text Tag = Select the HTML tag that you would like to apply on all text
- 2) Before Text = Text that will appear before the text
- 3) After Text = Text that will appear after the text
- 4) Text = This is the text that will appear with the typing and highlight animation
- Note: In order for the typing animation to loop, you'll need to add more than 1 text. Adding only 1 text will only show the typing animation once
- 5) Add New Text = You can add an unlimited number of texts. Each added text will overlap with the previous text, and enable the looping animation effect.
- In addition to the above features, you can also set the animation effect speed
- 1) Highlight & Type Speed = Set the speed to fast, slow, or normal
- 2) Clear Delay = Set how fast the text will disappear
- 3) Type Delay = Set how fast the next text starts
- 4) Highlight Delay = Set how fast before the text is highlighted
- 5) Additional CSS Class = Add additional CSS class for custom styling.
Click the Styling tab to start customizing the Typewriter module. The Typewriter module comes with 2 tabs - General & Typewriter. Below are the options for both these tabs:
- 1) Background Options
- Background Image = Choose an image from your media folder or upload an image to show as your background.
- Background color = Use the colour picker to pick a color for your background.
- Background repeat = Choose if you want your image to repeat vertically, horizontally, not to repeat, or to appear as a fullcover image.
- 2) Font Options
- Font Family = Choose the font family of the text.
- Font Color = Choose the font color of the text.
- Font Size = Select the font size in px or in em.
- Line Height = Set the line height in px, em, or %.
- Text Align = Choose how you want to align your text.
- 3) Padding = Add in px or in % the space in the module (around the text).
- 4) Margin = Add in px or in % the space outside the module (outside the text).
- 5) Border = Choose the colour, size, and style for each side of the border.
- 1) Background Color (Highlighted) = Choose the colour that the text will be highlighted with.
- 2) Font Color (Highlighted) = Choose the colour of your font when highlighted.
- 3) Padding (Highlighted) = Set the padding around the text when highlighted.
- 4) Border (Highlighted) = Set the border around the highlight of the text.