3. Opret side
I Divi har du ud af boksen tre forskellige side-typer:
- Sider, som du kan bruge til produktsider, kampagnesider, forside, område-side, blog-oversigt, portfolio-oversigt mv.
- Indlæg, som du kan bruge til nyheder/blogindlæg
- Det kommer vi til i lektion 4.A.
- Projekter, som du kan bruge til kundecases til dit portfolio, men du kan også vælge at bruge den til fx politikområder. Projekt-sidetypen er interessant, hvis du har en række ensartede sider, som du vil give en fast skabelon og samle i en oversigt.
- Det kommer vi til i lektion 4.B
I denne lektion skal vi øve os i at lave sider.
Tilføj ny side
- Klik Tilføj > Side
- Klik “Brug Divi Byggeren”
- Du kan nu vælge mellem 3 metoder at bygge siden på:
- Bygge siden fra bunden af
- Vælge et færdiglavet layout
- Det kan være et fra Divi-arkivet eller et af dine egne gemte layouts. På dit kursist-site har vi lavet en række layouts, som du kan bruge.
- Klone en af dine eksisterende sider
- I denne lektion skal du vælge 3.a. For vi starter med at øve os i at bygge sider fra bunden af.
Byg en simpel produktside
På vores simple produktside vil vi have:
- En hero sektion
- Et fuldbredde baggrundsbillede eller baggrundsfarve med en kort tekst henover
- En sektion med tekst…
- I én kolonne med max-bredde for læsbarhed
- … og med en call-to-action knap
Tilføj tekst i én kolonne
Når du opretter siden, har Divi allerede oprettet en standard sektion til dig. Du skal derpå vælge antal kolonner til din række.
Opret tekst i én kolonne
- Vælg rækken med én kolonne
- Vælg tekst-modulet
- Tilføj din tekst (find evt. noget Lorem Ipsum at indsætte)
- Klik på det grønne flueben
Sæt max bredde på rækken og centrér rækken (ikke teksten)
- Åbn rækkens indstillinger op (dobbeltklik på rækkens bjælke)
- Gå til Design > Skalering
- Sæt Max Width til 700px
- Vælg Midterstillet under Row Alignment
Tilføj knap i samme sektion som teksten
- Tilføj modul under teksten (klik på det sorte plus)
- Vælg Knap-modulet
- Giv knappen en tekst og et link
- Under Design > Tilpasning > Button Alignment: vælg midterstillet
Tilføj hero sektion
- Tilføj en ny sektion (klik på det blå plus)
- Vælg Fuldbredde sektionen
- Tilføj Fuldbredde Slider modulet
- Klik “Tilføj ny billedfremvisning”
- Tilføj kort titel i Tekst og evt. kort uddybende tekst i Indhold
- Under Baggrund: tilføj baggrundsbillede og gem modulet
Flyt din hero sektion op i toppen af siden
- Flyt din nye fuldbredde sektion op over din tekst-og-knap-sektion
- Udgiv siden
Nu skulle du gerne have en simpel side med et fuldbredde-billede med tekst overlay, en lidt længere tekst og en knap.
Du kan nu oprette flere sider.
Ekstraopgave 1: Tilføj hero sektion med alternativ metode
Denne metode til at lave hero-sektioner giver dig mere frihed til at tilføje og arrangere tekst, knap, billede mm. ovenpå dit baggrundsbillede.
- Tilføj en ny sektion (klik på det blå plus)
- Vælg Regulær
- Vælg rækken med én kolonne
- Indsæt et Tekst modul og skriv noget tekst (én linje med Overskrift 1 (H1) og én linje med almindeligt afsnit)
- Tilføj et baggrundsbillede til sektionen
- Redigér sektionens indstillinger
- Under Baggrund vælg fane 3 og tilføj et billede
- Prøv at udgive siden og se resultatet:
- Der mangler noget luft rundt om teksten, så billedet bliver højere.
- Tilføj luft til sektionens top og bund
- Redigér sektionens indstillinger
- Under Design > Afstand > Fyld: sæt Top og Bund til 14%
- Prøv at udgive siden og se resultatet:
- Det skulle gerne være bedre.
- Er der nok kontrast mellem tekst og billede?
- Ellers kan du:
- Lægge et filter på baggrundsbilledet
- Dette gør du under baggrundsbilledet i Sektionens indstillinger
- Til lys tekst kan du fx vælge Gør mørkere under Blend og skift derpå sektionens baggrundsfarve til sort og redigér baggrundsfarvens transparens
- Eller ændre tekstens farve og evt. tilføje tekstskygge
- Dette gør du i Tekst-modulets indstillinger under Design > Tekst/Underoverskrift Tekst
- Lægge et filter på baggrundsbilledet
- Ellers kan du: