Creación de botones de iconos sociales flotantes con GeneratePress y GenerateBlocks Tutorial

En el diseño de sitios web modernos, unos iconos sociales llamativos aumentan las tasas de interacción y la exposición de la marca. Este artículo presenta el uso de GenerarPrensa Con el plugin GenerateBlocks (versión gratuita) crea una barra de iconos sociales limpia y bonita que se desplaza a la izquierda del escritorio y se oculta en el móvil.

I. Preparativos

Este tutorial es para sitios web que utilizan el tema GeneratePress y las herramientas necesarias se enumeran a continuación:

• Plugin GenerateBlocks (versión gratuita)
• GeneratePress Theme (Elemento de bloque recomendado para su uso con GP Premium)

En segundo lugar, el nuevo elemento (Block Element)

• Regístrese WordPress En segundo plano, vaya a "Apariencia" → "Elementos" → Añadir nuevo elemento.

• Iconos sociales adhesivos con nombre
• Selección del tipo de elemento Gancho

• La posición del gancho se ajusta a after_header
• Mostrar selección de reglas Sitio completo

En tercer lugar, añada el contenedor y defina el estilo

• Añadir un bloque contenedor
• Ajuste el ancho a "Ancho contenido", el valor de ancho es 48px.

• Eliminar todos los márgenes interiores por defecto
• Establezca el índice z en 99 para que aparezca en la parte superior de la página.

• Añade dos CSS Clase:
  • sticky-social-icons(para el posterior posicionamiento CSS)
  • escondite en el móvil(clase integrada en el sistema, oculta en el móvil)

Si tiene GenerateBlocks Pro puede hacer clic en el botón Habilitar Ocultar en móvil.

IV. Añadir botones de iconos sociales

• Añadir un bloque Buttons al contenedor
• Inserte el botón y seleccione el icono social (p. ej. Facebook)
• Eliminar el texto del botón y conservar sólo el icono

• Establecer el margen interior de los cuatro lados a 15px
• Añade un borde inferior de 1px para que sirva de separador entre los iconos.

• Copie el botón y sustitúyalo por otro icono (por ejemplo, Twitter, LinkedIn)
• El último botón elimina el borde inferior

• Configure los contenedores de botones para que se apilen verticalmente y ocupen el espacio horizontal

V. Añadir CSS personalizado para lograr el posicionamiento

Vaya a "Apariencia → Personalizar → Extras". CSS", pega el siguiente estilo:

.sticky-social-icons {
  posición: fijo;
  left: 20px;
  top: 200px;
}

La sección numérica puede ajustarse con precisión a la posición real de la página.

Añadir efecto de sombra (opcional, requiere la versión Pro)

Al utilizar GenerateBlocks Pro, puede añadir sombras a los botones para mejorar la tridimensionalidad:

• Seleccione el bloque contenedor e introduzca los ajustes de "Efectos".

• Para activar Box Shadow, ajuste los siguientes parámetros:
  • Desplazamientos horizontal y vertical
  • desenfoque
  • profundidad cromática

• Haga clic en Actualizar y actualice la página para ver el efecto.

VII. Efecto final

Implementación de una barra de botones sociales fija en la parte izquierda de la página, que se sigue mostrando cuando la página se desplaza, no se muestra en móviles, adaptándose a múltiples dispositivos y requisitos visuales.

observaciones finales

hacer uso de GenerarPrensa Con GenerateBlocks, es posible crear botones sociales hover de calidad profesional incluso sin utilizar plugins complejos. Para añadir estilos avanzados, como animaciones hover y gradientes de transparencia, también puedes ampliar el módulo CSS Aplicación del código.

Actualizaciones recientes

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres