Más

    Cómo crear un control deslizante de vídeo e imagen en WordPress (de forma sencilla)

    - Advertisement -

    ¿Se pregunta cómo crear un control deslizante de WordPress con videos e imágenes?

    Los controles deslizantes son una excelente manera de mostrar su contenido y captar la atención de los visitantes de su sitio web. Pueden resaltar contenido importante o destacado sin ocupar mucho espacio en la página.

    En este artículo, proporcionaremos un tutorial paso a paso sobre cómo crear fácilmente un control deslizante de vídeo e imagen de WordPress con Soliloquy.

    crear-un-video-e-imagen-wordpress-slider-og
    ¿Por qué crear un control deslizante de vídeo e imagen en WordPress?

    Seamos realistas: los controles deslizantes de contenido son increíbles. Cuando se hacen correctamente, conservan el valioso espacio de la pantalla y ayudan a atraer a los visitantes inmediatamente después de llegar a su página.

    Un control deslizante de videos e imágenes es un control deslizante que contiene videos e imágenes. A veces, querrás vídeos e imágenes en un control deslizante en lugar de crear controles deslizantes para uno u otro.

    Supongamos que tiene un sitio web de bienes raíces para varios listados de viviendas. Puede agregar imágenes de la casa junto con un recorrido en video por el interior, brindando a los usuarios una experiencia más interactiva.

    O puede utilizar el control deslizante de contenido para agregar testimonios de usuarios o elementos de cartera. Algunos complementos pueden incluso ofrecer una función de reproducción automática para que los visitantes vean el vídeo inmediatamente.

    Más allá de eso, un control deslizante es una excelente manera de agrupar contenido en un solo lugar. En lugar de espaciar tus vídeos e imágenes verticalmente, puedes clasificarlos todos en un control deslizante.

    Si desea mostrar testimonios en su página de destino, es mucho mejor tenerlos en un control deslizante para que los visitantes puedan verlos todos a la vez en lugar de desplazarse hacia abajo.

    También puede utilizar un control deslizante para mostrar contenido destacado para poder dirigir el tráfico a sus páginas más importantes.

    Dicho esto, cubriremos cómo crear un control deslizante de WordPress con videos e imágenes en su sitio web.

    Paso 1: instale un complemento deslizante de WordPress

    La forma más sencilla de crear un control deslizante de vídeo e imagen es con Soliloquio. Es el mejor complemento deslizante de WordPress, con más de 900.000 instalaciones. Puede crear fácilmente controles deslizantes simples utilizando imágenes de la biblioteca multimedia junto con videos alojados en plataformas de terceros como YouTube.

    Cuando se agregue a su sitio web, el control deslizante se verá genial en todos los dispositivos, incluidos computadoras portátiles, de escritorio, tabletas y teléfonos inteligentes.

    Control deslizante de imágenes de WordPress SoliloquioControl deslizante de imágenes de WordPress Soliloquio

    Es por eso que muchos sitios web utilizan controles deslizantes de Soliloquy en sus páginas más importantes, como la página de inicio, la página de ventas y la página de destino.

    ¡Lo mejor de todo es que no tienes que escribir ni una sola línea de código para hacerlo!

    Para comenzar, todo lo que tienes que hacer es instalar y activar el complemento Soliloquy en tu sitio web. Si necesita ayuda con la instalación, consulte nuestra guía sobre cómo instalar un complemento de WordPress.

    La buena noticia es que puedes utilizar el versión gratuita de Soliloquio para este tutorial.

    Dicho esto, es posible que desee considerar la Versión Pro si necesita complementos como una función de caja de luz, protección con contraseña, contenido destacado y otras integraciones como Instagram, Pinterest y WooCommerce.

    Paso 2: agregue diapositivas de video responsivas en WordPress

    Tras la activación, deberá dirigirse a Soliloquio » Agregar nuevo en el área de administración de WordPress.

    Desde allí, puedes darle a tu control deslizante un título apropiado.

    Ahora está listo para agregar todo el contenido multimedia a su control deslizante. Aquí es donde puedes agregar tanto vídeos como imágenes.

    Continúe y haga clic en «Seleccionar archivos de otras fuentes».

    agregar nueva diapositivaagregar nueva diapositiva

    Nota: Si bien puedes subir videos desde tu computadora a WordPress, no lo recomendamos ya que ralentizará tu sitio. En su lugar, deberías utilizar YouTube u otra plataforma de alojamiento de vídeos. Consulte nuestra lista de los mejores consejos para acelerar el rendimiento de WordPress para conocer más estrategias.

    Verá aparecer una ventana emergente con opciones para insertar archivos multimedia. Comenzaremos insertando nuestras diapositivas de video.

    Para hacer eso, dirígete a la pestaña «Insertar diapositiva de video». Asigne a la diapositiva de su video un título, una URL del video, una URL de la imagen, un texto alternativo y un título.

    Asegúrese de obtener la URL del video de una plataforma alojada por terceros como YouTube.

    Insertar diapositiva de vídeoInsertar diapositiva de vídeo

    Si desea agregar más diapositivas, todo lo que necesita hacer es simplemente hacer clic en el botón «Agregar otra diapositiva de video».

    Luego, agregará la información que necesita para esta diapositiva.

    Agregar otra diapositiva de videoAgregar otra diapositiva de video

    Una vez que haya agregado todas las diapositivas de video, continúe y haga clic en el botón «Insertar en el control deslizante».

    Sus diapositivas aparecerán en la parte inferior de la página para editarlas más tarde si es necesario.

    Insertar en el control deslizanteInsertar en el control deslizante
    Paso 3: agregue controles deslizantes de imágenes en WordPress

    Ahora que tiene todas las diapositivas de video en su lugar, está listo para agregar diapositivas de imágenes.

    Con las diapositivas de imágenes, puedes simplemente arrastrar y soltar imágenes desde tu computadora, que es la forma más fácil de agregar estos archivos.

    subir imágenessubir imágenes

    Dicho esto, también puedes usar la biblioteca multimedia para agregar diapositivas.

    Para agregar desde su biblioteca multimedia, simplemente haga clic en «Seleccionar archivos de otras fuentes».

    Seleccionar archivos de otras fuentesSeleccionar archivos de otras fuentes

    Desde aquí, aparecerá la ventana Agregar medios.

    Continúe y seleccione las imágenes que desea agregar. Luego, presione el botón ‘Insertar en el control deslizante’.

    Insertar en el control deslizante desde la biblioteca multimediaInsertar en el control deslizante desde la biblioteca multimedia

    Una vez que haya terminado de agregar diapositivas de imágenes, debería ver todas las diapositivas en la sección inferior del control deslizante.

    Siéntase libre de reorganizarlos en el orden adecuado para satisfacer sus necesidades.

    reorganizar el control deslizantereorganizar el control deslizante
    Paso 4: edite la configuración del control deslizante

    Puede realizar pequeños ajustes para personalizar cómo se mostrará el control deslizante a los visitantes. Desplácese hacia abajo y diríjase a la pestaña «Configuración» para acceder a la configuración.

    Puede editar opciones como el tema del control deslizante, el tamaño de la imagen, las dimensiones del control deslizante y más.

    Pestaña de configuraciónPestaña de configuración

    El tema del control deslizante afecta el diseño de la diapositiva, por lo que puede alternar entre las distintas opciones. Si tienes acceso a la Versión Pro de Soliloquioluego también puedes instalar el complemento Slider Themes para obtener más opciones de personalización.

    Si te desplazas hacia abajo, verás la opción «Reproducción automática de vídeo». Puede marcar la casilla para habilitar la reproducción automática para que el video comience automáticamente antes de que el usuario pueda continuar bajando en la página.

    vídeo de reproducción automáticavídeo de reproducción automática

    La reproducción automática puede ser excelente para que los videos explicativos de productos o las páginas de ventas atraigan a los usuarios, reduciendo las posibilidades de que hagan clic.

    Una vez que haya terminado de ajustar la configuración, solo necesita presionar el botón «Publicar».

    botón publicarbotón publicar
    Paso 5: muestre su control deslizante en páginas o publicaciones

    Ahora, todo lo que queda por hacer es publicar su control deslizante en una página o publicación.

    Puedes copiar y pegar fácilmente el código corto si todavía estás usando el Editor clásico de WordPress. Para obtener más información, siga nuestro tutorial sobre cómo agregar un código corto en WordPress.

    copiar código cortocopiar código corto

    Dicho esto, si está utilizando el nuevo editor de bloques de Gutenberg, Soliloquy tiene un bloque que puede usar y que enlaza directamente con todos sus controles deslizantes.

    Sólo dirígete a Páginas/Publicaciones » Agregar nuevo o editar una página/publicación existente.

    A continuación, haga clic en el icono ‘+’ y busque el bloque Soliloquio.

    Desde aquí, puede seleccionar el control deslizante de video e imagen que acaba de crear.

    Una vez que haya terminado, simplemente presione «Publicar» o «Actualizar».

    publicar control deslizante publicar control deslizante

    Luego, puede obtener una vista previa de su control deslizante para asegurarse de que se vea bien.

    Debería verse así.

    gif de presentación de diapositivas de imágenes y videosgif de presentación de diapositivas de imágenes y videos
    Bonificación: agregue una caja de luz a sus controles deslizantes de WordPress

    Soliloquy tiene una amplia gama de complementos que pueden mejorar sus controles deslizantes y brindar una experiencia más interactiva a los visitantes.

    Por ejemplo, si está agregando un control deslizante, es muy probable que también desee agregar una caja de luz.

    Al agregar el efecto de caja de luz a los controles deslizantes de su sitio web de WordPress, podrá mostrar su contenido de una manera más profesional.

    Cuando los usuarios hagan clic en sus imágenes o videos, se abrirá en una ventana emergente en su sitio. Las cajas de luz crean una experiencia de visualización más inmersiva para que sus visitantes puedan ver el contenido con mayor detalle. Incluso pueden descargar los archivos multimedia en sus computadoras o compartir las imágenes en las redes sociales.

    Si tiene un sitio web de fotografía, el efecto de caja de luz permite a los visitantes ver sus imágenes sin la distracción de otros elementos de su sitio, lo que aumenta la participación. Para las tiendas online, las cajas de luz ayudarán a crear galerías de productos más atractivas.

    Para agregar una caja de luz a su control deslizante, simplemente vaya a Soliloquio » Complementos. Desplácese hacia abajo hasta el complemento Lightbox y haga clic en «Instalar complemento».

    instalar el complemento de caja de luzinstalar el complemento de caja de luz

    Una vez instalado, aparecerá en la configuración de su control deslizante.

    Desde aquí, podrá ajustar los efectos y diseños, agregar flechas de navegación, el tema de la caja de luz y más.

    configuración de la caja de luzconfiguración de la caja de luz

    Una vez habilitada, la caja de luz debería funcionar automáticamente.

    Obtenga una vista previa de su control deslizante y debería verse así.

    vista previa del control deslizante de la caja de luzvista previa del control deslizante de la caja de luz

    Esperamos que este artículo le haya ayudado a aprender cómo crear un control deslizante de vídeo e imagen en WordPress. Es posible que también desee consultar nuestra lista de complementos y herramientas de WordPress imprescindibles para sitios comerciales o nuestra guía definitiva de SEO de WordPress para ayudarle a atraer más tráfico a su sitio web.

    Si te gustó este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.


    Fuente: Cómo crear un control deslizante de vídeo e imagen en WordPress (de forma sencilla)

    Populares

    Más de esta categoría

    DEJA UNA RESPUESTA

    Por favor ingrese su comentario!
    Por favor ingrese su nombre aquí

    Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.