1. Introduktion
2. Webbhotell & domän
3. Installera WordPress
4. Välj och anpassa tema
5. Lär känna WordPress
6. Designa med Divi Builder
7. Sidmallar i Divi Theme Builder
8. Exportera & importera layouter
9. Checklista när du är färdig
10. Fira!
Du är en stjärna!
6.6 Skapa en Kontakta oss-sida med Divi
- Din genomförda andel av hela kursen:
Kontaktsidan är en av webbplatsens absolut viktigaste sidor. Vi skapar:
- En hero-yta
- Ett kontaktformulär med länk till de allmänna villkoren
- Skydda ditt formulär mot spam med Google Recaptcha V3
- Skapa en FAQ med utfällbara tabs
- Bädda in en karta från Google Maps utan behöva ange API-nyckel eller kreditkort
- Skapa responsivt innehåll och visa olika innehåll för datorer (desktop), surfplattor och mobiler
- Mobilanpassning och anpassning för surfplattor
Under videon hittar du alla länkar, filer och kodsnuttar som nämns i kapitlet. 👇
Resurser och relaterat innehåll
Fördjupning
- Google reCaptcha v3
- Sju tips för bättre formulär i Divi
- Skapa en checkbox med länk till integritetspolicyn
- Divi Contact Form Helper: Plugin för att spara formulärsvar i WordPress (annonslänk)
- Ladda ner alla sidor (zip)
Länkar
- Demo-sajten Divistugan.nu
- 20% rabatt på Divi (annonslänk)
- Webbhotell från 19 kr/mån hos Inleed (annonslänk)
Detta är en kostnadsfri grundkurs om hur du skapar en hemsida med WordPress och Divi. Kursen innehåller annonslänkar till Elegant Themes (som står bakom Divi) och Inleed (som tillhandahåller webbhotell och domäner). Om du köper något via en annonslänk får vi på Diviguiden en liten provision, men det kostar aldrig mer för dig. Respektive företag äger rättigheterna till sina varumärken. Kursen är ett fristående och oberoende initiativ från Diviguiden. Tack vare ditt stöd kan vi fortsätta skapa mer kostnadsfritt innehåll.
Kursledaren Victor Duse är född 1980 och har över 20 års erfarenheter av webbdesign, webbutveckling och utbildning inom sektorer från media och marknadsföring till energi, industri och offentlig verksamhet. Han är grundare av Diviguiden, DiviMundo och WordPress-byrån Duse Media med säte i Malmö. Bortom tangentbordet har Victor svart bälte i Brasiliansk Jiu-Jitsu och en stor aptit på choklad.
Lämna en kommentar
Ris, ros eller frågor? Lämna gärna en kommentar på kursavsnittet!
6.6 Ankarlänk till kartan från ”vägbeskrivning”. Hur skapas den? Den glömdes bort i videon
Hoppsan, tack för att du påpekade den missen! Här är en bra video som visar hur du gör: https://www.youtube.com/watch?v=nY673daNCTo
Efter kapitlet om ankarlänkar från menyn kommer det en del om hur du använder samma princip från knappar och dylikt på vanliga sidor också.
Hej Victor, jag tycker att texten i formulärfälten, dvs ”Namn”, ”E-post” osv… UTOM den ”Jag godkänner..”, är mindre på videon, om man jämför med själva slutresultatet på Divistugan.nu
Hur ändrar man pixlarna så texten blir större? Går inte det, jag har letat som bara den.
Det ser osymmetriskt ut när jag gör på min egen sida, det ser inte bra ut.
Tacksam för hjälp, om det går
Mvh Maria
Hej Maria! Du kan ändra storlek på texten i fälten genom att klicka upp formulärets inställningar (kugghjulet) och gå till Design-fliken. Klicka sedan upp fliken Field och bläddra ner till Field Text Size. Du kan också ändra enstaka fälts textstorlek på samma sätt. Öppna fältets inställningar genom att klicka på fältets kugghjul och gå sedan vidare till Field och Field Text.