Slider me gjerësi të plotë vjen me disa karakteristika të mrekullueshme, duke përfshirë aftësinë për të shtuar rrëshqitës me sfond video. Por, një tipar që e bën atë edhe më të fuqishëm është aftësia për të zgjeruar rrëshqitësin për t'u shfaqur në modalitetin e ekranit të plotë. Kështu që ne do t'ju tregojmë se si të shtoni funksionalitetin e ekranit të plotë në një slider.

Shtimi i një veçorie me ekran të plotë në modulin rrëshqitës të Divi është jashtëzakonisht e lehtë për tu zbatuar me disa rreshta CSS dhe JavaScript. Në vetëm 5 minuta, mund të shndërroni rrëshqitësin tuaj me gjerësi të plotë në një rrëshqitës me ekran të plotë që zgjerohet për të mbushur të gjithë ekranin, ashtu si kokat e ekranit të plotë.

Zbatimi i funksionimit të rrëshqitësit në ekran të plotë në Divi

Nëse nuk i keni lexuar tonat tutorial për prezantimin e ndërfaqes Divi, Unë ju ftoj ta bëni.

Hapi 1: Shtoni një rrëshqitës me rrëshqitje në modalitetin e gjerësisë së plotë

Përdorni " Ndërtuesi Divi »Shtoni një seksion« gjerësi të plotë »Dhe klikoni mbi«  Vendosni një modul '.

Shto një modul të plotë gjerësi.

shtoni një modul slider në Divi #

Në Cilësimet e Rrëshqitësit në ekran të plotë, nën skedën "Custom CSS", shtoni një klasë CSS të quajtur " et_fullscreen_slider '.

Në "Cilësimet e përgjithshme" shtoni një diapozitiv të ri.

Në cilësimet e rrëshqitjes, nën Cilësimet e Përgjithshme azhurnoni artikujt e mëposhtëm:

• Seksioni: [shëno seksionin tuaj]
• Butoni i tekstit: [shkruaj butonin e tekstit]
• URL Button: [vendos butonin e URL-it]
• Imazhi i sfondit: [shto imazhin e sfondit] (Po përdor një imazh nga unsplash.com)

Përsëriteni këtë hap për aq shumë rrëshqitje sa doni të shtoni.

Pasi të keni mbaruar, klikoni në " Ruaj & Dil '.

Si të shtoni CSS & JavaScript të personalizuar

Nga pulti i WordPress, shkoni te " Opsionet e Temave Divi → Dhe te "Cilësimet e përgjithshme", futni CSS-në e mëposhtme në kutinë e tekstit Custom CSS:

.et_pb_slides .et_fullscreen_slider, .et_pb_slide .et_fullscreen_slider, .et_pb_container .et_fullscreen_slider {min-lartesi: 100% domethënëse; lartësi: 100% e rëndësishme;! }

klikoni në skedën tjetër dhe shtoni javascript e mëposhtme në kutinë e tekstit të etiketuar " Shtoni kodin në kokë blogun tuaj '

(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);

më në fund

Tani keni një rrëshqitës të modalitetit të ekranit të plotë për tuajin Faqja e internetit. Përdoreni atë për të krijuar rrëshqitës efektivë me gjerësi të plotë për shumicën e shfletuesve.

Nëse keni ndonjë pyetje, mos hezitoni t'i bëni ato.

[vc_row center_row=”po”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”i sheshtë” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SHKARKO TEMËN DIVI [/vcex_button][/vc_colum][/vc_colum] /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”family” font ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-NADLOGO”]DOW templates DIVI[/vcex_button][/vc_column][/vc_row]

Tutoriale të tjera Divi

• faqet e internetit të 5 për përdorim restorant Divi temë
• Si të shtoni tekst në një produkt Divi WooCommerce
• Si të ndryshoni ngjyrën e menysë në mes të faqeve Divi
• Si të personalizoni rrjetet e një blogu me Divi
• Si të përdorni redaktorin e roleve Divi në WordPress
• Si të krijoni një rrëshqitës Divi në ekran të plotë
• Si ta ndryshoni ngjyrën e menusë në mes të faqeve Divi
• Karakteristikat që ju ndoshta nuk i dini për Divi
• Si të përdorni Divi Builder në WordPress
• Si të përdorni modulin scrolling video Divi
• Si të përdorni modulin Dili Builder Flip
• Si të shtoni një modul dëshmimi në Divi Builder
• Si të përdoret moduli i tekstit Divi
• Si të krijoni një shirit në Divi
• Si të redaktoni një rol të përdoruesit të Divi
• Si të përdorni modulin Divi Social Media
• Si të përdorni modulin e dyqaneve në temën WordPress Divi
• Si të përdorni modulin e sidebarit Divi
• Si të përdorni Modulin e Tabelës së Çmimeve të Divi-t
• Si të përdoret moduli i titullit të botimeve Divi
• Si të shtoni një modul video të Divi
• Si të përdorni modulin e lundrimit të artikullit
• Si të përdorni modulin e kërkimit Divi
• Si të përdorni modulin e portofolit Divi
• Si të përdorni modulin e personit në Divi Builder
• Si të përdorni modulin e portofolit me filtrin Divi
• Si të përdorni modulin e plotë slider width
• Si të përdorni modulin e imazhit të ndërtuesit Divi
• Si të përdorni modulin e navigimit të plotë të Divi Builder
• Si të përdorni modulin e galerisë së imazheve
• Si të përdorni modulin e kartës me gjerësi të plotë Divi Builder
• Si të përdorni modulin e Portofolit të Divi Full Width
• Si të përdorni modulin e headerit me gjerësi të plotë Divi
• Si të përdorni Modulin e Divi Counter
• Si të përdorni rrëshqitësin e artikujve në Divi Builder
• Si të përdorni modulin Optika të Divi Email