Los botones de redes sociales se han convertido en un componente estándar de un sitio web debido al gran auge de las redes sociales. Y con Divi , puede agregar fácilmente esos botones de redes sociales usando el módulo de seguimiento de redes sociales. Sin embargo, por defecto, los botones se alinearán horizontalmente. Esto es perfecto para la mayoría de los sitios. Pero si está buscando un diseño vertical de sus íconos, puede hacerlo fácilmente con unos simples ajustes en el módulo.
En este tutorial, le mostraré una forma rápida y sencilla de crear botones verticales de redes sociales en cualquier parte de su página web con Divi.
Empecemos.
Aquí hay un adelanto del diseño que construiremos.
Empezando
Suscríbete a nuestro canal de Youtube
Para comenzar, crea una nueva página y dale un título a tu página. Luego implemente Divi Builder y seleccione «Elegir un diseño prefabricado». Desde la ventana emergente Cargar desde la biblioteca, abra el paquete de diseño del planificador de bodas y seleccione usar el diseño de la página de inicio del planificador de bodas.
Ahora ya está listo para comenzar a construir.
Al examinar el diseño, puede ver que la sección superior incluye una fila de dos columnas de ancho completo. En la primera columna, hay un módulo divisor invisible con una imagen de fondo de columna. En la segunda columna hay un módulo de texto y un módulo de botones en la columna de la derecha. Para este ejemplo, queremos agregar botones verticales de redes sociales en la parte superior izquierda de la fila. Para hacer esto, agregue un módulo de seguimiento de redes sociales debajo del divisor en la columna 1.
Luego arrastre el módulo de seguimiento de redes sociales sobre el módulo divisor para que quede en la parte superior de la columna 1.
Después de eso, abra la configuración de seguimiento de las redes sociales. Agregue nuevas redes sociales haciendo clic en el ícono más debajo de la pestaña de contenido y luego seleccionando una red social para el nuevo botón. Eventualmente, también deberá agregar la URL del enlace de la cuenta para cada botón para que sus enlaces realmente redirijan a sus respectivas páginas de redes sociales.
Para este ejemplo, agregué redes sociales para Facebook, Twitter, Pinterest e Instagram.
Ahora saltemos a la pestaña de diseño y actualicemos lo siguiente:
Color de fondo: rgba(203,185,168,0.64) Ancho
: 64px (la suma del ancho de un ícono más el relleno izquierdo y derecho)
Margen personalizado (escritorio): -3vw superior
Margen personalizado (tableta): 30px Relleno
personalizado: 16px superior, 16px abajo, 16px a la izquierda, 16px a la derecha
Ajustar el ancho del módulo para apilar los íconos verticalmente
Para hacer que los botones de redes sociales se apilen verticalmente, ajustamos el tamaño de nuestro módulo de seguimiento de redes sociales para obligar a los botones a apilarse uno encima del otro. Para determinar el ancho de su visualización vertical de seguimiento de redes sociales, debe calcular la suma del ancho de un ícono (32 px) y el relleno izquierdo y derecho (16 px + 16 px = 32 px). Por lo tanto, en este caso, el ancho total de nuestro módulo de seguimiento de redes sociales debe ser de 64 px.
Para finalizar el diseño, actualice el color de fondo de cada botón de red social individual con lo siguiente:
Color de fondo: #333333
Ahora echemos un vistazo al resultado final.
Si desea tener más control sobre el posicionamiento de sus botones verticales de redes sociales en la parte superior de su página, puede agregar una nueva fila en la parte superior de la sección y agregar su módulo de seguimiento de redes sociales a la fila. Luego, puede configurar fácilmente la alineación del módulo a la izquierda, al centro o a la derecha.
Aquí está cómo hacerlo.
Cree una nueva fila de una columna y arrástrela a la parte superior de la sección para que quede en la parte superior de la página. Luego arrastre su módulo de seguimiento de redes sociales a la nueva fila.
Abra la configuración de la nueva fila y actualice lo siguiente:
Ancho personalizado: 100%
Relleno personalizado: 0px arriba, 0px abajo
Luego vaya a la pestaña avanzada e ingrese el siguiente CSS personalizado en el elemento principal:
|
01
|
z-index: 10; |
Este css permitirá que el contenido de la columna (el módulo de seguimiento de redes sociales) permanezca visible una vez que establezcamos el margen negativo para superponer el contenido debajo de él.
Ahora abra la configuración de seguimiento de las redes sociales y actualice lo siguiente:
Relleno personalizado: -140px
Con nuestro css «z-index: 10» en su lugar, el módulo puede superponer el contenido de la fila debajo de él sin ocultarlo.
Con esta configuración, ahora puede ajustar la alineación del módulo para mostrar sus botones verticales de redes sociales a la izquierda, al centro o a la derecha de la parte superior de la página.
Así es como se ve el diseño final con el módulo centrado.
Así es como se ve el diseño final con el módulo alineado a la derecha.
Posicionamiento fijo o estático
Si está buscando dar a sus botones verticales de redes sociales una posición fija (o estática) en su página, consulte el tutorial sobre cómo hacer que cualquier elemento de la página Divi sea pegajoso .
Pensamientos finales
Aunque el módulo Social Media Follow de Divi muestra los botones horizontalmente de forma predeterminada, todo lo que se necesita es un simple ajuste del ancho del módulo para crear una hermosa visualización vertical de sus botones de redes sociales. Y, utilizando el poder de las opciones de diseño integradas de Divi, puede diseñar y colocar sus botones de medios verticales en cualquier lugar que desee. Espero que esto te ayude a crear un elemento de diseño nuevo y fresco para tu próximo proyecto.
Espero escuchar de usted en los comentarios.
¡Salud!