Para cualquier dueño de sitio web, a menudo es importante saber que se destaca de la competencia. Divi ofrece innumerables posibilidades para producir diseños únicos, pero siempre podemos, con un poco más de investigación, crear algo más único. Aquí es donde los pseudo-elementos CSS realmente son útiles.
¿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. A los efectos de este artículo, solo vamos a hablar de: antes y: después.
Estos dos pseudoelementos se utilizan para insertar algo antes o después del contenido de un elemento. ¡Esto es particularmente útil porque podemos usarlos para agregar elementos visuales adicionales a imágenes, texto y otros elementos existentes!
Entonces, ¿por qué usaríamos estos pseudo-elementos? Antes y Después son excelentes para desbloquear posibilidades de diseño sin necesidad de agregar más elementos o módulos. Asimismo, son útiles para agregar elementos adicionales sin tener que tocar las plantillas html principales o los archivos de temas.
¿Cómo se usan los elementos antes y después con Divi?
Si todo esto parece un poco confuso hasta ahora, ¡no se preocupe! Si usáramos :: before y :: after para escribir el código CSS desde cero, se vería un poco así:
Supongamos que tenemos una línea de texto con la clase "texto de ejemplo"; el CSS para diseñar y personalizar esta línea sería:
.example-text {* agrega tu estilo aquí *}
Ahora, si desea agregar y diseñar un elemento :: before o :: after, el CSS se vería así:
.example-text :: before {* agrega tu estilo antes del elemento aquí *} .example-text :: after {* agrega tu estilo después del elemento here *}
Afortunadamente, Divi proporciona fácil acceso a ::antes y ::después de los pseudo-elementos con mucha menos molestia. De hecho, si alguna vez abrió la pestaña "Avanzado" para agregar CSS personalizado, ya vio las áreas a las que nos referimos.
Estas áreas proporcionan un acceso directo rápido para agregar y personalizar el contenido antes y después de cualquier módulo Divi existentes y podemos utilizarlos para crear diseños realmente flexibles e interesantes.
vista
Esto es lo que crearemos en este tutorial:
Ejemplo 1
Començons
Para este tutorial, comenzaremos en el modo Visual Builder. Por lo tanto, debe hacer clic en "Visual Builder" cuando esté en una nueva página.
¡Ahora estamos listos para comenzar!
Ejemplo 1: módulos Blurb numerados que utilizan pseudoelementos
La propaganda es probablemente uno de los módulos Divi más flexibles disponibles para usted. En este caso, usaremos pseudo-elementos para agregar números antes de cada presentación para crear una sección detallada de "Cómo funciona". También agregaremos una forma de flecha a la derecha para indicar el proceso.
Lo que crearemos:
Si bien este diseño funciona con todos los diseños de presentación, tomamos prestada la sección dedicada a la presentación 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 dirigiéndose al creador de interfaces.
Cuando su página se carga, tiene la opción de usar un diseño predefinido, uno de sus diseños guardados o crear una nueva compilación. Seleccione el diseño predefinido y use la barra de búsqueda para encontrar diseños de "Agencia web". La sección de descripción general de este tutorial está en la página de destino.
Una vez cargado, la única diferencia entre el diseño predefinido y nuestro ejemplo es que hemos cambiado el fondo de cada texto, el título y el color de la fuente del texto y hemos agregado un poco de relleno.
Una vez que haya cambiado esta configuración en una propaganda, puede hacer clic con el botón derecho en el módulo y usar los "estilos extendidos" para aplicarlos a los otros tres.
Ahora que hemos personalizado nuestros cuatro módulos de Blurb 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.
desbordamiento: visible
Esto simplemente permitirá que los elementos que creamos en los siguientes pasos sean visibles donde se superpongan los bordes de nuestro módulo de presentación.
Una vez hecho esto, abra las opciones del módulo y vaya a la “pestaña Avanzado”. En el área "antes", agregue este fragmento de CSS:
contenido: '1.'; / * agrega el número "1" antes del contenido * / font-weight: bold; tamaño de fuente: 80px; opacidad: 0.7; / * hacer que el número sea ligeramente transparente * / color: azul; / * cambia el color de fuente del número * / posición: absoluta; índice z: 9999; izquierda: 0; / * coloca el contenido a 0px en el extremo izquierdo del contenido * / top: -20px; / * Coloca el contenido 20px por encima del borde superior * /
Una vez que haya agregado este fragmento, verá que el número aparece en la parte superior izquierda del pod de Blurb. Puede cambiar la posición del número cambiando las líneas "izquierda:" y "superior:" o cambiar el color y el tamaño de fuente del número en este fragmento de CSS.
Una vez que haya completado esto para el primer módulo, vaya a los tres nuevos módulos de publicidad y cambie la línea "contenido:" a:
contenido: '2.';
contenido: '3.';
... etc.
Ahora que hemos ordenado nuestros números, necesitamos agregar un poco de CSS para crear la forma de la flecha.
Abra cada módulo e ingréselo en el cuadro Después del cuadro CSS personalizado:
content:''; display:block; height:60px; width:60px; position:absolute ; top:40%; right:-30px; z-index:-1; background-color:#e8e8e8; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);
Ahora, sus cuatro notas introductorias deberían verse así:
Eso es todo por este tutorial, espero que te permita usar mejor los pseudo-elementos con las opciones que ofrece Divi.
