In your Divi visual builder, click on the plus button, to add a module just as you do with any default module. The modules included with flexstyle starts with fs as prefix, so you can write the prefix in the search field to find them quickly.

t

Module Settings

All Modules are fully compatible with visual builder, so you can adjust the settings them easily, but if you still wants to know what each setting do, please continue reading.

Adjusting Module Settings

Particles Button

Particles Button looks equal to any regular Divi button, but it disintegrate in particles when users click it. It has 10 different animated effects.

 

Specific Settings
  • Button Text: This field is mandatory, and it shows the content inside the button.
  • Button Url: The button destination, it could be an url, an anchor or you can leave it empty, but it will display the animation without any destiny.
  • Button Target: Display the button destination in the same window or a new tab/window.
  • Effect: The animation used to disintegrate the button.
  • Particles Color: You can choose any color, but using the same color as the button background, will assure you a nice result.
  • Other Settings: Button design must be adjusted as any Divi regular button. Click in the design tab, button toggle, custom styles and adjust the desired values.

Please notice: If the button URL is empty, but the module link URL is filled, the button will use this value to achieve the final destiny.

Animated Title

Animated Title display any kind of title (H1 -H6) with an animation effect that could be displayed in a loop or triggered on scroll.

 

Specific Settings
  • Heading: Title HTML tag. Lower numbers are used to important titles.
  • Title: Main title text.
  • Style: The animation used on the title. You can choose between 10 different effects. To stylize the title, you must do it in the design tab, under the heading text toggle.
  • Loop: Display the title animation infinitely or just once.
  • Launch: You can choose between display the title permanently or hide the title until the users scroll down in the page and reach the title position. I recommend the "always present" option if title are be present in page initial load, and the scroll trigger option when titles are out of this initial screen load.
  • Orientation: You can choose between display the animation when the titles goes in and goes out, or only the first one.

 

Cube

Cube is a carousel kind that display sides transitions using modern css, making a simulation that looks as a cube.
Each side of the cube must be added with a child item using the wysiwyg editor. (more info at bottom)

 

Specific Settings
  • Rotation: It will rotate the sides of the cube from left to right or vice versa.
  • Pause on mouse hover: stops the cube rotation temporarily while the mouse is over it.
  • speed: the time amount (expressed in milliseconds 1000ms = 1s) the cube takes to rotate from one side to another one.
Adding Cube Sides

To add a cube side, you must do it inside the module child items, like the image below

All the Cube side content must be added inside the editor and you may treat each cube item as a regular text module, so each adjustment like module backgrounds, text sizes, images, etc...it will be part of each cube side.

 

The identifier field is used to disntiguish each child element in the main cube module.

 

To stylize it, just do it adjusting settings in the design tab.

Oridomi

Oridomi is a paper effect applied to the content created with the Tinymce Editor or optionally to the premade overlay box

 

Specific Settings
  • Apply the effect to: This option lets you choose the target of the effect. Editor Content is default. The effect will be applied to the content created with tinymce editor. If you choose the premade overlay, you will see new settings to create the the overlay content.
  • Overlay H3 title : The Overlay main title. to adjust design settings, click on the Design tab, titles and select the H3 option.
  • Overlay H6 Subtitle : The Overlay subtitle will be displayed just below the title. to adjust design settings, click on the Design tab, titles and select the H6 option.
  • Main image & Overlay Background Color : This two options will define the overlay background. If you use an image, the background color will not be displayed.
  • Initial State : This is the main effect option and it will be applied on page load. 
  • Initial Angle: A value to determine where the content must be oriented and how strong must be the effect. negative values will change the orientation
  • Initial State : This is the main effect option and it will be applied on page load. 
  • Scroll State: The effect to apply when users scrolls down and the oridomi element reaches the middle of the screen. 
  • Panels: Parts Number that will compose the paper effect.

 

Baraja

Display content boxes as deck of cards that can be triggered in page load, scroll or with a button.

Specific Settings
  • Trigger : This option lets you choose how the effect will be triggered . Scroll option will be triggered when users scrolls down in the page and the content was reached the middle of the screen. Button option will display options to add a button and to stylelize it, you must click on the design tab and click on button settings.
Adding Cards

To add a card, you must do it inside the module child items, like the image below

All the Card content must be added inside the editor and you may treat each card item as a regular text module, so each adjustment like module backgrounds, text sizes, images, etc...it will be part of each card.

 

The identifier field is used to disntiguish each child element in the main cube module.

 

To stylize it, just do it adjusting settings in the design tab.

Rating

Display highly customizable ratings in your site. Different styles such as stars, bars, pill, movie style.

Adding Values

The rating scale it will depend of the number of values it was added it. So, if you want to display a rating scale from 1 to 10, you must insert ten fields with some content inside it. Then, if the rating es 3/10, the rating selector must have the same value of the third item. In the image, I did an scale of three values, i puted b in the second value and i indicated to the rating selector the value to reach in the scale, so I achieved a rating of 2 in a scale of 3. You can use any value in the scale and selector.
Please notice, the Vertical Bar counts the values from bottom to top, si if you have 5 items and you want to display a rating of 3/5, the value must coincide with the third element from bottom to top.

Specific Settings
  • Style: The rating style. Depending on this, some fields will show and some others won't.
  • Active Background Color: This color will fill all the values that represent the current rating.
  • Inactive Background Color: This color will fill all the fields that represent the rating values that aren't part of the current rating.
  • Display Current Rating: Display the value used in the current rating.
  • Current Rating Color: Color of previous value.
  • Rating Values Size: Rating Size.
  • Alignment: Rating Alignment
  • Inner values Color: Only in pill style. The color of the values inside the pill.