Ahora podemos comenzar cosas serias. La creación del control deslizante en Slider Revolution puede ser bastante tedioso al principio. Perderás el rumbo, porque querrás saber dónde está este o aquel elemento.
Te librarás de Slider Revolution practicando con hábito y también leyendo este tutorial.
Durante nuestros tutoriales anteriores, descubrimos cómo:
- Descargue e instale Slider Revolution
- Cómo entender la interfaz de usuario de Slider Revolution Home
- Cómo configurar una presentación de diapositivas en Slider Revolution
Y ahora que hemos configurado nuestro control deslizante, vamos a crear el diapositivas "De" control deslizante ".
Cómo empezar con el editor "Presentaciones"
En principio, después de guardar las configuraciones de un control deslizante, puede acceder a una nueva interfaz que te presenta al editor de " diapositivas ".
Notará en la parte superior la misma barra de herramientas que le permite volver a la lista de "controles deslizantes o diapositivas", a los parámetros del control deslizante y la vista previa del control deslizante, entre otros.
Descubre también nuestro 10 complementos de WordPress que le permiten calificar sus publicaciones de blog
En la parte inferior, tenemos una nueva sección que nos permite ver, las capas globales, las diferentes "diapositivas" y el botón para agregar una nueva " diapositiva ".
Al pasar el cursor sobre el botón de una diapositiva, notará que se muestran nuevas opciones. Estas opciones son bastante claras y fáciles de entender (duplicar, agregar a la plantilla para reutilizarla más tarde y eliminar la diapositiva).
Al pasar el mouse sobre el botón Agregar diapositiva, verá otras opciones que le permiten agregar una diapositiva vacía, agregar varias diapositivas, agregar una diapositiva desde una plantilla (modelo).
Actualmente, está en la diapositiva 1, por lo que está resaltada en la lista de diapositivas. Si crea una nueva diapositiva, se resaltará en lugar de la primera diapositiva.
Slider Revolution en este nivel es un tablero real. Si te explico todo, no entenderás mucho, así que evitaré hablar sobre características que pueden ser confusas y no esenciales.
Lea nuestro artículo sobre Complementos de compresión de imagen de 6 WordPress para tu blog
Cuando haya seleccionado una diapositiva, puede comenzar a editar en la siguiente sección. Esta sección consta de varias pestañas (7) que le dan acceso a varias funciones.
Cómo agregar una imagen de fondo a una escena
Lo primero que querrá hacer primero es agregar un fondo a nuestra diapositiva. Aquí puede elegir entre: Una imagen de fondo (de su biblioteca de medios), una URL externa que apunta a una imagen, un fondo transparente que usará el color propuesto por el tema de WordPress, un color fijo, un vídeo de Youtube, Vimeo o HTML5. Elegiremos un fondo" imagen ".
Puede encontrar muchas imágenes gratuitas en la web. Solo haz una búsqueda en Google.
Cuando agrega una imagen, esto se aplica inmediatamente en la vista previa de la diapositiva y en la "escena".
Cómo agregar un elemento en una escena
Ahora que tenemos una escena bien decorada, agregaremos un elemento. Cada elemento que agregue a una escena se considera una capa o capa. Esta característica de capa te ayudará a creerme.
Para agregar un elemento a la escena, coloca el cursor sobre Añadir capa ".
Notará que puede agregar varios elementos diferentes, incluidos: texto / HTML, imágenes, audio, video, un botón, una forma, un objeto e importar un elemento.
Comenzaremos agregando una imagen transparente de Snoopy, el cachorrito.
Luego agregue esta imagen en la escena, y tendrá algo como esto:
Notarás que en las cuatro esquinas de la imagen hay cuadrados pequeños. Estos cuadrados nos permiten cambiar el tamaño de las imágenes, ya que en este caso Snoopy ocupa mucho espacio.
El cambio de tamaño se realiza mediante " arrastrar ". Para cambiar el tamaño manteniendo las proporciones, mantenga presionada la tecla " Mayo Desde su teclado mientras cambia el tamaño.
Vea también nuestro Complementos de 10 WordPress que te harán un mejor Blogger
Ahora Snoopy se ve así, es más apropiado. También puede voltear una imagen usando el indicador ubicado en la parte superior derecha de cada imagen de esta manera:
Cómo posicionar elementos con la cuadrícula de ayuda
La cuadrícula de ayuda es un elemento valioso que ayuda a posicionar mejor los elementos. Puede activar la cuadrícula de ayuda en la parte inferior izquierda del escenario.
Esta cuadrícula tiene mosaicos con diferentes tamaños, cuanto más pequeño sea el tamaño, más preciso será en la colocación del elemento.
Cómo agregar animación
Hay 3 tipos de animaciones en Slider Revolution: animaciones de entrada, animaciones durante (la existencia del elemento en la escena) Y animaciones finales.
Vea también nuestro Complementos de compresión de imagen de 6 WordPress para tu blog
Para agregar una animación a un elemento, primero debe seleccionarlo haciendo clic en él (cuando se selecciona un elemento, se enmarca con una línea de puntos con esquinas redimensionables).
Entonces haga clic en Snoopy, suba a la página y haga clic en la pestaña « Animación ".
En la imagen anterior, tengo las animaciones de entrada en azul y las animaciones de salida en rojo.
Para cambiar una animación, haga clic en la lista desplegable después del icono del hombre corriendo.
Entonces tiene una amplia variedad de animación a su disposición. Te dejo elegir la animación que deseas definir para la entrada de un elemento. Por mi parte, elegí " easeOutElastic », Para obtener este resultado:
Aquí para ti nuestro Complementos de 4 WordPress para impulsar el pie de página de tu blog
Más a la izquierda, puede determinar la duración de la animación y el modo de animación que debe dejar en " sin dividida Porque las otras opciones se aplican solo al texto, no a las imágenes.
Lire aussi Cómo ocultar los títulos de artículos y páginas de WordPress
Ahora, me gustaría flotar Snoopy, para eso, vaya a " Red ISTE Loop Y en la opción desplegable, elija " Trenzado ". Ahora Snoopy flota:
Cómo configurar la visibilidad de los elementos.
Mi Snoopy flota, pero no quiero que sea visible en el móvil. Entonces haga clic en " visibilidad »Y en el icono de Smartphone, asegúrese de que esté desactivado:
Cómo ajustar el comportamiento de los elementos.
Para optimizar la carga del control deslizante, es posible que desee retrasar la carga de las imágenes. Esto se hace en la pestaña " comportamiento Con la opción " Lazy Loading ". Incluso puede forzar la capacidad de respuesta de los elementos.
Cómo crear disparadores personalizados en un elemento
Las acciones le permiten asociar disparadores con acciones específicas. Para agregar un disparador, haga clic en la pestaña Acciones »Luego en el botón« + ».
Hay tipos de desencadenantes 3:
- El clic es el acto de hacer clic en el ratón
- La entrada del mouse sobre el elemento
- El mouse sale por encima del elemento
La lista de acciones es bastante larga. Por ejemplo, puede redirigir a un usuario que hace clic en Snoopy a otra página seleccionando la acción " solo enlace Lo que traerá nuevas opciones.
Descubre también nuestro 10 premium plugins de WordPress de Reservas y Reservas
Cómo usar Slider Revolution TimeLine
Slider Revolution ofrece una interfaz de gestión del tiempo en la parte inferior. Esta interfaz le permite ver dónde comienza y dónde termina la animación de un elemento.
En la imagen anterior, notará dos flechas azules. El primero a la izquierda indica el comienzo de la animación de entrada de un elemento y el segundo indica el final de la animación de entrada. El color rojo oscuro indica la vida del elemento en la escena.
Lire aussi Cómo agregar una cuenta atrás en su blog de WordPress
Encontrará un final también similar al otro extremo de una duración (animación de entrada, tiempo de vida y animación final).
Con el calendario Podrá controlar qué elemento se muestra antes y qué elemento desaparece primero. Es una herramienta muy práctica que debes dominar para hacer una buena animación.
La línea de tiempo también tiene un reproductor que puede activar para obtener una vista previa de la diapositiva.
Hasta entonces, te di los conceptos básicos para crear una diapositiva. Ahora guarde su control deslizante y comience la vista previa.
Eso es todo para este tutorial, en el siguiente, hablaremos sobre la visualización de un control deslizante en un artículo y algunas operaciones avanzadas.
Descubra también algunos temas y complementos premium de WordPress
Puedes usar otros plugins de WordPress para dar una apariencia moderna y optimizar el manejo de tu blog o sitio web.
Aquí le ofrecemos algunos complementos premium de WordPress que lo ayudarán a hacerlo.
1. Audio de disco
Disco de audio es otro Plugin de WordPress que lo ayudará a mostrar un reproductor de audio directamente en su sitio web con solo presionar un botón. El diseño del reproductor de audio responde completamente, por lo que los usuarios móviles podrán disfrutar de sus funciones sin problemas.
Además, ofrece muchas opciones de personalización que incluyen esquemas de color, apariencias, imágenes de fondo y opacidad. Tiene varias opciones para controlarlo por teclado y también le permite ver su lista de reproducción con una barra de desplazamiento ajustable.
Lea también: plugins de WordPress 10 para mejorar la investigación en tu blog
También podrá insertar enlaces de descarga en el reproductor de música para mostrar a los usuarios dónde pueden ir a comprar la pista que se está reproduciendo en su sitio web.
Descargar | Demo | alojamiento web
2. Reserva de eventos Pro
Este es otro Plugin de WordPress 100% responsivo, fácil de personalizar y dedicado a la gestión de reservas en cualquier web, que ofrezca sus servicios en el ámbito de los eventos.
Sus características principales incluyen: personalización de texto, color, bordes y otros, soporte para PayPal, gestión de códigos de cupones y cupones, soporte para Google Maps, el soporte de la gestión de correos electrónicos, el soporte de los shortcodes, panel de control intuitivo, fácil creación de eventos, control total sobre la apariencia, etc.
Descargar | Demo | alojamiento web
3. Social Share & Locker Pro
La extensión Social Share & Locker Pro ha sido diseñada para ayudar a que su sitio web sea más visible en las redes sociales. Con solo unos pocos clics, puede establecer la posición de sus íconos sociales o bloquear su contenido requiriendo compartir en una de las redes sociales que ofrece.
Tiene temas predefinidos de 10 y esto debería cubrir los deseos más comunes. Todos sus temas son Retina y maravillas del trabajo.
30 cosas que se pueden hacer en su blog después de su publicación Descúbrelos consultando este artículo.
Además, con Social Share & Locker Pro, podrás mostrar el nombre completo de las redes sociales o solo el icono. Dependerá de su diseño, el espacio disponible o sus deseos.
Descargar | Demo | alojamiento web
Recursos recomendados
Conozca otros recursos recomendados para ayudarlo a construir y administrar su sitio web.
- Cómo convertirse en un blogger exitoso y ganar dinero con WordPress
- ¿Cómo integrar Google Formas de WordPress
- Cómo crear una política de privacidad en WordPress
- Complementos de 6 WordPress para garantizar el cumplimiento de RGPD de un blog
Conclusión
Listo ! Eso es todo por esta guía. Esperamos que este tutorial le haya brindado los conceptos básicos para crear una presentación de diapositivas con Slider Revolution en un blog o sitio web de WordPress. Si tiene alguna pregunta, sugerencia o comentario, déjelos en nuestra sección comentarios.
Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.
No dude en comparte con tus amigos en tus redes sociales favoritas.
...
Hola,
Quiero agregar una imagen ar en un control deslizante, voy al plan ar, como fuente selecciono Fondo/Imagen principal pero no tengo el botón azul "cambiar imagen", así que no entiendo cómo seleccionar la imagen deseada para mostrarlo como un marco de mi control deslizante... ¿tienes una idea?
Merci
Walter