Un año después de la primera colección, hoy agregamos un par de mini-tutoriales más para engrosar el repertorio de trucos para Divi. Estas son dos personalizaciones que tuve que poner en práctica en la producción de webs, y las comparto para aquellos que se encuentren frente a las mismas necesidades.
Alinear botones a la parte inferior de las columnas
Este es un problema muy común cuando usamos el módulo Anuncio breve (Blurb) y queremos complementarlo con un módulo Botón para resaltar aún más el llamado a hacer clic. Aunque activemos la opción Igualar alturas de columna en los Ajustes de diseño avanzado del módulo Fila, con los botones el resultado siempre es el mismo:
Corregir esto es más sencillo de lo que parece, y solo son necesarias algunas líneas de código CSS más el módulo Separador entre el Anuncio breve y el Botón.
Paso 1
En primer lugar, asegurarnos de que la fila tiene activada la opción Igualar alturas de columna.
Paso 2
Aplicaremos los siguientes códigos CSS a los botones, en la pestaña CSS personalizado de cada módulo Botón, en el campo Elemento principal:
position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0);
Aunque ya casi hemos logrado lo que necesitamos, vamos a tener que aplicar un paso más, ya que al darle una posición absoluta al botón, el módulo con el texto más largo se le superpone.
Paso 3
Simplemente agregamos entre el Anuncio breve y el Botón un módulo Separador, con un alto de 10px.
Y tampoco olvidemos desactivar la opción Ocultar en dispositivos móviles de la pestaña Ajustes de diseño avanzado:
El resultado:
Sin perturbar en lo más mínimo la visualización en los dispositivos móviles:
Alternar el logo a la barra de menú secundario
Algunas veces sucede que nuestro logo (o el de nuestro cliente) es demasiado alto como para conservarlo en la cabecera fija. Si bien podemos ajustar la altura, tanto del logo como de la barra de menú primario, si necesitamos que el menú quede fijo al desplazar la página, puede que mantener el mismo alto sea una exageración. Divi nos da la opción Ocultar imagen del logo en Cabecera y navegación > Ajustes de navegación fija, pero nuestra intención es que el logo (o mejor dicho, una variante del logo) siga estando presente.
Así se ve la cabecera en su posición inicial:
Tenemos un logo de 200px de ancho por 108px de alto. Ajustamos la altura del menú primario a 150px y la altura máxima del logo a 100px.
Pero no queremos que la cabecera al desplazar la página quede del mismo alto, ni tampoco queremos que el logo se reduzca tanto:
Crearemos entonces un logo alternativo para que aparezca en la barra de menú secundario de la cabecera fija al desplazar la página. Tener en cuenta que el alto de este logo no debería exceder los 25 píxeles para que cuadre bien en el tamaño estándar de la barra.
Ahora nada más nos queda implementarlo.
Paso 1: Crear un tema hijo
Para esta personalización es necesario trabajar con un tema hijo. Recordemos las instrucciones:
Crear una carpeta en /wp-content/themes/ con el nombre de nuestro tema. Para este ejemplo, usaremos /Divi-child/.
Crear dentro de la carpeta /Divi-child/ un archivo functions.php con el siguiente contenido:
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}Crear también dentro de la carpeta /Divi-child/ un archivo style.css con el siguiente código:
/*
Theme Name: Nombre del Tema Hijo
Theme URI: http://urldeltemahijo.com/
Description: Tema hijo de Divi
Author: Nombre del Autor
Author URI: http://urldelautor.com/
Template: Divi
Version: 1.0
*/
/* =Estilos personalizados
------------------------------------------------------- */
.logotop {
display: none;
}
.et-fixed-header .logotop {
display: inline;
float: left;
margin-top: -5px;
}Paso 2: añadir la imagen del logo alternativo
Ya que es un componente del diseño de nuestro sitio, lo más conveniente es subir la imagen a una carpeta de imágenes dentro de /Divi-child/, que llamaremos /images/. El nombre del archivo puede ser cualquiera, nosotros lo llamaremos logo.png (siempre conviene que sea en este formato y con transparencia, para que pueda verse bien sobre cualquier color de fondo).
Paso 3: editar el archivo header.php
Una vez colocada la imagen en la carpeta correspondiente, copiaremos el archivo header.php de Divi y lo pegaremos en la carpeta raíz del tema hijo (/Divi-child/).
Lo abrimos con un editor de texto y buscamos la siguiente línea:
<div class="container clearfix">
Inmediatamente debajo, pegaremos el siguiente código:
<div class="logotop"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo get_stylesheet_directory_uri() . '/images/logo.png'; ?>" alt="Caribdis Diseño Web" /></a> </div>
Obviamente, tendremos que editar el texto alt de la imagen por el que nos resulte conveniente. Y recordar que si nuestro archivo de imagen del logo alternativo no se llama logo.png, editar el nombre por el que corresponda.
Paso 4: aplicar animación al logo alternativo
Este último paso es opcional, y nos sirve para darle un bonito efecto de aparición progresiva. Simplemente tenemos que agregar las siguientes líneas a la clase .et-fixed-header .logotop del archivo style.css:
webkit-animation: fadeIn 2s 1 cubic-bezier(0.77, 0, 0.175, 1); -moz-animation: fadeIn 2s 1 cubic-bezier(0.77, 0, 0.175, 1); -o-animation: fadeIn 2s 1 cubic-bezier(0.77, 0, 0.175, 1); animation: fadeIn 2s 1 cubic-bezier(0.77, 0, 0.175, 1);
Con lo que el estilo completo de style.css quedará:
.logotop {
display: none;
}
.et-fixed-header .logotop {
display: inline;
float: left;
margin-top: -5px;
webkit-animation: fadeIn 2s 1 cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: fadeIn 2s 1 cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: fadeIn 2s 1 cubic-bezier(0.77, 0, 0.175, 1);
animation: fadeIn 2s 1 cubic-bezier(0.77, 0, 0.175, 1);
}A partir de aquí solo nos quedará activar el tema hijo, o hacer primero una vista previa en donde podremos jugar a gusto con los colores de fondo y de enlaces de las opciones de ambas barras de menú para alternar estilos al desplazar la página.
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una vizsla loca.
- Guía para WordPress 6.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
Hola Ana, siempre genial tus post…
estoy muy confundida y preocupada por no saber si el problema es una anomalía con el tema Divi.
Primero, he puesto una imagen de fondo a una sección y el efecto parallax funciona correctamente en la pc, tablet y movil (porque dentro de divi configuré la imágen para los distintos dispositivos que alli te proporcionan)
luego he puesto una imagen de fondo a una sección que a su vez tiene multiples filas y el efecto parallax funciona correctamente en la pc, tablet y movil (porque dentro de divi configuré la imágen para los distintos dispositivos que alli te proporcionan), hasta alli todo se ve increíble, pero cuando voy a la realidad, y entro como cualquier usuario lo haría, en la pc todo esta súper, pero oh sorpresa, en la tablet y movil se hace demasiado grande y no corresponde a los ajustes que veo dentro de divi).
Probé tambien poniendo esa imágen como fondo general de la pagina en opciones del tema y ahi de plano se hace enorme tanto en pc y en movil.
Esto es frustrante porque la mayoría de la gente ve la página en su teléfono y me encantaría que se viera como debería.
He visto infinidad de tutoriales y no se que estoy haciendo mal, pero sí se que lo que quiero es posible porque lo he visto en otra página. https://demo.sonaar.io/milend-elementor/
Crees que exista un tutorial que me ayude a corregir ésto o puedes ayudarme?
De antemano un abrazo y gracias. 😉
Hola, Adolfina.
Disculpas por la demora en la respuesta. El problema con las imágenes de fondo es que adquieren diferentes proporciones de acuerdo con la resolución de pantalla. Con la última versión de Divi se pueden cargar imágenes individuales para cada dispositivo (antes era necesario CSS personalizado), así que quizá quieras probar con eso. Y el efecto Parallax, lamentablemente en Divi solo funciona en la vista de escritorio.
Saludos.
Buenas noches!
Hice un fullwidth slider, puse la foto en cada Ítem, active el efecto True Parallax, y todo normal hasta ahí… Se visualiza perfecto desde donde lo estoy editando. Pero luego voy a ensayar como se ve desde una ventana incógnito y me doy cuenta que la imagen aparece aumentada de manera que solo me da para visualizar un pedacito de la foto. Quisiera saber cómo puedo solucionar eso! Gracias.
Hola, Giovanny.
Ese es el comportamiento normal del Parallax: la imagen tiene que cubrir la pantalla completa (por eso porciones de la imagen quedan tapadas por la sección de abajo). Tendrías que intentar usar una imagen de al menos de 1920px de ancho y con la porción que quieras que quede visible en la parte superior.
Saludos.
Estimada Anita:
Como siempre nos sorprendes con estos tips tan útiles para los que adoptamos a DIVI como nuestro tema de cabecera. Muchas gracias por tu constante apoyo.
Saludos desde Chile.