Vill du skapa en unik och fantastisk bakgrund med masker och bakgrundsmönster från Divi ?
De nya bakgrundsmasker och mönster har Divi används oftast för delar av en sida. Men vi kan också lägga till dem i rubriker!
I den här handledningen visar vi dig hur du lägger till masker och bakgrundsmönster i en rubrikmall Divi med hjälp av konstruktorn teman.
Det är ett bra sätt att skapa helt unika headerdesigner för din webbplats.
Låt oss börja.
undersökningen
Här är en snabb titt på designen vi kommer att skapa i den här handledningen.
Gå till Divis temabyggare och börja skapa en global header
Från WordPress-instrumentpanelen, gå till Divi > Theme Builder
Klicka på "Lägg till global rubrik"
Välj "Bygg global header".
Efter det kan du börja designa en ny rubrik med hjälp av Divi Builder.
Hur man lägger till bakgrundsmasker och mönster till en Divi Header
Skapa sektionsbakgrunden med en bakgrundsfärg och ett mönster
Läs också: Divi: Hur man skapar en vittnesmålssektion i form av ett rutnät
För att komma igång, öppna inställningarna för det befintliga avsnittet.
Under fliken Innehåll, uppdatera bakgrundsalternativen med följande inställningar:
Bakgrundsfärg:
- Bakgrund: #262d3f
Bakgrundsmönster:
- Modell: Piller
- Mönsterfärg: rgba(255,255,255,0.1)
- Mönsterstorlek: anpassad storlek.
- Mönsterbredd: 1px
Padding
Under fliken Designa, uppdatera avsnittsutfyllnaden enligt följande:
- Utfyllnad (topp och botten): 0px
Detta kommer att minska det vertikala utrymmet i rubriken lite.
Lägg till en rad med följande kolumnlayout
Lade till innehållet i rubriken för platshållare (en meny och en knapp)
Lägg till en ny meny i den vänstra kolumnen på raden.
Välj en meny.
Lägg sedan till en logotyp och använd inställningarna för att anpassa menyn och logotypen efter önskemål.
I den högra kolumnen lägger du till en knappmodul och anpassar den även efter eget tycke.
Skapa linjebakgrunden med gradient, mask och mönster
Gradienten
Öppna radinställningarna som innehåller din meny och knapp. Uppdatera sedan bakgrundsalternativen med följande bakgrundsinställningar:
Bakgrundsgradient:
- Gradientstopp 1 (50%): Rensa
- Gradientstopp 2 (75%): #ff4c00
- Styrning: 90 grader
Mönster
- Modell: Piller
- Mönsterfärg: rgba(38,45,63,0.48)
- Mönsterstorlek: 1 pixel
- Vertikal offset: 20px
Obs: Mönstrets vertikala offset är inställd på 20px eftersom det finns 20px toppstoppning på sektionen ovanför linjen. Detta säkerställer att sektionsmönstret är i linje med radmönstret.
Bakgrundsmask
- Mask: Fiskben
- Maskfärg: #262d3f
OBS: För rubriker är det bäst att hålla maskstorleken inställd på "Förlänga för att fylla" så att den täcker det horisontella utrymmet utan att kompromissa med maskens design.
Sista handen på linjen
Se även: Divi: Hur man använder "Gradient Builder" för att försköna dina bilder
För att slutföra designen lägger vi till en kantradie och några fler redigeringar på raden.
Radie, kant och kantavstånd
Under fliken Designa, uppdatera utfyllnaden enligt följande:
- Utfyllnad (topp och botten): 5px
Ge sedan raden ett snyggt rundat hörn för ett extra designelement.
- Rundade hörn: 50px
- Vänster kantbredd: 50px
- Vänster kantfärg: #262d3f
Vi måste ge en kant till vänster sida av raden eftersom den fyrkantiga kanten på masken kommer att svämma över raden trots de rundade hörnen.
Slutresultat
Låt oss se det slutliga resultatet.
Gradienten är lite subtil, så här är en titt på hur det ser ut.
Och här är designen för skrivbords- och mobilhuvuden.
Ladda ner DIVI nu!!!
Slutsats
Rubrikens bakgrundsdesign är bara toppen av isberget. Det finns mycket att utforska med bakgrundsalternativen i Divi.
Vi hoppas att den här handledningen har hjälpt dig att förstå hur Divis bakgrundsmasker och mönster kan samverka för att skapa en unik bakgrundsdesign för dina rubriker.
Experimentera gärna med fler bakgrundsdesignkombinationer för att passa din egen design. webbplats eller ditt kommande projekt.
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.
.
