The typing text module for divi style your text with cool typing animations. This module has several features and design flexibilities to adorn the typed animated text. However, all the features are easy to play with and get separated into three categories,
+ Content Tab
+ Design Tab
+ Advanced Tab
Content Tab
The content tab helps to create an eye-catchy typewriting text animation effect. It contains features like content, setting, prefix & suffix background, and more to implement several design elements. Let’s get into a detailed explanation of each feature.
- Content
The content feature allows applying two different texts, named prefix & suffix. And between them, you can add a list of typewriter text that appears one by one with typing animation effects. Furthermore, this feature makes a way to design each part of the text separately in the further customizing procedure. Finally, you get the convenience to define the HTML tag of the entire text.
- Settings
The Settings option defines the typing animation speed, delete speed, and next string delay time. A cursor icon can be added here with sizing & positioning controls. Even more, you can a add a loop effect to demonstrate the text spherically. Nevertheless, this feature visualizes all the typewriter texts simultaneously in a line.
- Prefix Background
The prefix background feature brings a background color for the prefix portion of the text. Also, it adds color gradient & image as the prefix background.
- Typed Text Background
The list of design properties you achieve in the prefix background is also presented in the typed text background.
- Suffix Background
The list of design properties you achieve in the prefix background is also presented in the suffix background.
- Link
The Link feature helps designers to take the audience to another page simply by providing a link to the module.
- Background
Background setting has multiple facilities to implement, such as background color, gradient color, image, and video features. And on top of these features, there are a few settings to make each adjustment as you desire.
- Admin Label
Admin Label provides the opportunity to customize the module name as you desire. So, it doesn’t have to be the actual name of the module that generally shows on the wireframe view.
Design Tab
The design tab of the TypeWrite module adorns each element applied before. It has many unique features with a quick and easy customizing interface. All the features are explained below,
- Alignment
The alignment feature is responsible for aligning the entire module with just one click.
- Text
Text feature impacts the entire module, the prefix, typewriter text & suffix, at once. It defines the text font, weight, style alignment, color, and size. Moreover, the letter spacing & line-height get controlled alongside text-shadow effects under this feature.
- Prefix
Prefix feature of the design tab style the prefix portion of the module. It defines the prefix display property among block & inline-block with a text masking effect. Moreover, you can modify the prefix font weight, style, alignment, color, size, letter spacing & line-height with different text shadows. Also, you can add a stylish border with corner rounding & box-shadows effects.
- Typed Text
All the features you get in the prefix are also available for the typed text.
- Suffix
All the features you get in the prefix are also available for the suffix.
- Border
The Border feature gives you a border corner rounding effect for the entire heading. Also, you can customize the design by changing the border width, style, and color with it.
- Custom Spacing
The custom spacing lets you provide margin & padding around the prefix, suffix, and typed text.
- Sizing
The sizing feature helps to increase or decrease the width and height of your container. Even you can set a min or max height and width of the heading.
- Spacing
Divi makes the spacing setting a default feature. Therefore, you will find two common margins and padding settings that work the same for all Divi modules in this function.
- Box-Shadow
This Box shadow affects the entire module, and it has six distinct shadow styles. On top of these, you get some features to adjust the box-shadow as desired.
- Filters
The filter feature brings numerous color effects. It adds several effects like hue, saturation, brightness, contrast, opacity, blur, etc.
- Transform
The transform feature provides you with five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions in the module will give better control.
- Animation
Every Divi module, row, and section comes with advanced animation options. The TypeWriter module also has this feature to explore.
Advanced Tab
The advanced tab has some cool features that make the module developer-friendly. Features like CSS ID, Classes, and Custom CSS are renowned, among other advanced tab features. However, more design options are available here; check them out.
CSS ID & Classes
CSS ID: The only purpose of the CSS ID section is to identify the ingredient separately while linking, scripting, or styling the module.
CSS Class: Assign any number of CSS classes to the element, separated by spaces, which can be used to assign custom CSS style from within your child’s theme or from Divi’s custom CSS inputs.
Custom CSS
There are three custom CSS areas in the module, and here you can target and set your custom CSS code. A sign “?” in each CSS input box will tell you which class has been targeted.
Condition
The conditions feature allows you to hide or show any module based on post info, location, user, interaction, and device.
Visibility
The advanced setting’s visibility option allows designers to hide the module for a particular device.
Transitions
You have features like Transition duration, Delay, and Curve Speed for better customization under the transition setting.
Position
Here you have complete control over the relative, absolute, and fixed positions. This option is also available in every Divi module and works almost the same.
Scroll Effects
Under this setting, you get a Sticky position, scroll transform effects, enable vertical motion, and motion effect trigger functions for the module.
NOTE
Mobile: Any setting with a mobile icon will allow you to customize according to devices. You can select different settings for desktop, tablet & Mobile.
Mouse: A mouse pointer in the setting will allow you to set a hover effect on this element.
