Añadir enlaces sociales.

Learn DXPR BuilderBuild pagesAdd contentMarketing

Obtienes una fila de iconos de marca que enlazan a tus perfiles de redes sociales. Úsala en un pie de página, una barra lateral o una sección de contacto para que las visitas te encuentren y te sigan.

Elemento de enlaces sociales con iconos de LinkedIn, GitHub y Drupal en estilo círculo con colores de marca

Abre tu página con la sesión iniciada: los controles del constructor aparecen cuando pasas el cursor sobre la zona de contenido. Crea tu primera página muestra lo básico.

  1. Pasa el cursor sobre la columna y haz clic en + en su barra de controles, o haz clic en Add Elements en una página vacía. Abre la pestaña Content y haz clic en Social links. Queda arriba de la columna y su diálogo de ajustes se abre.
  2. En Social links, reemplaza las dos filas de muestra con tus cuentas. Haz clic en Add link por cada cuenta extra. Empieza a escribir la marca, elígela de las sugerencias, e introduce la URL, como https://github.com/dxpr.
  3. Elige un Style para la forma del icono. Este es el campo arriba del diálogo, no el panel Style más abajo. Aquí es Circle.
  4. Elige un Size para los iconos. Aquí es 3x.
  5. Haz clic en el encabezado Icon colors para expandirlo, y pon Background color en Brand color.
  6. En Color, elige una muestra de la paleta. La paleta se muestra porque Color está en Custom por defecto. Aquí es casi blanco.
  7. Haz clic en Save en el diálogo. Luego haz clic en Save en la barra de herramientas arriba de la zona de contenido para guardar la página.

Lo que ves

Las cuentas que añadiste aparecen como una fila de iconos, y cada icono abre su perfil. En el vídeo, LinkedIn, GitHub y Drupal se muestran como círculos grandes en sus colores de marca con logotipos blancos. Las visitas lo ven cuando guardas la página y está publicada.

Pasa el cursor sobre el elemento y abre More > Settings en su barra de controles. Opciones:

  • Social links: una fila por icono, con un nombre de marca y la URL del perfil. Haz clic en Add link para otra fila, y usa las flechas para cambiar el orden.
  • Layout: Inline pone los iconos en una fila. Stacked pone cada icono en su propia línea.
  • Style: la forma del icono: None, Rounded, Circle o Square.
  • Size: Small, Large, o de 2x a 5x.
  • CSS3 hover effects: None, Disc o Pulse. Cualquier efecto convierte el icono en un círculo.
  • Color: el color del logotipo: Brand color, Custom o Inherit. Custom muestra una paleta, e Inherit usa el color del texto de alrededor.
  • Background color: el relleno de la forma, con las mismas tres opciones.

Color y Background color están bajo el encabezado Icon colors. Haz clic en él para abrirlos.

Si no lo ves

  • Social links no está en la pestaña Content. Tu perfil de usuario lo oculta. Pide a una cuenta administradora que lo active en User profiles.
  • Ya no está tras recargar. La página no se guardó. Añádelo de nuevo y haz clic en Save en la barra de herramientas arriba de la zona de contenido.
  • Falta un icono. Su fila no tiene marca o URL, así que el elemento la omite. Rellena ambos campos de esa fila.
  • Una forma se muestra sin logotipo. El nombre de marca no tiene icono que le corresponda, y la fila dice "No matching brand icon found". Elige la marca de las sugerencias mientras escribes.
  • Un icono abre la página equivocada. La URL de esa fila está mal o incompleta. Pasa el cursor sobre el elemento y abre More > Settings, y comprueba que cada URL empieza con https://.

¿Qué sigue?

Panel Style para cambiar espaciado y fondo de tus enlaces sociales.