The comments section of your blog posts — or pages — in WordPress lets you have vital discussions with shoppers and readers of your internet web site. There was once a time when the comments section of our favorite internet pages was once a place to hook up with one every other. With the gradual death of some social media platforms, many are turning once more to creating blogs. With this in ideas, we will use this opportunity to brighten our comments section.

In nowadays’s tutorial, we’re focusing on styling the commentary avatar in Divi. Alternatively, let’s take a look at one of the crucial other portions of Divi’s Feedback Module that we will style.

Portions of Divi’s Comments Module

Divi’s Comments Module has fairly some portions. One can use the module to each and every sing their own praises comments and submit comments. The module moreover shows what selection of comments have been submitted, along with the name and movie of the commentary submitter. Proper right here’s a take a look on the various portions of the module:

In order, proper right here’s what each numbered section corresponds to:

1. Identify of the commentary writer
2. The commentary itself
3. The avatar of the commentary writer
4. Metadata of the commentary (date, time posted and plenty of others.)
5. Solution button
6. Submit a commentary form

During the Design Tab of the Comments Module, you’ll see that we have many alternatives that we will use interchangeably to style the various aspects of the module.

Styling the Statement Avatar in Divi

During the Comments Module settings, we’ll be spending most of our time inside the Design and Complicated tab. We can be the usage of the built-in choices to place the framework for styling the commentary avatar in Divi. Shortly, we will use a few snippets of CSS to put across our vision to life. For this tutorial, we will be the usage of freebies which can be available inside the Divi Sources section of our blog. Relating to styling any side of your internet web site, it’s a very powerful to draw inspiration from the design that you just’ve created. That is serving to there to be cohesion for your artwork and causes you to build stronger brand awareness along side your audience.

You’ll have the ability to see how we plan on doing this at some point of the examples underneath:

First Example: Divi Stone Production facility

2nd Example: Divi Advertising and marketing marketing consultant

third Example: Space Care

Fourth Example: Divi NGO

fifth Example: Divi Wisdom Science

For each of the ones examples, we pull inspiration from assets and designs which can be already all over the construction template. By means of doing this we make sure that as we’re styling the commentary avatar in Divi, we’re nevertheless chatting with the full design of our decided on construction.

Let’s soar into the principle example!

Styling the Statement Avatar in Divi toes. Divi Stone Production facility

At first, it is important to apply the instructions in this weblog put up to acquire and arrange the Blog Put up Template for the Divi Stone Production facility Structure Pack.

Understanding Inspiration Quicker than Styling the Statement Avatar in Divi

A vital key in this tutorial is to develop into accustomed to drawing inspiration from a design and applying that to the styling all through a construction. In our case, we’ll be taking inspiration from one of the simplest ways that the featured image is styled. Let’s put across the equivalent thought to our Comments Avatar.

Open Comments Module Settings

Once your construction is installed, scroll down to the Comments module and open the settings.

Add Border to Avatar Image

Navigate to the Design tab. Click on on on the Image tab. Scroll proper all the way down to Image Border Varieties and select the principle icon for All Borders. Next, add an Image Border Width of 10px and an Image Border Color of #FFFFFF. We moreover need to keep the Image Border Style at Cast.

Image Settings:

• Image Border Varieties: All borders
• Image Border Width: 10px
• Image Border Color: #FFFFFF
• Image Border Style: Cast

Add Image Box Shadow

Add an Image Box Shadow to your avatar. Alter the Horizontal and Vertical Position to -10px.  Next, make the Shadow Color #000000.

Image Box Settings:

• Image Box Shadow: Shadow #4
• Box Shadow Horizontal Position: -10px
• Box Shadow Vertical Position: -10px
• Shadow Color: #000000

Add Custom designed CSS

Looking at our avatar as it stands now, it fairly overlaps the commentary body. We’re moreover missing a thinner border around the image. We’re going to be able to upload this in with CSS inside the Complicated tab of the Comments settings modal.

Navigate to the Complicated tab all over the Comments Module settings. Add the following snippets of CSS to the Statement Meta, Statement Content material subject matter, and Statement Avatar

Custom designed CSS

Statement Meta:

margin-left: 15px;

Statement Content material subject matter:

margin-left: 15px;

Statement Avatar:

border: 1px solid #000000;

A left margin is added to the commentary content material subject matter and meta so that the added border to the avatar doesn’t duvet the commentary text and meta knowledge. We add every other border to the commentary avatar to replicate the design that was once found out with the featured image.

With all that mentioned, let’s switch at once to example amount two with the Divi Marketing consultant Format Pack!

Example Two: Styling the Statement Avatar in Divi with the Divi Advertising and marketing marketing consultant Blog Put up Template

For our second example, we’ll be taking our inspiration for the commentary avatar from a design section that is used inside this construction pack.

Changing Avatar Shape with CSS Borders

At first, we’re going to scroll proper all the way down to the Comments Module and enter into the settings menu. Secondly, we’re going to navigate to the Design tab. During the Design tab, let’s click on on on the Image tab to start out making our border changes. At first, let’s make Rounded Corners on our avatar with a worth of 55px. This will likely now and again make our avatar a circle. Next, we’ll add a 2px, solid border in black.

Image Settings:

• Image Rounded Corners: 55px, all corners, comparable
• Image Border Varieties: All borders
• Image Border Width: 2px
• Image Border Color: #000000

Together with an Accent to Our Avatar

Now, we’re going to be able to upload a cute blue accent to our avatar. We can be the usage of the Box Shadow atmosphere to create a circle that’ll appear behind each avatar. Know the way this calls once more to the inspiration that we took from the image used all over the header. To take a look at this, we’ll keep on scrolling at some point of the Image tab till we get to the Image Box Shadow. Proper right here, we’re going to select the principle risk, which is a comfortable glow. Alternatively, we’re going to keep an eye on the settings to turn this proper right into a circle!

Box Shadow Settings:

• Image Box Shadow: Shadow #1
• Box Shadow Horizontal Position: -30px
• Box Shadow Vertical Position: -30px
• Box Shadow Blur Power: 0px
• Box Shadow Spread Power: -28px
• Shadow Color: #3093fb

Luckily, in this example, there was once no need to use any custom designed CSS! Our avatar was once styled completely the usage of settings found out natively all over the Divi Builder.

Divi Space Care: Our third Example of Styling the Avatar all over the Divi Comments Module

In our third example, we’ll be the usage of the Divi House Care Weblog Publish Format. Looking at the call-to-action section inside this construction, let’s imitate the orange and yellow packing containers for our comments avatar.

Shaping Our Comments Avatar with Rounded Corners

Using rounded corners will give our avatar a fascinating shape. Alternatively, we will highest observe rounded corners to the perfect left and height correct corners. Both a kind of will probably be receiving a radius of 25px. The bottom correct and bottom left corners will keep untouched with a radius of 0px. Make sure that you have unchecked the link icon all over the border-radius box. This will likely now and again allow us to produce other settings for each corner of our image.

Image Border Settings:

• Image Rounded Corners: 25 px 25px 0px 0px (clockwise, unlinked)
• Image Border Varieties: All borders

Together with a Border

Now, we’re going to be able to upload a border. This will likely now and again title to the Electronic mail Optin module inside the header of this Blog Put up Template.

Let’s notice something. After we’ve added our border settings, the border now overlaps over the commentary body along with the commentary writer and meta knowledge. We’re going to rectify this by the use of the usage of a few lines of CSS all over the Complicated tab of the module.

Custom designed CSS

Statement Meta:

margin-left: 15px;

Statement Content material subject matter:

margin-left: 15px;

The ones two simple lines of code help to be able to upload some breathing room spherical our avatar image… while moreover allowing us to be informed the comments clearly!

Styling the Statement Avatar in Divi toes. Divi NGO

For our fourth example, we’ll be the usage of the Divi NGO Weblog Publish Template. Perceive the styling of the avatar’s profile image. That’s what we’ll be emulating for the avatar inside our Statement Module.

Together with Rounded Corners to Our Avatar

Similar to a couple of of our previous examples, we’ll be the use of the use of Divi’s Rounded Corner choices to style our avatar. In our case, we’ll be making all the corners of this avatar 20px.

Image Settings:

• Image Rounded Corners: 20px (all corners, comparable)

Together with a Box Shadow

The second part of this styling is to be able to upload a solid, opaque box shadow behind our avatar. We’ll be the usage of the equivalent color for the reason that writer’s image, to stick our branding seamless all through this template. We’ll be the usage of the fourth box shadow risk, and the usage of the default Divi settings for this shadow.

Box Shadow Settings:

• Image Box Shadow: Shadow #4
• Box Shadow Horizontal Position: 10px
• Box Shadow Vertical Position: 10px
• Box Shadow Blur Power: 0px
• Box Shadow Spread Power: 0px
• Shadow Color: #347362

As a result of the web site of the shadow, we won’t be short of any custom designed CSS on this example each.

Final Example: Divi Wisdom Science Blog Structure

Our fifth and supreme example of styling the commentary avatar in Divi will probably be the usage of the Divi Knowledge Science Weblog Format Pack. As in previous examples, we’ll be drawing our inspiration from the styling of the featured image inside this construction pack.

Due to this fact, everyone knows that we’ll be together with a thick white border and a couple of box shadow to our Statement avatar.

Together with a Border to our Statement Avatar

This avatar will keep a sq., alternatively, we will be together with a border to it. Let’s pass ahead and scroll proper all the way down to the Image tab, and add a white border to our image.

Image Border Settings:

• Image Border Varieties: All borders
• Image Border Width: 10px
• Image Border Color: #000000
• Image Border Style: Cast

Together with Shadow to Our Avatar

In this tutorial moreover, we’ll be the usage of the default Divi Box Shadow atmosphere to be able to upload a shadow to our Statement avatar. We’ll be the usage of Box Shadow risk 3.

Box Shadow Settings:

• Image Box Shadow: Shadow #3
• Box Shadow Horizontal Position: 0px
• Box Shadow Vertical Position: 12px
• Box Shadow Blur Power: 18px
• Box Shadow Spread Power: -6px
• Shadow Color: rgba(0,0,0,0.3)

To stop our newly styled avatar from protective up our commentary knowledge, we’re going to be able to upload a few lines of CSS to clean our design up.

Custom designed CSS:

Statement Body:

margin-top: 50px;

Statement Meta:

margin-left: 15px;

Statement Content material subject matter:

margin-left: 15px;

Bringing it All Together

The commentary avatar is a small piece of a module that can be customized deeply with CSS and Divi’s native apparatus. Don’t omit to look to your design to draw inspiration from. Via this inspiration, endless designs can be created that speak to your brand!

The publish 5 Tactics to Taste the Avatar in Divi’s Feedback Module seemed first on Sublime Subject matters Weblog.

WordPress Maintenance Plans | WordPress Hosting

read more