Saltar al contenido principal

Cómo crear una pantalla completa deslizante en Divi

Divi: el tema de WordPress más fácil de usar

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 600.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

El control deslizante de ancho completo viene con características increíbles, incluida la capacidad de agregar controles deslizantes con fondos de video. Pero, una característica que lo hace aún más poderoso es la capacidad de extender el control deslizante para mostrar en modo de pantalla completa. Entonces le mostraremos cómo agregar una función de pantalla completa en un control deslizante.

Agregar una función de pantalla completa al módulo deslizante de divi Es extremadamente fácil de implementar con unas pocas líneas de CSS y JavaScript. En solo 5 minutos, puede convertir su control deslizante de ancho completo en un control deslizante de pantalla completa que se expande para llenar toda la pantalla, al igual que los encabezados de pantalla completa.

La implementación de la funcionalidad del control deslizante de pantalla completa en Divi

Si no ha leído nuestro tutorial sobre la presentación de la interfaz de DiviTe invito a hacerlo.

Paso 1: agregue un control deslizante con diapositivas en modo de ancho completo

Utiliza el " divi Constructor »Agregar una sección« anchura completa »Y haga clic en« Insertar un módulo ".

Añadir un módulo de ancho completo.

Cree fácilmente su sitio web con Elementor

Elementor le permite crear fácilmente cualquier diseño de sitio web con un aspecto profesional. Deja de pagar caro por lo que puedes hacer tú mismo. [Gratis]

añadir un módulo de control deslizante Divi #

En la Configuración del control deslizante una pantalla completa, en la pestaña "CSS personalizado", agregue una clase CSS llamada " et_fullscreen_slider ".

En "Configuración general", agregue una nueva diapositiva.

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

En la configuración de diapositivas, en Configuración general, actualice los siguientes elementos:

  • Sección: [introduzca su tema]
  • Texto del botón: [introduzca el texto del botón]
  • Botón URL: [introduzca su botón de URL]
  • Imagen de fondo: [agregar una imagen de fondo] (Yo uso una imagen de unsplash.com)

Repita este paso para todas las diapositivas que desee agregar.

Una vez hecho esto, haga clic en " Guardar y Salir ".

Cómo agregar CSS y JavaScript personalizados

Desde el panel de WordPress, vaya a " Divi → Opciones de tema Y en "Configuración general", ingrese el siguiente CSS en el cuadro de texto CSS personalizado:

.et_pb_slides .et_fullscreen_slider, .et_fullscreen_slider .et_pb_slide, .et_fullscreen_slider .et_pb_container {min-altura: 100% significativa; altura: 100%! important; }

haga clic en la siguiente pestaña y agregue el siguiente javascript al cuadro de texto con la etiqueta " Agrega el código al encabezado de tu blog »:

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [Recomendado]

<Script> (function ($) {$ (ventana) .en ( 'cambio de tamaño de carga', function () {$ () cada uno (function () {et_fullscreen_slider ($ (this)) 'et_fullscreen_slider ..';}); }); función et_fullscreen_slider (et_slider) {var et_viewport_width = $ (ventana) .width () et_viewport_height = $ (ventana) .height () = $ et_slider_height (et_slider) .find () innerHeight () 'et_pb_slider_container_inner.'. , admin_bar $ = $ ( '# wpadminbar), main_header $ = $ (' # mano-header ') top_header $ = $ (' # top-header '); $ (et_slider) .height (' auto '); if ($ admin_bar.length) {var = et_viewport_height et_viewport_height - $ admin_bar.height ();} if ($ top_header.length) {var = et_viewport_height et_viewport_height - $ top_header.height ();} if ($ ( 'et_transparent_nav !. ') .length) {var = et_viewport_height et_viewport_height - $ main_header.height ();} if (et_viewport_height> et_slider_height) {$ (et_slider) .height (et_viewport_height);}}}) (jQuery); </ Script>

Para terminar

Ahora tiene un control deslizante en modo de pantalla completa para su sitio web. Úselo para crear controles deslizantes efectivos en todo el ancho para la mayoría de los navegadores.

Si tiene alguna pregunta, no dude en hacerla.

Otros tutoriales de Divi

Este artículo contiene los comentarios 12
  1. Hola, gran tutorial.
    Por contra, no muestra la pantalla completa en el iPhone, por ejemplo, al inclinar el iPhone, el control deslizante se muestra de vez en cuando en pantalla completa, pero no todo el tiempo ... como si no respondiera, ¿tienes una idea para resolver este pequeño problema?

    Gracias de antemano,
    cordialement,

    1. Hola,

      Intente desactivar todos los demás complementos, también verifique que sus versiones de WordPress y Divi estén actualizadas.

  2. Buenas tardes, ¿cómo puedo personalizar el tamaño de la diapositiva de acuerdo con el tamaño de la imagen del banner para que no pueda recortar la imagen?

  3. Hola,
    Gracias por este artículo Leí que no era necesario instalar un tema secundario con Divi hasta que cambie mucho el CSS.
    Todavía hay una pequeña personalización ...
    Entonces, ¿recomienda un tema secundario antes de aplicar su súper tutorial?
    Gracias de antemano por todos sus buenos consejos, a menudo me inspiro

  4. Hola, muy buen artículo!
    Seguí lo que se indica en el artículo pero mi control deslizante no se muestra en pantalla completa en DIVI.
    Puede ayudarme ? Me gustaría ponerlo en mi página de inicio.

    gracias por su ayuda

  5. Hola,
    Construyo mi página de inicio con el constructor ... cuando hago una previsualización, veo la página.
    El problema es que cuando guardo mi página y la vuelvo a abrir, el control deslizante no aparece.
    ¿Podría alguien ayudarme?

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Volver arriba
11 acciones
cuota5
Tweet1
Siguiente 5