7 hidden features of Divi for Gutenberg

You use the Divi theme but you write your articles with Gutenberg? Perfect! Discover in this article the list of Divi's features for Gutenberg.

These are hidden tricks, which nobody uses or knows about!

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 Divi for Gutenberg features to boost your productivity when creating your next content?

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

Here is the programme:

1. Inserting "alert boxes" with Divi Shortcodes
2. Add buttons anywhere with Class Divi
3. Insert a drop cap at the beginning of a paragraph
4. Insert a stylized testimonial (notepad)
5. Inserting tabs
6. Display an "author bio".
7. Download the full list

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 - Inserting "alert boxes" with Divi Shortcodes

The alert boxes are commonplace on websites. They allow messages to be highlighted in order to attract the attention of the Internet user.

They are often used to send out an important message such as "Please note..." but you can easily divert them from their original purpose and use them in other circumstances.

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

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 provides...

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

You can use these shortcodes in Gutenberg's shortcode blocks or in any Divi module that uses text.

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

Isn't that great? So I've prepared some CSS to optimise the design and give you an idea of what you can do with these shortcodes.

This is what they look like now:

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

Feel free to modify the code below to your liking (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 - Adding buttons anywhere with Class Divi

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

And then, if you use the Divi Button moduleYou can only use it as an independent module.

However, you can easily insert a button anywhere, even within your text (inline button). return to contentswhile it is within a paragraph. Click on it, you will see 😉

To achieve this, you simply 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 that allow it to appear as a "button":

1. Click on the "3 little dots" above the Gutenberg Paragraph block
2. Choose "edit to HTML".
3. Add the 2 CSS classes that will convert your link into an "inline button".

Divi provides us with 10 CSS classes to get 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 how they look:

That's why I suggest giving them a little facelift and a little pep! This is what your buttons will look like:

To obtain this, here is the code to add in your style sheet (in the Appearance > Customise > Additional CSS), feel free 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 drop cap at the beginning of a paragraph with a shortcode

Lettering, also known as drop caps, is very trendy, especially in paper magazines.

But did you know that you can easily reproduce and style them within your web content?

Vhe following is an example of a lettering within a Gutenberg paragraph. To obtain this effect, simply insert a Gutenberg "Short Code" block 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 writing your text. Finally, with a little CSS you can modify the appearance of this letter (change the font, size, colour etc...)

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

Then, all you have to do is style your lettering with a little CSS that you add to the Appearance > Customise > Additional CSS

Here is the code I used to get this look (you can modify 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 the ElegantThemes blog which is full of ideas and tutorials!

4 - Inserting a stylized testimonial (blockquote)

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

Watch :

This is a quote block

To achieve this result, it is very simple:

1. Add a Gutenberg "paragraph" block
2. In the right sidebar, open the "Advanced" tab
3. Insert the class "et_pb_testimonial" class in the dedicated field.

Then, you will have to customize the appearance with some 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 - Displaying tabs

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

This is what it looks like within the publisher:

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

6 - Insert a "bio of the author

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

However, if you invite writers to your blog on an ad hoc basis, you can use a Divi shortcode that allows you to do this.

Here is an example:

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

This is what the shortcode looks like in the editor:

Finally: download the full 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 far from rivalling the functionality of the Divi Builder or even a shortcodes plugin.

However, it is sometimes a shame to burden a site with a new plugin or to activate a page builder 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 for free:

“Liste des Shortcodes Divi pour Gutenberg + CSS” Téléchargé 1787 fois