With over 15 effects to choose from, you can now create stunning interactive content that converts. # Content Options **+ Flipbox Item** This is where you add content, images and icon to your Flipbox Module. Just like a Blurb Module but with Front and Back Animation to show the front and back of an element when you hover. Clicking “add new item” will open a completely new list of design settings (including Content, Design, Advanced) for your new Flipbox. See below for individual Flipbox settings. After you add your first image, you will see a gray bar appear with the title of your Flipbox shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the image. Note : Create only two items because one is identify as Front and the other as Back. Design Options Sizing --Height By default, the flipbox is set at 200px. You can set to other height to suit the content of your flipbox. This is one of the most important part when using flipbox. If you content is too long and doesn’t look right. Adjust your height. Animation This is where you can change the flipbox animation effect. Trigger Animation On Choose a trigger animation for the Flipbox here. You can either select "Hover" or "Click". When you'll select Click the Flipbox will flip on Click instead of on hover. Click On This option will appear once you'll select the Trigger method as "Click". And from here you can choose If you want to flip the Flipbox on Whole Flipbox click or Button click. Flipbox Type There are 5 types of Flipbox Effect to choose from. Flip Slide Zoom In Zoom Out Fade See Flipbox Demo here . Flip Animation There are 4 types of Flip Effect to choose from. "Flip Left" "Flip Right" "Flip Up" "Flip Down" 3D Effect This option will only show up when you choose Flipbox Effect as Flip And this will create a 3D effect to your Flipbox. Slide Animation This option will only show up when you choose Flipbox Effect as Slide There are 4 types of Slide Effect to choose from. "Slide Left" , "Slide Right" , "Slide Up" and "Slide Down" . Zoom In Animation This will have a zoom in animation on your flipbox. Zoom Out Animation This option will only show up when you choose Flipbox Effect as Zoom Out There are 5 types of Zoom Out Effect to choose from. Zoom Out Zoom Out Up Zoom Out Down Zoom Out Left * Zoom Out Right Animation Speed (in s) This will control the speed animation of the flipbox. Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices. Flipbox Item Content Title Give a title to your Flipbox that will appear above the body text of the Flipbox in a bold text style. Sub Title If you would like to use a sub title, add it here. Your sub title will appear below your title in a small font. Content This field is where you can enter the body content of your Flipbox. Flipbox Text will also span the full width of your column. Use Icon When using Flipbox, 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 Flipbox. 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 Flipbox image is determined by the aspect ratio of your original image, so making all of your Flipbox images the same height is a good idea if you are placing them side by side. Button Button Text Input your desired button text. Button URL Input the destination URL for your button. URL Opens Here you can choose whether or not your link opens in a new window. Flipbox Item Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. Image & Icon Icon Color If you chose “yes” for the “Use Icon” setting, then this option will appear. This option allows you to customize the color of your Icon. By default, the icons are set to your theme accent color. Circle Icon If you chose “yes” for the “Use Icon” setting, then this option will appear. This options allows you to place your icon within a colored circle. If you select “yes” for this setting, then you will be presented with additional options for customizing your circle color and border. Circle Color If you chose “yes” for the “Circle Icon” setting, then this option will appear. Here you can pick a color to use for your circle. This color is independent from your Icon color selected earlier. You icon, in it’s color, will appear inside this a circle with the color you select here. Show Circle Border If you chose “yes” for the “Circle Icon” setting, then this option will appear. This option allows you to turn on a border for your circle. If selected, an additional option will appear to select your border color. Circle Border Color If you chose “yes” for the “Show Circle Border” setting, then this option will appear. Here you can adjust the color of the circle border. Use Icon Font Size If enabled, you can input a custom size for the icon that is displayed. Sizing Here you can change the width of the image. Width Applying a max width value here will limit the width of the Flipbox image. This only affects Flipbox that are not in icon mode. Spacing Custom Padding Padding is the space added inside of your flipbox item, between the edge of the file and its internal elements. You can add custom padding values to any of the flipbox item’s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields. Flipbox Item Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

The Supreme Image allows you to transform the image using 3D transformation. Rotate it like the way you always wanted without coding. Content Options Image Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image. Link Open in Lightbox Here you can choose whether or not your image will open in a Lightbox when clicked. If enabled, then your image will “zoom in” to their full size when clicked inside a modal window. This is a great feature for portfolios. Link URL Place a valid web URL in this field to turn your Image into a link. Leaving this field blank will simply leave your image as a static element. Use as Video Popup Enable this option if you want to show a video in overlay when user clicks on the Image. You'll then prompted to enter the URL of the Video you want to show in the overlay Transform & Rotation Perspective The perspective CSS property gives an element a 3D-space. The strength of the effect is determined by the value. Rotate Y Defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it. Rotate X Defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it. Rotate Z Defines a transformation that rotates an element around the z-axis without deforming it. 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. Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. Overlay Image Overlay If enabled, an overlay color and icon will be displayed when a visitors hovers over the image. Overlay Color Here define a color for the Overlay. Use Icon Enable this option if you also want to show an icon in the overlay of image when hover. Overlay Icon Color Here you can define a custom color for the overlay icon Icon Picker Select an Icon from Divi Icon library here. Show overlay on Hover Enabling this option will only show the Overlay when hover to image. You can disbale this option if you want to always show the Overlay. Overlay Rounded Corners and Border You can then add Corner Radius and Border to the overlay if you like Alignment Image Alignment Here you choose which direction your image floats within the column. You can float the image left, right or keep it centered. Always Center Image On Mobile Often times small images are more pleasing to the eye on mobile devices when they are centered. As columns break down, images that were aligned the left or right in smaller columns become orphaned when the columns break down and become 100% width. Enabling this column with force images to align to the center of the column on mobile without affecting the image alignment on desktop computers. Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Display your WordPress menu and design it in whatever way you want. Use it for Footer or Sidebar. Content Options Menu Title This field is where you can enter the title of your menu. Menu Select a menu that should be used in the module. You can create new menus using the Appearances > Menus page in your WordPress Dashboard. Each time you create a new menu, the menu will be selectable in this dropdown menu. Collapse Sub Menu Enable this Option If you'd like to collapse the Sub Menu and that will reveal when you click on the Parent Menu Item. An example how we use the menu module with the Footer Template to design our Footer 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. Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. Layout Menu Layout Currently the available Menu Layout is vertical. Title Here you can style the Title text of the Menu Module Bottom Gap Add some spacing under the Title text of the Module. And you can then change the color, font, weight and more of the Title text. Menu Menu Link Color Here you can choose the color of the Menu Items Active Link Color Change the Active Menu Link Color here. Menu Link Active Color Change the color of the Active Menu Item here. Menu Link Visited Color Change the color of the Menu Item a user already visited. When a user opens a link and come back to that page where this Menu Module is added, the color of that Menu item the user just visited will be changed. Space Between Add some space between Menu Items here Left Spacing Add some spacing on the Left side of the Menu Items. List Style Type Here you can change the List style of the Menu Items to Disc, Circle, Decimal and Square. You can choose None if you don't want List style. List Style Position You can either choose Inside or Outside means If you've got longer text in the Menu item the text will go below the Disc (or any type you choose) and If you'll choose Outside option it will not show the text below the Disc the text will be shown below the Menu Item text. List style Color Change the color of the List bullets here. And then you play around with changing Font, size, weight and more of the Menu Items. Sub Menu If there's a sub menu in the Menu you've added, then you can style those submenus here. Left Spacing Add some spacing on Left of of the Sub Menu Item(s). And then you play around with changing Font, size, weight and more of the Sub Menu Items. Sub Menu Collapse From here you'll be able to style the Sub Menu Collapse Icon easily. Arrow Color Here you'll be able to change the Icon color. Arrow Background Color You can change the Arrow Background color from here. Arrow Gap Change the Arrow gap between the Menu Item and Arrow Icon. Arrow Padding You can add Padding to the Icon from here, Useful If you've added Background to the Icon. Arrow Font Size You can change the Icon font size from here. Arrow Border, Border Radius and Box Shadow And else you can add border radius, boc shadow and Border to the Icon easily. Animation Use Link Hover Animation Enable this option to add a Hover animation to Menu Items. Animation Type Change the Type of the animation of the Animation here. Currently there's only Underline available we'll be adding more in upcoming updates. Underline Animation Here you can change the direction of the Underline Animation. You can change the direction of the Underline from 3 different types: Left to Right Right to Left Center Out Link Color Change the color of the Underline here. Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Recently added - Divi Supreme - FAQs and Documentation

Divi Icon List Module

Divi Mask Text Module

Divi Animated Gradient Text Module

Divi Image Hotspots Module

Divi Scroll Image Module

Divi Dual Heading Module

Divi Shuffle Letters Module

Divi Supreme Button Module

Divi Flipbox Module

Divi Gradient Text Module

Divi Glitch Text Module

Divi Typing Effect Module

Divi Text Badges Module

Divi Text Divider Module

Divi Icon Divider Module

Divi Image Module

Before and After Image Module images are not loading correctly

Divi Tilt Image Module

Divi Menu Module

Divi Embed Google Map Module