Saltar al contenido principal

Cómo crear una pantalla completa deslizante en Divi

¿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]

El control deslizante de ancho completo incluye funciones increíbles, que incluyen la capacidad de agregar deslizadores 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 que se muestre en modo de pantalla completa. Así que 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 algunas líneas de CSS y JavaScript. En sólo 5 minutos, usted puede convertir su plena pantalla completa deslizador ancho deslizador se expande para llenar toda la pantalla, al igual que las cabeceras completas.

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 Divi, Te invito a hacerlo

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

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

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

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

más 554.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]

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

En "Configuración general" agrega una nueva diapositiva.

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. [GRATIS]

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 quiera agregar.

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

Cómo agregar CSS y JavaScript personalizados

Desde el tablero de WordPress, ve 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 código al encabezado de tu blog »:

Crea fácilmente tu blog con SiteGround

SiteGround le permite crear su blog de WordPress en unos pocos clics. Nombre de dominio gratis, alojamiento seguro, SSL, transferencia y mucho más ... [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 de pantalla completa para su sitio web. Úselo para crear controles deslizantes eficientes en todo el ancho para la mayoría de los navegadores.

Si tiene alguna pregunta, no dude en preguntarla.

Otros tutoriales de Divi

Este artículo contiene los comentarios 10
  1. 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?

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

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

  4. 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
15 acciones
cuota10
Tweet1
Guardar4
WhatsApp