Getting started
The divi advanced person is a well-established module for divi lovers discovered by Diviflash. This module provides a range of content areas for images, typography, social icons & more ingredients. The advanced person module for divi most likely focuses on exhibiting team members in an informative way. A couple of advanced and drag & drop features are imported under this module. Let’s learn how effectively these features work and save time & effort. However, like any other divi module, the divi advanced person module attributes are divided into three categories,
+ Content Option
+ Design Option
+ Advanced Option
Divi Advanced Person Module Content Tab
The divi advanced person module Content Tab Considered is the first initiative to fabricate a divi person module. The content tab conveys several pro features dedicated to placing primary elements like images, social icons, name, role, description & layout into the module. Nevertheless, the link, background & admin label attributes are also available in this tab. So without further ado, let’s jump to know about all the functionalities.
Content
The content feature of the content tab is imported to add the name & role of the person. Also, a short description can be given here if it’s required.
Image
The image attribute is simply responsible for uploading an image to the container.
Social Icon
Implementing social icons is just a matter of one click under the social icon settings. This attribute lets you apply six different social platforms, including Facebook, Twitter, Linkedin, Instagram & Pinterest.
Layout Style
The divi advanced person module comes with three distinct stylish layouts imported in the layout style attribute. Each of the styles has its instinct demonstrated below.
- Style 1
Style 1 provides features like the enable alternative image, help icon over image & border animation. The alternative image feature allows you to add an extra image displayed over the existing image while hovering. On the contrary, you can apply the hover effect on the social icons with the enable icon over the image attribute. Finally, the border animation provides an effect on the image alongside a few settings to adjust the beauty. Remember, activating the Enable Alter Image setting take away the Enable Icon Over image setting.
- Style 2 & 3
Style 2 & 3 layout makes the module visualization a bit different than the Style 1 layout. For example, under the Style 2 & 3 layouts, the name, role, description & social icons come while hovering in different places on the image.
Animation Settings: When the layout style is selected as a “Style2 or Style3,” another option will appear, which is “Animation Settings.” You can choose the Animation Direction from the bunches of the animation directions list. You can also control the transition duration and transition-delay from the settings.
Link
A designer can easily take the audience to another page by providing a link on the Advanced Person Module. The Diviflash advanced person module is a well-planned module with every bit of customization setting that will be required while working.
Background
The Divi Advanced Person module background setting has multiple facilities for a better layout, such as background color, gradient color, image, and video features. And on top of these features, there are some settings to make each adjustment as you desire. Note, this background will apply to the whole module.
Admin Label
Admin Label of Divi Advanced Person Module provides the opportunity to modify the module name as you wanted. So, it doesn’t have to be the module’s actual name that generally shows on the wireframe view.
Divi Advanced Person Module Design Tab
The design tab of the divi advanced person module is dedicated to decorating all the ingredients deployed in the content tab. A range of advanced & unique features is listed in this tab that helps designers design each element with a gorgeous view. Such as the image & image wrapper, overlay, content, name, role, description, social wrapper, setting & color, and custom spacing are the most significant features among others. However, the designer has yet to discover many attributes that play a vital role in embellishing the module with perfection. So, let’s not elongate the description anymore; read the instruction below and learn all the functionalities in detail.
Image
The image attribute of the design tab is imported to modify the content image over several interactive effects. For example, designers have options to set an image scale & border corner rounding effect. Moreover, the image border style, width & color can be given an alluring look under the image feature. Nevertheless, this feature lets you apply several image filter effects like hue, saturation, brightness, contrast, invert, sepia, opacity & blur.
Image Wrapper
The image wrapper is an extraordinary attribute presented in the divi advanced person module. This feature focuses on embellishing the wrapper of the content image by changing its background, max-width, border style, width & color with a corner rounding effect. However, a designer gets surprised about learning the Z-index & image alignment setting of this feature. Therefore, you are allowed to define the stack order & alignment based on design requisition.
Overlay
The overlay setting of the divi advanced person module is mainly responsible for deploying the color gradient while hovering over the content. Thus, you get two distinct color effects while activating the Overlay Mode and even have the chance to fix the gradient direction.
Content
The content setting affects the entire content area, the name, role & description at once. Here, the content setting of the design tab helps designers change the content background, font-weight & style, content text color, size, letter spacing & line-height according to the requirement. This feature also allows defining the content Z-order value and border style, width & color alongside a corner rounding effect.
Name
The Name feature is imported to give an attractive look to the name typography. Making a difference in the name background, font-weight & style for a better look is just easy as increasing or decreasing the matrix of something. Modifying the text alignment, color, size, line spacing & height over the text-shadow effect is also a matter of clicking in this feature. Finally, you get yourself an option to decorate the text border by implementing a stylish border width & color along with a corner rounding effect.
Role
The range of dedicated functionalities under the name feature has also been imported into the role feature.
Description
The range of dedicated functionalities under the name feature has also been imported into the description feature.
Social Wrapper
The social wrapper feature applies only to the wrapping of social icons, which impacts all the social platforms at once. Under this setting, you can play with the social icon wrapping background, border style, width & color precisely. Also, a border corner rounding effect can be given here easily.
Social Setting
The social setting is a unique & responsive feature among others to amplify the beauty of social icons. Designers are authorized to apply a proper icon alignment, size, color & background under the social setting. Two different styles have been given here to modify the icon position, the vertical icon mode & full-width icon mode. Moreover, the border style, width & color can be adorned over a corner rounding effect beneath this setting. Remember, all the attributes you get here affect all social icons at the same time.
Social Color
The Social color feature is proved as a unique attribute of the divi advanced person module. All social icon colors and icon background colors are defined under social color attributes.
Custom Spacing
The Diviflash advanced person Custom Spacing feature doesn’t work like the divi default spacing attribute. However, it is considered the most prominent and crucial setting for defining a compatible distance between module ingredients. So let’s go deeper into this setting, and here you will discover two different spacing attributes.
- Wrapper spacing
The wrapper spacing attribute lets you provide the wrapper margin & padding on the image, content, text & social icons. Moreover, here, you have the expected wrapper margin & padding that hit the entire module.
- Content spacing
On the other hand, the Content spacing allows designers to put margin and padding in all the directions for the name, role, description, image, social icons, first & last social icons separately. Also, you are authorized to apply the margin & padding on the button.
Sizing
As a designer, you would love to control the advanced person module’s alignment, width, and height. Here, the sizing feature stands in your favor to increase or decrease your container’s width and height. You can even set a min or max height and width for the container.
Spacing
Divi makes the spacing setting a default feature for the whole module. Therefore, you will find two expected margins and padding settings that work the same for all Divi modules in this regard.
Border
The Border feature of the Diviflash Advanced Person module can provide you with a border corner rounding effect for the container. Also, you can customize the design by changing the border width, style, and color under it. However, don’t feel confused by just reading; try once and see it’s easier than you thought.
Box Shadow
This Box shadow affects the entire Divi Advanced person module and has six distinct shadow effect styles.
Filter
The filter feature is awe-inspiring and supportive, among other Divi default features. Under this unique function, you will achieve numerous color effects for the entire Divi advanced person module. The filter setting is responsible for adding effects like hue, saturation, brightness, contrast, opacity, blur, and suchlike to your module. So, increase or decrease the value of these effects as you want them to your design.
Transform
The transform feature of the Divi Advanced Person module provides you with five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on your person module will give you better control over the section.
Animation
Animation effect setting exists in all the Divi default modules. It has seven different effects and other options to adjust the beauty of the animated section.
Divi Advanced Person Module Advanced Tab
All you want to achieve is possible under the Content and Design tab, so take the pleasure of these features. However, the Advanced Tab of the divi advanced person module intends to quench the designer’s thirst to have direct control over the module. Designers can precisely play with each module element by implementing CSS ID & Classes and other Custom CSS codes. Further, The visibility, transitions, position, and scroll effects settings are included 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 divi advanced person module. You have access to all the sections to write down any CSS Code and 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 advanced person module on particular devices.
Transitions
Under the transition setting, you have features like Transition duration, Delay, and Curve Speed for better customization.
Position
Here you can take complete 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, you have the opportunity with the scroll effect setting. Under this setting, you get a Sticky position, Scroll Transform 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.
