Cómo crear un control deslizante con Flatsome Theme UX Builder

El control deslizante es una característica común que se usa con frecuencia en los sitios web. Si está utilizando un tema Flatsome para crear su sitio web, puede crear un control deslizante con el generador de UX del tema Flatsome.

UX builder es un editor de páginas frontales fácil de usar. Permite agregar un control deslizante al sitio web basado en el tema Flatsome de la manera más simple. Puede obtener ayuda con cualquier complemento deslizante en WordPress para hacer su trabajo fácilmente.

¿Por qué necesita un control deslizante en su sitio web?

Slider es una función que le permite agregar una presentación de diapositivas a su sitio. Ese elemento de la diapositiva puede ser una imagen/logotipo/texto. Agregarlos hará que su sitio sea atractivo, acogedor y atractivo para los clientes. Es una oportunidad para conectarse con los visitantes que no debe perderse.

¿Qué deberías agregar a tu control deslizante?

Las opciones están abiertas. Puede agregar lo que desee agregar a su sitio web impulsado por Flatsome. Además de eso, hay algunas cosas comunes que puede agregar a su control deslizante. Si desea tener una idea de lo que debe agregar, puede seguir la lista a continuación

• Actualización relacionada con la oferta o la venta
• Galería de fotos para mostrar tus fotos
• Cualquier tipo de aviso, etc.

Para optimizar imágenes, también puede usar los complementos de galería de fotos de WordPress que usan los fotógrafos, que serán los mejores para usted.

¿Cómo crear un control deslizante con el generador de UX del tema Flatsome?

Aquí, muestro el proceso paso a paso para crear un control deslizante utilizando el generador de UX del tema Flatsome.

Paso 1: Vaya a la página de su tienda y desplace el puntero sobre la Página de edición.

Paso 2: Aparecerá una opción llamada Editar con UX Builder, haga clic en eso.

Paso 3: A la izquierda, aparecerá una barra lateral llamada Parallax Shop . Puede encontrar varios elementos allí y, debajo de todos los elementos, encontrará Agregar elementos. Haz clic en eso.

Paso 4: Aquí, puede agregar un control deslizante haciendo clic en el control deslizante .

Paso 5: encontrará varios tipos de plantillas de control deslizante. Desplácese hacia abajo , explore y seleccione cualquiera de ellos.

Paso 6: Para la demostración, estoy considerando una plantilla llamada Venta enorme . Así es como se verá.

Paso 7: Aquí, puede editar todo el diseño y personalizarlo según sus necesidades. Después de la personalización, haga clic en Aplicar .

Paso 8: si desea agregar más elementos, puede hacer clic en Agregar al control deslizante para agregar nuevos elementos.

Paso 9: Puedes agregar 3 tipos de elementos. Esos son banners, imágenes y logotipos. Haga clic en cualquiera de esos tres cuadros para agregar un elemento.

Paso 10: En el lado izquierdo, aparecerá Parallax Shop . Para agregar un medio, haga clic en Seleccionar medio .

Paso 11: Aparecerá una ventana emergente. Puede elegir medios de la biblioteca de medios, o puede cargarlos desde su computadora, o si tiene otro sitio web y sabe cómo exportar la biblioteca de medios desde WordPress, también puede hacer esas cosas.

Paso 12: después de cargar o seleccionar los medios, debe hacer clic en Usar esta imagen .

Paso 13: Los medios se incrustarán y podrá agregarlos al sitio principal haciendo clic en Aplicar en la página.

Paso 14: Después de hacer clic en Aplicar , aparecerá una opción de actualización. Debe hacer clic en el botón Actualizar para activar todo el proceso en el sitio en vivo.

Después de completar todo el proceso, el control deslizante se verá así.

¡Felicidades! Ha creado un control deslizante con el generador de experiencia de usuario del tema Flatsome. Hay muchas opciones para personalizar el control deslizante, como cambiar el color de fondo, personalizar el tiempo del control deslizante, cambiar la capacidad de arrastre, cambiar el tipo de control deslizante, etc.

Veamos otras configuraciones personalizadas del control deslizante del tema Flatsome.

¿Cómo cambiar el color de fondo de un control deslizante con el generador de UX del tema Flatsome?

Paso 1: Vaya a la página de su tienda y desplace el puntero sobre la Página de edición.

Paso 2: Aparecerá una opción llamada Editar con UX Builder, haga clic en eso.

Paso 3: Aparecerá una Tienda Parallax , donde podrás encontrar la opción Slider . Haga clic en la configuración. Después de eso, encontrará una lista desplegable. De esa lista, haga clic en Opciones .

Paso 4: Te llevará a la página de personalización del Control deslizante . Verá varias opciones desde donde necesita encontrar la sección Diseño. En la selección Diseño, encontrará Bg Color , haga clic en ese color. Te mostrará los colores de fondo disponibles, selecciona cualquiera de ellos.

Paso 5: Después de seleccionar un color, puede encontrar el botón Aplicar en la parte inferior de la página de la Tienda Parallax , haga clic en él para aplicar un nuevo color de fondo.

Paso 6: Luego , Parallax Shop le traerá una nueva página donde deberá hacer clic en Actualizar para actualizar su sitio actual. Después de eso, el fondo se establecerá con el nuevo color.

¿Cómo cambiar la opción arrastrable de un control deslizante usando el generador de UX del tema Flatsome?

Paso 1: Vaya a la página de su tienda y desplace el puntero sobre la Página de edición.

Paso 2: Aparecerá una opción llamada Editar con UX Builder, haga clic en eso.

Paso 3: Aparecerá una Tienda Parallax , donde podrás encontrar la opción Slider . Haga clic en la configuración. Después de eso, encontrará una lista desplegable. De esa lista, haga clic en Opciones .

Paso 4: En Parallax Shop , encontrarás la opción llamada Arrastrable . Puede activar /desactivar la función.

Paso 5: Después de seleccionar activar/desactivar, puede encontrar el botón Aplicar en la parte inferior de la página de la Tienda Parallax , haga clic en él para aplicar un nuevo color de fondo.

Paso 6: Luego , Parallax Shop le traerá una nueva página donde deberá hacer clic en Actualizar para actualizar su sitio actual. Después de eso, el control deslizante se configurará con la capacidad de arrastrar.

¿Cómo activar el deslizamiento automático con el generador de UX del tema Flatsome?

Paso 1: Vaya a la página de su tienda y desplace el puntero sobre la Página de edición.

Paso 2: Aparecerá una opción llamada Editar con UX Builder, haga clic en eso.

Paso 3: Aparecerá una Tienda Parallax , donde podrás encontrar la opción Slider . Haga clic en la configuración. Después de eso, encontrará una lista desplegable. De esa lista, haga clic en Opciones .

Paso 4: encontrará una sección llamada Auto Slide , donde puede activar o desactivar la opción Auto Slide . Además, puede personalizar el tiempo del intervalo deslizante usando el temporizador y activar /desactivar el estado de Pausa al pasar el mouse .

Paso 5: Después de seleccionar activar/desactivar, puede encontrar el botón Aplicar en la parte inferior de la página de la Tienda Parallax , haga clic en él para aplicar un nuevo color de fondo.

Paso 6: Luego , Parallax Shop le traerá una nueva página donde deberá hacer clic en Actualizar para actualizar su sitio actual. Después de eso, el control deslizante se configurará con la personalización del control deslizante.

¿Cómo cambiar el estilo de flecha usando el generador de UX del tema Flatsome?

Paso 1: Vaya a la página de su tienda y desplace el puntero sobre la Página de edición

Paso 2: Aparecerá una opción llamada Editar con UX Builder, haga clic en eso.

Paso 3: Aparecerá una Tienda Parallax , donde podrás encontrar la opción Slider . Haga clic en la configuración. Después de eso, encontrará una lista desplegable. De esa lista, haga clic en Opciones .

Paso 4: Puedes encontrar la sección Flecha en la Tienda Parallax . Puede activar /desactivar las flechas , cambiando el estilo de flecha y el color de flecha .

Paso 5: Después de seleccionar activar/desactivar, puede encontrar el botón Aplicar en la parte inferior de la página de la Tienda Parallax , haga clic en él para aplicar un nuevo color de fondo.

Paso 6: Luego , Parallax Shop le traerá una nueva página donde deberá hacer clic en Actualizar para actualizar su sitio actual. Después de eso, el control deslizante se configurará con el nuevo estilo de flecha.

¿Cómo cambiar el estilo de viñeta usando el generador de UX del tema Flatsome?

Paso 1: Vaya a la página de su tienda y desplace el puntero sobre la Página de edición.

Paso 2: Aparecerá una opción llamada Editar con UX Builder, haga clic en eso.

Paso 3: Aparecerá una Tienda Parallax , donde podrás encontrar la opción Slider . Haga clic en la configuración. Después de eso, encontrará una lista desplegable. De esa lista, haga clic en Opciones .

Paso 4: Puede encontrar la sección Bullet en Parallax Shop . Puede activar /desactivar las viñetas y cambiar el estilo de viñetas .

Paso 5: Después de seleccionar activar/desactivar, puede encontrar el botón Aplicar en la parte inferior de la página de la Tienda Parallax , haga clic en él para aplicar un nuevo color de fondo.

Paso 6: Luego , Parallax Shop le traerá una nueva página donde deberá hacer clic en Actualizar para actualizar su sitio actual. Después de eso, el control deslizante se configurará con el nuevo estilo de viñeta .

Conclusión

En este tutorial, se han discutido casi todas las partes importantes del control deslizante.

Si el tutorial te parece complejo, me gustaría recomendarte que te tomes el tiempo y sigas el proceso desde el principio.

Flatsome es uno de los temas más populares en WordPress . Por lo tanto, el área de personalización es amplia y se necesita tiempo para conocer todas las funcionalidades.

¿Enfrentando alguna dificultad? Siéntete libre de dejar un comentario. Nos encantaría ayudarte. Si desea obtener más información sobre el tema Flatsome, puede leer más tutoriales sobre el tema Flatsome aquí para ser un experto en esta área.