WordPress 3 - Content sektion HERO

Husk 3C Container (beholder) Column (kolonne) Content (indhold) Vi laver den øverste sektion. Den skal fange den besøgendes blik og kaldes HERO.

Jes Conradsen
134 steps
17 minutes

YouTube

Opret en side / page (Forside)

Gå til "All Pages"

Klik på "Forside" for at åbne den for redigering.

TIP: Hvis din skærm er bred nok kan det være rart med dette 'List View' panel slået ud. Ellers kan du trykke her for at folde det ud, og ind igen.

INDHOLD OG STRUKTUR = 3C

3C - Container

Vi går i gang! 😊 Klik på det lille plus for at begynde at tilføje en Container (beholder) til alt det indhold vi vil lave i vores HERO sektion. Skriv 'row' i søgefeltet.

Tryk på Row Layout.

Vælg layout med kun 1 kolonne.

Vælg denne knap for vælge hvor bred vores container skal være.

Vælg "Full width"

Tryk her for at vælge hvor meget vores indhold må brede sig ud i containeren.

Vælg "Use Theme Content Inner Width?". Så breder indholdet sig ikke ud over det hele på meget store skærme.

Klik på tandhjul ikonet øverst til højre for at se indstillingerne for vores 'Row', som vores container (beholder) hedder.

3C - Columns

Vælg 2 columns. (så får vi to kolonner at sætte indhold ind i)

3C - Content billede

Klik på plus ikonet i højre kolonne for at tilføje en block med indhold.

Søg efter 'advanced' i søgefeltet, og klik på Advanced Image block'en.

Klik på "Select Image"

Klik på "Select Files" knappen for at finde billedet på din computer som du vil sætte ind.

Tryk "Select" når du har uploadet billedet. Så er dit første indhold sat ind på sitet! 💪

3C - Content tekst

Klik på plus ikonet i venstre kolonne for at tilføje en block med indhold.

Søg efter 'advanced' og indsæt Advanced Text block.

Klik på "Write something…" og skriv "The Chocolate Cooperative [[enter]]"

Klik på plus ikonet for at tilføje en ny block med indhold.

Indsæt Advanced Text block

Tryk her for at skifte fra Overskrift 2 til 'paragraph' (almindelig brødtekst).

Vælg "Paragraph"

Klik på "Write something…" og skriv "Cool, coherent and craft chocolate community [[enter]]"

3C - Content knapper

Vi tilføjer en ny block. Se nu begynder det at køre!

Indsæt 'Advanced Button' block

Klik på "Button..." og skriv "JOIN NOW [[Enter]]"

Marker knappen og under indstillingerne i højre side, klik dig ind under 'Button 1 Settings'.

Find 'Icon settings' og klik der.

Du kan nu søge i en masse ikoner. Kig lidt, eller prøv at søge efter 'user'

Klik på 'pilen' for at se næste side med ikoner.

Den hopper nok ud, men klik i feltet her igen..

Vælg ikonet.

Klik "Add Button" for at tilføje en knap mere.

Klik dig ind i knappen og skriv "WATCH VIDEO [[ENTER]]"

Klik her for at folde alle indstillingerne for den første knap sammen.

Fold indstilllingerne ud for knap 2.

Søg efter 'play' ikon.

Her kan du venstrestille knapperne i stedet for de er midterstillede.

Klik "Align text left" og knapperne står i venstre side! Lad os se hvordan det ser ud. 👀

Klik "Update"

Nederst til højre klikker du på "View Page"

Når du vil tilbage trykker du øverst på "Edit Page". TIP: Sådan kan du skifte imellem at redigere og se hvordan det skrider fremad.

VALGFRIT - Smuksering

Nu er indholdet sat ind. Lad os se om vi kan pynte på det.. Få List View frem.

Her kan du folde List View 'træet' ud. Klik på og vælg Row Layout for vores HERO sektion.

VALGFRIT - Styring af indholdet i kolonner

Vi skal have fat i en 'Section' (altså en column / kolonne)

En anden måde: Klik på noget indhold / content i den kolonne / column / 'Section' du vil have fat på..

Nederst kan du se hvad der ligger inde i hvad. Tryk på "Section" for at fange den kolonne / column / Section du skal have fat på (den venstre).

Klik her.

Vælg om indholdet i kolonnen skal.. klistre til toppen (standard) Ligge i midten Hoppe ned i bunden. Vælg 'Align middle' for vores indhold i venstre kolonne.

Vælg nu højre kolonne / column / "Section"

Klik her.

Vælg at indholdet skal ligge sig i bunden. "Align Bottom"

VALGFRIT - Background overlay af Row

Vi kigger nu på selve baggrunden i sektionen. Klik på "Row Layout" (containeren / beholderen)

I indstillingerne i højre side fold "Background Overlay Settings" ud.

Vælg "Gradient" bagrund.

Sæt opacity til 100 i "Overlay Opacity" feltet. (Så er farven ikke gennemsigtig)

Klik her og vælg rød som første farve.

Vælg rød farve.

Klik her for at vælge anden farve til gradienten.

Vælg brun farve.

Sæt begge "Location" felter til 55, for en skarp overgang mellem farverne på baggrunden.

Klik på andet "Location" felt og sæt det til 55.

Juster til en skrå vinkel på "Gradient Angle" feltet. (24 måske?)

VALGFRIT - Juster tekst

Klik på "The Chocolate Cooperative"

Klik på color feltet i indstillingerne til højre.

Vælg hvid farve.

Klik på "Cool, coherent and craft chocolate community"

Skift også til hvid tekst farve.

Større tekst! Klik på "The Chocolate Cooperative"

'Font size' 80 burde passe.

Juster 'Line Height' til 60.

Klik på "Cool, coherent and craft chocolate community"

Font size 20 er vist fin.

Klik på "Update" for at gemme.

Klik på "View Page" for at se hvordan det nu ser ud.

Vi justerer lidt mere. Tryk på "Edit Page" for at komme tilbage og redigere.

Klik her.

Få fat i linien mellem de to Sections / columns / kolonner. Træk linien til venstre og sæt størrelsen til 45% - 55%

Klik på "Update"

Klik på "View Page"

VALGFRIT - Juster knapperne

Så er der bare knapperne tilbage! 🙌 Klik på "Edit Page"

Klik på "JOIN NOW"

Fold indstillingerne for knap 1 ud.

Klik her.

Text color 'hvid'.

Klik her.

Brun baggrundsfarve.

Klik her.

Brun farve på 'border'.

Klik et sted for at gå ud af border color.

Klik for at markere "JOIN NOW" knappen

Klik på "Hover" for at indstille farverne når musen svæver henover knappen.

Klik her.

Sæt baggrundsfarven til rød.

Klik her.

Vælg hvid Hover border color.

Tænd for Hover Box Shadow

100

Næste knaps tur! Marker "WATCH VIDEO" knappen

101

Fold indstillingerne for knap 1 sammen.

102

Fold indstillingerne for knap 2 ud.

103

Klik her.

104

Vælg brun tekst farve.

105

Klik her.

106

Brun border color.

107

Klik på "Hover"

108

Klik her.

109

Sæt hvid hover tekst farve.

110

Klik her.

111

Hvid hover border color.

112

Klik her.

113

Vælg rød hover baggrundsfarve.

114

Tænd for checkbox til at lave skygge på hover.

VALGFRIT - Video popup

115

Lad os aktivere WATCH VIDEO knappen! På YouTube -> find en video Tryk på "Del" Inspiration: [https://youtu.be/rIQGMuWdGeM?t=7](https://youtu.be/rIQGMuWdGeM?t=7) [https://youtu.be/0VR43PdYVLU](https://youtu.be/0VR43PdYVLU) [https://vimeo.com/joshclos/chocolate](https://vimeo.com/joshclos/chocolate)

116

Klik på "KOPIÉR"

117

Klik og marker "WATCH VIDEO" knappen

118

Klik på "Paste URL or type to search" feltet. Press [[ctrl]] + [[v]] Eller prøv at kopiere et af disse links ind: [https://youtu.be/rIQGMuWdGeM?t=7](https://youtu.be/rIQGMuWdGeM?t=7) [https://youtu.be/0VR43PdYVLU](https://youtu.be/0VR43PdYVLU) [https://vimeo.com/joshclos/chocolate](https://vimeo.com/joshclos/chocolate)

119

Klik på 'pil ned' ikonet.

120

Klik på dropdown menuen og vælg 'Video Popup'

121

Husk at trykke på denne pil for at 'gemme' linket til videoen.

122

Klik på "Update"

123

Klik på View page for at se om det virker.

124

Klik på "WATCH VIDEO"

125

Klik på "×" for at lukke popup med video.

126

Klik på "View Page" for de sidste justeringer.

127

Fold List View ud.

128

Klik på "Row Layout" for HERO sektionen.

129

Klik på "Padding/Margin"

130

Klik på "Bottom" feltet og ret til '0'.

131

Klik på "Top" feltet, og sæt det til 50 og tryk [[ENTER]].

132

Klik på "Update" for at gemme.

133

Klik "View Page"

134

Tillykke! Du er nu LEVEL 3 HACKERMAN! 🤘

WordPress 3 - Content sektion HERO

Husk 3C Container (beholder) Column (kolonne) Content (indhold) Vi laver den øverste sektion. Den skal fange den besøgendes blik og kaldes HERO.

Jes Conradsen
134 steps
17 minutes

YouTube

Opret en side / page (Forside)

Gå til "All Pages"

Klik på "Forside" for at åbne den for redigering.

TIP: Hvis din skærm er bred nok kan det være rart med dette 'List View' panel slået ud. Ellers kan du trykke her for at folde det ud, og ind igen.

INDHOLD OG STRUKTUR = 3C

3C - Container

Vi går i gang! 😊 Klik på det lille plus for at begynde at tilføje en Container (beholder) til alt det indhold vi vil lave i vores HERO sektion. Skriv 'row' i søgefeltet.

Tryk på Row Layout.

Vælg layout med kun 1 kolonne.

Vælg denne knap for vælge hvor bred vores container skal være.

Vælg "Full width"

Tryk her for at vælge hvor meget vores indhold må brede sig ud i containeren.

Vælg "Use Theme Content Inner Width?". Så breder indholdet sig ikke ud over det hele på meget store skærme.

Klik på tandhjul ikonet øverst til højre for at se indstillingerne for vores 'Row', som vores container (beholder) hedder.

3C - Columns

Vælg 2 columns. (så får vi to kolonner at sætte indhold ind i)

3C - Content billede

Klik på plus ikonet i højre kolonne for at tilføje en block med indhold.

Søg efter 'advanced' i søgefeltet, og klik på Advanced Image block'en.

Klik på "Select Image"

Klik på "Select Files" knappen for at finde billedet på din computer som du vil sætte ind.

Tryk "Select" når du har uploadet billedet. Så er dit første indhold sat ind på sitet! 💪

3C - Content tekst

Klik på plus ikonet i venstre kolonne for at tilføje en block med indhold.

Søg efter 'advanced' og indsæt Advanced Text block.

Klik på "Write something…" og skriv "The Chocolate Cooperative [[enter]]"

Klik på plus ikonet for at tilføje en ny block med indhold.

Indsæt Advanced Text block

Tryk her for at skifte fra Overskrift 2 til 'paragraph' (almindelig brødtekst).

Vælg "Paragraph"

Klik på "Write something…" og skriv "Cool, coherent and craft chocolate community [[enter]]"

3C - Content knapper

Vi tilføjer en ny block. Se nu begynder det at køre!

Indsæt 'Advanced Button' block

Klik på "Button..." og skriv "JOIN NOW [[Enter]]"

Marker knappen og under indstillingerne i højre side, klik dig ind under 'Button 1 Settings'.

Find 'Icon settings' og klik der.

Du kan nu søge i en masse ikoner. Kig lidt, eller prøv at søge efter 'user'

Klik på 'pilen' for at se næste side med ikoner.

Den hopper nok ud, men klik i feltet her igen..

Vælg ikonet.

Klik "Add Button" for at tilføje en knap mere.

Klik dig ind i knappen og skriv "WATCH VIDEO [[ENTER]]"

Klik her for at folde alle indstillingerne for den første knap sammen.

Fold indstilllingerne ud for knap 2.

Søg efter 'play' ikon.

Her kan du venstrestille knapperne i stedet for de er midterstillede.

Klik "Align text left" og knapperne står i venstre side! Lad os se hvordan det ser ud. 👀

Klik "Update"

Nederst til højre klikker du på "View Page"

Når du vil tilbage trykker du øverst på "Edit Page". TIP: Sådan kan du skifte imellem at redigere og se hvordan det skrider fremad.

VALGFRIT - Smuksering

Nu er indholdet sat ind. Lad os se om vi kan pynte på det.. Få List View frem.

Her kan du folde List View 'træet' ud. Klik på og vælg Row Layout for vores HERO sektion.

VALGFRIT - Styring af indholdet i kolonner

Vi skal have fat i en 'Section' (altså en column / kolonne)

En anden måde: Klik på noget indhold / content i den kolonne / column / 'Section' du vil have fat på..

Nederst kan du se hvad der ligger inde i hvad. Tryk på "Section" for at fange den kolonne / column / Section du skal have fat på (den venstre).

Klik her.

Vælg om indholdet i kolonnen skal.. klistre til toppen (standard) Ligge i midten Hoppe ned i bunden. Vælg 'Align middle' for vores indhold i venstre kolonne.

Vælg nu højre kolonne / column / "Section"

Klik her.

Vælg at indholdet skal ligge sig i bunden. "Align Bottom"

VALGFRIT - Background overlay af Row

Vi kigger nu på selve baggrunden i sektionen. Klik på "Row Layout" (containeren / beholderen)

I indstillingerne i højre side fold "Background Overlay Settings" ud.

Vælg "Gradient" bagrund.

Sæt opacity til 100 i "Overlay Opacity" feltet. (Så er farven ikke gennemsigtig)

Klik her og vælg rød som første farve.

Vælg rød farve.

Klik her for at vælge anden farve til gradienten.

Vælg brun farve.

Sæt begge "Location" felter til 55, for en skarp overgang mellem farverne på baggrunden.

Klik på andet "Location" felt og sæt det til 55.

Juster til en skrå vinkel på "Gradient Angle" feltet. (24 måske?)

VALGFRIT - Juster tekst

Klik på "The Chocolate Cooperative"

Klik på color feltet i indstillingerne til højre.

Vælg hvid farve.

Klik på "Cool, coherent and craft chocolate community"

Skift også til hvid tekst farve.

Større tekst! Klik på "The Chocolate Cooperative"

'Font size' 80 burde passe.

Juster 'Line Height' til 60.

Klik på "Cool, coherent and craft chocolate community"

Font size 20 er vist fin.

Klik på "Update" for at gemme.

Klik på "View Page" for at se hvordan det nu ser ud.

Vi justerer lidt mere. Tryk på "Edit Page" for at komme tilbage og redigere.

Klik her.

Få fat i linien mellem de to Sections / columns / kolonner. Træk linien til venstre og sæt størrelsen til 45% - 55%

Klik på "Update"

Klik på "View Page"

VALGFRIT - Juster knapperne

Så er der bare knapperne tilbage! 🙌 Klik på "Edit Page"

Klik på "JOIN NOW"

Fold indstillingerne for knap 1 ud.

Klik her.

Text color 'hvid'.

Klik her.

Brun baggrundsfarve.

Klik her.

Brun farve på 'border'.

Klik et sted for at gå ud af border color.

Klik for at markere "JOIN NOW" knappen

Klik på "Hover" for at indstille farverne når musen svæver henover knappen.

Klik her.

Sæt baggrundsfarven til rød.

Klik her.

Vælg hvid Hover border color.

Tænd for Hover Box Shadow

100

Næste knaps tur! Marker "WATCH VIDEO" knappen

101

Fold indstillingerne for knap 1 sammen.

102

Fold indstillingerne for knap 2 ud.

103

Klik her.

104

Vælg brun tekst farve.

105

Klik her.

106

Brun border color.

107

Klik på "Hover"

108

Klik her.

109

Sæt hvid hover tekst farve.

110

Klik her.

111

Hvid hover border color.

112

Klik her.

113

Vælg rød hover baggrundsfarve.

114

Tænd for checkbox til at lave skygge på hover.

VALGFRIT - Video popup

115

116

Klik på "KOPIÉR"

117

Klik og marker "WATCH VIDEO" knappen

118

119

Klik på 'pil ned' ikonet.

120

Klik på dropdown menuen og vælg 'Video Popup'

121

Husk at trykke på denne pil for at 'gemme' linket til videoen.

122

Klik på "Update"

123

Klik på View page for at se om det virker.

124

Klik på "WATCH VIDEO"

125

Klik på "×" for at lukke popup med video.

126

Klik på "View Page" for de sidste justeringer.

127

Fold List View ud.

128

Klik på "Row Layout" for HERO sektionen.

129

Klik på "Padding/Margin"

130

Klik på "Bottom" feltet og ret til '0'.

131

Klik på "Top" feltet, og sæt det til 50 og tryk [[ENTER]].

132

Klik på "Update" for at gemme.

133

Klik "View Page"

134

Tillykke! Du er nu LEVEL 3 HACKERMAN! 🤘