Saltar al contenido principal

Tutorial de Divi: Cómo usar el módulo de redes sociales

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

El módulo de redes sociales de divi, le permite crear enlaces basados ​​en iconos que enlazan a sus perfiles sociales en línea, como Facebook, Twitter y Google+. Estos íconos están integrados en el tema, en el estilo de Divi, usando sus íconos elegantes, lo que los hace preferibles al uso de complementos de terceros. Puede agregar enlaces a múltiples perfiles sociales en cada módulo, y puede agregar el módulo en cualquier lugar de la página.

Cómo agregar un módulo de redes sociales a su página

Antes de que pueda agregar un módulo de redes sociales a su página, primero debe ingresar a Divi Builder. Una vez que el tema Divi está instalado en su sitio web, verá un botón Utilice Divi Builder sobre el editor cada vez que creas una página nueva. Haga clic en este botón para activar Divi Builder y acceder a todos los módulos de Divi Builder. Luego haz clic en el botón Use Visual Builder para iniciar el generador en modo visual. También puede hacer clic en el botón Use Visual Builder cuando explora su sitio web en primer plano si está conectado a su tablero de WordPress.

constructor divi

Una vez que haya ingresado a Visual Builder, puede hacer clic en el botón gris más para agregar un nuevo módulo a su página. Los nuevos módulos solo se pueden agregar dentro de las filas. Si comienza una página nueva, no olvide agregar una línea a su página primero.

síguenos en las redes sociales.png

Ubique el módulo de redes sociales en la lista de módulos y haga clic en él para agregarlo a su página. La lista de módulos se puede buscar, lo que significa que también puede escribir la palabra "Síganos en las redes sociales" y luego hacer clic en "enter" para buscar y agregar automáticamente el módulo de redes sociales. Una vez que se agrega el módulo, será recibido por la lista de opciones del módulo. Estas opciones están separadas en tres grupos principales: Contenido , diseño et avanzado .

Ejemplo de caso de uso: Agregar iconos de redes sociales correspondientes a una página de contacto

La página de contacto de un sitio web es el lugar perfecto para presentar sus perfiles sociales en línea. Esto brinda más oportunidades para que los usuarios permanezcan conectados y Promover su Blog o tu compañía Para este ejemplo, le mostraré cómo agregar iconos de redes sociales para que coincidan con el diseño actual de una página de contacto.

agregar botones de seguimiento en una página de contacto divi wordpress.jpg

Con el generador visual, agregue una nueva sección regular con una fila de ancho completo de una columna. Inserta un módulo de redes sociales en tu columna.

En la pestaña Contenido de la configuración del módulo, haga clic en el botón "Agregar elemento nuevo" para agregar una nueva red social a su módulo. En Configuración de red social específica, actualice los siguientes elementos:

Opciones de contenido

Red social:
URL de la cuenta de Facebook: [ingrese la URL de su cuenta de Facebook]

Opciones de diseño

Color del icono: # d94b6a (color combinado)

agregar un color.jpg correspondiente

Luego, duplica esta red social para agregar cuatro redes más (Twitter, Google+, LinkedIn y Instagram). Como ha duplicado la red, se ha transferido el color del icono personalizado. Así que simplemente actualice cada red URL y cuenta.

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 554.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

redes sociales duplicadas divi.jpg

Ahora tiene iconos de redes sociales que coinciden con el diseño de la página de contacto.

red social display.png

Opciones de contenido de redes sociales

En la pestaña de contenido, encontrará todos los elementos de contenido del módulo, como texto, imágenes e íconos. Todo eso controla lo que aparece en su módulo siempre se encontrará en esta pestaña.

content for divi síguenos en las redes sociales module.png

Agrega un nuevo objeto

Aquí es donde agrega nuevas redes a su módulo. Al hacer clic en "agregar un nuevo elemento" se abrirá una ventana de opciones completamente nueva específica para su nueva red (en las pestañas "Contenido", "Diseño" y "Avanzado"). Vea a continuación la configuración individual de la red social.

Después de agregar su primera red, verá aparecer una barra gris con el título de su red que se muestra como una etiqueta. La barra gris también tiene tres botones que le permiten editar, duplicar o eliminar la red.

Forma de enlace

Aquí puede elegir la forma de los iconos de su red social en rectángulo redondeado o en círculo.

Url abre

Elija abrir su URL de red en una nueva pestaña o en la misma ventana.

Botón Seguir

Aquí puede elegir si desea incluir el siguiente botón al lado del icono.

Etiqueta de administrador

Esto cambiará la etiqueta del módulo en el constructor para una fácil identificación. Cuando utiliza la vista WireFrame en Visual Builder, estas etiquetas aparecen en el bloque de módulos de la interfaz de Divi Builder.

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [GRATIS]

Opciones de diseño de medios sociales

En la pestaña Diseño, encontrará todas las opciones de estilo del módulo, como fuentes, colores, tamaño y espaciado. Esta es la pestaña que usará para cambiar la apariencia de su módulo. Cada módulo Divi tiene una larga lista de parámetros de diseño que puede usar para cambiar la apariencia.

cambiar la apariencia divi.png

Para este módulo, las opciones de diseño consisten en un solo elemento: Color del texto.

Color del texto

Aquí puede elegir si su texto debe ser claro u oscuro. Si trabaja en un fondo oscuro, su texto debe ser claro. Si su fondo es claro, su texto debe estar oscuro.

Opciones avanzadas de medios sociales

En la pestaña avanzada, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos CSS y HTML personalizados. Aquí puede aplicar CSS personalizado a uno de los muchos elementos del módulo. También puede aplicar clases personalizadas e ID de CSS al módulo, que se puede usar para personalizar el módulo en el archivo style.css del tema secundario.

configuración avanzada divi.png

ID de CSS

Ingrese un identificador CSS opcional para usar en este módulo. Una ID puede usarse para crear un estilo CSS personalizado o para crear enlaces a secciones particulares de su página.

Clase de CSS

Ingrese las clases de CSS opcionales para usar en este módulo. Una clase CSS se puede usar para crear un estilo CSS personalizado. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden utilizar en su tema infantil Divi o en la hoja de estilo CSS personalizada que agregue a su página o sitio web utilizando el opciones de tema Divi o parámetros de la página de Divi Builder.

CSS personalizado

CSS personalizado también se puede aplicar al módulo y a uno de los elementos internos del módulo. En la sección CSS personalizado, encontrará un campo de texto en el que puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas de CSS en estos parámetros ya están incluidas en las etiquetas de estilo. Así que solo ingrese las reglas CSS separadas por punto y coma.

visibilidad

Esta opción le permite controlar los dispositivos en los que aparece su módulo. Puede elegir deshabilitar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si desea utilizar diferentes módulos en diferentes dispositivos, o si desea simplificar el diseño de dispositivos móviles eliminando ciertos elementos de la página.

Opciones individuales de contenido de redes sociales

contenido de optin divi.png

Red social

Aquí puede elegir la red social que desea mostrar.

URL de la cuenta

Aquí es donde ingresas la URL de este enlace de red social. Si elige Facebook como su red, aquí es donde pondría la URL de su página de Facebook.

Crea fácilmente tu blog con SiteGround

SiteGround le permite crear su blog de WordPress en unos pocos clics. Nombre de dominio gratis, alojamiento seguro, SSL, transferencia y mucho más ... [Recomendado]

Opciones individuales de diseño de redes sociales

Opción de estilo individual.png

Color del ícono

Divi tiene colores estándar para cada red social definida por defecto. Aquí puede cambiar fácilmente este color de icono para lo que desee.

Opciones avanzadas de medios sociales

módulo de opción de avance síguenos divi.png

CSS personalizado

CSS personalizado también se puede aplicar al módulo y a uno de los elementos internos del módulo. En la sección CSS personalizado, encontrará un campo de texto en el que puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas de CSS en estos parámetros ya están incluidas en las etiquetas de estilo. Así que solo ingrese las reglas CSS separadas por punto y coma.

Otros tutoriales de Divi

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Volver arriba
9 acciones
cuota4
Tweet1
Guardar4
WhatsApp