Como desarrollador experimentado, es posible que sientas que Divi te impediría ejercitar tus músculos CSS. Sin embargo, estarías equivocado.
Si bien Divi se creó para que los usuarios puedan aprender fácilmente, incluso si tienen poca experiencia con WordPress, también atiende a los usuarios más exigentes. Por ejemplo, Divi ePanel incluye una característica útil para agregar código CSS personalizado sin ningún problema: simplemente escriba el código en un cuadro y listo.
Si desea ver de qué es capaz esta opción CSS personalizada, hoy es su día de suerte. Le mostraremos cómo usar el ePanel, paso a paso, y cubriremos nueve de nuestros trucos CSS favoritos (y fáciles de implementar).
Nota del editor: esta publicación originalmente contenía diez guiones. Se eliminó uno, ya que se puede ajustar el tamaño de su logotipo y encabezado al desplazarse usando el personalizador de temas y no requiere un fragmento de código. Vea este video para ver un ejemplo.
Esto es pan comido.
Dirígete a tu Panel de WordPress y haz clic en la pestaña Divi . Esto lo llevará a la sección Opciones de tema del ePanel, donde se encuentra el cuadro CSS personalizado mencionado anteriormente .
Una vez que esté en el ePanel, desplácese hacia abajo hasta que encuentre el campo CSS al final. ¿Tienes algún código que te gustaría probar? Genial, luego péguelo y haga clic en Guardar y, bueno, eso es todo.
Ahora, si desea experimentar con algunas personalizaciones de CSS, eche un vistazo a los fragmentos simples que hemos recopilado a continuación de varios entusiastas de Divi y recursos generales de desarrollo web como Calcatraz, Brian Sniff Designs , Divi Theme Examples y GenoQuiroz .
1. Superponga su logotipo
Comencemos con un simple truco. La barra de encabezado predeterminada de Divi es agradable y elegante (además, cambia de tamaño de forma predeterminada a medida que se desplaza hacia abajo en la página), pero no funciona bien con logotipos con una altura amplia.
Si su logotipo es demasiado grande, se reducirá automáticamente para que quepa en la barra de encabezado. Lo que hace el siguiente código CSS es modificar el índice z de su logotipo a un valor absurdo para asegurarse de que se superponga sobre cualquier otro contenido en la página, incluso mientras se desplaza hacia abajo.
Aparte de eso, también puede jugar con los valores de altura máxima y margen superior hasta que su logotipo se muestre exactamente como lo desea.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
#top-header {z-index: 99999;}#logo {max-height: 220%;margin-top: -32px;z-index: 100000;}@media only screen and (max-width : 980px) {#logo { margin-top: 0px}} |
2. Agregue una imagen de fondo casi transparente al encabezado
Para un toque adicional de originalidad, puedes usar una imagen como fondo en tu encabezado. Sin embargo, cualquier imagen que elija debe tener un tamaño adecuado para actuar como encabezado.
Todo lo que tienes que hacer es subir tu nuevo fondo a tus archivos multimedia de WordPress y colocar su URL debajo de donde dice yourimagegoeshere.png . El resto del código está destinado a modificar su opacidad (para que los colores no dominen al resto de los elementos en su encabezado), establezca sus bordes y especifique su índice z como debajo de todos los demás elementos.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
|
#main-header::after {content: "";background-image: url('yourimagegoeshere.png');background-size:cover;opacity: 0.5;top: 0;left: 0;bottom: 0;right: 0;position: absolute;z-index: -1;} |
Este es bastante sencillo: vamos a cambiar el ancho predeterminado del widget de la barra lateral de Divi. Si alguna vez sintió que era demasiado estrecho, todo lo que tiene que hacer es echar un vistazo al código a continuación.
Este código cambiará el ancho predeterminado a 300 px y establecerá un margen de 30 px en el borde de la pantalla del espectador. Sin embargo, es posible que haya notado que también hay una consulta de medios. Dado que vamos a forzar un nuevo ancho y un nuevo margen, si no fuera por esa consulta de medios, su lado podría romperse en pantallas pequeñas.
Con fines de prueba, establecemos un ancho mínimo de 1200 px para aplicar los cambios de CSS que se describen a continuación. Si la resolución del espectador coincide o supera ese mínimo, podrá ver su nueva barra lateral.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
@media only screen and ( min-width: 1200px ) {.et_right_sidebar #sidebar .et_pb_widget {margin-right:30px !important;}.et_left_sidebar #sidebar .et_pb_widget {margin-left:30px !important;}.et_right_sidebar #left-area,.et_left_sidebar #left-area {width:720px !important; /* 1020 - width */}.et_right_sidebar #main-content .container:before {right:300px !important; /* width */}.et_left_sidebar #main-content .container:before {left:300px !important; /* width */}.et_right_sidebar #sidebar,.et_left_sidebar #sidebar {width:300px !important; /* width */}} |
4. Retire el borde inferior de la barra de encabezado
Si tiene buen ojo, es posible que haya notado un pequeño borde en la parte inferior de su encabezado Divi. Bueno, prepárate para un poco de emoción, porque hoy te enseñaremos cómo deshacerte de ese molesto borde para siempre.
A riesgo de sorprender a algunos, debemos aclarar que el divisor pequeño no es exactamente un borde per se , sino una simple sombra CSS, y el código a continuación simplemente establece su valor en ‘ninguno’.
|
01
02
03
04
05
06
07
08
09
|
#main-header{-webkit-box-shadow:none !important;-moz-box-shadow:none !important;box-shadow:none !important;} |
5. Agregue divisores entre widgets
“Pero Tom, ¿y si no soy un comunista que odia la frontera?” es lo que te estarás preguntando después de repasar la última personalización de CSS. Pues bien, sinceramente, preferimos no discriminar entre defensores fronterizos o no.
De hecho, para compensar nuestra irreflexión, le enseñaremos cómo agregar algunos bordes o divisores adicionales a sus barras laterales. Sí, somos así de geniales.
El siguiente código creará divisores entre cada widget o sección de su barra lateral, lo que le dará a su sitio una sensación más organizada. Puede modificar la altura y el color de los bordes cambiando los valores desde el principio.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
#sidebar .et_pb_widget {border-bottom: 1px solid #ddd;padding-bottom: 20px;margin-bottom: 20px;}#sidebar .et_pb_widget:last-of-type {border-bottom:0;} |
6. Agregar listas de viñetas conectadas
Este es genial: el efecto que ves en la imagen de arriba se logra creando líneas y puntos CSS como parte del fondo.
Sin embargo, tenga cuidado, este código aplicará el efecto globalmente en todas las listas.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
.dots-list {width: 100%;}.dots-list ol {padding-left: 50px;position: relative;margin-bottom: 20px;list-style: none !important;}.dots-list ol li {position: relative;margin-top: 0em;margin-bottom: 20px;}.dots-list ol li .number_divider {position: absolute;left: -50px;font-weight: 800;font-size: 2em;top: -5px;}.dots-list ol li:before {content: "";background: #8dbeb2;position: absolute;width: 2px;top: 1px;bottom: -21px;left: -24px;}.dots-list ol li:after {content: "";background: #8dbeb2;position: absolute;width: 15px;height: 15px;border-radius: 100%;top: 1px;left: -31px;}.dots-list ol li:last-child:before {content: "";background: #ffffff;} |
7. Agregue un color de fondo para el texto del control deslizante
De forma predeterminada, Divi simplemente superpondrá el texto de los controles deslizantes directamente encima de las imágenes, y se ve muy bien. Pero, ¿qué sucede si elige utilizar imágenes que dificulten discernir el texto? Bueno, podrías hacer modificaciones al estilo del texto mismo, o darle un fondo simple para que destaque.
Como puede suponer por el título de este punto, estamos a punto de enseñarle cómo lograr esto último. El siguiente código creará un rectángulo de fondo simple alrededor de su texto, cuyo color puede modificar cambiando el valor donde dice «color de fondo».
También puedes jugar con el relleno, los bordes y la opacidad, ¡así que vuélvete loco!
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
.et_pb_slide_description h2 {background-color: #000;border-top-right-radius: 5px;border-top-left-radius: 5px;-moz-border-top-right-radius: 5px;-moz-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;-webkit-border-top-left-radius: 5px;padding: 15px;opacity: .8;}.et_pb_slide_content p {background-color: #000;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;-moz-border-bottom-right-radius: 5px;-moz-border-bottom-left-radius: 5px;-webkit-border-bottom-right-radius: 5px;-webkit-border-bottom-left-radius: 5px;padding: 15px;opacity: .8;} |
8. Animar el icono de alternancia de Divi
Este pequeño fragmento te permitirá divertirte un poco con el ícono de alternancia de Divi; más específicamente, cambiando su color y girando la flecha predeterminada una vez que se ha activado.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
|
.et_pb_toggle_open .et_pb_toggle_title:before {transform: rotate(180deg);content: "25bc";transition:all 0.5s ease-in-out 0s;color:#e5e2d3;}.et_pb_toggle_title:before {content: "25bc";font-size:2em;transition:all 0.5s ease-in-out 0s;color:#179baf;} |
Si no desea saturar su barra de encabezado con demasiados enlaces, siempre puede optar por emular lo que hacen las pantallas móviles: use un interruptor para mostrar un menú de navegación.
Divi en realidad hace esto cuando se navega desde un dispositivo móvil, y el código a continuación simplemente hace que este botón de alternar sea accesible cuando su sitio se ve desde una PC. De esta manera, puede mantener su encabezado despejado.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
|
@media only screen and ( min-width:980px ) {#et_mobile_nav_menu { display:block }#top-menu-nav { display:none; }}/**change these settings if you want to style it**/.mobile_menu_bar:before {content: "61";font-size: 32px;left: 0;position: relative;top: 0;cursor: pointer;}} |
Conclusión
Incluso si está utilizando un tema, eso no tiene por qué impedir que su sitio sea verdaderamente único (especialmente si ese tema es Divi). Siempre hay opciones de personalización disponibles para los usuarios de WordPress, independientemente del tema que elija, además de miles y miles de tutoriales para abordar cualquier función que desee implementar.
En lo que respecta a Divi, recuerda que todo lo que tienes que hacer para hacer tus propias personalizaciones de CSS sin tocar ningún archivo principal es saltar a la pestaña Divi en tu tablero. Esto lo llevará automáticamente al Divi ePanel y siga las sencillas instrucciones en nuestra sección «Cómo usar el ePanel para agregar CSS».
¿Conoces algún truco genial de CSS para Divi? ¡Compártelos con todos los demás en la sección de comentarios a continuación!
Imagen en miniatura del artículo de Iconic Bestiary / shutterstock.com