Saltar al contenido principal

Cómo crear una pantalla completa deslizante en Divi

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

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

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]

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

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 »:

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

Temas geniales de WordPress que encontré en
¡Y hay más temas y modelos 50 000 para elegir!

Volver arriba
16 acciones
cuota10
Tweet1
Siguiente 5
WhatsApp