Gå till innehållet

Hur man skapar ett reglage helskärm på Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Skjutreglaget i full bredd har några fantastiska funktioner, inklusive möjligheten att lägga till skjutreglage med videobakgrunder. Men en funktion som gör den ännu mer kraftfull är möjligheten att expandera reglaget för att visas i helskärmsläge. Så vi visar hur du lägger till helskärmsfunktionalitet i en skjutreglage.

Tillägget av en helskärmsfunktion till skjutreglermodulen på Divi är extremt lätt att implementera med några rader CSS och JavaScript. På bara fem minuter kan du konvertera skjutreglaget för fullbredd till en skjutreglage för helskärm som expanderar för att fylla hela skärmen, ungefär som rubriker för helskärm.

Implementeringen av skjutreglaget för fullskärm på Divi

Om du inte har läst vår handledning om presentation av Divi-gränssnittet, Jag inbjuder dig att göra det.

Steg 1: Lägg till ett skjutreglage med objektglas i full breddsläge

Använd " Divi Builder »Lägg till ett avsnitt« hela bredden »Och klicka på«  Sätt i en modul ".

Hur man lägger till en modul på divi builder

Lägg till en fullbreddsmodul.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

lägga ett reglage modul Divi #

Lägg till en CSS-klass under fliken "Anpassad CSS" i helskärmsinställningarna under fliken "Anpassad CSS" et_fullscreen_slider ".

Avancerad CSS-modifiering av divi-reglaget

Lägg till en ny bild i "Allmänna inställningar".

Lägg till en diaspositiv på divi

Uppdatera följande objekt under bildinställningarna under Allmänna inställningar:

  • Kategori: [skriv in din rubrik]
  • Textknapp: [skriv in din textknapp]
  • URL-knapp: [Ange din URL-knapp]
  • Bakgrundsbild: [lägg till din bakgrundsbild] (Jag använder en bild från unsplash.com)

Inställningar för Divi-bild

Upprepa detta steg för så många bilder som du vill lägga till.

När du är klar klickar du på " Spara och avsluta ".

Så här lägger du till anpassad CSS och JavaScript

Gå till WordPress-instrumentpanelen till " Divi → Temaalternativ Och under "Allmänna inställningar" anger du följande CSS i textrutan Anpassad CSS:

.et_fullscreen_slider .et_pb_slides, .et_fullscreen_slider .et_pb_slide, .et_fullscreen_slider .et_pb_container {min-höjd: 100% signifikant; höjd: 100%! viktigt; }

klicka på nästa flik och lägg till följande javascript i textrutan med titeln " Lägg till koden i huvudet på din blogg »:

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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

slutligen

Nu har du en helskärmsreglage för din webbplats. Använd den för att skapa effektiva fullskjutreglage för de flesta webbläsare.

Om du har några frågor, tveka inte att ställa dem.

Andra Divi tutorials

Den här artikeln innehåller kommentarer 12

  1. Hej, bra tutorial.
    Å andra sidan visas den inte i helskärm på iphone, till exempel, genom att luta iphone visas skjutreglaget då och då i helskärm men inte hela tiden .... som om det inte var lyhörd, har du någon aning att åtgärda det här lilla problemet?

    Tack på förhand,
    Hälsningar,

  2. God eftermiddag, hur kan jag anpassa storleken på bilden så att den matchar storleken på bannerbilden så att jag inte kan beskära bilden?

  3. Hej!
    Tack för den här artikeln. Jag har läst att det inte nödvändigtvis är nödvändigt att installera ett barntema med Divi så länge vi inte ändrar CSS för mycket.
    Det finns fortfarande lite anpassning ...
    Så rekommenderar du ett barntema innan du använder din superhandledning?
    Tack på förhand för alla dina goda råd, jag hämtar ofta inspiration från det 🙂

  4. Hej, väldigt bra artikel!
    Jag följde det som indikerades i artikeln men min skjutreglage visas inte i helskärm på DIVI.
    Kan du hjälpa mig ? Jag skulle vilja lägga den på min hemsida.

    Tack för din hjälp

  5. Hej!
    Jag bygger min hemsida med byggare ... när jag gör en förhandsgranskning ser jag sidan.
    Problemet är att när jag sparar min sida och öppnar den igen, visas inte skjutreglaget.
    Kan någon snälla hjälpa mig?

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
13 aktier
del5
tweet1
Enregistrer7