5 Ways to Style the Avatar in Divi’s Comments Module

by | Dec 27, 2022 | Etcetera | 0 comments

The feedback phase of your weblog posts — or pages — in WordPress lets you have significant discussions with customers and readers of your web page. There was once a time when the feedback phase of our favourite web pages was once a spot to hook up with one some other. With the sluggish dying of some social media platforms, many are turning again to making blogs. With this in thoughts, we will be able to use this chance to embellish our feedback phase.

In as of late’s educational, we’re specializing in styling the remark avatar in Divi. Alternatively, let’s check out probably the most different components of Divi’s Comments Module that we will be able to taste.

Components of Divi’s Feedback Module

Divi’s Feedback Module has slightly some components. One can use the module to each show off feedback and put up feedback. The module additionally displays what number of feedback had been submitted, in conjunction with the identify and picture of the remark submitter. Right here’s a have a look at the quite a lot of components of the module:

A breakdown of the Divi Comments Module and its various components

So as, right here’s what each and every numbered phase corresponds to:

  1. Title of the remark writer
  2. The remark itself
  3. The avatar of the remark writer
  4. Metadata of the remark (date, time posted and many others.)
  5. Answer button
  6. Put up a remark shape

Inside the Design Tab of the Feedback Module, you’ll see that we’ve got many choices that we will be able to use interchangeably to taste the quite a lot of facets of the module.

Settings within the Comments Module Design Tab

Styling the Remark Avatar in Divi

Inside the Feedback Module settings, we’ll be spending maximum of our time within the Design and Complicated tab. We can be the use of the integrated options to put the framework for styling the remark avatar in Divi. Later on, we can use a couple of snippets of CSS to carry our imaginative and prescient to existence. For this educational, we can be the use of freebies which are to be had within the Divi Resources phase of our weblog. Relating to styling any side of your web page, it’s crucial to attract inspiration from the design that you simply’ve created. This is helping there to be brotherly love for your paintings and reasons you to construct more potent emblem consciousness together with your target audience.

You’ll see how we plan on doing this in the course of the examples underneath:

First Instance: Divi Stone Manufacturing facility

Divi Stone Factory Blog Layout with Comments Avatar Styled

2nd Instance: Divi Advisor

Divi Consultant Blog Layout with Comments Avatar Styled

3rd Instance: House Care

Divi Home Care Blog Layout with Comments Avatar Styled

Fourth Instance: Divi NGO

Divi NGO Blog Layout with Comments Avatar Styled

5th Instance: Divi Knowledge Science

Divi Data Science Blog Layout with Comments Avatar Styled

For each and every of those examples, we pull inspiration from property and designs which are already throughout the structure template. Through doing this we make certain that as we’re styling the remark avatar in Divi, we’re nonetheless talking to the total design of our selected structure.

Let’s leap into the primary instance!

Styling the Remark Avatar in Divi feet. Divi Stone Manufacturing facility

At first, it is important to observe the directions in this blog post to obtain and set up the Weblog Publish Template for the Divi Stone Manufacturing facility Format Pack.

See also  Understanding Core Web Vitals: How to Monitor them & their Impact on your Website

Figuring out Inspiration Sooner than Styling the Remark Avatar in Divi

A significant key on this educational is to grow to be accustomed to drawing inspiration from a design and making use of that to the styling all the way through a structure. In our case, we’ll be taking inspiration from the best way that the featured symbol is styled. Let’s carry the similar thought to our Feedback Avatar.

Divi Stone Factory comment avatar design inspiration from featured image styling

Open Feedback Module Settings

As soon as your structure is put in, scroll down to the Feedback module and open the settings.

Entering the comments module settings menu

Upload Border to Avatar Symbol

Navigate to the Design tab. Click on at the Symbol tab. Scroll all the way down to Symbol Border Types and select the primary icon for All Borders. Subsequent, upload an Symbol Border Width of 10px and an Symbol Border Colour of #FFFFFF. We additionally need to stay the Symbol Border Taste at Cast.

Adding a border to the comments avatar

Symbol Settings:

  • Symbol Border Types: All borders
  • Symbol Border Width: 10px
  • Symbol Border Colour: #FFFFFF
  • Symbol Border Taste: Cast

Upload Symbol Field Shadow

Upload an Symbol Field Shadow on your avatar. Alter the Horizontal and Vertical Place to -10px.  Subsequent, make the Shadow Colour #000000.

Avatar box shadow settings

Symbol Field Settings:

  • Symbol Field Shadow: Shadow #4
  • Field Shadow Horizontal Place: -10px
  • Field Shadow Vertical Place: -10px
  • Shadow Colour: #000000

Upload Customized CSS

Having a look at our avatar because it stands now, it moderately overlaps the remark frame. We’re additionally lacking a thinner border across the symbol. We’re going so as to add this in with CSS within the Complicated tab of the Feedback settings modal.

Finishing touches for comment avatar

Navigate to the Complicated tab throughout the Feedback Module settings. Upload the next snippets of CSS to the Remark Meta, Remark Content material, and Remark Avatar

Customized CSS

Remark Meta:

margin-left: 15px;

Remark Content material:

margin-left: 15px;

Remark Avatar:

border: 1px cast #000000;

Custom CSS for the Stone Factory Comment Module's Avatar

A left margin is added to the remark content material and meta in order that the added border to the avatar doesn’t quilt the remark textual content and meta knowledge. We upload some other border to the remark avatar to duplicate the design that was once discovered with the featured symbol.

With all that mentioned, let’s transfer directly to instance quantity two with the Divi Consultant Layout Pack!

Instance Two: Styling the Remark Avatar in Divi with the Divi Advisor Weblog Publish Template

For our 2nd instance, we’ll be taking our inspiration for the remark avatar from a design component this is used inside this structure pack.

Design inspiration within the Divi Consultant Layout Pack

Converting Avatar Form with CSS Borders

At first, we’re going to scroll all the way down to the Feedback Module and input into the settings menu. Secondly, we’re going to navigate to the Design tab. Inside the Design tab, let’s click on at the Symbol tab to begin making our border adjustments. At first, let’s make Rounded Corners on our avatar with a price of 55px. This may make our avatar a circle. Subsequent, we’ll upload a 2px, cast border in black.

Adding rounded corners to make our avatar a circle

Symbol Settings:

  • Symbol Rounded Corners: 55px, all corners, related
  • Symbol Border Types: All borders
  • Symbol Border Width: 2px
  • Symbol Border Colour: #000000
See also  How to Create a Survey on WordPress

Including an Accessory to Our Avatar

Now, we’re going so as to add a lovable blue accessory to our avatar. We can be the use of the Field Shadow surroundings to create a circle that’ll seem at the back of each and every avatar. Realize how this calls again to the foundation that we took from the picture used throughout the header. To do that, we’ll stay on scrolling in the course of the Symbol tab until we get to the Symbol Field Shadow. Right here, we’re going to make a choice the primary possibility, which is a cushy glow. Alternatively, we’re going to regulate the settings to show this right into a circle!

Adding an accent to our avatar by using Box Shadow settings

Field Shadow Settings:

  • Symbol Field Shadow: Shadow #1
  • Field Shadow Horizontal Place: -30px
  • Field Shadow Vertical Place: -30px
  • Field Shadow Blur Energy: 0px
  • Field Shadow Unfold Energy: -28px
  • Shadow Colour: #3093fb

Thankfully, on this instance, there was once no wish to use any customized CSS! Our avatar was once styled utterly the use of settings discovered natively throughout the Divi Builder.

Divi House Care: Our 3rd Instance of Styling the Avatar throughout the Divi Feedback Module

In our 3rd instance, we’ll be the use of the Divi Home Care Blog Post Layout. Having a look on the call-to-action phase inside this structure, let’s imitate the orange and yellow containers for our feedback avatar.

Divi Home Care design inspiration for our avatar

Shaping Our Feedback Avatar with Rounded Corners

Using rounded corners will give our avatar a fascinating form. Alternatively, we can best follow rounded corners to the highest left and height proper corners. Either one of those can be receiving a radius of 25px. The ground proper and backside left corners will stay untouched with a radius of 0px. Just be sure you have unchecked the hyperlink icon throughout the border-radius field. This may let us have other settings for each and every nook of our symbol.

Adjusting rounded corners to create unique shapes for our avatar

Symbol Border Settings:

  • Symbol Rounded Corners: 25 px 25px 0px 0px (clockwise, unlinked)
  • Symbol Border Types: All borders

Including a Border

Now, we’re going so as to add a border. This may name to the E-mail Optin module within the header of this Weblog Publish Template.

Styling the avatar's border

Let’s understand one thing. When we’ve added our border settings, the border now overlaps over the remark frame in addition to the remark writer and meta knowledge. We’re going to rectify this by means of the use of a couple of traces of CSS throughout the Complicated tab of the module.

Adding custom CSS to make comment readiable

Customized CSS

Remark Meta:

margin-left: 15px;

Remark Content material:

margin-left: 15px;

Those two easy traces of code assist so as to add some respiring room round our avatar symbol… whilst additionally permitting us to learn the feedback obviously!

Styling the Remark Avatar in Divi feet. Divi NGO

For our fourth instance, we’ll be the use of the Divi NGO Blog Post Template. Realize the styling of the avatar’s profile picture. That is what we’ll be emulating for the avatar inside our Remark Module.

Pulling inspiration for our tutorial from elements within the layout pack

Including Rounded Corners to Our Avatar

Very similar to a few of our earlier examples, we’ll be using using Divi’s Rounded Nook options to taste our avatar. In our case, we’ll be making the entire corners of this avatar 20px.

See also  Divi Plugin Highlight: WP and Divi Icons Pro

Creating rounded corners for our Divi NGO comments avatar

Symbol Settings:

  • Symbol Rounded Corners: 20px (all corners, related)

Including a Field Shadow

The second one a part of this styling is so as to add a cast, opaque field shadow at the back of our avatar. We’ll be the use of the similar colour because the writer’s picture, to stay our branding seamless all the way through this template. We’ll be the use of the fourth field shadow possibility, and the use of the default Divi settings for this shadow.

Adding our box shadow settings to our avatar

Field Shadow Settings:

  • Symbol Field Shadow: Shadow #4
  • Field Shadow Horizontal Place: 10px
  • Field Shadow Vertical Place: 10px
  • Field Shadow Blur Energy: 0px
  • Field Shadow Unfold Energy: 0px
  • Shadow Colour: #347362

Because of the location of the shadow, we gained’t be desiring any customized CSS in this instance both.

Ultimate Instance: Divi Knowledge Science Weblog Format

Our 5th and ultimate instance of styling the remark avatar in Divi can be the use of the Divi Data Science Blog Layout Pack. As in earlier examples, we’ll be drawing our inspiration from the styling of the featured symbol inside this structure pack.

Featured image inspiration for our Comments avatar

Subsequently, we all know that we’ll be including a thick white border and a few field shadow to our Remark avatar.

Including a Border to our Remark Avatar

This avatar will stay a sq., then again, we can be including a border to it. Let’s pass forward and scroll all the way down to the Symbol tab, and upload a white border to our symbol.

Adding a border to the comment avatar

Symbol Border Settings:

  • Symbol Border Types: All borders
  • Symbol Border Width: 10px
  • Symbol Border Colour: #000000
  • Symbol Border Taste: Cast

Including Shadow to Our Avatar

On this educational additionally, we’ll be the use of the default Divi Field Shadow surroundings so as to add a shadow to our Remark avatar. We’ll be the use of Field Shadow possibility 3.

Using the default box shadow settings

Field Shadow Settings:

  • Symbol Field Shadow: Shadow #3
  • Field Shadow Horizontal Place: 0px
  • Field Shadow Vertical Place: 12px
  • Field Shadow Blur Energy: 18px
  • Field Shadow Unfold Energy: -6px
  • Shadow Colour: rgba(0,0,0,0.3)

To forestall our newly styled avatar from overlaying up our remark knowledge, we’re going so as to add a couple of traces of CSS to wash our design up.

Cleaning up the Comment avatar with custom CSS

Customized CSS:

Remark Frame:

margin-top: 50px;

Remark Meta:

margin-left: 15px;

Remark Content material:

margin-left: 15px;

Bringing it All In combination

The remark avatar is a small piece of a module that may be custom designed deeply with CSS and Divi’s local gear. Don’t disregard to seem on your design to attract inspiration from. Via this inspiration, never-ending designs may also be created that talk to your emblem!

The publish 5 Ways to Style the Avatar in Divi’s Comments Module gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *