Getting started
Divi tilt card module is considered a creative invention of the Diviflash plugin in Divi nation. It’s been made from an amazing combination of tilt hover effects and animation effects. Several interesting and fancy customization options, such as content floating, multiple background effects, parallax effect, and custom spacing features, exist in this module. Unlike any other Divi modules, the Diviflash tilt card module’s features are separated into 3 categories,
+ Content Option
+ Design Option
+ Advanced Option
Divi Tilt Card Module Content Option
The Tilt card content feature of Diviflash has various distinct attributes that allow designers to formulate an attractive website. Included options are content, title, image & icon, button, tilt settings, and so on. So, today we will take a tour of every feature of the Content option to know how these can help designers for their betterment.
Content
The content attribute is a subcategory of the primary Content feature along with two prominent facilities. Providing a title to the container is the first one and giving a content text is the second one benefits of it. However, it’s a basic but key feature for the container, when to add a short description.
Image & Icon Setting
The image & Icon setting of Diviflash allows designers to achieve the desired look by using pictures or icons in the tilt card module. However, you have to go for one, whether the Image or icon option. Now, activating the Use Icon option will display a few other functions for an exclusive design. Such as icon list, color, size, alignment, background, and icon circle mode. So, if you are just a novice in web designing, you might be able to approach a specialist for this particular setting.
Button
Divi tilt card module provides the button option to hunt down and make the visitors a better prospect instantly. Button setting boosts the audience’s curiosity and makes them convinced to click for further information. The button setting allows the user to put a button text and URL, and a URL opens in a new tab option.
Tilt Setting
One of the core attributes of the Diviflash tilt card is the tilt setting. This pro feature is responsible for an alluring tilt animation effect on a section. The Tilt effect of the diviflash plugin has various modification options that adjust the view during decoration. Now get the knowledge about the features, which are demonstrated below.
Reverse the Tilt Direction Effect
In the default setting, you will achieve the tilt effect moving forward while hovering. In contrast, if you trigger the Reverse tilt direction setting, the tilt animation will make a backward movement while hovering over the container.
Max Tilt Rotation
Max Tilt Rotation is an animation that identifies the slope proportion of the container and also fixes a certain value for the tilt rotation effect. (The numeric value is in Degree)
Transform Perspective
The Transform Perspective animation transforms an element into a 3D shape by interrupting the distance between the Z plane and the user. The lower the value of the perspective option the more intensive the 3D effect you get.
Glare Effect
The Glare is some kind of illusion that reduces the range of luminance ramps in the module. The Tilt setting permits designers to provide a Glare effect on the content so that visitors observe the unique view on hovering. Moreover, turning on the glare effect will give you the option to adjust the glare opacity.
Card Scale Effect
Card Scale setting is to give the content a small or large appearance while hovering. Increasing the Card Seale Effect will amplify the tilt card size and decreasing the effect will make it smaller each time of hovering.
Speed
The speed of the Diviflash tilt card fixes the movement swiftness ratio. If the value of the tilt speed setting surge, the mobility of the card will increase. And the opposite happens if the value gets decreased.
Full Page Listening
Enabling this feature for a particular tilt card will force that card to move all along with the cursor. In short, wherever the visitors put their mouse cursor the tilt card listens and stirs round the clock.
Content Floating
Divi tilt card module has a content floating function that helps to give your tilt card a 3D animated view. Under this content floating setting has two different CSS properties “Translate Z and Scale” to have control over the setting. Translate Z allows you to transform Z-axis independently. While the scale option gives you the right to make the title and text of a tilt card smaller or bigger.
Link
A designer can easily take the audience to another page simply by providing a link on the tilt card. Diviflash tilt card is a well-planned module with every customization settings that will be required while working.
Background
Background setting has multiple facilities to implement for a better layout, such as background color, gradient color, image, and video features. And top of these features there are few settings to make each adjustment as you desired.
Admin Label
Admin Label of Divi tilt card provides the opportunity to customize the module name as you desire. So, it doesn’t have to be the module’s actual name that generally shows on the wireframe view.
Divi Tilt Card Module Design Options
The design option of the Diviflash tilt card module is an aggregation of exceptional and core features. In this section, designers get the most flexibility to make a maximum decorative outline for a website. Design setting has features like image style, title font, content font, button style, custom spacing, border shadow, animation, and suchlike. Now let’s get to know all the functions in detail.
Image Style
Image style is an exclusive setting of the Divflash tilt card module to formulate the picture into an eye-catchy look. Beneath this setting, several interesting features are available, and for the adjustment, designers have more options on their hands. For instance, image alignment, image full-width view, max-width, image corner rounding, image border, and box Shadow functions. However, you may think, it sounds so tough but trying once will give you the pleasure of learning.
Title Font
Providing a title never concludes your task as a designer; making the title alluring is also a part of your duty. Here, the Diviflash designing option gives the title font setting to make the title as attractive as it should be. In this setting, various functions like title font, title text style, weight, size, color, and alignment are applied. Additionally, the title letter spacing and title line-height determiner are added to the setting. In short, you have several ways to work on every tiny element for a better website design.
Content Font
Each and every option that is achievable in the Title Font Setting is also included in the Content Font setting to design your content.
Button
The button option of the tilt card design module allows you to fix a proper button alignment, button background color, image, and color gradient. Along with that, button font and text decoration are also possible under the Button setting. Moreover, you get various common facilities as you get from other settings. For instance, the button corner rounding, border decoration, and shadow embellishment functions.
Custom Spacing
Custom spacing is considered a prominent feature of the Diviflash tilt card module. If you go further down to this setting, you will discover two different categories of customization features; demonstrated below.
Wrapper spacing
Wrapper spacing helps designers to put margins and padding over the container of image, button, and text. In addition, you can add wrapper margin padding to the whole container.
Content spacing
On the other hand, Content spacing allows designers to put margin and padding in all the directions for the icon, image, title, content text, and button separately.
Sizing
As a designer, you would love to have control over the alignment, width, and height for a particular tilt card; right? So, the sizing feature stands in your favor to increase or decrease your container’s width and height. Even you can set a min or max height and width of the tilt card.
Spacing
The spacing setting is provided by Divi as a default feature for the whole module. Under this, you will find two essential margin and padding options that are also given at the bottom of the custom Spacing setting.
Border
The Border feature of the Diviflash tilt card module can give you a border corner rounding effect for the whole tilt card module. Also, you can customize the design by changing the border width, style, and color with it. Nevertheless, don’t feel confused by just reading; try once and see it’s easier than you thought.
Box Shadow
This Box shadow has an effect on the whole Divi tilt card module and it has six distinct shadow effect styles.
Animation
Animation effect setting exists in all the Divi default modules. Animation has seven different types of effects and other options to adjust the animated design section with the original view.
Divi Tilt Card Module Advanced Option
All you want to achieve is possible under the Content and Design tab, so take the convenience as much as you can. However, Divi Tilt Card Module Advanced tab intends to quench the designer’s thirst to have direct control over the module. Designers can precisely play with each tilt card module element by implementing CSS ID & Classes and other Custom CSS code. Further, The visibility, transitions, position, and scroll effects settings are included here to work fluently.
CSS ID & Classes
CSS ID: The only purpose of the CSS ID section is to identify the ingredient separately while linking, scripting, or to style the module.
CSS Class: Assign any number of CSS classes to the element, separated by spaces, which can be used to assign custom CSS style from within your child’s theme or from Divi’s custom CSS inputs.
Custom CSS
The Custom CSS section has three distinct CSS implementing areas in the tilt card module. You have access to all the sections for writing down any CSS Code and to target any particular section. Also, you have those spaces indicating as Before, Main Element, and After sections.
Visibility
The visibility option of the advanced setting offers designers to conceal the tilt card on particular devices.
Transitions
You have features like Transition duration, Delay, and Curve Speed for better customization under the transition setting.
Position
Here you can take full control over the relative, absolute, and fixed position. This option is also available in every Divi module and works almost the same for all.
Scroll Effects
If you want to provide a scroll effect to your module, here you have the opportunity with the scroll effect setting. Under this setting, you get Sticky position, scroll effects, enable vertical motion, and motion effect trigger functions.
NOTE:
Mobile: Any setting that has a mobile icon will allow you to customize according to devices. You can select different settings for desktop, tablet & Mobile.
Mouse: A mouse pointer in the setting will allow you to set a hover effect on this element.
