Glidebryteren i full bredde kommer med noen fantastiske funksjoner, inkludert muligheten til å legge til glidebrytere med videobakgrunn. Men en funksjon som gjør den enda kraftigere, er muligheten til å utvide glidebryteren til å vises i fullskjermmodus. Så vi viser deg hvordan du legger til fullskjermsfunksjonalitet i en glidebryter.
Tillegg av en fullskjermfunksjon til glidemodulen til Divi er ekstremt enkel å implementere med noen få linjer med CSS og JavaScript. På bare 5 minutter kan du konvertere glidebryteren for full bredde til en glidebryter for full skjerm som utvides for å fylle hele skjermen, omtrent som fullskjermhoder.
Implementeringen av glidebryteren for fullskjerm på Divi
Hvis du ikke har lest vår veiledning om presentasjonen av Divi-grensesnittet, Jeg inviterer deg til å gjøre det.
Trinn 1: Legg til en glider med lysbilder i modus for full bredde
Bruk " Divi Builder »Legg til en seksjon« fulle bredde »Og klikk på« Sett inn en modul '.
Legg til en full-bredde-modulen.
legge til en modul skyve Divi #
Legg til en CSS-klasse kalt "Under" Tilpasset CSS "-fanen under Fullskjerm-skyveinnstillingene. et_fullscreen_slider '.
Legg til et nytt lysbilde i "Generelle innstillinger".
Oppdater følgende elementer under lysbildeinnstillingene under Generelle innstillinger:
- Seksjon: [skriv inn delen]
- Tekst-knapp: [skriv inn tekstknappen]
- URL-knapp: [skriv inn URL-knappen]
- Bakgrunnsbilde: [legg til bakgrunnsbilde] (Jeg bruker et bilde fra unsplash.com)
Gjenta dette trinnet for så mange lysbilder du vil legge til.
Når du er ferdig, klikker du på " Lagre og avslutt '.
Hvordan legge til tilpasset CSS og JavaScript
Fra WordPress-oversikten, gå til " Divi → Temaalternativer Og under "Generelle innstillinger", skriv inn følgende CSS i tekstboksen Custom CSS:
.et_fullscreen_slider .et_pb_slides, .et_fullscreen_slider .et_pb_slide, .et_fullscreen_slider .et_pb_container {min-høyde: 100% betydelig; høyde: 100% viktig;! }
klikk på neste fane og legg til følgende javascript i tekstboksen merket " Legg til koden i hodet bloggen din '
(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);
endelig
Nå har du en glidebryter for fullskjermmodus for din nettside. Bruk den til å lage effektive glidebrytere i full bredde for de fleste nettlesere.
Hvis du har spørsmål, ikke nøl med å spørre dem.
[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”]LAST NED DIVI-TEMA [/vcex_button][/vc_column 1 ][vc_column] /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”]LAST NED DEN MALER DIVI[/vcex_button][/vc_column][/vc_row]
Andre divisjoner
- 5 nettsteder for restaurant bruk Divi tema
- Slik legger du til tekst på et Divi WooCommerce-produkt
- Slik endrer du menyfargen mellom Divi-sider
- Hvordan tilpasse rutenettene til en blogg med Divi
- Hvordan bruke rollen Divi editor på WordPress
- Hvordan lage en Divi-glidebryter på fullskjerm
- Hvordan endre farge på menyer mellom Divi-sider
- Funksjoner du sannsynligvis ikke kjenner til Divi
- Slik bruker du Divi Builder på WordPress
- Slik bruker du Divi video-rullemodulen
- Slik bruker du Divi Builder Flip-modulen
- Hvordan legge til en attestmodul på Divi Builder
- Slik bruker du Divi-tekstmodulen
- Hvordan lage en glidebryter på Divi
- Hvordan redigere en Divi-brukerrolle
- Slik bruker du Divi Social Media-modulen
- Hvordan bruke butikkmodulen på temaet WordPress Divi
- Slik bruker du Divi sidebar-modulen
- Slik bruker du Divi Price Table Module
- Slik bruker du tittelmodulen til Divi-publikasjoner
- Hvordan legge til en videomodul av Divi
- Slik bruker du artikkelen navigasjonsmodulen
- Slik bruker du Divi-søkemodulen
- Slik bruker du Divi-lommebokmodulen
- Slik bruker du personmodulen på Divi Builder
- Slik bruker du lommebokmodulen med Divi filter
- Slik bruker du skyvemodulen med full bredde
- Slik bruker du Divi Builder Image Module
- Slik bruker du navigasjonsmodulen med full bredde på Divi Builder
- Slik bruker du bildegalleriemodulen
- Slik bruker du Divi Builder Full-Width Card Module
- Slik bruker du Divi Full Width Portfolio Module
- Hvordan bruke Divi-modulen i full bredde
- Slik bruker du Divi-tellermodulen
- Slik bruker du glidebryteren for artikler på Divi Builder
- Slik bruker du Divi Email Optin-modulen
hei og takk for denne opplæringen! Jeg finner ikke js- og css-koden for å sette inn i glidebryteren her
Hei, flott tutorial.
På den annen side vises det ikke i fullskjerm på iPhone, for eksempel ved å vippe på iPhone, vises glidebryteren fra tid til annen i full skjerm, men ikke hele tiden…. som om det ikke var responsivt, ville du ha noen anelse om å løse dette lille problemet?
Takk på forhånd,
Hilsen,
Bonjour,
Forsøk å deaktivere alle de andre programtilleggene. Kontroller også at versjonene av WordPress og Divi er oppdatert.
God ettermiddag, hvordan kan jeg tilpasse lysbildestørrelsen for å matche størrelsen på bannerbildet slik at jeg ikke kan beskjære bildet?
Bonjour,
Jeg forstår ikke spørsmålet.
Bonjour,
Takk for denne artikkelen. Jeg har lest at det ikke nødvendigvis er nødvendig å installere et barnetema med Divi så lenge vi ikke endrer CSS for mye.
Det er fortsatt litt tilpasning her ...
Så anbefaler du et barnetema før du bruker superopplæringen din?
På forhånd takk for alle dine gode råd, jeg henter ofte inspirasjon fra det 🙂
Bonjour,
Ikke nødvendigvis. Du kan beholde divi hvis du ikke har for mye teknisk kunnskap.
Hei, veldig god artikkel!
Jeg fulgte det som ble angitt i artikkelen, men glidebryteren min vises ikke i full skjerm på DIVI.
Kan du hjelpe meg ? Jeg vil gjerne legge den på hjemmesiden min.
Takk for hjelpen
Bonjour,
Har du kontaktet DIVI-teamet?
Hei Aliénor,
Jeg har det samme problemet ... Fant du en løsning?
Merci d'avance
Bonjour,
Jeg bygger hjemmesiden min med byggherre ... når jeg gjør en forhåndsvisning, ser jeg siden.
Problemet er at når jeg lagrer siden min og åpner den igjen, vises ikke glidebryteren.
Kan noen hjelpe meg?
Bonjour,
Dette kan skyldes en feil, prøvde du å kontakte kundestøtten til Eleganthemes?
Bonjour,
Takk for artikkelen din!
Vet du hvordan jeg kunne endre lysbildehastigheten på lysbildene?