7 hidden Divi features 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 that 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 program:

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

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

1 - Inserting "alert boxes" with Divi Shortcodes

The alert boxes are commonplace in websites. They allow to put forward messages in order to attract the attention of the Internet user.

They are often used to send an important message such as "Beware, 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:

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

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

But I could 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 optimize the design and give you an idea of what you can do with these shortcodes.

Here's what they look like now:

Info" type alert
Warning" type alert
Download" type 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

Let's face it, 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)... Like this button that allows you to return to contentswhile 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 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 dots" above the Paragraph block in Gutenberg
  2. Choose "edit in 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 you give them a little facelift and give them a little pep! Here is what your buttons will look like:

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

To get this, here is the code to add in your stylesheet (in the Appearance > Customize > 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 called Dropcaps, is very trendy, especially in paper magazines.

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

Vere is an example of a lettering within a Gutenberg paragraph. To get this effect, you just have to 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 change the appearance of this letter (change the font, size, color 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, you will just have to style your lettering with a little CSS that you will add to the Appearance > Customize > 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 - Insert a stylized testimonial (blockquote)

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

Check it out:

This is a blockquote / quote

To obtain 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 handy, especially if you need to present a series of ideas. With shortcodes that 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 contents of tab 5 go 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 contents of tab 5 go here

Here's what it looks like inside the editor:

Insérer des tableaux à l'aide de shortcodes Divi
Insert 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 (in download).

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 automatic addition of the author's bio at the end of the article.

However, if you invite writers to your blog on an occasional 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 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 features of the Divi Builder or even a shortcodes plugin.

However, it's sometimes a shame to weigh down 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 embellish 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 491 times

7 fonctionnalites Divi pour Gutenberg
7 hidden Divi features for Gutenberg

2,254 words

9

You should 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. Les champs obligatoires sont indiqués avec *

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