Cómo crear patrones únicos usando elementos pseudo antes y después en la división

Como diseñadores web, siempre buscamos nuevas formas de agregar individualidad a los sitios web creados. Div ofrece oportunidades interminables para producir aspectos únicos, pero siempre hay pequeñas adiciones que podemos incluir para unir un diseño. Aquí los pseudo-elementos son muy útiles. ¿Cuáles son los CSS de Pseudo-Elements? Simplemente, se puede usar un CSS de pseudo elemento para estilizar ciertas partes de un artículo. Hay cinco tipos de pseudo-elemento que hacen cosas diferentes. Para el propósito de esta publicación, veremos :: antes y :: después. Estos dos pseudo-elementos 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 las imágenes existentes, el texto y cualquier otra cosa!
Entonces, ¿por qué usaríamos estos pseudoelementos? Antes y después, son perfectos para desbloquear las posibilidades de diseño sin tener que agregar más elementos o módulos. Igualmente, son útiles para agregar elementos adicionales sin tener que tocar plantillas HTML o temas básicos. ¿Cómo se usa los elementos antes y después con Div? Si todo parece un poco confundido hasta ahora, ¡no te preocupes! Si tuviéramos que usar :: antes y :: después de que escribamos el código CSS desde cero, se vería así: imagine que tenemos una línea de texto con la clase CSS de “texto de texto” para estilizar y personalizar esta línea sería:
.Text-Ejemplo {*Aquí es donde agrega el estilo*} ahora, si desea agregar y estilizar un elemento :: antes o :: después, CSS se vería así: .Text-Ejemplo :: antes {*esto Es donde agrega antes del contenido y el estilo*}. TEXT-Ejemplo :: después de {*Aquí es donde agrega el contenido y el estilo*} Afortunadamente, Div ofrece fácil acceso a pseudo-elementos: antes y :: después, mucho menos problemas . De hecho, si alguna vez ha abierto la pestaña “Avanzada” para agregar el código CSS personalizado, verá las áreas a las que referimos las que podemos usarlas para crear algunos modelos verdaderamente flexibles e interesantes.

Tire con el ojo, esto es lo que creamos en este tutorial: Ejemplo 1
Ejemplo 2

Ejemplo 3

Nociones básicas para este tutorial Solo necesitamos una copia del tema de la división y una pizarra vacía. Para empezar, crearemos una nueva página y, después de agregar un título de página, haremos clic en Visual Builder.

¡Ahora estamos listos para comenzar! Ejemplo 1: los módulos de propaganda numerados usando Pseudo Elements Blurb es probablemente uno de los módulos de división más flexibles a su disposición. En este caso, usaremos pseudoelementos para agregar números antes de cada propaganda para crear una sección de paso por paso “cómo funciona”. También agregaremos una forma de flecha a la derecha para indicar el proceso.

¿Qué crearemos?
Aunque este diseño funcionará con cualquier diseño de propaganda, tomé prestada la sección de propaganda del diseño de la agencia web. Si desea utilizarlos como punto de partida, puede acceder a la página de destino de la agencia web creando una nueva página y accediendo al fabricante frontal. Cuando su página esté cargando, tendrá la opción de usar un aspecto prefabricado, una de los aspectos guardados o para construir desde cero. Seleccione el aspecto prefabricado y use la barra de búsqueda para encontrar los aspectos de la “agencia web”. La sección de la propaganda de este tutorial se puede encontrar en la página de destino.

Una vez cargado, la única diferencia entre la apariencia prefabricada y nuestro ejemplo es que cambiamos el fondo de cada propaganda, el título y el color de la fuente de texto y agregamos un pequeño relleno.

Una vez que haya cambiado estas configuraciones para una sola combinación, puede hacer clic en el modo y usar “Estilos de extensión” para aplicarlos a los otros tres.


Ahora que hemos personalizado los cuatro módulos de blurbs para mostrar como les deseamos, es hora de agregar un código para crear el elemento numerado. Sin embargo, para que este diseño funcione, primero debemos agregar una línea CSS a la caja CSS personalizada.




Desbordamiento: visible;

Esto simplemente permitirá que cualquier elemento que creemos en los próximos pasos sean visibles donde sea que los bordes de nuestra superposición del módulo de propaganda se superpongan. Después de haber hecho esto, abra las opciones del módulo y explore la “pestaña avanzada”. En el cuadro “adelante”, agregue este fragmento CSS: contenido: ‘1.’; / * Agrega el número 1. como antes del contenido */
Font-Weight: Bold;

Tamaño de fuente: 80px;
Opacidad: 0.7; / * Hace que el número sea ligeramente transparente */
Color azul; / * Cambia el color del número de texto */ POST: Absolute;
Index Z: 9999;
Izquierda: 0; / * Publica el contenido 0px lejos del borde izquierdo */
Arriba: -20px; / * Publica el contenido 20px sobre el borde superior */
Una vez que haya agregado este fragmento de código, verá el número que aparece en la esquina superior izquierda del módulo de propaganda. Puede cambiar la posición del número cambiando las líneas “izquierda” y “arriba:” o puede cambiar el color y el tamaño del número del número en este fragmento CSS. Después de haber terminado esto para el primer módulo, vaya a los tres nuevos módulos de blurbs y cambie la línea “Contenido:” TO: Content: “2.”; Contenido: “3.”; …y así.
Ahora que hemos ordenado nuestros números, debemos agregar un poco de CSS para crear la forma de la flecha. Abra cada módulo e ingrese esto en el cuadro después en el área CSS personalizada:
Contenido: ”;

Bloqueo de pantalla;

Altura: 60px; / * Tamaño de la forma */
Ancho: 60px; / * Tamaño de la forma */
Posición: Absoluto;
Arriba: 40%;
Derecha: -30px;
Z -dex: -1;
Color de fondo: #E8E8E8; / * Color de la forma */
Transformación: rotado (45deg);
-Ms-transform: rotado (45deg);
-Webkit-transform: rotado (45deg);
Ahora las cuatro borrones deberían verse así:
Ejemplo 2. Agregar formas únicas a sus módulos existentes Este diseño se basa en fragmentos de código simples pero eficientes, que se agregan a ambos cuadros CSS personalizados :: antes y: después de cada módulo de texto. La belleza de usar pseudo-elementos aquí es que podemos integrar formas y objetos únicos en nuestros módulos existentes sin tener que agregar elementos o módulos adicionales a nuestra página. Debido a que estos pseudo-elementos están contenidos en nuestros módulos existentes, no agregan espacio adicional a nuestros proyectos y siguen siendo excelentes en todos los dispositivos. ¿Qué crearemos?
Para crear la apariencia inicial, debemos agregar una sección normal con tres columnas, establecidas en el ancho predeterminado. Después de haber hecho esto, agregue un módulo de texto a una de las nuevas columnas.

Una vez más, puede estilizar este módulo de texto como desee, sin embargo, si sigue esto, estos pasos para hacer este diseño: abra las opciones del módulo de texto y agregue el contenido del texto y un fondo o un color de fondo, según sea necesario. Utilicé una imagen de fondo normal con un gradiente transparente arriba:

Luego configure las siguientes opciones de diseño:
1. Relleno superior: 120 PX y debajo de relleno: 120 PX

2. Alineación de texto: Centro de centro y texto: #ffffff

3. Asociación de encabezado: color central y encabezado: # F5E5D


Ahora que tenemos todos los aspectos visuales para su primer módulo de texto, es hora de agregar CSS para que ocurra la magia. En la pestaña avanzada del módulo de texto, agregue el siguiente código al cuadro “antes”: Content: ”;
Altura: 30px; / * Cambiar el tamaño para suitir su diseño */

Ancho: 30px; / * Cambie el tamaño para suitir su diseño */ Display: Block;

Posición: Absoluto;


Border-top: sólido 3px #f5ee5d; / * Cambie el color para suitir su diseño */
Border-izquierda: sólido 3px #f5ee5d; / * Cambie el color para suitir su diseño */
Izquierda: 20px; / * Cambie la posición para suitir su diseño */
Arriba: 20px; / * Cambie la posición para suitir su diseño */
Y luego agregue el siguiente código al cuadro “After”: Content: ”;
Altura: 30px; / * Cambiar el tamaño para suitir su diseño */
Ancho: 30px; / * Cambiar el tamaño para suitir su diseño */
Bloqueo de pantalla;
Posición: Absoluto;


Border-Bottom: Solid 3px #F5EEE5D; / * Cambie el color para suitir su diseño */
Border-Right: sólido 3px #F5EE5D; / * Cambie el color para suitir su diseño */
Derecha: 20px; / * Cambie la posición para suitir su diseño */
Abajo: 20px; / * Cambie la posición para suitir su diseño */
Después de haber agregado estos fragmentos de código al modo, verá nuestras nuevas formas fantasiosas. Si te preguntas qué está haciendo este CSS, en realidad es bastante simple. Todo lo que hacemos es crear un cuadrado transparente que se coloque 20 PX desde arriba y izquierda (y abajo y derecha) del módulo de texto. Luego agregue dos bordes a estos cuadrados para crear el efecto de flecha. Cuando esté satisfecho con la apariencia de este primer módulo de texto, simplemente cópielo y pegárelo para llenar las otras columnas y cambiar el contenido del texto, el fondo y los estilos para adaptarse.
La ventaja de este método es que funcionará con casi cualquier modo de división con un poco de personalización. Si desea ser más elegante, intente agregar algunos CSS adicionales para rotar, inclinar y personalizar los elementos :: antes y :: después de más allá. ¡Divertirse! Ejemplo 3. Agregar iconos y descripciones a los títulos de pestañas En este diseño, aprovecharemos la capacidad de agregar un icono de imagen antes de cierto contenido existente, así como una pequeña descripción del texto a continuación. Esto es perfecto para personalizar el módulo de pestañas Div Divi un poco más lejos de lo que puede normalmente. Nota: aunque la adición del contenido de CSS es excelente para el diseño, los motores de búsqueda no lo indexan fácilmente (aunque Google en realidad indexa el contenido de CSS y JavaScript, lleva mucho más tiempo y no es confiable hoy. no indexe este contenido en absoluto). Por esta razón, su contenido debe ser mínimo y no debe confiar en él para influir en su potencial de clasificación. Lo que creamos: en primer lugar, tenemos que agregar nuestra sección estándar y una fila con 1 columna, seguido del módulo del DIV en sí. Dentro del módulo de archivo, debemos agregar nuestros títulos y contenido a cada pestaña, porque administraremos los estilos en los próximos pasos.
Una vez que nuestro contenido está en su lugar, debemos comenzar a agregar contenido al elemento :: antes del módulo. Debido a que no podemos agregar CSS personalizados a ciertas pestañas utilizando el método que seguimos anteriormente, tendremos que hacerlo ligeramente diferente. Abra las opciones del módulo de archivo y, en la pestaña avanzada, le dé al módulo el módulo “Archivo de lujo”.
Después de haber agregado esta clase CSS, necesitamos hacer poca capacitación. Para agregar algunos iconos o imágenes a los títulos de pestañas, es obvio que debemos agregarlos a WordPress. Vaya a la pestaña de medios desde el tablero de WordPress y cargue los iconos elegidos como lo haría normalmente. Con la carga de sus imágenes, debemos hacer clic en cada una y copiar la URL que WordPress generó para nosotros. Cruce cada una de sus imágenes y copie y pegue estas URL a un documento o en la aplicación de las calificaciones elegidas.
Con las direcciones de URL de las imágenes elegidas en cuestión, acceda a las opciones del tema Divin desde el menú divino en el tablero de WordPress. Al final de esta página, verá un cuadro donde puede agregar su propio CSS personalizado. En este cuadro pegaremos un código CSS.

El siguiente fragmento agregará las imágenes sobre cada título de la pestaña. Simplemente copie y pegue este fragmento en el cuadro CSS personalizado y reemplace el contenido entre (e incluya) asteriscos (por ejemplo *, reemplace esto con la URL para su primera imagen *) con la URL que ha mencionado. .fancy-tabs .et_pb_tab_0 a :: antes {


Contenido: URL (*Reemplace esto con la URL para su primera imagen*);

Top-top: 20px;

Bloqueo de pantalla;

}

.fancy-tabs .et_pb_tab_1 a :: antes {

Contenido: URL (*Reemplace esto con la URL para su segunda imagen*);
Top-top: 20px;
Bloqueo de pantalla;
}
.fancy-tabs .et_pb_tab_content a :: antes {
Contenido: ”! }
Si regresa a la página con el módulo de pestaña activado, ahora debería ver que las imágenes se han agregado sobre cada título: ¡éxito!
Entonces, ¿qué hay de agregar las descripciones? Afortunadamente, esto es bastante simple. Incluso bajo el código que acaba de copiar en el cuadro CSS personalizado, pegue lo siguiente: .Fancy-Tabs .ET_PB_TAB_0 A :: After {Content: ‘Esta es una descripción’;
Tamaño de fuente: 10px;
Top-top: 5px;
Bloqueo de pantalla;
}
.fancy-tabs .et_pb_tab_1 a :: después {

Contenido: ‘Esta es una descripción’;
Tamaño de fuente: 10px;
Top-top: 5px;
Bloqueo de pantalla;
}
.fancy-tabs .et_pb_tab_content a :: después {
Contenido: ”! }
Como antes con sus imágenes, deberá reemplazar “Esta es una descripción” con su propio contenido. ¡Volviendo a la página con el módulo de archivo activado, verá que ahora tenemos descripciones fantasiosas!
Finalmente, solo tenemos que aplicar un poco más de CSS para que el diseño completo se presente anteriormente. Nuevamente, copie el siguiente fragmento en el mismo cuadro CSS personalizado: .fancy-tabs .et_pb_tab_content a: después {
Contenido: ”! }
.fancy-tabs .et_pb_tabs_controls li {
Ancho: ¡50%! Importante;
}
.fancy-tabs .et_pb_tabs_controls li a {

Ancho: 100%! Importante;

Text-Align: Center;
}
@Media (max-width: 768px) {
.fancy-tabs .et_pb_tabs_controls li {
Ancho: 100%! Importante;
}
.fancy-tabs .et_pb_tabs_controls {
Relleno: 0! IMPORTANTE;
}
}
Este código enfoca el texto y las imágenes de las pestañas y aumenta el ancho de las pestañas para cubrir todo el módulo.
También agregamos algunos CSS para asegurarnos de que las pestañas se vean bien en todos los dispositivos: si prefiere no tener las pestañas con ancho completo y apilarlas en el móvil, tendremos que girar y rodear el código CSS original en una consulta mediada . Esto significa que en el tamaño del tamaño de una tableta más grande, agregamos las descripciones e íconos, sin embargo, en los dispositivos más pequeños, volveremos al estilo predeterminado. Para hacer esto, copie el código CSS modificado a continuación y péguelo a su área CSS personalizada de la opción de Div: @Media (min-width: 769px) {.fancy-tabs .et_pb_tab_0 a :: antes {
Contenido: URL (*Reemplace esto con la URL para su primera imagen*);
Top-top: 20px;
Bloqueo de pantalla;
}
.fancy-tabs .et_pb_tab_1 a :: antes {
Contenido: URL (*Reemplace esto con la URL para su segunda imagen*);

Top-top: 20px;
Bloqueo de pantalla;
}
.fancy-tabs .et_pb_tab_content a :: antes {
Contenido: ”! }
.fancy-tabs .et_pb_tab_0 a :: después {
Contenido: ‘Esta es una descripción’;
Tamaño de fuente: 10px;
Top-top: 5px;
Bloqueo de pantalla;
}
.fancy-tabs .et_pb_tab_1 a :: después {
Contenido: ‘Esta es una descripción’;
Tamaño de fuente: 10px;
Top-top: 5px;
Bloqueo de pantalla;
}
.fancy-tabs .et_pb_tab_content a :: después {
Contenido: ”! }
.fancy-tabs .et_pb_tab_content a: después {
Contenido: ”! }
.fancy-tabs .et_pb_tabs_controls li {
Ancho: ¡50%! Importante;
}
.fancy-tabs .et_pb_tabs_controls li a {
Ancho: 100%! Importante;
Text-Align: Center;
}
}
Agregando varias pestañas en este caso, creamos 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 está en una posición en la que está buscando crear más de 2 pestañas, necesitaremos cambiar 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: el primero que comienza con 0 (.ET_PB_TAB_0), aumentando por 1 cada vez (.ET_PB_TAB_1, .ET_PB_TAB_2 y así sucesivamente). Ya hemos tratado con las dos primeras pestañas, por lo que cuando agregamos más, podemos copiar e insertar una sección del código para cada nueva pestaña: .Fancy-Tabs .et_pb_tab_0 a: antes {contenido (URL (*Reemplace esto con el URL para su primera imagen*);
Top-top: 20px;
}
y cambie el número en la clase (.et_pb_tab_0) a 2, 3, 4 etc. Deberá hacer lo mismo para sus descripciones. La última enmienda que debemos hacer es ajustar otra línea CSS. Tome el número de sus pestañas y divídalo a 100. Tenga en cuenta este número y navegue a la siguiente sección del CSS personalizado: .Fancy-Tabs .ET_PB_TABS_CONTROLS LI {
Ancho: ¡50%! Importante;
}
y cambie el 50% con su respuesta. Esto asegurará que sus pestañas estén igualmente espaciadas en el ancho del módulo. Por ejemplo, si crea una tercera pestaña, el código CSS adicional que necesita será el siguiente: .Fancy-Tabs .et_pb_tabs_controls Li {
Ancho: 33%! Importante;


}