¿Cómo agrego enlaces de redes sociales a mi sitio de Website Builder?
Esta guía explica cómo agregar enlaces de redes sociales a tu sitio web en Website Builder usando el componente Redes sociales.
- Paso 1: Agrega un componente de Redes sociales a tu sitio
- Paso 2: Agrega tus enlaces de redes sociales
- Paso 3 – Ajusta el estilo de tus íconos<1>
- Paso 4 – Añade animaciones a tus íconos
- Paso 5 – Publica tus cambios
Paso 1: Agrega un componente de Redes sociales a tu sitio
- Abre Website Builder desde el panel de control de one.com<2>.
- Desde el menú de la izquierda, haz clic en Social y arrastra una de las opciones del componente a tu espacio de trabajo.
Captura de pantalla del editor de Website Builder. El menú de la izquierda está abierto en las opciones de redes sociales y una flecha roja apunta al componente con los íconos de redes sociales.<3>
Paso 2: Agrega tus enlaces de redes sociales
-
- Haz clic en el ícono de tres puntos para editar, ocultar o eliminar un ícono de redes sociales. Ocultar un enlace solo afecta a ese componente específico, mientras que eliminarlo afecta a todos los demás componentes de tu sitio.
- Cambia el orden de los íconos haciendo clic en un enlace y arrastrándolo hacia arriba o hacia abajo mientras mantienes presionado el botón del mouse.
- Escribe un correo electrónico o la URL a una de tus páginas de redes sociales para añadir un nuevo ícono. Puedes añadir enlaces a Facebook, Instagram, Twitter, Pinterest, LinkedIn, YouTube, Correo electrónico, Yelp, Vimeo, Snapchat, Reddit, Tumblr, Tripadvisor y Foursquare.
Paso 3 – Ajusta el estilo de tus iconos
Ajusta la apariencia de los íconos en Editar íconos > Estilo.
- Cambia la forma de los íconos; puedes elegir regular (predeterminado), círculo, cuadrado o redondeado.
- Puedes elegir entre un ícono con un color sólido (fill) o un área transparente (knockout) que muestre tu fondo.
- En Color, elige Multicolor para mostrar los colores predeterminados de las redes sociales, o en negro (oscuro) o blanco (claro).
Ajusta el tamaño y el espaciado de los íconos a tu gusto y elige dónde quieres colocarlos en tu sitio. Coloca el componente en el encabezado o en el pie de página si quieres que los íconos sean visibles en todas las páginas.
Captura de pantalla que muestra el menú flotante abierto de los íconos de redes sociales. El menú está abierto en la pestaña de estilo; una lupa amplía las opciones de color y dos flechas rojas señalan el menú desplegable de formas y las opciones de color, respectivamente.<3>
Paso 4 – Añade animaciones a tus íconos
Puedes añadir efectos de animación a tus íconos para que destaquen más. Por ejemplo, puedes usar un efecto de deslizamiento o rebote, que hará que los íconos destaquen en la pantalla cuando el visitante se desplace hacia abajo en la página.
Puedes añadir animaciones seleccionando el componente y haciendo clic en Editar íconos > Animaciones.
- Selecciona un efecto de animación: puedes elegir entre fade in, slide in o bounce.
- Si seleccionas fade in o slide in, puedes elegir la dirección desde la que el componente debe entrar en la pantalla. Las opciones son centro, superior, inferior, izquierda o derecha.
- Selecciona la velocidad de la animación: puede ser lenta, media o larga.
- Elige si quieres retrasar la aparición del efecto y, de ser así, cuánto tiempo debe durar el retraso.
Paso 5 – Publica tus cambios
Haz clic en Guardar y Publicar para que los cambios sean visibles en tu sitio web.
Consejo: Si quieres mostrar los íconos de redes sociales verticalmente, puedes hacerlo añadiendo un componente de Redes sociales independiente para cada ícono y ocultando todos menos uno. Luego, colócalos uno encima del otro.
Captura de pantalla que muestra los íconos del sitio web en modo de vista previa. Una flecha roja los señala.<3>
¿No tienes acceso a Website Builder? Puedes probarlo gratis durante 14 días y crear un sitio web en poco tiempo. Empieza tu prueba gratuita ahora
Artículos relacionados: