Skip to content

Perky Animate Content Options

Within the content tab you will find all of the module’s content elements, such as text, buttons, images and icons. Anything that controls what appears in your module will always be found within this tab.

Perky Animate Content Options

Title

Insert the title of your Perky Animate module here.

Subheading Text

If you would like to use a subhead, add it here. Your subhead will appear before or after your title in a small font.

Content

This field is where you can enter the Perky Animate content.

Title Effects

You can choose a various title effects for your Perky Animate module. Please take note that for Typing Effect, Rotator Effect and Textillate Effect will need to refresh your browser page in the Visual Builder in order to see the new changes. Once ElegantThemes releases a more comprehensive documentation on how to do things right, we will update accordingly.

Use Typing Effect

This will have an animated typing effect on your Title. To seperate the words in typing effect, you will need to add "|" e.g text1|word|animating

Use Typing Effect

Static + Typing Effect

This will have a have static text and typing effect on the title at the same time. More of like a before text on the typing effect. For example, "Hello Divi" I am Divi - (Hello Divi is a static text and will not have typing effect where else "I am Divi" is animated). For the static text input, type in your text in the "title" input field above.

An option Input for Typing Effect will appear below when you enable Static + Typing Effect. In this input field, put in your typing text. To seperate the words in typing effect, you will need to add "|" e.g text1|word|animating

Use Static + Typing Effect

After Text

This will add a static text after the typing effect.

Cursor Character

You can have your own custom Cursor Character here. The character is "|" by default. You can put in any characters, letters or numbers.

Animation Speed (in ms)

Here you can control the speed of the typing effect. Lesser value will have faster typing effect.

Start Delay Speed (in ms)

Here you can delay before typing starts.

Delay Time Before Backspacing (in ms)

Delay before backspacing.

Use Loop

If enabled, typing effect will loop infinite.

Use Typing FadeOut

This will have fade out animation instead of backspacing.

Use Typing Shuffle

Here you can choose to shuffle your Typing Effect text strings.

Use Typing Shuffle

Here you can choose to shuffle your Typing Effect text strings.

Use Rotator Effect

This will have a rotating text effect on your Title with many animations to choose from.

Use Static + Rotator Effect

Static + Rotator Effect

This will have a have static text and rotator effect on the title at the same time. More of like a before text on the rotator effect. For example, "Hello Divi" I am Divi - (Hello Divi is a static text and will not have rotator effect where else "I am Divi" is animated). For the static text input, type in your text in the "title" input field above.

An option Input for Rotator Effect will appear below when you enable Static + Rotator Effect. In this input field, put in your typing text. To seperate the words in typing effect, you will need to add "|" e.g text1|word|animating

After Text

This will add a static text after the typing effect.

Rotator Effect on a new line

If enabled, you can have static text on the first line and rotator effect on the other line. This will only show up when you enable Static + Rotator Effect

In Animation Type

This animation list has over 30 animations and it controls the in effect animation of the text rotator.

Animation Speed (in ms)

Here you can control the speed of the rotator effect. Lesser value will have faster rotator effect.

Use Textillate Effect

This effect divides the animation into 2 components, in and out animation for each letters. You may apply them with different animations, separately.

Use Textillate Effect

In Animation Type

Choose the animation type. Shuffle will reverse the character sequence.

In Animation

This animation list has over 30 animations and it controls the direction of the starting animation of the textillate.

Out Animation Type

Choose the animation type. Shuffle will reverse the character sequence.

Out Animation

This animation list has over 30 animations and it controls the direction of the exit animation of the textillate.

Use Underline Hover Animation

This will have a underline animation when you hover over the Perky Animate module.

Underline Hover Animation

3 types of animation to choos from. Center, Left to Right or Right to Left.

Use TextGIF Effect

This will apply a background image such as gif to the title.

TextGIF Background Image URL

Upload your desired image, or type in the URL to the image you would like to display.

Use Background Text

This will create a background text behind the title giving a unique look.

Background Text

Input your text here you would like to display behind the title.

Use Divider line

The divider is perfect for creating either a horizontal line rule, custom vertical spacing, or both. Using this element is great for adding structure and organization to your site.

Divider Placement

This show up a divider line before or after the title depending if you use Subheading or not.

Divider Alignment

This controls the how your divider line is aligned.

Button

There are 3 tabs here in the button section. First tab is where you put your text and URL. The second tab is for Video Lightbox Popup and the third tab is for hover effect.

Perky Animate Buttons

General Tab

Button #1 Text

Specify the button #1 text here, or leave it blank if you do not wish to have a button.

Button #1 URL

Inserting a valid web URL in this field to specify the destination of your Call to action.

Open URL

Here you can choose whether or not your link opens in a new window.

Button #2 Text

Specify the button #2 text here, or leave it blank if you do not wish to have a button.

Button #2 URL

Inserting a valid web URL in this field to specify the destination of your Call to action.

Open URL

Here you can choose whether or not your link opens in a new window.

Fullwidth Button on Mobile

This will make your Buttons in Fullwidth on mobile devices.

Video Tab

Buttons Hover

Video Popup #1

This will enable the video lightbox popup on Button #1.

Button #1 Video URL

Copy the video link and paste it here. Support: YouTube, Vimeo and Dailymotion.

Video Popup #2

This will enable the video lightbox popup on Button #2.

Button #2 Video URL

Copy the video link and paste it here. Support: YouTube, Vimeo and Dailymotion.

Hover Tab

Buttons Hover

Use 2D Hover Effect (Button #1)

This will have a 2D hover animation on your button #1 when hover.

2D Transition (Button #1)

29 Animations to choose from.

Use Speech Bubbles (Button #1)

This will have a Speech Bubbles animation on your button #1 when hover. This Bubble effect will only work and look well if you have solid color background for the button.

Speech Bubbles Transitions (Button #1)

4 Animations to choose from.

Hover Effect Color (Button #1)

Tips: It is advisable to choose the same background color as your button #1.

Use 2D Hover Effect (Button #2)

This will have a 2D hover animation on your button #2 when hover.

2D Transition (Button #2)

29 Animations to choose from.

Use Speech Bubbles (Button #2)

This will have a Speech Bubbles animation on your button #2 when hover. This Bubble effect will only work and look well if you have solid color background for the button.

Speech Bubbles Transitions (Button #2)

4 Animations to choose from.

Hover Effect Color (Button #2)

Tips: It is advisable to choose the same background color as your button #2.

URL

Place a valid web URL in this field to turn your Perky Animate Title into a link. Leaving this field blank will simply leave your title as a static element.

URL Opens

Here you can choose whether or not your link opens in a new window.

Make Entire Div Clickable

Enabling this will make the entire DIV as a link.

Make Entire Div as a Video Popup

This will enable the video lightbox popup on the entire DIV.

Video URL

Copy the video link and paste it here. Support: YouTube, Vimeo and Dailymotion.

Image & Icon

Use Icon

When using Perky Animate, you can choose to either use an Icon or and Image with your text. If you select “yes” for the “Use Icon” option, then you will be presented with the following options to customize your icon. If you do not choose to use an Icon, then you will be prompted to upload an image instead.

Icon

If you chose “yes” for the “Use Icon” setting, then this option will appear. This options presents you with a list of available icons that you can use with your Perky Animate text. Simply click on the con that you would like to use and it will appear in your Perky Animate.

Image

If you did not choose to use an Icon, then this setting will appear. Place a valid image url here, or choose/upload an image via the WordPress Media Library. However, your image will never scale larger than its original upload size. The height of the Perky Animate image is determined by the aspect ratio of your original image, so making all of your Perky Animate images the same height is a good idea if you are placing them side by side.

Use Hover Animation

This will apply animation on icon when hover.

Hover Animation

More than 29 animations to choose from.

Transition Speed (s)

You can choose the speed of the animation.

Cover Image

Ideals for showing a featured image on the top of the element along with some contents. A few hover animation transitions to choose from and now you can make it more obvious and alive.

Buttons Hover

Cover Image URL

Upload your desired image, or type in the URL to the image you would like to display.

Hover Animations

You can choose 6 types of hover animation for Cover Image.

Hover Scale Setting

Using Zoom In animation will appear additional option to allow you to adjust the animation setting.

Hover Transitions

8 types of Hover Transition to choose from: Grayscale, Sepia, Saturate, Blur, Contrast, Invert, Brightness and Hue Rotate.

Transition Settings

Using one of the hover transition will appear additional option to allow you to adjust the transition setting.

Transition Speed (s)

You can choose the speed of the animation when hover.

Overlay Color

Here you can define a custom overlay color on top of the cover image.

Overlay on Hover

Here you can define whether the overlay will show up on hover.

Overlay Title

Here you can define a title text on top of cover image.

Overlay Description

Here you can define a description text on top of cover image.

Show Cover Content on Hover

Here you can define whether the content will show up on hover.

Content Hover Animations

You can choose 5 types of content hover animation for Cover Image.

Content Hover Animation

More than 30 types of animation to choose from. Create beautiful, subtle transitions. Enhance the look and feel of a website and make it easier for visitors to navigate.

Content Hover Animation

Use Content Hover Animation

Here you can choose whether the content should have hover animation.

Hover Animation

More than 30 animations to choose from.

Sequenced Animation

Elements in the content will appear in sequence when hover.

Sync Overlay with Hover Content Animation

Enabling this will will sync your Overlay with the Hover Content Animation.

Overlay

Easily put overlay text over an image or element. Overlay text and Overlay background animation gives your site a cool and interactive effects in a simple and flexible way.

Overlay Title

Input your text to action overlay title here.

Overlay Title

Input your text to action overlay description content here.

Background

Background Image (with Effects)

Create stunning background image with ease. Apply image filters, zooming effect and other effects with just a few clicks. These effects can make your site feel much more dynamic and alive.

Background Image (with Effects)

Use Hover Animation on Background

This will allow you to use hover animation on background image when you hover over Perky Animate module.

Hover Animation

You can choose 5 types of hover animation for Background Image such as Zoom In, To Left, To Right, To Top or To Bottom.

Hover Setting

Using Zoom In animation will appear additional option to allow you to adjust the animation setting.

Transition Speed (s)

You can choose the speed of the animation when hover.

Use Background Filter Transition

Enabling this will have a filter transition on background on hover.

Filter Effect Mode

You can choose either to "Filter on Default & No Filter on Hover" or "Filter on Hover & No Filter on Default". This filter transition will only apply to background image on hover only.

Filters

8 types of Hover Transition to choose from: Grayscale, Sepia, Saturate, Blur, Contrast, Invert, Brightness and Hue Rotate.

Transition Settings

Using one of the hover transition will appear additional option to allow you to adjust the transition setting.

Border Wrapper

Ideals for showing a border within the element to create a unique look. Adjust the border style, color or padding to your own liking and choose over two types of hover animation transitions ‘Zoom In’ or ‘Zoom Out’.

Border Wrapper

Border Style

Here you can choose 4 types of border styles (Solid, Double, Dotted and Dashed).

Show Animated Border on Hover

Here you can define whether the border will show up on hover.

Border Hover Animation

You can choose 2 types of border hover animation for Border Wrapper such as Zoom In and Zoom Out.

Tilt Effect

Interactive 3D parallax tilt effects that react to mouse movement when you hover over them. Bring the attention of your visitors easily to your sites. The choice of images should be right to make this effect even stunning.

Tilt Effect

Use Tilt Effect

This will have a 3D parallax tilt effects that react to mouse movement when you hover over Perky Animate module.

Max Tilt

This will have a 3D parallax tilt effects that react to mouse movement when you hover over Perky Animate module.

Scale Setting

This will scale tilt element on hover.

Glare Parallax Setting

This will have control the 3D parallax pop out effect on the inner element.

Tilt Speed

Speed of the enter/exit transition. Lower value has faster transition.

Use Glare

Using this will enable a glare effect when you hover them.

Glare Value

More value will increase the glare on the Perky Animate module when hover.

Revealer Effect

It’s cool for revealing content in a schematic box look. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers content underneath. Revealer Effect

Revealer Animation

Enabling this will have Revealer Effect on your Perky Animate module.

Animation

4 types of Revealer Animation to choose from.

Background Color

The background color of the revealer effect.

Note: Background color will not be visible. You have to either change the animation type again to see the color or do a refresh on your browser.

Admin Label

This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.