Colección de Divi tips II

5 comentarios

Divi Tips II

Por: Caribdis.Net

Publicada: 6 de noviembre de 2016

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:

Botones desalineados

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.

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);

Ajustes del módulo Botón

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.

Botones superpuestos

Paso 3

Simplemente agregamos entre el Anuncio breve y el Botón un módulo Separador, con un alto de 10px.

Módulo separador

Separador 10px

Y tampoco olvidemos desactivar la opción Ocultar en dispositivos móviles de la pestaña Ajustes de diseño avanzado:

divi-tips6

El resultado:

Botones alineados

Sin perturbar en lo más mínimo la visualización en los dispositivos móviles:

Botones (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:

Logo y Cabecera

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.

Ajustes de barra de menú primario

Pero no queremos que la cabecera al desplazar la página quede del mismo alto, ni tampoco queremos que el logo se reduzca tanto:

Logo en cabecera fija

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.

Logo alternativo en barra de menú secundario

Últimas entradas de Caribdis.Net (ver todo)

Se responden todas las dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios, por lo general dentro de las 24/72 hs. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

5 Comentarios

  1. Adolfina

    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. 😉

    Responder
    • Caribdis.Net

      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.

      Responder
  2. Giovanny

    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.

    Responder
    • Caribdis Diseño Web

      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.

      Responder
  3. Ricardo Alfaro Jiménez

    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.

    Responder

Responder a Giovanny Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!