How it Works
In the Divi Visual Builder, click on the plus button to add a Flexstyle module just like youwould any default Divi module. All Flexstyle modules are labeled with the prefix “FS” making it easy to enter the prefix in the search field to find Flexstyle modules quickly.
All Flexstyle Modules are fully compatible with the Divi Visual Builder so you can easily adjust their settngs. But, if you’d like to learn more about the settngs for each module, please continue reading.
Adjusting Module Settings
Particles Button looks like a regular Divi button but disintegrates into
particles when a user clicks it. Choose between 10 different animated effects to apply to your buttons and add excitement to your website.
- Button Text: This field is mandatory, and provides reference for what’s 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: Displays the button destination in the same window or a new tab/window.
- Effect: Assigns the desired animation effect you want to use to disintegrate the button.
- Particles Color: You can choose any color, but using the same color as the button’s background color will assure you get a nice result.
- Other Settings: Button design can be adjusted like a regular Divi button. Click in the design tab, button toggle, and custom styles to adjust the desired values.
*Please note: If the button URL is empty, but the module link URL is filled, the button will assign the module link value to fulfill the link destination.
Animated Title can be used with any kind of title (H1-H6) to display your choice of 10 different animated effects. Each effect can be displayed as a loop or triggered on scroll.
- Heading: The HTML Title tag. Lower numbers represent more important titles.
- Title: The main title text.
- Style: Choose the animation you want to use on the title. You can choose between 10 different effects. In order to apply design styles to the title, use the design tab under the heading text toggle.
- Loop: Choose to display the title animation infinitely or just once.
- Launch: Choose to display the title permanently, or keep the title hidden until the user scrolls down thepage and reaches the title position. *Pro tip: We recommend using the “always present” option if the title is visible on the page’s initial load, otherwise the scroll trigger option or always present option can be assigned
for any title that’s not visible on the initial page load.
- Orientation: Choose the option to display the animation when the title goes in and out, or limit the animation to only the first one.
Cube is a carousel-like module that uses modern css to display content that simulates into a rotating cube. Each side of the cube must be added individually within a separate child item using the wysiwyg editor. (*see screenshot below)
- Rotation: Choose to rotate the sides of the cube from left to right or vice versa.
- Pause on mouse hover: Stops the rotation of the cube temporarily on mouse hover.
- Speed: Choose how long of time the cube takes to rotate from one side to another (expressed in milliseconds 1000ms = 1s).
Adding Cube Sides
Each cube side must be added individually within a separate module child item. Please note the example below of a 6 sided cube where each side has been numbered in the identifier field and assigned to it’s own module child item.
All content for each side of the Cube must be added using the editor. Each cube item works like a regular text module, so every adjustment such as module backgrounds, text size, images, etc, will be part of each cube side.
Stylize the Cube sides by adjusting the desired settings from within the design tab.
Ordomi applies a paper effect to content created with the Tinymce Editor or to the premade overlay box.
- Apply the effect to: This option lets you choose which target the effect gets applied to. By default, the effect is targeted to Editor Content and will be applied to any content you create with tinymce editor. Instead, if you choose to assign the effect to the premade overlay, you will see new settings that will allow you to create the overlay content.
- Overlay H3 title : This is the Overlay main title. To adjust design setting, click the Design tab, choose titles,then select the H3 option.
- Overlay H6 Subtitle : The overlay subtitle will be displayed just below the title. To adjust design setting, click the Design tab, choose titles, then select the H6 option.
- Main image & Overlay Background Color : These are the two options you can assign to the overlay background. Please note: if you choose to use an image, the background color will not be displayed.
- Initial State : This is the main effect option and will be applied on page load.
- Initial Angle: Assign a value to determine where the content will be oriented and how strong of an effect you want. Negative values will change the orientation.
- Initial State : This is the main effect option and it will be applied on page load.
- Scroll State: Choose which effect to apply when the user scrolls down and the Oridomi element reaches the middle of the screen.
- Panels: Assign the total number of parts/folds you want to use to create the paper effect.
Turn any content box into a deck of cards that can be triggered on page load, on scroll, or even with a button.
- Trigger : Choose how the effect will be triggered. The Scroll option will be triggered when the user scrolls down the page and the content reaches the middle of the screen. The Button option will allow you to add a button that you can stylize in the design tab by choosing button settings.
Each Card must be added individually within a separate module child item. Please note the example below of 6 Cards where each Card has been numbered in the identifier field and assigned to it’s own module child item.
All content for each Card must be added using the editor. Each Card item works like a regular text module, so every adjustment such as module backgrounds, text size, images, etc, will be part of each card.
Stylize the Cards by adjusting the desired settings from within the design tab.
Display highly customizable ratings on your site. Choose between different styles such as: stars, bars, pills, and even a movie style.
The rating scale will depend on what value you assign it. So, if you want to display a rating scale from 1 to 10, you must insert 10 individual fields, each containing an assigned value. Then, let’s say you want to make the rating 3/10, in order to achieve this, the rating selector would need to match the same value assigned to the third item.
Although you can assign any value to the scale and selector, in the example below we assigned three letter values to the rating scale. Then, assigned the “B” to the rating selector resulting in a total rating of 2 out of 3 items in the rating scale.
Please note: The Vertical Bar style counts values from the bottom to top. So, if you assigned 5 items to the rating values, and wanted to display a final rating of 3/5, the value you would assign to the rating selector has to coincide with the third element up starting from the bottom.
- Style: The rating style. Depending on your choice of style, some fields will show and other’s 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 for the rating values that are not 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: Choose how the ratings are aligned.
- Inner values Color: Only applies to the Pill style and assigns a color to the value inside the pill.