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.
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.
Step 3 :- Go to Module’s Setting & locate Body Text in it.
Step 5 :- Now add style attribute along with desired CSS inside the quotes.
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.
- Inline styles don’t separate style from its under lying structure.
- Maintenance of Inline CSS is headache as every time you have to search for same CSS to update Styles.
- 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
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
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 !
0 Comments