# Motionger - Animated Headings for Elementor

- created: 03/04/2020
- latest update: 03/04/2020
- by: merkulove
- elementor.merkulov.design/motionger/

WordPress plugins Documentation

### Overview

The Motionger is an easy to use and flexible Elementor widget for creating animated titles for any WordPress posts/pages. The widget allows not only to create headings with a unique design but also to animate the whole heading text or separate words.

You can use a simple and clear structure to create a moving header text and choose the animation that suits you best. The Motionger widget is useful for different kinds of sites and themes to make your site more engaging and interactive. It can be easily adapted to the style of your website, whether it be Blog, Glossary, Portfolio, Corporate Website, eCommerce Project, Creative Agency, Real Estate Listing, Personal CV, a Restaurant, Retail Company or Magazine.

To better understand the capabilities of the widget, we included 5 templates to the package. These are just some examples that can inspire you to create your style. It provides you a quick start in a few clicks.

Includes Templates for Elementor
16 fresh & awesome animation effects
Unlimited customization options
Rotation, offset, borders gradients and more
Completely cross-browser support
Perfect for Popular Elementor Themes
Suitable for all kind of Layouts and Templates

The Motionger has very flexible settings. You can change the colors, fonts, background, gradient, paddings, and margins for each element. All this can be configured directly from the Elementor’s interface and does not require additional code knowledge.

Motionger for Elementor is exceptionally compatible with all modern browsers. It does not matter which browser users view your site: Chrome, Firefox, Opera, Safari, or Edge. Everything will look great on all devices and in all browsers.

## Features of the Motionger widget for Elementor

- Perfect for Elementor 2.5 and higher
- 5 Animated Header templates included
- Customizable fonts, colors, borders, backgrounds, gradient, etc.
- 16 Animation Types available
- Creating a unique extended header
- Rotation of additional header
- Text and background gradient
- Flexible style settings for header elements
- Responsiveness settings
- Works well with all WordPress themes built on Elementor
- Totally Seo Friendly
- Included pot file for quick translation on any language
- Perfect for RTL direction
- Fast and smooth installing
- Tested and compatible up to WordPress 5+
- Lightweight and Fast
- All major browsers supported Chrome, Firefox, Safari, Opera, and Edge
- Easy to use and customize with modern User Interface
- Installation Guide and detailed Users Manual
- Six months Included Support for CodeCanyon buyers

The plugin installation takes only a few seconds. Also, you do not need to make any additional settings. The plugin is ready to work immediately after installation – you only need to install and activate it in WordPress. Read more about capabilities and settings in the Online Documentation.

### Installing

Installing the WordPress plugin is quick and straightforward. After you have downloaded the archive with the plugin, you will see the file with the plugin inside. Unzipped purchased the product you will see inside the archive with the plugin pluginname.zip There are two ways to install it:

## Installation of the Plugin through the WordPress Admin panel ( Recommended for most users )

###### STEP 1

First of all, open WordPress admin area login page and login in into WordPress as Admin. To do this visit http://yoursitename/wp-admin

###### STEP 2

Go to Plugins > Add New

Add New Plugin to WordPress

###### STEP 3

Click Upload Plugin Button

Upload New Plugin to WordPress

###### STEP 5

Choose archive with Plugin and press Install Now Button

###### STEP 6

After Installing go back to the Plugins page and click Activate below plugin title

Activate Installed Plugin

## Installation the plugin through FTP or build-in File manager

###### STEP 1

Use Login and Password to connect to your web-server via FTP or use your hosting file manager.

###### STEP 2

Upload archive with plugin to /wp-content/plugins

###### STEP 3

On next step Unzip the archive with the plugin

###### STEP 4

Installing WordPress Plugin is almost finished. Go to the Plugins page and click Activate below plugin title. You can find out your username and password on the website of your hosting provider.

Activate Installed Plugin

After installing and activating the plugin, you can go to settings of the Plugin. Also, you can read more helpful articles about WordPress Themes and WordPress Plugins.

### Settings

The Motionger is an easy to use and flexible Elementor widget for creating the animated title for any WordPress posts/pages. The widget allows not only to create headings with a unique design but also to animate the whole heading text or separate words.

To better understand the capabilities of the widget for the animated title, we included 5 templates to the package. These are just some examples that can inspire you to create your style. It provides you a quick start in a few clicks. Read more about using templates.

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor to start using the Motionger widget. You will find the widget at the end of the general section.

Widget icon

Drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

- Content
- Style
- Advanced

## Content Tab

On the Content tab of the Motionger widget, you can enter the main post title with the animation and manage subheader and additional header.

### Header settings

- Animation – select one of the 16 animation types for text. The available types: Rice, Curl, Jalousie, Drop, Ripple, Slide Right, Slide Left, Slide Down, Slide Up, Bounce, Fade, Flip X, Flip Y, Jello, Zoom, Typing.
- Word change time – specify the time for changing animated words.
- Letter animation time – specify the animation speed of each letter in a word. The option is available only for some types of animation. The Word change time should not be less then Letter animation time*number of letters of an animated word.
- Text – enter the title text of the current page or post. The text to be animated is enclosed in braces. Through a comma indicate the text to be animated. Example: Text before {Text One | Text Two} text after.
- Line – the toggle to enable/disable the display of the line in the title. The line style and placement can be managed in the style tabs.
- Split header – the toggle to enable/disable the additional text for the title. It is displayed on a new line.
- HTML tag – select one of the available tags from the list for the title text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
- Link – the link entered in this field will be attached to the title. Leave the field blank if you do not want to add a link for the title.
- Subheader – the toggle to enable/disable the display of the subheader text. When the option is enabled, the new “SubHeader” section with the settings appears in the Content tab. The text styles can be managed in the Style tab.
- Additional header – the toggle to enable/disable the display of the additional header. When the option is enabled, the new “Additional Header” section with the settings appears in the Content tab. The text styles can be managed in the Style tab.

### Subheader settings

The section is available if the option “Subheader” option is enabled. The block contains fields for text adding, options for the text position and adding a line.

Subheader settings of the Motionger widget

- Line – The toggle to enable/disable the display of the line in the subheader. The line style and placement can be managed in the style tab.
- Subheader bottom – The option allows you to enable the display of the header under the main title. When the toggle is disabled, the header is displayed above the main title.
- Text – Enter the subheader text of the current page or post.

### Additional Header settings

The section is available if the option “Advanced header” option is enabled. The block contains a field for text adding.

Text – Enter the text for the advanced header of the current page or post.

## Style tab

On the Motionger widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, gradients, and more.

#### Header

There are many options in the section to change the style of the header text and background to create your own design.

Text style options of the animated title

###### TEXT STYLE

- Color– specify the font color and opacity for the text of the current block using the color picker.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
- Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
- Alignment – manage title alignment (left, center, right) for desktop, tablet or mobile.

###### ANIMATED TEXT

- Color– specify the font color and opacity for the text of the current block using the color picker.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
- Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
- Auto-width – enable the option to adapt the width to the width of the word or specify your width.
- Margin – the setting allows managing the margin of the animated text in different units(px, em, %) for desktop, tablets or phones.
- Alignment – manage title alignment (left, center, right) for desktop, tablet or mobile.

###### BOX STYLE

- Background Type – this setting changes the background of the current section. You can choose a color, gradient, or background image.

Header Box Style of the Motionger

- Border – select one of the available border types (solid, double, dotted, dashed, groove) for the current block and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.

Border types of the Motionger

###### LINE STYLE

The section with line style settings is available if the line display is enabled in the Сontent tab.

- Position – select one of the line placement position: Before, After, Bottom or Before and After the text.
- Color – specify the font color and opacity for the text of the current block using the color picker.
- Width – specify the line width for all devices or for desktop, tablet or mobile separately.
- Height – specify the line height for all devices or for desktop, tablet or mobile separately.
- Spacing – specify the space between the text and the line for all devices or for desktop, tablet or mobile separately.

#### Subheader

The section with subheader style settings is available if the subheader is enabled in the Сontent tab.

- Color– specify the font color and opacity for the text of the current block using the color picker.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
- Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
- Alignment – manage title alignment (left, center, right) for desktop, tablet or mobile.
- Line Style – the section with line style settings is available if the line display is enabled in the Сontent tab.

#### Additional header

- Color– specify the font color and opacity for the text of the current block using the color picker.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
- Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
- Alignment – manage title alignment (left, center, right) for desktop, tablet or mobile.
- Transform origin – select one of the available positions of the transformed element.
- Rotate – specify the rotation angle of the element for all devices or for desktop, tablet or mobile separately.
- X Offset – specify the offset of the text along the x-axis
- Y Offset – specify the offset of the text along the y-axis

## Advanced Tab

The settings in the advanced tab Motionger widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

## Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

Update page in the Elementor

## Hosting for Elementor websites

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.