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:

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 ".

redactor de diapositivas-revolución-deslizador

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

Revolución-barra deslizante doutil-edición-de-diapositivas

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 ".

la creación de diapositivas-button-biela-revolución

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).

deslizador opciones de creación de diapositivas-revolución

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).

la creación de diapositivas-opción-revolución-deslizador

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.

segundo-slide-creación-Dun-slider-slider-revolución

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 ".

ANTECEDENTES imagen-ejemplo

Puede encontrar muchas imágenes gratuitas en la web. Solo haz una búsqueda en Google. 

Imagen-posterior plan de revolución-deslizador

Cuando agrega una imagen, esto se aplica inmediatamente en la vista previa de la diapositiva y en la "escena".

szene-revolución-deslizador

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 ".

fly-complemento capa deslizante-revolución

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.

divertido-snoopy-png

Luego agregue esta imagen en la escena, y tendrá algo como esto:

ejemplo-slider-slider-revolución

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

nueva representación-snoopy-revolución-deslizador

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:

rotación-dimage-revolución-slider

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.

tostador daide-revolución-deslizador

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.

La inversión de las imágenes

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 ".

animación-slider-revolució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.

icono-animado-slider-revolución

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:

Animación-plato-Snoopy

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.

configuración-duna-animado-slider-revolución

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:

snoppy flotante

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:

visibilidad-elementos-revolución-slider

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.

comportamiento-element-revolución-slider

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« + ».

para añadir un botón del obturador

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

Gestión de los disparadores-revolución-deslizador

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.

beginning-y-final-duna-película-en-slider-revolución

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.

Animación en línea de tiempo-revolución-deslizador

Hasta entonces, te di los conceptos básicos para crear una diapositiva. Ahora guarde su control deslizante y comience la vista previa.

Copia de seguridad y previsulisation

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.

Los complementos de wordpress premium de reproductor de audio de disco agregan reproductor de audio

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.

Pro reserva de 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.

Complemento social share locker pro wordpress

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.

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

...