7 funciones ocultas de Divi para Gutenberg

Publicado el 19/06/2019 | 4 comentarios

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 Divino 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 dropcap 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

Anuncio: 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 plantear mensajes para atraer la atención del internauta.

Suelen utilizarse para enviar un mensaje importante, como "Cuidado, 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 haz clic en "PRUEBA GRATUITA

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

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

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

Les shortcodes à insérer dans Gutenberg
Códigos cortos para insertar en Gutenberg

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

Shortcodes Divi pour afficher des  boites d'alerte
Códigos cortos de Divi para mostrar cajas de alerta

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

Alerta de tipo "Info".
Alerta del tipo "Aviso".
Alerta de tipo "descarga".
Alerta de "Bio
Alerta "Sombras

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

Seamos sinceros, 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 de su texto (botón en línea)... Como este botón que le permite 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":

Convertir un lien en bouton grâce à Gutenberg et Divi
Convierte un enlace en un botón con Gutenberg y Divi: inserta una clase CSS en tus etiquetas
  1. Haga clic en los "3 puntos" sobre el bloque Párrafo en Gutenberg
  2. Elija "editar en 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:

Bouton Divi à ajouter grâce à une classe CSS
10 botones Divi para añadir con una clase CSS: aspecto original, sin modificación.

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

Boutons Divi à afficher grâce à une classe CSS
Aspecto de los botones de Divi después de la modificación de CSS

Para conseguirlo, este es el código que debe añadirse en su hoja de estilos (en la sección 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 llamadas Dropcaps, están muy de moda, sobre todo en las revistas de papel.

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

Vste es un ejemplo de una letra dentro de un párrafo Gutenberg. Para conseguir este efecto, solo tienes que 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 se puede cambiar la apariencia de esta carta (cambiar la fuente, el tamaño, el color, etc ...)
Bloc Gutenberg avec Lettrine (dropcap)
Aspecto de un bloque Gutenberg con dropcap

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

Dropcap au sein d'un module Divi
Dropcap dentro de un módulo Divi

Luego, sólo tendrás que estilizar tus letras con un poco de CSS que añadirás al Apariencia > Personalizar > CSS adicional

Este es el código que he utilizado para conseguir 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 el " bloc de notas " ? Estas inserciones que muestran una cita son fáciles de insertar en Gutenberg, cuando se utiliza la clase CSS Divi "et_pb_testimonial".

Compruébalo:

Se trata de un blockquote / cita

Obtener este resultado es muy sencillo:

Utilice la clase et_pb_testimonial para convertir un párrafo de Gutenberg en una Blocquote estilizada
  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 práctica, 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 que se muestran a continuación:

El contenido de la ficha 1 va aquí
El contenido de la ficha 2 va aquí
El contenido de la ficha 3 va aquí
El contenido de la ficha 4 va aquí
El contenido de la ficha 5 va aquí
El contenido de la ficha 1 va aquí
El contenido de la ficha 2 va aquí
El contenido de la ficha 3 va aquí
El contenido de la ficha 4 va aquí
El contenido de la ficha 5 va aquí

Este es el aspecto que tiene dentro del editor:

Insérer des tableaux à l'aide de shortcodes Divi
Insertar tablas utilizando los shortcodes de Divi con el bloque "Código corto" de Gutenberg.

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

plus de ressources pour Divi

6 - Insertar una "biografía del autor

Si tienes un blog con varios autores, es mejor utilizar un plugin dedicado a 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 ocasional, puedes utilizar un shortcode de Divi que te permite hacerlo.

He aquí un ejemplo:

Inserte aquí la biografía del autor. Por ejemplo: Divi Tips es un blog dedicado al tema Divi, en el que encontrarás todos los recursos y tutoriales que necesitas para ayudarte a construir tus próximos sitios web.

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:

Shortcode Divi pour ajouter une bio de l'auteur
Divi shortcode para añadir una biografía del autor al final del artículo

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 competir con las características del Constructor Divi o incluso un plugin de códigos cortos.

Sin embargo, a veces es una pena lastrar 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 shortcodes pueden entonces ser interesantes para embellecer su contenido fácilmente.

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

"Lista de Shortcodes de Divi para Gutenberg + CSS"Descargado 491 veces

7 fonctionnalites Divi pour Gutenberg
7 hidden Divi features for Gutenberg

2.254 palabras

9

A ti también te debería gustar:

Comment personnaliser le curseur de la souris sur votre site ?

¿Cómo personalizar el cursor del ratón en su sitio?

¿Desea un sitio personalizado hasta el último detalle? Tengo un tutorial rápido y fácil para ayudarle a personalizar el cursor del ratón en su sitio. De este modo, cuando sus visitantes pasen por encima de un enlace, el cursor estará totalmente personalizado.

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.

Pínchalo en Pinterest

Acciones
Comparte esto