3. Opret side

I Divi har du ud af boksen tre forskellige side-typer:

  1. Sider, som du kan bruge til produktsider, kampagnesider, forside, område-side, blog-oversigt, portfolio-oversigt mv.
  2. Indlæg, som du kan bruge til nyheder/blogindlæg
    1. Det kommer vi til i lektion 4.A.
  3. 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.
    1. Det kommer vi til i lektion 4.B

I denne lektion skal vi øve os i at lave sider.

Tilføj ny side

  1. Klik Tilføj > Side
  2. Klik “Brug Divi Byggeren”
  3. Du kan nu vælge mellem 3 metoder at bygge siden på:
    1. Bygge siden fra bunden af
    2. Vælge et færdiglavet layout
      1. 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.
    3. Klone en af dine eksisterende sider
  4. 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:

  1. En hero sektion
    1. Et fuldbredde baggrundsbillede eller baggrundsfarve med en kort tekst henover
  2. En sektion med tekst…
    1. I én kolonne med max-bredde for læsbarhed
  3. … 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

  1. Vælg rækken med én kolonne
  2. Vælg tekst-modulet
  3. Tilføj din tekst (find evt. noget Lorem Ipsum at indsætte)
  4. Klik på det grønne flueben

Sæt max bredde på rækken og centrér rækken (ikke teksten)

  1. Åbn rækkens indstillinger op (dobbeltklik på rækkens bjælke)
  2. Gå til Design > Skalering
  3. Sæt Max Width til 700px
  4. Vælg Midterstillet under Row Alignment

Tilføj knap i samme sektion som teksten

  1. Tilføj modul under teksten (klik på det sorte plus)
  2. Vælg Knap-modulet
  3. Giv knappen en tekst og et link
  4. Under Design > Tilpasning > Button Alignment: vælg midterstillet

Tilføj hero sektion

  1. Tilføj en ny sektion (klik på det blå plus)
  2. Vælg Fuldbredde sektionen
  3. Tilføj Fuldbredde Slider modulet
  4. Klik “Tilføj ny billedfremvisning”
  5. Tilføj kort titel i Tekst og evt. kort uddybende tekst i Indhold
  6. Under Baggrund: tilføj baggrundsbillede og gem modulet

Flyt din hero sektion op i toppen af siden

  1. Flyt din nye fuldbredde sektion op over din tekst-og-knap-sektion
  2. 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.

  1. Tilføj en ny sektion (klik på det blå plus)
  2. Vælg Regulær
  3. Vælg rækken med én kolonne
  4. Indsæt et Tekst modul og skriv noget tekst (én linje med Overskrift 1 (H1) og én linje med almindeligt afsnit)
  5. Tilføj et baggrundsbillede til sektionen
    1. Redigér sektionens indstillinger
    2. Under Baggrund vælg fane 3 og tilføj et billede
    3. Prøv at udgive siden og se resultatet:
    4. Der mangler noget luft rundt om teksten, så billedet bliver højere.
  6. Tilføj luft til sektionens top og bund
    1. Redigér sektionens indstillinger
    2. Under Design > Afstand > Fyld: sæt Top og Bund til 14%
    3. Prøv at udgive siden og se resultatet:
    4. Det skulle gerne være bedre.
  7. Er der nok kontrast mellem tekst og billede?
    1. Ellers kan du:
      1. Lægge et filter på baggrundsbilledet
        1. Dette gør du under baggrundsbilledet i Sektionens indstillinger
        2. 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
      2. Eller ændre tekstens farve og evt. tilføje tekstskygge
        1. Dette gør du i Tekst-modulets indstillinger under Design > Tekst/Underoverskrift Tekst