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.

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

Adăugați un modul full-lățime.

adăugați un cursor modul Divi #

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

Elementor vă permite să creați Ușor și Gratuit orice site web sau design de blog cu aspect profesional. Nu mai plătiți mult pentru un site web pe care îl puteți face singur.

Î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

Vrei să-ți vinzi produsele pe internet?

Descărcați gratuit WooCommerce, cele mai bune pluginuri de comerț electronic pentru a vă vinde produsele fizice și digitale pe WordPress și pentru a vă crea cu ușurință magazinul online. Perfect pentru incepatori.

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

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

[vc_row center_row = "da"] [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"] DESCARCĂ TEMA DIVI [/ vcex_button] [/ width»_column_column] » 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" =" TEMP D FA-DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Alte tutoriale Divi

13 acțiuni
acțiune5
tweet1
Registru7