7 hidden features of Divi for Gutenberg

Published on 19/06/2019 | 4 comments

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 ":

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

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:

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

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:

Info" type alert
Warning" type alert
Download alert
Bio" alert
Shadows" alert

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":

Convertir un lien en bouton grâce à Gutenberg et Divi
Convert a link into a button with Gutenberg and Divi: insert a CSS class in your tags
  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:

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

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

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

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...)
Bloc Gutenberg avec Lettrine (dropcap)
Appearance of a Gutenberg block with dropcap

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

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

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:

Use the et_pb_testimonial class to convert a Gutenberg paragraph into a stylized Blocquote
  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:

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

This is what it looks like within the publisher:

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

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

plus de ressources pour Divi

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:

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

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:

Shortcode Divi pour ajouter une bio de l'auteur
Divi shortcode to add an author bio at the end of the article

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:

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

7 fonctionnalites Divi pour Gutenberg
7 hidden Divi features for Gutenberg

2,254 words

9

You might like it too:

Comment personnaliser le curseur de la souris sur votre site ?

How to customise the mouse cursor on your site?

Do you want a site that is customised down to the last detail? I have a quick and easy tutorial to help you customise the mouse cursor on your site. This way, when your visitors hover over a link, the cursor is fully customised!

4 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 😉

  3. Alain Mazy

    Salut, merci pour ton site, il nous aide pas mal pour des petites astuces qui s’avèrent souvent être de grandes astuces! 🙂
    Mais quelque chose manque sous forme de module je trouve, on peut le programmer, mais un module est mieux! Es tu capable de coder des module? Est-ce facile?

  4. Lycia Diaz

    Salut Alain… Non malheureusement j’en suis incapable, il faut être sacrément calé en JS – PHP et peut-être même React, donc c’est mort pour moi (pour l’instant)

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

Je souhaite recevoir les news du blog Astuces Divi !

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