Cómo Hacer una Barra de Botones Sociales Flotantes con Divi

Por lo universal si queremos mostrar en WordPress ordenanza para que nos sigan en nuestras redes sociales necesitamos instalar un plugin.

Sin secuestro con Divi no es necesario instalar ninguna aparejo adicional.

En la preceptor de hoy te voy a mostrar cómo insertar una mostrador de ordenanza sociales en las entradas de tu blog usando el Theme Builder de Divi.

Cómo Crear una Barra de Botones Sociales con Divi

Hasta ahora la única forma que había de añadir una mostrador de ordenanza sociales en un sitio WordPress era instalando un plugin dedicado a esa tarea.

Pero ahora gracias a Divi y al Theme Builder ya no necesitamos ningún plugin adicional porque podemos crear nuestra mostrador directamente con el constructor de plantillas.

Y por otra parte, no presente ocurrir pasado ningún plugin de ordenanza sociales que ofrezca un nivel de personalización tan parada y tanta sencillez como Divi.

Recursos necesarios

Para crear la sección de entradas recientes con Divi vamos a usar las siguientes herramientas:

Paso a paso

En el sucesivo video te muestro paso a paso cómo crear una mostrador de ordenanza de seguir en redes sociales con Divi.

Paso 1 – Sección para la mostrador de ordenanza

Para comenzar añadimos una sección en cualquier empleo de la plantilla de entradas en la que queremos mostrar los ordenanza de seguir en redes sociales con Divi.

Por ahora no hacemos ningún ajuste en la sección.

Paso 2 – Fila con 1 columna

Añadimos una fila con estructura de 1 columna y configuramos sus ajustes así:

TAMAÑO:

• Uso Personalizado del Canalón de Ancho: Sí.
• Espacio entre Columnas: 1
• Ancho: 100%.
• Ancho mayor: 100%.

SEPARACION:

• Relleno superior y pulvínulo: 0px
• Relleno izquierda y derecha: 0px

Paso 3 – Módulo Seguir en Medios Sociales

Dentro de la fila insertamos un módulo Seguir en Medios Sociales y añadimos los íconos de las redes sociales que queramos.

No te olvides de pegar el enlace a tu perfil en cada uno de ellos.

Paso 4 – Módulo Botón

En segundo empleo añadimos un módulo Botón de Divi y lo arrastramos preciso en lo alto del módulo de ordenanza. Escribe la palabra Seguir en el texto del pitón.

BOTON:

• Usar Estilos Personalizados para Botón: Sí
• Tamaño del Texto: 16px
• Color: #444444
• Color de fondo: rgba(0,0,0,0)
• Ancho del borde: 0px
• Color del borde: rgba(0,0,0,0)
• Espacio entre humanidades: 1px
• Fuente: Montserrat
• Peso: Negrita
• Icono del pitón: flecha con destino a la derecha
• Solo Mostrar Icono en Hover: No

SEPARACIÓN:

• Margen izquierdo: 100%
• Relleno pulvínulo: 150px

PUESTO:

Paso 5 – Ajustes finales de la Sección

Ahora que ya tenemos todos los módulos configurados podemos hacer unos ajustes finales a la sección.

TAMAÑO:

SEPARACIÓN::

• Relleno superior: 24px
• Relleno pulvínulo: 16px
• Relleno izquierda: 16px

SOMBRA DE LA CAJA

• Sombra de la caja: primera opción.
• Blur Strenght: 10px
• Color: rgba(165,165,165,0.3)

PUESTO

• Puesto: Fixed
• Location: Izquierda – Centro
• Indice Z: 100

SEPARACIÓN:

Volvemos a Separación y asignamos un beneficio agorero igual al satisfecho de la sección para que ésta se oculte. Aplicamos un beneficio cero a Flotar para que aparezca cuando acercamos el ratón.

• Margen izquierdo: -64px
• Margen izquierdo (Flotar): 0px

Guardamos los cambios en la plantilla y vamos a cualquier entrada publicada para ver cómo queda nuestra mostrador de ordenanza para seguir en redes sociales con Divi.

Déjame debajo un comentario contándome que te parecieron estas características y posibilidades de Divi y ayudame compartiéndolo para que más personas puedan formarse todo lo que se puede hacer con Divi.