5 maneras fáciles de embellecer su barra lateral Divi

Bienvenidos al día 69 de nuestra Maratón Divi 100. ¡Sigue sintonizando durante 100 días seguidos los increíbles recursos de Divi mientras hacemos la cuenta regresiva para el increíble lanzamiento de Divi 3.0 en el último día de la serie!


Al diseñar un sitio web, la barra lateral a veces puede descuidarse un poco. Es fácil dejarse llevar por la creación de una página de inicio de blog espectacular y olvidarse de eliminar los widgets estándar y diseñarlos para que coincidan con el resto de su sitio. Recuerde, incluso si prefiere el aspecto de una publicación de ancho completo, la barra lateral estándar seguirá apareciendo en las páginas de archivo.

Su barra lateral es una excelente manera de ayudar a sus usuarios a navegar por el área de su blog. Puede usar widgets para ayudarlos a encontrar las publicaciones que más les atraigan, así como utilizarlos para publicidad externa o marketing interno, como suscripciones a boletines.

El módulo de barra lateral Divi también le permite colocar una cantidad ilimitada de barras laterales personalizadas en sus páginas de diseño. Particularmente me gusta usar barras laterales personalizadas como parte del área de inicio del blog. Aquí hay un gran ejemplo .

En esta publicación, voy a compartir cinco de mis formas favoritas de darle vida a tu barra lateral. Antes de comenzar, me centraré en la barra lateral estándar, que puede editar, como todas las áreas de widgets, a través de Apariencia > Widgets en el menú de administración de WordPress.

1. Use el widget de publicidad de temas elegantes

Aunque Divi no viene con un widget de carga de imágenes, el widget de publicidad de ET es su arma secreta cuando se trata de agregar imágenes a su barra lateral. Por supuesto, puede agregar imágenes usando el widget de texto estándar de WordPress y escribiendo el HTML para crear un enlace de imagen, pero este widget de ET lo hace fácil para usted. Aún necesita cargar previamente la imagen que desea agregar y copiar la URL de la biblioteca de medios, pero no necesita saber cómo escribir el código HTML. Puede agregar tantas imágenes como desee, bajo un solo encabezado (ver más abajo). También puede agregar títulos adicionales y etiquetas alternativas.

2. Dale estilo a los títulos de los widgets

Los títulos de los widgets en la barra lateral estándar heredarán el estilo de sus etiquetas H4, pero si desea personalizarlos aún más, puede orientarlos usando la clase .widgettitle . Usando esa clase en el cuadro de Opciones del tema Divi , puede cambiar la fuente, el tamaño, el color, la alineación y el relleno.

Puede encontrar el cuadro CSS personalizado en la parte inferior de las Opciones de tema Divi> pestaña General.

Por ejemplo:

01
02
03
04
05
.widgettitle {
text-align:center;
font-size:18px;
padding-bottom: 20px;
}

Uno de mis trucos de estilo favoritos es agregar un borde inferior al título del widget, utilizando la propiedad border-bottom. Eche un vistazo a este ejemplo  que tiene una agradable sensación editorial.

Puede lograr este efecto agregando el siguiente fragmento de código a su clase .widgettitle.

01
02
03
04
.widgettitle {
    border-bottom: solid 2px #000000;
    margin-bottom: 25px;
}

3. Ajuste el margen entre widgets

Si desea reducir el espacio entre sus widgets o, alternativamente, darles un poco de espacio para respirar, puede ajustar el porcentaje del margen inferior. Es bastante difícil de encontrar inspeccionando el código, así que aquí hay un atajo útil.

01
02
03
.et_pb_sidebar .et_pb_widget {
margin-bottom: 14% !important;
}

4. Use un menú personalizado para mostrar categorías

El widget de categorías estándar de WordPress hace el trabajo cuando desea mostrar categorías en su barra lateral, pero es complicado diseñarlo. No le permite mostrar las categorías en el orden que desee ni elegir cuáles aparecen. Esto es molesto cuando accidentalmente dejas una publicación como sin categorizar.

En cambio, me gusta usar el widget de menú personalizado para mostrar categorías y es mucho más fácil de diseñar.

Primero, cree un nuevo menú personalizado en el área Apariencia > Menús. Luego agregue las categorías elegidas y guarde el menú. No es necesario asignarlo a un área.

Luego puede seleccionar ese menú, Apariencia > Widgets, usando el widget Menú personalizado.

Si realmente desea darle un poco de estilo a su menú personalizado, puede agregar un color de fondo y relleno, así como diseñar las propiedades de la fuente, como lo he hecho a continuación.

En el ejemplo anterior, apunté a los enlaces del menú personalizado, usando el siguiente código:

01
02
03
04
.et_pb_widget ul li {
background-color: #f9f9f9;
padding: 10px;
}

5. Use un generador de widgets para agregar contenido dinámico de redes sociales

A muchos bloggers les encanta agregar un feed de Instagram a su barra lateral. Es una excelente manera de mantener su barra lateral fresca y alentar a los visitantes a seguirlo en las redes sociales. Puede incrustar el código de Instagram manualmente en el widget de texto ( consulte esta excelente publicación al respecto en el blog de ET ) o agregar un complemento gratuito como Alpine Photo Tile para Instagram . Sin embargo, no me gusta agregar complementos cuando no es necesario y las fuentes de código incrustado son más difíciles de diseñar.

En cambio, hay una nueva generación de generadores de widgets que le permiten generar código receptivo y diseñarlo fácilmente antes de agregarlo a su widget de texto (o módulo de código si desea agregarlo a un diseño de constructor).

Mi favorito es Lightwidget .

Para usarlo, deberá registrarse y luego iniciar sesión en Instagram en línea para que pueda otorgar permiso para que el generador de widgets acceda a su cuenta. Luego elija su número preferido de columnas y filas, obtenga una vista previa de su widget y tome el código.

Nota: si desea utilizar el widget en un sitio con un certificado SSL (es decir, que tiene https: en el prefijo de URL), deberá actualizar a la versión pro.

Terminando

Espero que disfrutes dándole vida a tu barra lateral de Divi. Los consejos anteriores ofrecen pequeñas mejoras que se suman a un gran impacto. ¡El diablo está en los detalles!

¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!

Imagen de fondo de la imagen destacada a través de Martina Vaculikova / shutterstock.com

Divi 100 Día 69

La cuenta atrás para Divi 3.0

Esta publicación es parte de nuestro maratón Divi 100. ¡Síguenos mientras publicamos recursos Divi gratuitos durante 100 días seguidos! Esta cuenta regresiva de 100 días terminará con el revolucionario lanzamiento de Divi 3.0, que incluye nuestro nuevo editor visual creado desde cero con React. ¡Divi 3.0 cambiará para siempre la forma en que construyes sitios web con Divi Builder !
Que empiece la cuenta atrás.

Más información sobre Divi 3.0