Cómo crear diseños únicos usando pseudoelementos antes y después en Divi

¿Qué son los pseudoelementos CSS?

En pocas palabras, un pseudoelemento CSS se puede utilizar para diseñar partes específicas de un elemento. Hay cinco tipos de pseudoelementos que hacen cosas diferentes. Para el propósito de esta publicación, veremos el ::antes y el ::después.

Estos dos pseudoelementos se utilizan para insertar algo antes o después del contenido de un elemento. ¡Esto es particularmente útil ya que podemos usarlos para agregar elementos visuales adicionales a imágenes, texto y cualquier otra cosa existente!

Entonces, ¿por qué usaríamos estos pseudo elementos? El antes y el después son perfectos para desbloquear posibilidades de diseño sin necesidad de agregar más elementos o módulos. Igualmente, son útiles para agregar elementos adicionales sin tener que tocar plantillas html o archivos de temas principales.

¿Cómo usas los elementos antes y después con Divi?

Si todo esto suena un poco confuso hasta ahora, ¡no se preocupe! Si tuviéramos que usar ::before y ::after al escribir el código CSS desde cero, se vería un poco así:

Imagina que tenemos una línea de texto con la clase «text-example»: el CSS para diseñar y personalizar esta línea sería:

Ahora, si desea agregar y diseñar un elemento ::antes o ::después, el CSS se vería así:

Afortunadamente, Divi proporciona un fácil acceso a ::antes y ::después de los pseudoelementos con muchas menos molestias. De hecho, si alguna vez abrió la pestaña «Avanzado» para cualquier módulo para agregar código CSS personalizado, habrá visto las áreas a las que nos referimos.

Estos cuadros proporcionan un atajo rápido para agregar y personalizar contenido antes y después de cualquier módulo Divi existente y podemos utilizarlos para crear algunos diseños realmente flexibles e interesantes.

Vistazo

Esto es lo que crearemos en este tutorial:

Ejemplo 1

Ejemplo 2

Ejemplo 3

Empezando

Para este tutorial solo necesitamos una copia del tema Divi y una pizarra en blanco. Para comenzar, crearemos una nueva página y, después de agregar un título de página, haga clic en el generador visual.

¡Ahora estamos listos para comenzar!

Ejemplo 1: Módulos publicitarios numerados usando Pseudo Elementos

La publicidad es probablemente uno de los módulos Divi más flexibles a su disposición. En este caso, usaremos pseudo elementos para agregar números antes de cada propaganda para crear una sección paso a paso de «cómo funciona». También agregaremos una forma de flecha a la derecha para indicar el proceso.

Lo que estaremos creando:

Aunque este diseño funcionará con cualquier diseño publicitario, tomamos prestada la sección publicitaria del diseño de la agencia web. Si desea utilizarlos como punto de partida, puede acceder a la página de inicio de la agencia web creando una nueva página y accediendo al generador de front-end.

Cuando se cargue su página, tendrá la opción de usar un diseño prefabricado, uno de sus diseños guardados o construir desde cero. Seleccione el diseño prefabricado y use la barra de búsqueda para encontrar diseños de «Agencia web». La sección de propaganda de este tutorial se puede encontrar en la página de inicio.

Una vez cargado, la única diferencia entre el diseño prefabricado y nuestro ejemplo es que hemos cambiado el fondo de cada propaganda, el título y el color de la fuente del texto y hemos agregado un pequeño relleno.

Una vez que haya cambiado estas configuraciones en una publicidad, puede hacer clic con el botón derecho en el módulo y usar «Extender estilos» para aplicarlos a los otros tres.

Ahora que hemos personalizado nuestros cuatro módulos publicitarios para que se vean como queremos, es hora de agregar algo de código para crear el elemento numerado. Sin embargo, para que este diseño funcione, primero debemos agregar una línea de css al cuadro css personalizado del elemento principal.

Esto simplemente permitirá que los elementos que creamos en los próximos pasos sean visibles dondequiera que se superpongan a los bordes de nuestro módulo de publicidad.

Una vez que haya hecho esto, abra las opciones del módulo y navegue hasta la «Pestaña Avanzado». Dentro del cuadro «antes», agregue este fragmento de CSS:

Una vez que haya agregado este fragmento de código, verá que el número aparece en la parte superior izquierda del módulo de propaganda. Puede modificar la posición del número modificando las líneas «izquierda:» y «superior:» o cambiar el color y el tamaño de fuente del número dentro de este fragmento de CSS.

Una vez que haya completado esto para el primer módulo, ingrese a los tres nuevos módulos publicitarios y cambie la línea «contenido:» a:

contenido: ‘2.’;

contenido: ‘3.’;

…etcétera.

Ahora que tenemos nuestros números ordenados, necesitamos agregar un poco de css para crear la forma de flecha.

Abra cada módulo e ingrese esto en el cuadro Después dentro del área de CSS personalizado:

Ahora sus cuatro anuncios publicitarios deberían verse así:

Ejemplo 2. Agregar formas únicas a sus módulos existentes

Este diseño se basa en pequeños fragmentos de código simples pero efectivos que se agregan a los cuadros CSS personalizados ::antes y ::después dentro de cada módulo de texto.

La belleza de usar pseudo-elementos aquí es que podemos integrar formas y objetos únicos a nuestros módulos existentes sin necesidad de agregar elementos o módulos adicionales a nuestra página. Debido a que estos pseudoelementos están contenidos dentro de nuestros módulos existentes, no agregan ningún espacio adicional a nuestros diseños y se ven geniales en todos los dispositivos.

Lo que estaremos creando:

Para crear el diseño inicial, necesitamos agregar una sección regular con una fila de tres columnas, configurada con el ancho predeterminado. Una vez que haya hecho esto, agregue un módulo de texto a una de las nuevas columnas.

Nuevamente, puede diseñar este módulo de texto como desee; sin embargo, si lo sigue, estos son los pasos para lograr este diseño:

Abra las opciones del módulo de texto y agregue su contenido de texto y una imagen de fondo o color de fondo según sea necesario. Hemos usado una imagen de fondo normal con un degradado transparente en la parte superior:

A continuación, configure las siguientes opciones de diseño:

1. Relleno superior: 120 px y relleno inferior: 120 px

2. Alineación del texto: centro y color del texto: #ffffff

3. Alineación de encabezado: centro y color de encabezado: #f5ee5d

Ahora que tenemos todos los aspectos visuales en su lugar para su primer módulo de texto, es hora de agregar el CSS para que suceda la magia. En la pestaña Avanzado del módulo de texto, agregue el siguiente código al cuadro «antes»:

Y luego agregue el siguiente código al cuadro «después»:

Una vez que haya agregado estos fragmentos de código al módulo, verá nuestras nuevas y elegantes formas agregadas.

Si se pregunta qué hace este CSS, en realidad es bastante simple. Todo lo que estamos haciendo es crear un cuadrado transparente que se coloca a 20 px de la parte superior e izquierda (e inferior y derecha) del módulo de texto. Luego agregamos dos bordes a estos cuadrados para crear el efecto de flecha.

Cuando esté satisfecho con el aspecto de este primer módulo de texto, simplemente cópielo y péguelo para llenar las otras columnas y cambie el contenido del texto, el fondo y los estilos para adaptarlo.

La ventaja de este método es que funcionará con prácticamente cualquier módulo Divi con un poco de personalización. Si quiere ser más elegante, intente agregar algo de CSS adicional para rotar, sesgar y personalizar aún más los elementos ::before y ::after. ¡Divertirse!

Ejemplo 3. Agregar íconos y descripciones a los títulos de las pestañas

Dentro de este diseño, aprovecharemos la posibilidad de agregar un icono de imagen antes de algún contenido existente, así como una pequeña descripción de texto a continuación. Esto es perfecto para personalizar el módulo de pestañas Divi un poco más de lo que normalmente puedes.

Nota : aunque agregar contenido a través de css es excelente para el diseño, los motores de búsqueda no lo indexan fácilmente (aunque Google de hecho indexa contenido CSS y Javascript, lleva mucho más tiempo y no es confiable en la actualidad. Los motores de búsqueda como Bing y DuckDuckGo lo hacen no indexar este contenido en absoluto). Por esta razón, su contenido debe ser mínimo y no debe depender de él para influir en su potencial de clasificación.

Lo que estaremos creando:

En primer lugar, debemos agregar nuestra sección estándar y una fila de 1 columna, seguido del propio módulo de pestañas Divi. Dentro del módulo de pestañas, solo necesitamos agregar nuestros títulos y contenido a cada pestaña, ya que manejaremos los estilos en los siguientes pasos.

Una vez que nuestro contenido esté en su lugar, debemos comenzar a agregar contenido al elemento ::before del módulo. Dado que no podemos agregar CSS personalizado a pestañas específicas usando el método que hemos seguido anteriormente, tendremos que lograr esto de manera ligeramente diferente.

Abra las opciones del módulo de pestañas y dentro de la pestaña Avanzado asigne al módulo la clase «pestañas elegantes».

Una vez que haya agregado esta clase de CSS, debemos hacer una pequeña preparación. Para agregar algunos íconos o imágenes a los títulos de sus pestañas, obviamente necesitamos agregarlos a WordPress. Vaya a la pestaña Medios en el panel de control de WordPress y cargue los iconos elegidos como lo haría normalmente.

Con sus imágenes cargadas, debemos hacer clic en cada una y copiar la URL que WordPress ha generado para nosotros. Revise cada una de sus imágenes y copie y pegue estas URL en un documento o en la aplicación de notas que elija.

Con las URL de las imágenes elegidas a mano, vaya a las opciones de su tema Divi dentro del menú Divi en el Panel de WordPress.

En la parte inferior de esta página, verá un cuadro donde puede agregar su propio CSS personalizado. Es dentro de este cuadro donde pegaremos un código CSS.

El siguiente fragmento agregará las imágenes encima de cada título de pestaña. Simplemente copie y pegue este fragmento en el cuadro de CSS personalizado y reemplace el contenido entre (e incluyendo) los asteriscos (por ejemplo, *Reemplace esto con la URL de su primera imagen*) con las URL que anotó anteriormente.

Si regresa a la página con el módulo de pestañas activado, ahora debería ver que las imágenes se han agregado encima de cada título: ¡éxito!

Entonces, ¿qué hay de agregar descripciones? Afortunadamente, esto también es bastante simple. Justo debajo del código que acaba de copiar en su cuadro CSS personalizado, pegue lo siguiente:

Como antes con sus imágenes, deberá reemplazar «esto es una descripción» con su propio contenido. Al volver a la página con el módulo de pestañas activado, verá que ahora también tenemos descripciones elegantes.

Finalmente, solo tenemos que aplicar un poco más de CSS para lograr el diseño completo que se muestra arriba. Nuevamente, copie el siguiente fragmento en el mismo cuadro de CSS personalizado:

Este código centra el texto y las imágenes de su pestaña y aumenta el ancho de sus pestañas para cubrir todo el módulo.

También agregamos algo de CSS para garantizar que las pestañas se vean bien en todos los dispositivos. Si prefiere no tener las pestañas de ancho completo y apilarse en dispositivos móviles, tendremos que regresar y rodear el código CSS original en una consulta de medios. Esto significa que en los dispositivos del tamaño de una tableta y más anchos agregamos las descripciones y los íconos, sin embargo, en los dispositivos más pequeños volveremos al estilo predeterminado de Divi.

Para hacer esto, copie el código CSS modificado a continuación y péguelo en su área CSS personalizada en el panel de opciones del tema Divi:

Agregar más pestañas

En este caso, hemos creado un módulo de pestañas que incluye 2 pestañas diferentes, sin embargo, en la práctica, a veces necesitamos más que esto. Si se encuentra en una posición en la que desea crear más de 2 pestañas, necesitaremos modificar el código que acaba de agregar.

Como puede ver en el fragmento, Divi asigna automáticamente una clase a cada título de pestaña: la primera comienza con 0 (.et_pb_tab_0), aumenta en 1 cada vez (.et_pb_tab_1, .et_pb_tab_2, etc.). Ya nos ocupamos de las dos primeras pestañas, por lo que al agregar más, simplemente podemos copiar y pegar una sección del código para cada pestaña nueva:

y cambie el número en la clase (.et_pb_tab_0) a 2, 3, 4, etc. También deberá hacer lo mismo para sus descripciones.

La enmienda final que debemos hacer es ajustar una línea más de CSS. Tome el número de sus pestañas y divídalo por 100. Anote este número y navegue a la siguiente sección en su CSS personalizado:

y cambia el 50% con tu respuesta. Esto asegurará que sus pestañas estén igualmente espaciadas a lo ancho del módulo.

Por ejemplo, si está creando una tercera pestaña, el código CSS adicional que necesita sería el siguiente:

Para concluir

Y ahí lo tenemos, tres excelentes formas de utilizar elementos CSS ::antes y ::después para crear nuevas posibilidades de diseño. Con suerte, esta guía lo inspirará a explorar cómo puede usar pseudoelementos en sus futuras creaciones: ¡las oportunidades son realmente infinitas!