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

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en Electromecánica, Periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web

Últimas entradas por Caribdis Diseño Web (ver todas)