7 características ocultas de Divi para Gutenberg

Usas el tema Divi pero escribes tus artículos con Gutenberg? ¡Perfecto! Descubre en este artículo la lista de características de Divi para Gutenberg.

Son trucos ocultos, que nadie utiliza ni conoce.

Tras una rigurosa búsqueda, no hay ningún artículo en la web sobre este tema, ni en francés ni en inglés...

Estás listo para descubrir estas características de Divi para Gutenberg para impulsar tu productividad al crear tu próximo contenido?

Tenga en cuenta que también puede utilizar estas funciones en otros Módulos Divi¡¡¡no sólo en Gutenberg !!!

Aquí está el programa:

1. Inserción de "cajas de alerta" con Divi Shortcodes
2. Añadir botones en cualquier lugar con Class Divi
3. Insertar un tapón al principio de un párrafo
4. Insertar un testimonio estilizado (bloc de notas)
5. Inserción de pestañas
6. Mostrar una "biografía del autor".
7. Descargar la lista completa

Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - Inserción de "cajas de alerta" con Divi Shortcodes

El buzones de alerta son habituales en los sitios web. Permiten destacar los mensajes para atraer la atención del internauta.

Suelen utilizarse para enviar un mensaje importante, como "Tenga en cuenta...", pero puede desviarlos fácilmente de su propósito original y utilizarlos en otras circunstancias.

Por supuesto, también puede utilizar una clase CSS y crear esto desde cero. Eso es lo que hago cuando inserto una "promo" o "info" como esta:

¿Sabías que puedes probar Divi gratis? Ir a esta página y haga clic en "PRUEBA GRATUITA

La inserción anterior es simplemente un párrafo al que he aplicado una clase CSS, previamente creada en mi hoja de estilos.

Pero bien podría haber utilizado un shortcode que proporciona Divi...

Ofrece 5 shortcodes diferentes para insertar fácilmente "cajas de alerta ":

Puedes utilizar estos shortcodes en los bloques de shortcodes de Gutenberg o en cualquier módulo de Divi que utilice texto.

Sin modificación, las cajas de alerta de Divi se ven así:

¿No es genial? Así que he preparado algo de CSS para optimizar el diseño y darte una idea de lo que puedes hacer con estos shortcodes.

Este es el aspecto que tienen ahora:

Para conseguir este diseño, sólo he modificado el CSS de estas cajas añadiendo el código que aparece a continuación en la pestaña Apariencia > Personalizar > CSS adicional.

Siéntase libre de modificar el código de abajo a su gusto (también está disponible para su descarga gratuita al final del artículo):

/*-------------------- 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 - Añadir botones en cualquier lugar con Class Divi

Hay que reconocer que el bloque de botones de Gutenberg es realmente básico. No te permite hacer mucho, ni siquiera abrir enlace en una nueva ventana ¡¡¡!!!

Y luego, si se utiliza el Módulo Divi ButtonSólo se puede utilizar como módulo independiente.

Sin embargo, puede insertar fácilmente un botón en cualquier lugar, incluso dentro del texto (botón en línea). volver al contenidomientras esté dentro de un párrafo. Si haces clic en él, verás 😉 .

Para ello, basta con añadir una clase CSS a la etiqueta (la etiqueta HTML para los enlaces).

Aquí hay un enlace clásico:

Aquí hay un enlace que contiene dos clases CSS que le permiten aparecer como un "botón":

1. Haga clic en los "3 puntitos" sobre el bloque de párrafo de Gutenberg
2. Elija "editar a HTML".
3. Añade las 2 clases CSS que convertirán tu enlace en un "botón en línea".

Divi nos proporciona 10 clases CSS para conseguir 10 botones diferentes. Ya tienes bastante que hacer...

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

Pero honestamente, estos botones son feos... ¡Realmente! Mira cómo se ven:

Por eso sugiero darles un pequeño lavado de cara y un poco de ánimo. Este es el aspecto que tendrán sus botones:

Para obtener esto, aquí está el código que debe añadirse en su hoja de estilo (en el Apariencia > Personalizar > CSS adicional), siéntase libre de modificar este CSS como desee:

/*-------------------- 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 - Insertar un drop cap al principio de un párrafo con un shortcode

Las letras, también conocidas como drop caps, están muy de moda, sobre todo en las revistas de papel.

Pero, ¿sabías que puedes reproducirlos y estilizarlos fácilmente en tu contenido web?

Vl siguiente es un ejemplo de letra dentro de un párrafo Gutenberg. Para obtener este efecto, basta con insertar un bloque "Código corto" de Gutenberg y rodear la primera letra del párrafo con un shortcode proporcionado por Divi. Este shortcode tiene el siguiente aspecto: [ dropcap ]Su carta[ /dropcap ]. A continuación, continúe escribiendo su texto. Por último, con un poco de CSS puedes modificar la apariencia de esta letra (cambiar la fuente, el tamaño, el color, etc.)

También puedes usar este shortcode para obtener un dropcap dentro de varios módulos de Divi que aceptan texto:

Luego, todo lo que tienes que hacer es estilizar tus letras con un poco de CSS que añades al Apariencia > Personalizar > CSS adicional

Aquí está el código que utilicé para lograr este aspecto (puedes modificarlo):

/*------------------- 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;
}

¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales.

4 - Insertar un testimonio estilizado (blockquote)

¿Te gusta "Blockquotes ? Estas inserciones que muestran una cita son fáciles de insertar en Gutenberg, cuando se utiliza la clase CSS Divi "et_pb_testimonial".

Ver :

Este es un bloque de citas

Conseguir este resultado es muy sencillo:

1. Añadir un bloque "párrafo" de Gutenberg
2. En la barra lateral derecha, abra la pestaña "Avanzado".
3. Insertar la clase "Clase "et_pb_testimonial en el campo dedicado.

Luego, tendrás que personalizar la apariencia con algo de CSS para conseguir un diseño más armonioso. He aquí un ejemplo:

/*----------------------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;
}

Siéntase libre de modificar el código para obtener un diseño que se ajuste a su proyecto.

5 - Visualización de pestañas

Esta función es más que útil, sobre todo si necesitas presentar una serie de ideas. Con los shortcodes que Divi ha proporcionado, puedes insertar fácilmente dos tipos de tablas como las de abajo:

Esto es lo que parece dentro del editor:

Encontrarás el código completo para copiar y pegar al final del artículo (para descargar).

6 - Insertar una "biografía del autor

Si tiene un blog con varios autores, lo mejor es utilizar un adición automática de la biografía del autor al final del artículo.

Sin embargo, si invitas a escritores a tu blog de forma puntual, puedes utilizar un shortcode de Divi que te permite hacerlo.

He aquí un ejemplo:

El diseño no es fantástico pero se puede mejorar fácilmente con un poco de CSS.

Este es el aspecto del shortcode en el editor:

Por último: descargue la lista completa (fragmentos)

Estas 7 características ocultas de Divi para Gutenberg son fáciles de usar y son nativas del tema.

Por supuesto, son bastante básicos y están lejos de rivalizar con la funcionalidad del Constructor Divi o incluso un plugin de códigos cortos.

Sin embargo, a veces es una pena cargar un sitio con un nuevo plugin o activar un constructor de páginas para simplemente añadir un botón a su artículo, por ejemplo.

Estos códigos cortos pueden ser interesantes para mejorar su contenido fácilmente.

Descargue gratuitamente la lista de todos los shortcodes y CSS que aparecen en este artículo:

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