Embed Css In Module’s Text Content Of Divi.

by | Apr 25, 2022 | Wordpress, Divi | 0 comments

Embed Inline CSS in module’s Text content of DIVI.

In this tutorial we will discuss how you can Embed CSS in module’s Text. We can add CSS in module which contain Body Text for example :- Text, Blurb, Person or Testimonial Module.

Now to Embed or add CSS insert any Module which has text content  in it. Here we will use blurb module to demonstrate the same.

Step 1 :-   Login to WordPress & navigate to Page to “Enable Visual Builder” if you want inline CSS to be Embed from top of the Web Page.

Embed CSS in module’s Text

Step 2 :-   Insert Blurb module anywhere or locate existing module on the page. Make sure you have some text in our Blurb Module where we can implement CSS.

Export Json file from Divi library

Step 3 :-   Go to Module’s Setting & locate Body Text in it.

Export Json file from Divi library
Step 4 :-   Head over to Text Tab beside Visual Tab within body & add “<p></p>” around the text.
Export Json file from Divi library

Step 5 :-  Now add style attribute along with desired CSS inside the quotes.

Export Json file from Divi library
This is how we can add inline CSS using Style attribute just as we embed it in core HTML.
To know more in detail about ways of adding CSS in DIVI click on the link below.

Why Embed CSS in module’s Text content is not best practice

Inline CSS hurts your application semantically. CSS main objective is to  separate style from HTML markup. When you tangle the two together things get much more difficult to understand and maintain.

  1. Inline styles don’t separate style from its under lying structure.
  2. Maintenance of Inline CSS is headache as every time you have to search for same CSS to update Styles.
  3. Adding inline CSS make your Website load slow compare to external CSS, as it makes your webpages bigger.

What to use instead of inline CSS

Instead of using inline styles, we can use Code module of DIVI. They provide you with all benefits of CSS, best practices and will be easy to locate on page while altering styles. Implementing CSS in this way, all the styles used on your Webpage live in a separate place rather that creating mess all over the page. Code module will affect any section they are attached to. For Example If you have 5 sections on webpage with same class assigned then all section will use the same stylesheet on all of them, you can make changes to each & every section simply by editing styles once, in one place. Changing styles in one spot is more convenient than searching for that coding on every text content of your webpage. This makes site management much easier & flexible.

Testimonial UI Module Pack

We have crafted unique 26 Testimonial UI Design  for your Divi websites which includes Carousel, List, and Grid Versions .

Easily handle the placement of testimonial content by using one click import  feature. This Section come with truly innovative ways to display your site testimonials artistically, refreshing  and differently !

Team UI Module Pack

We have crafted unique 26 Testimonial UI Design  for your Divi websites which includes Carousel, List, and Grid Versions .

Easily handle the placement of testimonial content by using one click import  feature. This Section come with truly innovative ways to display your site testimonials artistically, refreshing  and differently !

Related Post

Related Video Tutorials

Elegant Themes Membership:

Click Button Below To Get Divi & Elegant Themes Deals

Start using Divi today ! Sign up for an Elegant Themes membership and get access to the Divi theme, Divi Builder, Bloom, Monarch and lots of other great products.

Get 10% Off On DIVI Membership

Get The Best Divi Expert Services.

Find the best Divi expert services you need to help you successfully meet your project planning goals and deadline.

  • Professionally designed website using DIVI
  • Install Latest Divi Themes & Plugins
  • Divi Child Theme Installation
  • Clone Divi Website
  • Super Fast & Friendly support

0 Comments

Submit a Comment

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