7 hidden features of Divi for Gutenberg

Published on 19/06/2019 | 2 comments

You use the Divi theme but you write your articles with Gutenberg? Perfect! Perfect! In this article, discover the list of Divi for Gutenberg features.

These are hidden tricks that no one uses or knows!

After a rigorous search, no article on the web is available on this subject - neither in French nor in English...

Are you ready to discover these features of Divi for Gutenberg to boost your productivity when creating your next content?

Note that you can also use these features within other Divi modulesnot just in Gutenberg!!!!!

Here is the program:

  1. Insert "alert boxes" with Divi Shortcodes
  2. Add buttons anywhere with Divi Classes
  3. Insert a droptrine (dropcap) at the beginning of the paragraph
  4. Insert a stylized testimonial (blockquote)
  5. Insert "tabs" (tabs)
  6. Post a "author's bio".
  7. Download the complete list

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - Insert "alert boxes" with Divi Shortcodes

The alert boxes are common currencies within websites. They make it possible to highlight messages in order to attract the attention of the Internet user.

They are often used to send an important message such as "Warning, please note that..." but you can easily divert them from their original purpose in order to use them in other circumstances.

Of course, you can also use a CSS class and create this from scratch. This is what I do when I insert a "promo" or "info" insert like this:

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

The above insert is simply a paragraph to which I have applied a CSS class, previously created in my style sheet.

But I could very well have used a shortcode that Divi puts at my disposal....

It offers 5 different shortcodes to easily insert "alert boxes":

Les shortcodes à insérer dans Gutenberg
Shortcodes to insert in Gutenberg

These shortcodes can be used within the Gutenberg "Short Code" blocks or within any Divi module using text.

Without modification, Divi's alert boxes look like this:

Shortcodes Divi pour afficher des  boites d'alerte
Divi short codes to display alert boxes

It's not great, is it? So I've prepared some CSS to optimize the design and give you an idea of what you can do with these shortcodes.

This is what they look like now:

Alert type "info" alert
Warning" type alert
Download alert type
Organic" type alert
Alert type "shadows" alert

To get this design, I just modified the CSS of these boxes by adding the code below in the tab Appearance > Customize > Additional CSS.

Feel free to modify the code below as you wish (it is also available for free download at the end of the article):

/*-------------------- SHORTCODES DIVI : BOX -------------------*/

/* BOX : supprimer vieux icônes */

.et-bio::before, .et-download::before, .et-info::before, .et-shadow::before, .et-warning::before {
  position: absolute;
  top: 28px;
  left: 28px;
  content: "";
  background: none;
}

/* BOX : changer les icônes des différents types de box - emoji à récupérer : https://getemoji.com/ */

.et-bio::before {
    content: "😘";
}

.et-download::before {
    content: "😜";
}

.et-info::before {
    content: "😎";
}

.et-shadow::before {
    content: "👉";
}

.et-warning::before {
    content: "🚀";
}

/* BOX : changer la taille et la police du texte - supprimer l'ombre du texte */

.et-box {
  font-size: 25px;
	font-family: 'Raleway', sans-serif;
}

.et-box-content {
    text-shadow: none;
}

/* apparence box : supprimer bordures - ajouter des marges et ombres */
.et-bio, .et-download, .et-info, .et-shadow, .et-warning {
    border: none;
    box-shadow: 5px 5px lightgray;
    margin: 30px 0px;
}

/* apparence box info */
.et-info .et-box-content {
    border: 1px solid #1fc3aa;
    color: #fff;
    background: #1fc3aa;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/* apparence box warning */
.et-warning .et-box-content {
    border: 1px solid #7d3bd0;
    color: #fff;
    background: #7d3bd0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/* apparence box bio */
.et-bio .et-box-content {
    border: 1px solid #fc2f65;
    color: #fff;
    background: #fc2f65;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/* apparence box download */
.et-download .et-box-content {
    border: 1px solid #188bdc;
    color: #fff;
    background: #188bdc;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/* apparence box shadow */
.et-shadow .et-box-content {
    border: 1px solid #f7f7f7;
    color: grey;
    background: #f7f7f7;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

2 - Add buttons anywhere with Divi Classes

Admittedly, the Gutenberg "button" block is really basic. It doesn't allow you to do much, not even open the link in a new window !!!

And then, if you use the Divi Button moduleyou will only be able to use it as a stand-alone module.

However, you can easily insert a button anywhere, even within your text (inline button)... Like this button that allows you to return to the summarywhile it is within a paragraph. Click on it, you will see 😉

To achieve this, you just need to add a CSS class to your tag (the HTML tag for links).

Here is a classic link:

Here is a link containing two CSS classes allowing it to appear as a "button":

Convertir un lien en bouton grâce à Gutenberg et Divi
Convert a link to a button using Gutenberg and Divi: insert a CSS class into your tags
  1. Click on the "3 small dots" above the Gutenberg Paragraph block
  2. Choose "edit in HTML".
  3. Add the 2 CSS classes that will convert your link to an "inline button".

Divi provides us with 10 CSS classes to obtain 10 different buttons. You have enough to do....

Les classes sont à ajouter au sein de la balise . Il faut toujours ajouter la classe "small-button" ainsi que la classe associée à la couleur, comme par exemple "smallblue"

Voici les 10 classes qui sont disponibles : 

Bouton bleu :
Texte Bouton

Bouton Lightblue :
Texte Bouton

Bouton black :
Texte Bouton

Bouton pink : 
Texte Bouton

Bouton purple :
Texte Bouton

Bouton green :
Texte Bouton

Bouton orange : 
Texte Bouton

Bouton red : 
Texte Bouton

Bouton silver :
Texte Bouton

Bouton teal :
Texte Bouton

But honestly, these buttons are ugly... Really! Look at what they look like:

Bouton Divi à ajouter grâce à une classe CSS
10 Divi buttons to add thanks to a CSS class: original appearance, without modification.

That's why I suggest you do a little facelift and give them a little pep! Here's what your buttons will look like:

Boutons Divi à afficher grâce à une classe CSS
Appearance of the Divi buttons after modification of the CSS

To get this, here is the code to add to your style sheet (in the tab Appearance > Customize > Additional CSS), do not hesitate to modify this CSS as you wish:

/*-------------------- CLASS DIVI : BUTTON --------------------*/

/* modifier l'apparence globale des boutons */
a.big-button, a.icon-button, a.small-button {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 2px gray;
    -moz-box-shadow: 0px 2px 2px gray;
    box-shadow: 0px 2px 2px gray;
    text-shadow: none;
    line-height: 26px;
	color: #fff !important;
	text-transform: uppercase;
	font-size: 16px;
}

/* modifier bouton bleu */
a.bigblue, a.smallblue {
    border: none;
    background: #3e8ff4 !important;
}

a.bigblue:hover, a.smallblue:hover {
  color: #fff !important;
	box-shadow: none;
}

/* modifier bouton bleu clair */
a.biglightblue, a.smalllightblue {
    border: none;
    color: #fff !important;
    background: #18cfd3 !important;
}

a.biglightblue:hover, a.smalllightblue:hover {
  color: #fff !important;
	box-shadow: none;
}

/* modifier bouton noir */
a.smallblack, a.bigblack {
    border: none;
    color: #fff !important;
    background: #393939 !important;
}

a.bigblack:hover, a.smallblack:hover {
  color: #fff !important;
	box-shadow: none;
}

/* modifier bouton rose */
a.smallpink, a.bigpink {
    border: none;
    color: #fff !important;
    background: #fc2f65 !important;
}

a.bigpink:hover, a.smallpink:hover {
  color: #fff !important;
	box-shadow: none;
}

/* modifier bouton violet */
a.smallpurple, a.bigpurple {
    border: none;
    color: #fff !important;
    background: #7d3bd0 !important;
}

a.bigpurple:hover, a.smallpurple:hover {
  color: #fff !important;
	box-shadow: none;
}

/* modifier bouton vert */
a.smallgreen, a.biggreen {
    border: none;
    color: #fff !important;
    background: #90d500 !important;
}

a.biggreen:hover, a.smallgreen:hover {
  color: #fff !important;
	box-shadow: none;
}

/* modifier bouton orange */
a.smallorange, a.bigorange {
    border: none;
    color: #fff !important;
    background: #FF8C00 !important;
}

a.bigorange:hover, a.smallorange:hover {
  color: #fff !important;
	box-shadow: none;
}

/* modifier bouton rouge */
a.smallred, a.bigred {
    border: none;
    color: #fff !important;
    background: #DC143C !important;
}

a.bigred:hover, a.smallred:hover {
  color: #fff !important;
	box-shadow: none;
}

/* modifier bouton silver */
a.smallsilver, a.bigsilver {
    border: none;
    color: #454545 !important;
    background: #F7F7F7 !important;
}

a.bigsilver:hover, a.smallsilver:hover {
  color: #454545 !important;
	box-shadow: none;
}

/* modifier bouton teal */
a.smallteal, a.bigteal {
    border: none;
    color: #ffffff !important;
    background: #1fc3aa !important;
}

a.bigteal:hover, a.smallteal:hover {
  color: #FFFFFF !important;
	box-shadow: none;
}

3 - Insert a dropcap at the beginning of the paragraph with a shortcode

Letters, also known as Dropcaps, are very popular, especially in paper magazines.

But do you know that you can easily reproduce and stylize them within your web content?

Vhere is an example of a lettertrine within a Gutenberg paragraph. To achieve this effect, simply insert a "Short Code" block from Gutenberg and surround the first letter of the paragraph with a shortcode provided by Divi. This shortcode looks like this: [ dropcap ]Your letter[ /dropcap ]. Then, continue to write your text. Finally, with a little CSS you can modify the appearance of this lettertrine (change the font, size, color etc...)
Bloc Gutenberg avec Lettrine (dropcap)
Appearance of a Gutenberg block with Lettrine (dropcap)

You can also use this shortcode to get a dropcap within various Divi modules accepting text:

Dropcap au sein d'un module Divi
Dropcap within a Divi module

Then, you will just have to stylize your lettertrine with a little CSS that you will add to the tab Appearance > Customize > Additional CSS

Here is the code I used to get this look (you can change it):

/*------------------- SHORTCODES DIVI : DROPCAP ------------------*/

/* shortcode Divi lettrine personnalisée */

.et-dropcap {
    font-size: 80px;
    line-height: 0.7;
    color: #6c2eb9;
    font-family: Times;
    padding-top: 10px;
}

Need more resources on Divi? Visit ElegantThemes' blog full of ideas and tutorials!

4 - Insert a stylized testimonial (blockquote)

Do you like the "blockquotes" ? These inserts that display a quote are easy to insert in Gutenberg, when using the CSS Divi class "and_pb_testimonial".

Look at this:

This is a blockquote / quotation

To obtain this result, it is very simple:

Use the class and_pb_testimonial to convert a Gutenberg paragraph into a stylized Blockquote
  1. Add a Gutenberg block "paragraph".
  2. In the right sidebar, open the "Advanced" tab
  3. Insert the class "and_pb_testimonial" in the dedicated field.

Then, you will have to customize the appearance with a little CSS to get a more harmonious design. Here is an example:

/*----------------------CLASS DIVI : BLOCQUOTE---------------------*/

.et_pb_testimonial {
    background-color: #E0F8EC;
    padding-bottom: 30px !important;
    border: 2px solid #666;
    font-size: 16px;
    font-family: 'Montserrat';
    font-weight: 600;
}

Feel free to modify the code to get a design that fits your project.

5 - Display "tabs" (tabs)

This feature is more than practical, especially if you need to present a series of ideas. With shortcodes that Divi has planned, you can easily insert two types of tables like the ones below:

The content of tab 1 goes here
The content of tab 2 goes here
The content of tab 3 goes here
The content of tab 4 goes here
The content of tab 5 goes here
The content of tab 1 goes here
The content of tab 2 goes here
The content of tab 3 goes here
The content of tab 4 goes here
The content of tab 5 goes here

Here is what it looks like within the editor:

Insérer des tableaux à l'aide de shortcodes Divi
Insert tables using Divi shortcodes using the Gutenberg "Short Code" block.

You will find the complete code to copy and paste at the end of the article (downloadable).

plus de ressources pour Divi

6 - Insert a "bio of the author".

If you have a multi-author blog, it is better to use a plugin dedicated to the automatic addition of the author's bio at the end of the article.

On the other hand, if you invite editors to your blog from time to time, you can use a Divi shortcode that allows you to do this.

Here is an example:

Insert the author's bio here. For example: Tips Divi is a blog dedicated to the Divi theme, you will find all the resources and tutorials necessary to help you build your next websites.

The design is not fantastic but you can easily improve it with a little CSS.

Here is what the shortcode looks like within the editor:

Shortcode Divi pour ajouter une bio de l'auteur
Divi short code to add a bio of the author at the end of the article

Finally: download the complete list (snippets)

These 7 hidden features of Divi for Gutenberg are easy to use and are native to the theme.

Of course, they are quite basic and are far from competing with the functionalities of the Divi Builder or even a shortcode plugin.

However, it is sometimes a shame to overload a site with a new plugin or to activate a builder page to simply add a button to your article, for example.

These shortcodes can then be interesting to enhance your content easily.

Download the list of all shortcodes and CSS listed in this article free of charge:

" List of Divi Shortcodes for Gutenberg + CSS"Downloaded 194 times

7 fonctionnalites Divi pour Gutenberg
7 hidden Divi features for Gutenberg

2,254 words

9

You should like it too:

Vidéo mise en avant dans les articles Divi avec ACF

Video highlighted in Divi articles with ACF

This step-by-step tutorial shows you how to create a new custom field in your Divi Articles to add highlighted YouTube videos. You can do this easily with the Theme Builder and ACF.

2 Commentaires

  1. Tivo

    OMG !!! Merci, merci et merci ! Avec ce post, tu viens de changer mon expérience Divi vient de prendre un nouveau tournant 😀

  2. Lycia Diaz

    Merci Tivo 😉

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This