Este artículo es parte de nuestra serie continua de tutoriales de Slider Revolution. Puede encontrar todos los artículos de esta serie en nuestra Guía completa de revolución deslizante.
Ya sean llamadas a la acción, partes de la interfaz de usuario o enlaces simples, los botones son un elemento esencial de cualquier sitio web. Cuando se diseña con cuidado y consideración, pueden ayudar a guiar a los usuarios a través de su sitio y mejorar la experiencia general de sus visitantes. Pero además de saber cómo diseñar un botón efectivo, también debe considerar dónde coloca sus botones. Y un control deslizante por encima del pliegue es siempre una buena opción para la ubicación de cualquier elemento importante del sitio web. Entonces, en el tutorial de hoy, le mostraremos cómo agregar botones a Slider Revolution. Esto se puede hacer por agregando un código corto de botón al control deslizante o creando una nueva capa de botón. Ya hemos cubierto cómo agregar códigos cortos a slider revolution en un artículo dedicado, así que asegúrese de verificarlo si está interesado en agregar otros códigos cortos a sus controles deslizantes.
También puede ver nuestro video sobre cómo agregar botones a Slider Revolution:
O, si prefiere una guía de texto paso a paso, siga leyendo.
Agregar un código corto de botón a Slider Revolution
Agregar un botón a su control deslizante a través de un código abreviado es bastante simple. Pero antes de agregar el código real a su control deslizante, Te recomiendo 'crear' un botón en una página de pruebay asegúrese de que todo se vea como le gustaría.
Para los propósitos de este tutorial, usaremos el Eventualmente Tema de WordPress. Construiremos nuestro botón con el código abreviado del botón personalizado del tema.
En el shortcode General configuración, puede ver que tenemos varias opciones de personalización. La forma exacta en que establezca las opciones para su botón dependerá del tema que esté usando y del estilo de botón que elija.
El botón de este tema también tiene Diseño opciones para que pueda 'diseñar' el botón por su cuenta. Usted puede elige los colores iniciales y flotantes para el fondo, el texto y el borde del botón, así como elegir un tamaño de fuente, un peso de fuente y personalizar el margen y el relleno del botón.
Una vez que haya definido el aspecto de su botón, cambie al modo de edición de texto y copie el código corto del botón. En mi caso el código es [mkdf_button size=”small” text=”Purchase” target=”_blank” icon_pack=”” font_weight=”700″ link=”https://evently.mikado-themes.com/” color=”#ffffff” hover_color=”#ffffff” background_color=”#356bf8″ hover_background_color=”#0141f5″ border_color=”#356bf8″ hover_border_color=”#0141f5″ font_size=”13″ padding=”16px 46px”].
Sin embargo, cuando guarde su control deslizante y navegue a la página que está colocada, el botón debería mostrarse correctamente. Ahora puedes jugar con la posición, la capacidad de respuesta y la animación del botón.
Agregar una capa de botones a Slider Revolution
Tal vez no seas fanático del diseño de los botones que vienen con tu tema. O tal vez el tema no tiene un código corto de botón prediseñado en absoluto. Cualquiera sea el motivo de su decisión de crear su propio botón en Slider Revolution, ahora aprenderá exactamente cómo hacerlo.
Primero, agregue una capa de botón al marco de trabajo del control deslizante.
Cuando agrega el botón, aparecerá como texto en su marco de trabajo, hasta que lo personalices.
En el lado derecho de la pantalla, encontrará muchos estilos de botones prediseñados, y simplemente puede elegir el que se adapte al estilo de su sitio web.
Además de estos estilos de botones comunes, también puede optar por algo un poco diferente, como botones de reproducción, por ejemplo.
Además, puede agregar un sombra efecto a su botón.
Una vez que haya definido el estilo de botón básico, puede ir y cambiar su configuración avanzada para adaptarse mejor al aspecto de su sitio web.
Personalizar el botón es lo mismo que personalizar cualquier otra capa desde las Opciones de capa. Todo lo que necesita está allí, desde cambiar el aspecto inicial del botón hasta cambiar cómo se mostrará al pasar el mouse, y agregar animaciones y suavizarlo.
Y eso es todo lo que hay que hacer. Una vez que haya terminado de configurar su capa de botones, puede trabajar en opciones más avanzadas como su capacidad de respuesta y animación entrante. Aquí hay un ejemplo de una animación entrante del tema Evently:
Asegúrese de consultar toda nuestra serie de artículos Slider Revolution para obtener más información sobre cómo animar sus diapositivas y hacer que sus capas respondan.
En conclusión
Ya sea que cree su botón como un código corto o mediante una capa de Slider Revolution, puede personalizar fácilmente sus estilos y probar diferentes textos para ver qué funciona mejor para los visitantes de su sitio web. Pero ahora que ha aprendido estas dos formas extremadamente simples de agregar botones a Slider Revolution, puede asegurarse de que cada una de sus diapositivas tenga una llamada a la acción o un enlace que les permita a sus visitantes saber lo que le gustaría que hicieran. o qué página de su sitio le gustaría que visitaran a continuación.
Deja una respuesta