Treci la conținutul principal

Cum de a crea un ecran complet cursorul pe Divi

Divi: cea mai ușoară temă WordPress de utilizat

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

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

Cum se adaugă un modul pe divi builder

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

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

Modificare CSS avansată a glisorului Divi

În „Setări generale” adăugați un nou diapozitiv.

Adăugați un diaspositiv pe divi

Î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)

Setări diapozitive Divi

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ă „ Adaugă codul în capul blogului tău »:

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

(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 cu ecran complet pentru site-ul dvs. 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.

Alte tutoriale Divi

Acest articol conține comentarii 13

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

    1. bonjour,

      Încercați să dezactivați toate celelalte pluginuri, verificați, de asemenea, că versiunile dvs. de WordPress și Divi sunt actualizate.

  2. Bună ziua, cum pot personaliza dimensiunea diapozitivului pentru a se potrivi cu dimensiunea imaginii bannerului, astfel încât să nu pot decupa imaginea?

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

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

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

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top
13 acțiuni
acțiune5
tweet1
Registru7