El módulo de redes sociales de Divi le permite crear enlaces basados en iconos que apuntan a sus perfiles sociales en línea, como Facebook, Twitter y Google+. Estos íconos están integrados en el tema, en el estilo propio de Divi usando sus elegantes íconos, 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 tu página
Antes de que pueda agregar un módulo de redes sociales a su página, primero debe acceder a Divi Builder. Una vez el Tema divi instalado en su sitio web, notará un botón Utilice Divi Builder encima del editor de publicaciones cada vez que crea 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 haga 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 navega por su sitio web en primer plano si está conectado a su panel de WordPress.
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 está comenzando una nueva página, recuerde agregar una fila a su página primero.
Busque 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 mods se puede buscar, lo que significa que también puede escribir la palabra "Síguenos en las redes sociales" y luego hacer clic en "Enter" para buscar y agregar automáticamente el mod de redes sociales. Una vez que se agrega el módulo, será recibido por la lista de opciones del módulo. Estas opciones se dividen en tres grupos principales: Contenido , diseño et Avanzado .
Ejemplo de caso de uso: Agregar los 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 mostrar sus perfiles sociales en línea. Esto proporciona más oportunidades para que los usuarios se mantengan conectados y promover tu blog o su negocio. Para este ejemplo, le mostraré cómo agregar íconos de redes sociales para que coincidan con el diseño actual de una página de contacto.
Usando el constructor 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 un nuevo elemento" para agregar una nueva red social a su módulo. En configuraciones específicas de redes sociales, actualice lo siguiente:
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 (colores surtidos)
Luego, duplica esta red social para agregar cuatro redes más (Twitter, Google+, LinkedIn e Instagram). Desde que duplicó la red, se ha transferido el color del icono personalizado. Por lo tanto, solo necesita actualizar cada cuenta y URL de red.
Ahora tiene iconos de redes sociales que coinciden con el diseño de la página de contacto.
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 iconos. Todo lo que controla lo que aparece en su módulo siempre se encontrará en esta pestaña.
Agrega un nuevo objeto
Aquí es donde agrega nuevas redes a su módulo. Al hacer clic en "agregar un elemento nuevo", abrirá una ventana completamente nueva de opciones específicas para su nueva red (en las pestañas "Contenido", "Diseño" y "Avanzado"). Consulte a continuación la configuración de redes sociales individuales.
Después de agregar su primera red, verá aparecer una barra gris con el título de su red mostrado 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 sus iconos de redes sociales en rectángulo redondeado o en círculo.
Se abre la URL
Elija abrir la URL de su red en una nueva pestaña o en la misma ventana.
Botón Seguir
Aquí puede elegir si desea incluir o no el siguiente botón junto al icono.
Etiqueta de administrador
Esto cambiará la etiqueta del módulo en el constructor para una fácil identificación. Cuando usa la vista WireFrame en Visual Builder, estas etiquetas aparecen en el bloque de módulo de la interfaz Divi Builder.
Opciones de diseño de redes 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 utilizará para cambiar la apariencia de su módulo. Cada módulo Divi tiene una larga lista de configuraciones de diseño que puede usar para cambiar el aspecto.
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 está trabajando en un fondo oscuro, su texto debe ser claro. Si su fondo es claro, su texto debe ser oscuro.
Opciones avanzadas de redes sociales
En la pestaña avanzada, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos personalizados de CSS y HTML. Aquí puede aplicar CSS personalizado a cualquiera de los muchos elementos del módulo. También puede aplicar clases e ID de CSS personalizados al módulo, que se pueden usar para personalizar el módulo en el archivo style.css de su tema secundario.
ID de CSS
Ingrese un ID de CSS opcional para usar en este módulo. Se puede usar una identificación para crear un estilo CSS personalizado o para vincular a secciones particulares de su página.
Clase de CSS
Ingrese las clases de CSS opcionales para usar en este módulo. Se puede usar una clase CSS para crear estilos CSS personalizados. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden usar en su tema secundario Divi o en la hoja de estilo CSS personalizada que agrega a su página o sitio web usando el opciones de tema Divi o parámetros de la página Divi Builder.
CSS personalizado
También se puede aplicar CSS personalizado al módulo y a cualquiera de los componentes internos del módulo. En la sección CSS personalizado, encontrará un campo de texto donde puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas CSS en esta configuración ya están envueltas en etiquetas de estilo. Así que simplemente 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 optar por desactivar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si desea utilizar diferentes mods en diferentes dispositivos o si desea simplificar el diseño del móvil eliminando ciertos elementos de la página.
Opciones de contenido de redes sociales individuales
Red social
Aquí puede elegir la red social que desea mostrar.
URL de la cuenta
Aquí es donde ingresa la URL de este enlace de red social. Si elige Facebook como su red, aquí es donde colocaría la URL de su página de Facebook.
Opciones de diseño de redes sociales individuales
Color del icono
Divi ofrece colores estándar para cada red social definida por defecto. Aquí puede cambiar fácilmente el color de este icono a lo que desee.
Opciones avanzadas de redes sociales
CSS personalizado
También se puede aplicar CSS personalizado al módulo y a cualquiera de los componentes internos del módulo. En la sección CSS personalizado, encontrará un campo de texto donde puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas CSS en esta configuración ya están envueltas en etiquetas de estilo. Así que simplemente ingrese las reglas CSS separadas por punto y coma.
[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" extended "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DESCARGUE EL TEMA DIVI [/ vcex_button] [/ width_column] [»vc_column] »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials "target =" blank "layout =" extended "align =" center " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] DESCARGAR PLANTILLAS DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Otros tutoriales de Divi
- 5 sitios web para su uso restaurante temático Divi
- Cómo agregar texto en un producto Divi WooCommerce
- Cómo cambiar el color del menú entre páginas Divi
- Cómo personalizar las cuadrículas de un blog con Divi
- Cómo utilizar la función de editor Divi en WordPress
- Cómo crear un control deslizante Divi a pantalla completa
- Cómo cambiar el color de los menús entre páginas Divi
- Características que probablemente no conozcas sobre Divi
- Cómo usar Divi Builder en WordPress
- Cómo usar el módulo de desplazamiento de video Divi
- Cómo usar el módulo Divi Builder Flip
- Cómo agregar un módulo testimonial en Divi Builder
- Cómo usar el módulo de texto Divi
- Cómo crear un control deslizante en Divi
- Cómo editar un rol de usuario Divi
- Cómo usar el módulo de Divi Social Media
- Cómo usar el módulo de tienda en el tema WordPress Divi
- Cómo usar el módulo de la barra lateral Divi
- Cómo usar el Módulo Divi Price Table
- Cómo usar el módulo de título de las publicaciones de Divi
- Cómo agregar un módulo de video de Divi
- Cómo usar el módulo de navegación del artículo
- Cómo usar el módulo de búsqueda Divi
- Cómo usar el módulo Divi wallet
- Cómo usar el módulo de persona en Divi Builder
- Cómo usar el módulo de billetera con filtro Divi
- Cómo usar el módulo deslizante de ancho completo
- Cómo usar el Módulo de imagen Divi Builder
- Cómo utilizar el módulo de navegación de ancho completo de Divi Builder
- Cómo usar el módulo de la galería de imágenes
- Cómo utilizar el módulo de tarjeta de ancho completo de Divi Builder
- Cómo utilizar el módulo de cartera de ancho completo de Divi
- Cómo usar el módulo de encabezado de ancho completo Divi
- Cómo usar el módulo Divi Counter
- Cómo usar el control deslizante de artículos en Divi Builder
- Cómo usar el módulo Divi Email Optin
