Vill du förbättra dina blogginlägg? Divi genom att lägga till en hjältesektion till den?
Helskärmshjälteavsnitt ser bra ut på alla webbsidor, men de är särskilt bra på blogginlägg.
Även om den utvalda bilden är helskärm, finns det många designalternativ för att placera titel och metatext. Det är lätt att göra med Divi Theme Builder .
I den här artikeln kommer vi att se flera sätt att lägga till en hjälte-sektion i helskärm till din blogginläggsmall. Divi.
Låt oss börja.
undersökningen
Här är en förhandstitt på vad vi kommer att designa i den här handledningen.
Läs också: Divi: Hur man använder "Gradient Builder" för att försköna dina bilder
Hjältesektion med Post Title Desktop-versionsmodul
Hjältesektion med Post Title mobilversionsmodul
Alternativ layout för Hero-sektionen med Post Title-skrivbordsversionsmodulen
Ladda ner DIVI nu!!!
Alternativ hjältesektionslayout med mobil posttitelmodul
Hjältesektion med metadata Desktop-version
Hjältesektion med metadata mobilversion
Ladda ner DIVI nu!!!
Mallar för blogginlägg för din helskärmshjältesektion
Du kan skapa mallen för blogginlägg i Divi Theme Builder från grunden eller ladda ner en mall från bloggen Elegant Themes. För att hitta dem, sök på bloggen "gratis mall för blogginlägg". Om du laddar ner en mall, se till att packa upp den.
För våra exempel kommer vi att använda gratis blogginläggsmall för Divi's Fashion Designer Layout Pack . Vi använder också layoutpaketet fri Sidhuvud och sidfot Modedesigner .
Ladda ner eller skapa din blogginläggsmall för din hjältesektion i helskärm
Du kan ladda ner din blogginläggsmall eller skapa en från grunden. Vi laddar upp en, men processen för att skapa en helskärmshjälte-sektion är densamma.
Se även: Divi: Hur man använder masker och bakgrundsmönster för en hjältesektion
Metod 1: Fullskärmsmodul för posttitel
Denna metod kommer att använda PostTitle-modul . Det är ett bra val om du vill visa all information tillsammans. När du har din mall, välj redigeringsikonen för att öppna den.
Mallen vi laddade upp har ett avsnitt med den utvalda bilden. Vi tar bort det här avsnittet och lägger till en Sektion i full bredd på sin plats.
Välj Fullbredds inläggstitel i listan över fullbreddsmoduler.
Alla objekt är markerade som standard. Lämna dem aktiverade. Bläddra till Utvald bildplacering och välj Ovan rubrik.
- Utvald bildplacering: ovanför titeln
Bläddra till Bakgrundsfärg och ställ in färgen till #fff9f2
- Bakgrund: #fff9f2
Titeltext
Välj fliken Design. För titeltext, behåll H1 och välj Playfair Display. Ställ in den på vänsterjusterad och välj #34332e för färgen.
- Titel:
- Rubriknivå: H1
- Typsnitt: Playfair Display
- Textjustering: vänsterjusterad
- Textfärg: #34332e
för textstorlek , ställ in desktopversionen till 65px, mobilversionen till 42px och radhöjden till 1,2em.
- Titeltextstorlek (dator): 65px (dator), 42px (telefon)
- Titelradshöjd: 1,2 em
Metatext
Bläddra till Meta text. Välj Montserrat för typsnittet och ställ in det på medium, versaler, högerjustering för skrivbordsversionen och vänsterjustering för mobilversionen. Välj #7b7975 för färg.
- MetaFont:
- Typsnitt: Montserrat
- Vikt: Medium
- Stil: TT
- Metatext:
- Justering: höger (Skrivbord), vänster (telefon)
- Färg: #7b7975
Ställ in textstorlek för desktopversionen på 14 px, för mobilversionen på 10 px, bokstavsavståndet på 1 px och radhöjden på 1,6 em. Stäng dina inställningar och spara din mall.
- Metatext:
- Storlek (Skrivbord): 14px
- Storlek (telefon): 10px
- Bokstavsavstånd: 1px
- Linjehöjd: 1,6 em
Titel på bakgrundsbild
Om du bestämmer dig för att titeln ska visas på den utvalda bilden, använd samma designinställningar och gå tillbaka till fliken Innehåll.
Välj Titel/metabakgrundsbild för Utvald bildplacering.
- Utvald bildplacering: Titel/metabakgrundsbild
Bläddra till Bakgrund och välj Bakgrundsgradient. Ställ in vänster färg till #fff9f2, höger färg till rgba(255,255,255,0), riktning till 90 grader, startposition till 30 % och välj Ja för att placera gradienten ovanför bakgrundsbilden. Stäng och spara dina inställningar.
- Gradientstopp:
- 30 %: #fff9f2
- 100 %: rgba(255,255,255,0)
- Lutningsriktning: 90 grader
- Fyrkantig gradient ovanför bakgrundsbild : JA
Metod 2: Helskärmshjältesektion med metadata
Denna metod kommer att använda textmoduler med dynamiskt innehåll för informationen. Detta är ett bra alternativ om du vill visa alla objekt på olika platser.
Ladda först ner mallen och ta bort det första avsnittet. Vi kommer att återskapa modulerna och deras inställningar i den vänstra kolumnen, men vi går igenom dem så att du kan konfigurera dem.
Helskärmsinställningar för hjältesektionen med metadata
Öppna inställningarna för avsnitt och bläddra till Bakgrundsbild. Välj Bakgrundsgradient och ändra inställningarna enligt följande:
- Gradientstopp:
- 30 %: #fff9f2
- 100 %: rgba(255,255,255,0)
- Lutningsriktning: 90 grader
- Fyrkantig gradient ovanför bakgrundsbild : JA
Välj Bakgrundsbild och välj alternativet Använd dynamiskt innehåll.
Välj Utvald bild i alternativen.
Välj fliken Designaoch bläddra till Storlek. Lägg till 100vh till minsta höjd. Stäng avsnittsinställningarna.
- Min höjd: 100vh
Helskärmsinställningar för hjältesektionen med metadata
Lägg sedan till en dubbelkolumnrad i avsnittet.
Lägg till en Textmodul i den högra kolumnen.
För hans innehåll, välj Använd dynamiskt innehåll.
Välj Post/arkivtitel i listan med alternativ.
- Dynamiskt innehåll: Post-/arkivtitel
Gå till flik Design.
- Rubrik:
- Text: H1
- Typsnitt: Playfair Display
- Textjustering: vänsterjusterad
- Textfärg: #34332e
För storleken på texter , inställd för stationär version till 65px, för mobilversion till 42px och radhöjd till 1,2em.
- Rubrik:
- Textstorlek: 65px (skrivbord), 42px (telefon)
- Linjehöjd: 1,2 em
Bläddra till Förband och ange 50 % för toppstoppning. Stäng Inställningar.
- Vaddering: 50 % (överst)
Du kan också läsa den här artikeln på: Hur man skapar en hjältesektion med Divis fullbreddshuvudmodul
Hjältesektion med metadatakategori
Lägg till ett nytt avsnitt regelbundet under Hjältesektionen.
Öppna dess inställningar och ställ in färg bakgrund på #fff9f2. Stäng Inställningar.
- Bakgrundsfärg: #fff9f2
Lägg sedan till a Ligne av 4 kolumner till den nya sektionen.
Helskärmshjälte med metadatakategoritext
Lägg till en Textmodul i den vänstra kolumnen.
Öppna modulinställningarna och välj Använd dynamiskt innehåll för textens brödtext.
Välj Tidigare kategorier i listan.
- Dynamiskt innehåll: Inläggskategorier
Välj fliken Designa och scrolla ner till Rubriktext. Välj H4. Välj Playfair Display för teckensnittet och ställ in det på medium, versaler, högerjustering för skrivbordsversionen och vänsterjustering för telefonversionen. Välj #7b7975 för färg.
- Rubrik:
- Textvisning
- Typsnitt: Playfair Display
- Teckensnittsvikt: Medium
- Stil: TT
- Textjustering: Center
- Textfärg: #7b7975
Ställ in teckenstorleken för skrivbordsversionen till 14 px, för mobilversionen till 10 px, bokstavsavstånd till 1 px och radhöjden till 1,6 em. Stäng dina inställningar och spara din mall.
- Rubrik 4:
- Storlek (Skrivbord): 14px
- Storlek (telefon): 10px
- Bokstavsavstånd: 1px
- Linjehöjd: 1,6 em
Bläddra till Förband och lägg till 0px till den nedre marginalen. Stäng Inställningar.
- Marginal (botten): 0px
Helskärmshjältesektion med Meta Text-metadata
Kopiera sedan kategorimodulen och dra den till nästa kolumn. Var och en av Meta-modulerna har samma inställningar. Vi kommer att visa hur man skapar den första modulen och sedan kopiera den två gånger för att skapa de andra modulerna.
Författare
Öppna inställningar och radera innehåll dynamisk.
Klicka på Använd dynamiskt innehåll och välj Postförfattare.
- Dynamiskt innehåll: Inläggsförfattare
I fliken Designa, Ändra följande inställningar.
- Rubrik 4:
- Typsnitt: Montserrat
- Teckensnittsvikt: Medium
- Stil: TT
- Textjustering (skrivbord): Center
- Textjustering (telefon): Vänster
- Färg: #7b7975
Parametrarna för textstorlek omfatta:
- Textstorlek: 14px (skrivbord), 10px (telefon)
- Bokstavsavstånd: 1px
- Linjehöjd: 1,6 em
La bottenmarginal måste ha 0px.
- Marginal (botten): 0px
Datum
kopia Författarmodulen och dra den till nästa kolumn.
Radera det innehåll Dynamique nuvarande, välj Använd dynamiskt innehåll och välj Postpubliceringsdatum. Stäng Inställningar.
- Dynamiskt innehåll: Efterpubliceringsdatum
commentaires
Hur som helst, kopia modulen Postpubliceringsdatum och dra den till den sista kolumnen.
Som med andra moduler, ta bort det dynamiska innehållet och välj Använd dynamiskt innehåll .
Välj Posta kommentar Räkna från dina val.
- Dynamiskt innehåll: Antal inläggskommentarer
Den här gången lägger du till ett mellanslag och ordet Kommentarer i fältet Efter . Stäng den lilla modalen och stäng sedan inställningarna. Spara ditt arbete.
- Efter: Kommentarer
Läs också: Divi: Hur man visar Fullwidth Header-modulen i helskärm
Résultats
Hjältesektion med Post Title Desktop-versionsmodul
Hjältesektion med Post Title mobilversionsmodul
Alternativ layout för Hero-sektionen med Post Title-skrivbordsversionsmodulen
Alternativ hjältesektionslayout med mobil posttitelmodul
Hjältesektion med metadata Desktop-version
Hjältesektion med metadata för mobilversion
Ladda ner DIVI nu!!!
Slutsats
Det är det som är allt! Det här är vår titt på hur du lägger till en helskärmshjälte-sektion till din blogginläggsmall. Divi.
Moduler Divi och Theme Builder erbjuder flera alternativ för att skapa hjältesektioner i helskärm. Alla metoder fungerar mycket bra och alla har sina fördelar.
Med hjälp av dessa metoder kan du lägga till en hjältesektion i helskärm till valfri Divi-bloggmall.
Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser.
Tveka inte att också konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
