El bloque de Perfiles Sociales te permite mostrar una fila de iconos de redes sociales enlazados en cualquier página de SeedProd. Cada icono enlaza directamente a tu perfil en una plataforma compatible, ofreciendo a los visitantes una forma rápida de seguirte o conectar contigo en la web. El bloque incluye 12 plantillas de estilo predefinidas y soporta más de 20 plataformas, incluyendo Facebook, X (Twitter), Instagram, LinkedIn, YouTube, TikTok, Pinterest, Discord, WhatsApp, y más.
Más allá de las plantillas listas para usar, tienes control total sobre el estilo, tamaño, color, espaciado y radio del borde de los iconos. Cada entrada de perfil social se puede reordenar arrastrando y soltando, duplicar o eliminar de forma independiente, lo que facilita mantener exactamente las plataformas que deseas destacar. Una opción Personalizada también te permite añadir cualquier icono de la biblioteca de iconos de SeedProd con su propio color y URL para plataformas que no estén en la lista integrada.
Añadir el Bloque de Perfiles Sociales a tus Páginas
Sigue estos pasos para añadir un bloque de Perfiles Sociales a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Perfiles Sociales en la sección deseada de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque de Perfiles Sociales para abrir su configuración. En la pestaña Contenido, la sección Icono te permite gestionar tu lista de perfiles sociales y configurar las opciones de visualización.
Gestión de Perfiles Sociales:
- Tipo de Perfil: Usa el menú desplegable junto a cada entrada para seleccionar la plataforma social. Las plataformas compatibles incluyen Discord, Email, Facebook, Facebook Messenger, GitHub, IMDb, Instagram, LinkedIn, Medium, Phone, Pinterest, RSS, Slack, Snapchat, SoundCloud, Telegram, TikTok, X (Twitter), Vimeo, Weibo, WhatsApp, WordPress, YouTube y Personalizado.
- URL: Haz clic en el icono del engranaje de configuración en cualquier entrada para expandir su campo de URL. Introduce el enlace completo a tu página de perfil (incluye
https://). Para las entradas de Email, introduce tu dirección de correo electrónico. Para las entradas Personalizadas, también puedes elegir cualquier icono de la biblioteca de iconos y establecer un color personalizado. - Reordenar: Arrastra las entradas hacia arriba o hacia abajo usando el manejador de arrastre (icono de flechas) para cambiar el orden de visualización de los iconos.
- Duplicar / Eliminar: Pasa el ratón por encima de cualquier entrada para que aparezcan los botones Duplicar y Eliminar para una gestión rápida.
- Añadir Nuevo Compartir: Haz clic en el botón + Añadir Nuevo Compartir en la parte inferior de la lista para añadir otra entrada de perfil social.
Opciones de Visualización:
- Estilo: Elige entre Predeterminado (solo icono, sin fondo) y Apilado (icono sobre un cuadrado de fondo de color).
- Tamaño: Establece el tamaño general del icono: Pequeño, Mediano o Grande.
- Alineación: Establece la alineación horizontal de la fila de iconos: Izquierda, Centro o Derecha. Soporta alineación por dispositivo para escritorio, tableta y móvil.
Paso 2a: Elegir un Estilo de Plantilla
En la pestaña Plantillas, puedes aplicar un estilo de icono predefinido a tu bloque de Perfiles Sociales con un solo clic. Hay 12 plantillas de estilo disponibles, que van desde iconos cuadrados planos hasta variaciones redondeadas, en forma de píldora y con temas oscuros. La selección de una plantilla actualiza instantáneamente el estilo del icono del bloque, el tamaño, el radio del borde y la configuración de color para que coincidan con el diseño elegido.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes ajustar la apariencia visual de tu bloque de Perfiles Sociales.
Estilos:
- Estilo: Cambia entre los estilos de icono Predeterminado y Apilado (igual que la configuración de la pestaña Contenido).
- Color del icono: Establece un color único aplicado a todos los iconos del bloque, anulando el color de marca predeterminado de cada plataforma.
- Tamaño del icono: Ajusta el tamaño del icono en píxeles usando el control deslizante (0–100px).
- Radio del borde: Al usar el estilo Apilado, ajusta el radio de las esquinas de los cuadrados de fondo del icono para crear formas cuadradas, redondeadas o completamente circulares (0–100px).
- Relleno del icono: Al usar el estilo Apilado, controla el espaciado entre el icono y el borde de su contenedor de fondo (0–100px).
- Espacio entre: Establece la separación horizontal entre cada icono de la fila (0–100px).
- Sombra: Añade un efecto de sombra a los elementos del icono. Elige entre tamaños preestablecidos: Ninguno, Delgado, Pequeño, Mediano, Grande, Muy Grande y Extra Grande.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de Perfiles Sociales (Superior, Derecho, Inferior, Izquierdo). Admite valores por dispositivo para escritorio, tableta y móvil.
- Relleno: Ajusta el espaciado interior dentro de tu bloque de Perfiles Sociales (Superior, Derecho, Inferior, Izquierdo). Admite valores por dispositivo para escritorio, tableta y móvil.
Atributos:
- ID CSS: Muestra el identificador único autogenerado para tu bloque de Perfiles Sociales. Este ID se crea automáticamente en SeedProd y se puede usar para estilos personalizados o para apuntar con JavaScript.
- Clase Personalizada: Agregue clases CSS personalizadas para aplicar estilos específicos de su tema o CSS personalizado.
- Atributos personalizados: Añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea usando el formato: nombre-atributo|valor (por ejemplo, data-section|social).
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque de Perfiles Sociales en pantallas de escritorio.
- Ocultar en tableta: Oculta el bloque de Perfiles Sociales en dispositivos tableta.
- Ocultar en móvil: Oculta el bloque de Perfiles Sociales en dispositivos móviles.
Efectos de Animación:
- Animación de entrada: Elige entre varios efectos de animación que se reproducen cuando el bloque de Perfiles Sociales entra en la vista al desplazarse. Las opciones incluyen Rebote, Fundido de entrada, Zoom de entrada, Girar de entrada y muchas más.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Perfiles Sociales y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Perfiles Sociales a tu página! Con soporte para más de 20 plataformas, 12 plantillas de estilo listas para usar y control total sobre el tamaño del icono, el color, el espaciado y el radio del borde, este bloque facilita la creación de una tira de redes sociales profesional que se adapta a cualquier diseño. Experimenta con los estilos Predeterminado y Apilado, explora los ajustes preestablecidos de plantillas y utiliza la reordenación de arrastrar y soltar para organizar tus perfiles exactamente como los deseas.