Glisorul cu lățime completă vine cu câteva caracteristici minunate, inclusiv posibilitatea de a adăuga glisoare cu fundaluri video. Dar, o caracteristică care îl face și mai puternic este capacitatea de a extinde glisorul pentru a fi afișat în modul ecran complet. Așadar, vă vom arăta cum să adăugați funcționalitatea ecranului complet la un glisor.
Adăugarea unei funcții de ecran complet la modulul glisor al Divi este extrem de ușor de implementat cu câteva linii de CSS și JavaScript. În doar 5 minute, puteți converti glisorul cu lățime completă într-un glisor cu ecran complet care se extinde pentru a umple întregul ecran, la fel ca anteturile pentru ecran complet.
Implementarea funcționalității glisante pe ecran complet pe Divi
Dacă nu ne-ați citit tutorial despre prezentarea interfeței Divi, Te invit să o faci.
Pasul 1: adăugați un glisor cu diapozitive în modul lățime completă
Folosiți „ Divi Builder »Adăugați o secțiune« lăţime completă »Și faceți clic pe« Introduceți un modul ".
Adăugați un modul full-lățime.
adăugați un cursor modul Divi #
În Setări glisor ecran complet, sub fila „CSS personalizat”, adăugați o clasă CSS numită „ et_fullscreen_slider ".
În „Setări generale” adăugați un nou diapozitiv.
În setările de diapozitive, sub Setări generale actualizați următoarele elemente:
- Secțiunea: [introduceți subiectul]
- Butonul Text: [introduceți textul buton]
- Butonul URL: [introduceți butonul URL]
- Imaginea de fundal: [adăugați o imagine de fundal] (Folosesc o imagine de la unsplash.com)
Repetați acest pas pentru atâtea diapozitive pe care doriți să le adăugați.
Odată terminat, faceți clic pe „ Salvați și ieșiți ".
Cum se adaugă CSS și JavaScript personalizate
Din tabloul de bord WordPress, accesați „ Divi → Opțiuni temă Și sub „Setări generale”, introduceți următorul CSS în caseta de text Custom CSS:
.et_pb_slides .et_fullscreen_slider, .et_pb_slide .et_fullscreen_slider, .et_pb_container .et_fullscreen_slider {min-height: 100% semnificativă; Înălțime: 100% importantă;! }
faceți clic pe fila următoare și adăugați următorul javascript în caseta de text intitulată „ Adăugați codul la capul de blogul tău »:
(function($) { $(window).on('load resize', function() { $('.et_fullscreen_slider').each(function() { et_fullscreen_slider($(this)); }); }); function et_fullscreen_slider(et_slider) { var et_viewport_width = $(window).width(), et_viewport_height = $(window).height(), et_slider_height = $(et_slider).find('.et_pb_slider_container_inner').innerHeight(), $admin_bar = $('#wpadminbar'), $main_header = $('#main-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);
În cele din urmă
Acum aveți un glisor pentru modul ecran complet pentru dvs site-ul web. Folosiți-l pentru a crea glisoare eficiente cu lățime completă pentru majoritatea browserelor.
Dacă aveți întrebări, nu ezitați să le puneți.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCĂRCĂ TEMA DIVI [/vcex_button][/vc_column][vc_column] width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARCĂ ȘABLOANELOR DIVI[/vcex_button][/vc_column][/vc_row]
Alte tutoriale Divi
- site-uri web 5 pentru utilizare restaurant tematic Divi
- Cum să adăugați text pe un produs Divi WooCommerce
- Modificarea culorii meniului între paginile Divi
- Cum să personalizați grilele unui blog cu Divi
- Cum de a utiliza rolul editor Divi pe WordPress
- Cum se creează un glisor Divi pe ecran complet
- Modificarea culorii meniurilor între paginile Divi
- Caracteristici pe care probabil nu le cunoașteți despre Divi
- Cum se utilizează Divi Builder pe WordPress
- Cum se utilizează modulul de defilare video Divi
- Cum se utilizează modulul Divi Builder Flip
- Cum să adăugați un modul de mărturie pe Divi Builder
- Cum se utilizează modulul de text Divi
- Cum se creează un slider pe Divi
- Cum se editează un rol de utilizator Divi
- Cum se utilizează modulul Divi Social Media
- Cum se utilizează modulul magazin pe tema WordPress Divi
- Cum se utilizează modulul bara laterală Divi
- Cum se utilizează modulul de prețuri pentru divi
- Cum se utilizează modulul de titlu al publicațiilor Divi
- Cum se adaugă un modul video de Divi
- Cum să utilizați modulul de navigare pentru articole
- Cum se utilizează modulul de căutare Divi
- Cum se utilizează modulul portofel Divi
- Cum se utilizează modulul persoană pe Divi Builder
- Cum se utilizează modulul portofel cu filtrul Divi
- Modul de utilizare a modulului glisant cu lățime întreagă
- Cum se utilizează modulul de imagine Divi Builder
- Modul de utilizare a modulelor de navigație full-width din Divi Builder
- Cum se utilizează modulul galerie de imagini
- Modul de utilizare a modulului de carduri cu dimensiuni multiple de la Divi Builder
- Cum să utilizați modulul de portofoliu Full Width Divi
- Cum se utilizează modulul antet de Divi pentru lățimea completă
- Cum se utilizează modulul Counter Modul Divi
- Cum se utilizează glisorul de articole pe Divi Builder
- Cum se utilizează modulul Divi Email Optin
salut si multumesc pentru acest tutorial! Nu găsesc aici codul js și css de inserat în glisor
Buna ziua, mare tutorial.
Pe de altă parte, nu este afișat pe ecran complet pe iPhone, de exemplu, prin înclinarea iPhone-ului, glisorul este afișat din când în când în ecran complet, dar nu tot timpul ... de parcă nu ar fi receptiv, ai avea idee să rezolvi această mică problemă?
Mulțumesc anticipat,
Cordialement,
bonjour,
Încercați să dezactivați toate celelalte pluginuri, verificați, de asemenea, că versiunile dvs. de WordPress și Divi sunt actualizate.
Bună ziua, cum pot personaliza dimensiunea diapozitivului pentru a se potrivi cu dimensiunea imaginii bannerului, astfel încât să nu pot decupa imaginea?
bonjour,
Nu înțeleg întrebarea.
bonjour,
Vă mulțumim pentru acest articol. Am citit că nu este neapărat necesar să instalați o temă copil cu Divi atâta timp cât nu modificăm prea mult CSS.
Există încă o mică personalizare aici ...
Deci, recomandați o temă pentru copii înainte de a aplica super-tutorialul?
Vă mulțumesc anticipat pentru toate sfaturile voastre bune, de multe ori mă inspir din ea 🙂
bonjour,
Nu neaparat. Puteți păstra divi dacă nu aveți prea multe cunoștințe tehnice.
Bună, articol foarte bun!
Am urmat ceea ce a fost indicat în articol, dar glisorul meu nu este afișat pe ecran complet pe DIVI.
Ma poti ajuta ? Aș dori să-l pun pe pagina mea de pornire.
Vă mulțumim pentru ajutor
bonjour,
Ați contactat echipa DIVI?
Bună ziua Aliénor,
Am aceeași problemă ... Ai găsit o soluție?
Multumesc anticipat
bonjour,
Îmi construiesc pagina de pornire cu constructorul ... când fac o previzualizare, văd pagina.
Problema este că atunci când îmi salvez pagina și o deschid din nou, glisorul nu apare.
Ar putea cineva să mă ajute, te rog?
bonjour,
Acest lucru s-ar putea datora unei erori, ați încercat să contactați asistența Eleganthemes?
bonjour,
Vă mulțumim pentru articolul dvs.!
Știți cum aș putea schimba viteza de defilare a diapozitivelor?