Cómo agregar botones adhesivos en el sitio web de WordPress

Last updated Oct 17, 2021

Contenido

Agregue botones adhesivos a su sitio de WordPress

Comenzando

Hay 2 formas de agregar botones adhesivos en WordPress. Una forma es compilar el código desde cero y la otra es usar un complemento. Para este tutorial, usaré un complemento. La razón es obvia, si podemos obtener un buen complemento que pueda hacer nuestra pequeña tarea, entonces ¿por qué perder el tiempo construyéndolo desde cero?

Tiene sentido codificar si desea crear una funcionalidad grande y compleja. En tales casos, es posible que los complementos no sean apropiados para su propósito y es mejor no confiar en ellos, ya que sus actualizaciones pueden romper la funcionalidad. Pero para tareas más pequeñas como esta (botones adhesivos) puede confiar en los complementos.

WP Sticky es uno de los complementos más efectivos para agregar elementos adhesivos a su sitio web. Es un pequeño y elegante complemento que le permite agregar un número ilimitado de elementos adhesivos, compatible con todos los temas, complementos y creadores de páginas, y todo el procedimiento se puede realizar en solo unos minutos. Destaca la sencillez del proceso, por lo que todo el procedimiento consta de:

Nombra tu elemento
Mueva y haga clic en el botón Seleccionar elemento
Seleccionar el elemento deseado que quiere hacer pegajoso
Haciendo clic en "Guardar cambios"

Y eso es todo: el elemento seleccionado ahora está adjunto a su sitio. Se incluyen bastantes configuraciones, por lo que puede jugar con la opacidad del elemento adhesivo, elegir un efecto de aparición gradual o deslizamiento hacia abajo, establecer el rango de desplazamiento y más. Además, puede configurar diferentes preferencias según los requisitos de su sitio web de manera ideal: puede agregar una restricción basada en un criterio específico, lo que significa que el elemento no aparecerá tan fijo en el seleccionado:

Paginas
Publicaciones
Categorías
Etiquetas
O tipos de mensajes

Por supuesto, puede modificarlo por todas partes o evitarlo en uno de los mencionados para obtener un control total sobre el complemento. ¿Le preocupa cómo se mostrarán en diferentes dispositivos? Esto también se puede configurar en la pestaña Dispositivos, donde puede elegir el tamaño de pantalla exacto en el que sus elementos aparecerán como adhesivos. Puedes elegir casi cualquier elemento que te guste, ya sea un encabezado fijo, menú fijo, widget, navegación, video … todo se puede configurar en unos minutos y puedes crear tantos como quieras. Efectivo, elegante y lo más simple posible.

Además, existen otras herramientas que le ayudarán a crear elementos fijos en su sitio. Al mismo tiempo, instale y active el complemento Botones de acción flotantes inteligentes – Buttonizer. En la siguiente sección, veremos cómo usar este complemento.

Agregue botones adhesivos a su sitio de WordPress

Después de instalar el complemento, vaya al menú "Buttonizer" en el panel de control. Este complemento no tiene una página de configuración de backend. En cambio, proporciona una interfaz para que pueda ver el impacto de los cambios de inmediato.

El complemento proporciona más de 25 acciones al hacer clic. Digamos de una lista que desea agregar un correo electrónico, un teléfono y un mapa de Google a sus botones adhesivos en un sitio web.

Haga clic en el botón Agregar y asigne un nombre al botón. Le doy al botón el nombre "Teléfono". Después de eso, verá un botón en la interfaz como se muestra a continuación.

Dado que este botón es para un "número de teléfono", debemos configurarlo. Haga clic en el icono de Configuración junto a TELÉFONO. Se abre el panel de opciones para personalizar el botón.

En la lista desplegable Acción del botón, seleccione Acción de llamada (número de teléfono). Agrega tu número de teléfono al cuadro de texto.

Entonces quiero establecer un icono de teléfono para este botón. Esto se puede hacer desde las secciones ESTILO >> ICONO. Debajo del ícono ICON, haz clic en SELECT ICON, se abrirá una ventana emergente en la que seleccionas un ícono de la biblioteca Font Awesome.

Siguiendo el mismo proceso, podemos agregar tantos botones al sitio. Para cada botón, seleccione la acción del botón correspondiente y obtendrá diferentes opciones para el botón.

Finalmente, queremos establecer la posición de los botones adhesivos. Para hacer esto, haga clic en el icono "Configuración" junto a "NUEVO GRUPO".

En la sección Posición puede obtener los parámetros para configurar la posición de los botones. Quiero que sea correcto y centrado. Por lo tanto, configuré "0%" en "HORIZONTAL" y la parte central en "VERTICAL".

Los complementos de Buttonizer brindan muchas más funciones con las que debe jugar y familiarizarse. El complemento proporciona opciones para el color del botón, la animación del botón, el fondo, las clases personalizadas, la visibilidad del dispositivo y más.

Con la configuración anterior aplicada, los botones adhesivos aparecerán en el sitio web como se muestra en la captura de pantalla a continuación.

Espero que hayas descubierto cómo agregar botones adhesivos a tu sitio de WordPress. Comparta sus pensamientos y sugerencias en la sección de comentarios a continuación.

Cómo agregar botones adhesivos en el sitio web de WordPress

Comenzando

Agregue botones adhesivos a su sitio de WordPress

Artículos relacionados