---
title: "Colección de Divi tips II"
url: https://caribdis.net/2016/11/06/coleccion-de-divi-tips-ii/
date: 2016-11-06
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "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..."
categories:
  - "Consejos"
  - "Divi"
tags:
  - "Divi"
  - "Elegant Themes"
  - "tema"
  - "tutorial"
  - "WordPress"
image: https://caribdis.net/wp-content/uploads/2016/11/divi-tips.png
word_count: 842
---

# Colección de Divi tips II

Un año después de la [primera colección](https://caribdis.net/2015/11/09/coleccion-de-divi-tips-i/), hoy agregamos un par de mini-tutoriales más para engrosar el repertorio de trucos para [**Divi**](https://caribdis.link/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](//caribdis.net/wp-content/uploads/2016/11/divi-tips1-768x441.png)](https://caribdis.net/wp-content/uploads/2016/11/divi-tips1.png)

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](//caribdis.net/wp-content/uploads/2016/11/divi-tips2.png)

#### 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](//caribdis.net/wp-content/uploads/2016/11/divi-tips3-768x392.png)](https://caribdis.net/wp-content/uploads/2016/11/divi-tips3.png)

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](//caribdis.net/wp-content/uploads/2016/11/divi-tips4-768x413.png)](https://caribdis.net/wp-content/uploads/2016/11/divi-tips4.png)

#### Paso 3

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

[![Módulo separador](//caribdis.net/wp-content/uploads/2016/11/divi-tips5a-768x254.png)](https://caribdis.net/wp-content/uploads/2016/11/divi-tips5a.png)

![Separador 10px](//caribdis.net/wp-content/uploads/2016/11/divi-tips5.png)

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

![divi-tips6](//caribdis.net/wp-content/uploads/2016/11/divi-tips6.png)

El resultado:

[![Botones alineados](//caribdis.net/wp-content/uploads/2016/11/divi-tips7-768x436.png)](https://caribdis.net/wp-content/uploads/2016/11/divi-tips7.png)

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

![Botones (Dispositivos móviles)](//caribdis.net/wp-content/uploads/2016/11/divi-tips8-768x612.png)

### 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](//caribdis.net/wp-content/uploads/2016/11/divi-tips9-768x432.png)](https://caribdis.net/wp-content/uploads/2016/11/divi-tips9.png)

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](//caribdis.net/wp-content/uploads/2016/11/divi-tips10.png)

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](//caribdis.net/wp-content/uploads/2016/11/divi-tips11-768x432.png)](https://caribdis.net/wp-content/uploads/2016/11/divi-tips11.png)

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](//i.imgur.com/XVt41vi.gif)