Agregar un control deslizante a su sitio de WordPress es una excelente manera de mostrar imágenes, crear una presentación interactiva o compartir una variedad de contenido en un espacio fijo.
Dado que los controles deslizantes se pueden agregar a casi cualquier área de su sitio web, incluidas las publicaciones, las páginas, las barras laterales y las áreas temáticas, como el encabezado y el pie de página, se pueden usar de muchas maneras diferentes para atraer a sus visitantes.
En esta guía, repasaré cómo crear un control deslizante con un complemento gratuito de WordPress para mostrar contenido personalizado a su audiencia en un formato elegante. Si eso suena atractivo, comencemos.
¿Qué es un control deslizante?
Básicamente, un control deslizante es una colección de fotos con reproducción automática o reproducción controlada por el usuario.
Sin embargo, puedes crear algo mucho más avanzado. Por ejemplo, cada diapositiva puede contener texto, imágenes y videos, así como botones que llevan al usuario a otras partes del control deslizante o a sitios web externos. Los elementos de los controles deslizantes, como texto e imágenes, se pueden animar y se pueden aplicar efectos llamativos durante las transiciones de diapositivas.
La herramienta utilizada en este tutorial le permite crear controles deslizantes básicos y complejos, lo que le brinda mucha libertad creativa, así como plantillas elegantes para comenzar.
Cómo crear un control deslizante en WordPress
- Instale y habilite el complemento Depicter WordPress.
- Crea tu primer control deslizante.
- Elige una plantilla.
- Diseña tu deslizador.
- Reordene, duplique y administre múltiples diapositivas de una manera diferente.
- Vista previa del control deslizante.
- Publica tu control deslizante.
La herramienta que usaré para este tutorial es un complemento llamado Depicter. Elegí ilustrador porque es gratis, fácil de usar y tiene un buen conjunto de características.
También fue creado por el equipo detrás de Cute Slider y Master Slider, un complemento de control deslizante de WordPress muy popular que existe desde 2013. Durante los tres años de desarrollo, el equipo ha utilizado todo lo que ha aprendido para crear y admitir herramientas de control deslizante populares, y lo hemos condensado en un nuevo complemento que pretende ser la próxima generación de controles deslizantes.
1. Instale y habilite el complemento Depicter WordPress.
El complemento Depicter se puede descargar de forma gratuita desde el directorio de WordPress o su sitio web oficial. Después de descargar el archivo del complemento en su computadora, puede cargarlo en su sitio de WordPress a través del tablero.
Después de iniciar sesión en su panel de WordPress, vaya a Complementos > Agregar nuevo En la pantalla Agregar complementos, haga clic en Enviar complemento botón.
En la siguiente pantalla, haga clic en escoge un archivo y busque el archivo del complemento Depicter descargado en su computadora. Luego haga clic instalar ahora botón.
En la siguiente pantalla, haga clic en Activar el complemento botón.
Para obtener instrucciones más detalladas sobre este paso, consulte la guía completa para agregar complementos a WordPress.
2. Crea tu primer control deslizante.
Después de activar Depicter, debe ser redirigido al panel de complementos. Si no es así, puede acceder haciendo clic en ilustrador en el menú del lado izquierdo de la barra lateral.
Luego puede hacer clic en Crear un control deslizante botón para empezar.
3. Seleccione una plantilla.
Una de las cosas impresionantes de Depicter es que viene con una selección de plantillas de control deslizante bien diseñadas. Actualmente, las plantillas cubren varias categorías diferentes, que incluyen negocios, alimentos, cartera y servicios. También hay un conjunto de plantillas de control deslizante para tiendas en línea.
Puede obtener una vista previa de cualquier plantilla en múltiples ventanas gráficas, incluidas tabletas y teléfonos inteligentes. Esta es una forma efectiva de garantizar que cualquier contenido agregado a su sitio web usando Depciter sea compatible con dispositivos móviles.
Después de verificar las plantillas desde su tablero de WordPress, puede importar una en su control deslizante. También es posible comenzar con un lienzo en blanco.
4. Diseña tu control deslizante.
Ya sea que comience con un lienzo en blanco o importe una plantilla, puede comenzar a diseñar su control deslizante de inmediato utilizando la interfaz avanzada de Depicter.
La barra lateral izquierda contiene todo lo que puede agregar a sus controles deslizantes, como fotos, textos, videos, formas y vectores, y botones.
La configuración y las opciones de cada elemento se activan en cuanto hace clic en el elemento en el espacio de trabajo principal. Puede editar muchas propiedades del elemento en el que hace clic según el tipo de elemento.
Por ejemplo, las propiedades de texto que se pueden personalizar incluyen tipo de letra, espaciado entre letras, dirección, altura de línea y más, como se muestra a continuación.
Para otros tipos de elementos, puede ser rotación, opacidad, borde y superposición de filtros.
Ahora echemos un vistazo más de cerca a los diversos elementos que puede agregar al control deslizante Depicter a continuación.
Biblioteca de fotos y videos
Si bien puede cargar fácilmente elementos para usarlos en controles deslizantes, como imágenes y videos, Depicter también ofrece una biblioteca de fotos y videos gratuitos que puede usar.
Al agregar un video a una diapositiva, puede elegir si la reproducción automática está activada, si el video se detiene cuando cambia la diapositiva, muestra los controles de reproducción y algunas otras propiedades.
También puede incrustar videos de YouTube y Vimeo en sus diapositivas. Para lograr esto, simplemente agregue la opción YouTube o Vimeo desde la barra lateral izquierda, luego ingrese la URL del video en el área correspondiente de la barra lateral a la derecha. También puede cambiar la configuración para controlar si el video se reproduce inmediatamente, se silencia y cómo se muestran los videos relacionados.
Opciones de texto
Si bien puede agregar fácilmente un cuadro de texto a una diapositiva, Depicter también proporciona estilos combinados listos para usar para su trabajo.
Estos estilos son combinaciones predefinidas de tipografía y decoraciones, como texto rodeado por un marco o texto alineado de forma llamativa.
Formas y vectores
También puede elegir entre una amplia variedad de formas y vectores que puede insertar en las diapositivas de Depicter.
Como sugiere el nombre, la herramienta de formas en Depicter le permite dibujar rápidamente varias formas, incluidos triángulos, cuadrados y círculos.
Los vectores de stock cubren varias categorías diferentes y le permiten agregar rápidamente formas más avanzadas a sus diapositivas, como botones, marcos, animales y más.
botones
Sus controles deslizantes pueden ser interactivos o no interactivos, según lo desee. Si desea agregar botones a sus diapositivas, Depicter tiene una serie de opciones preestablecidas para elegir.
Es muy fácil controlar lo que hacen los botones, como redirigir al usuario a una URL o diapositiva específica cuando se hace clic. Puede cambiar la apariencia de los botones en la configuración del proyecto.
Control de reproducción
Si desea que el control deslizante sea más interactivo, puede agregarle controles. Las opciones incluyen flechas de navegación hacia adelante y hacia atrás, flechas de pausa y reproducción e indicadores de desplazamiento hacia abajo.
También puede agregar viñetas de navegación que le permitan a su audiencia saltar a una diapositiva específica. También es una opción para mostrar un temporizador de línea o una barra de progreso.
animaciones
También puede agregar animación y efectos de desplazamiento a cualquier elemento y convertirlos en botones interactivos.
Los efectos de animación son perfectos para aumentar la dinámica de los controles deslizantes. Un objeto en movimiento llamará más la atención de los visitantes que uno estático. Si bien puede ser tentador usar todos los efectos de animación de Depicter, es mejor usarlos con moderación para evitar abrumar a su audiencia. Así que guárdelos para los elementos que realmente desea resaltar en la diapositiva.
Opciones generales
El ilustrador también tiene opciones generales para cada control deslizante. Estas opciones se utilizan para establecer la altura y la relación de aspecto del control deslizante, habilitar la navegación panorámica, configurar si la reproducción debe comenzar automáticamente y repetirse, o si se debe aplicar un efecto de animación a las transiciones de diapositivas.
También puede elegir si desea habilitar la carga diferida de diapositivas y qué tipo de animación de carga mostrar.
Depicter admite CSS personalizado para que pueda personalizar aún más su control deslizante.
Puede obtener una vista previa de todas las opciones en la interfaz de Depicter para ayudarlo a decidir cuál usar.
5. Reordene, duplique y administre múltiples diapositivas de una manera diferente.
Cada presentación de diapositivas creada puede tener varias diapositivas. Hacer un seguimiento de las diapositivas individuales es fácil con el panel deslizante que puede abrir en cualquier momento.
Desde el panel de diapositivas, puede reorganizar rápidamente el orden de las diapositivas, así como eliminarlas y duplicarlas.
De manera predeterminada, Depicter reproduce automáticamente las diapositivas en su presentación de diapositivas. Sin embargo, puede configurar el control deslizante para que se detenga en una diapositiva específica. Luego puede usar los controles de reproducción mencionados anteriormente para permitir que los oyentes naveguen por el control deslizante a su propio ritmo.
6. Obtenga una vista previa del control deslizante.
Puede obtener una vista previa de su control deslizante en cualquier momento. Depicter le permite cambiar el área visible para tener una buena idea de cómo se verá el control deslizante en los teléfonos inteligentes, tabletas y pantallas de escritorio.
Para obtener una vista previa aún más detallada del control deslizante, puede abrirlo en una nueva pestaña y verlo fuera de la interfaz de Depicter.
7. Publica tu control deslizante.
Cuando esté satisfecho con su control deslizante, puede publicarlo en su sitio de WordPress.
Después de la publicación, puede realizar cambios adicionales en cualquier momento. Cualquier cambio que realice se aplicará inmediatamente al control deslizante publicado después de guardar.
Hay tres opciones principales para publicar su control deslizante y compartirlo con sus visitantes.
La forma más común de agregar un control deslizante a publicaciones o páginas es usar un bloque.
Otra opción es agregarlo a la barra lateral u otra parte de su sitio web compatible con widgets utilizando la interfaz del editor de sitios de WordPress.
Otra opción es insertar código PHP en los archivos de tu tema. Esto es ideal si desea agregar un control deslizante al encabezado, pie de página u otra parte de su sitio web que esté fuera de las áreas de contenido principal.
Una vez que el control deslizante se agrega a su sitio web, funcionará según su configuración. Como se mencionó, cualquier cambio publicado realizado en el control deslizante será inmediatamente visible para los visitantes.
Agregar un control deslizante de imagen a su sitio de WordPress
Lo tenemos: una manera fácil de agregar un control deslizante básico o avanzado a su sitio de WordPress con un complemento gratuito.
Dado que Depicter tiene una amplia selección de plantillas editables, bibliotecas de imágenes y videos integradas, una interfaz fácil de usar y muchas opciones de personalización, debe tener todo lo que necesita para crear sus propios controles deslizantes únicos.
