WordPress 4 - Content section InfoBox
Husk 3C Container (beholder) Column (kolonne) Content (indhold)
Jes Conradsen
111 steps
12 minutes
Wikipedia
1
Vi laver den næste sektion -> InfoBokse!
Tip! En InfoBox giver struktur og overblik på et mindre antal punkter/emner
2
Klik her og gå til List View.
3
Marker den Row hvor HERO sektionen ligger i (containeren) Klik på de 'tre lodrette punktummer' for at åbne menuen for Row Layout Block'en.
Tip! Ved at markere et element du ved præcis hvor befinder sig List View kan du bruge Insert before/after til at ramme præcist med at indsætte en ny block!
4
Klik på "Insert after"
3C - Container
5
Tryk på plus ikonet for at tilføje en ny block.
6
Vælg Row Layout.
3C - Columns (3 stk)
7
Vælg tre ens colums (3 ens kolonner)
8
Klik her
9
Vælg "Full width"
10
Klik her.
11
Vælg "Use Theme Content Inner Width?"
3C - Content Info Box
12
Klik på plus ikonet "Add block" i første kolonne for at sætte indhold ind.
13
Klik på "Search for blocks and patterns" feltet og skriv 'info'.
14
Indsæt 'Info Box'
15
Vælg dette layout.
16
Double-click "Title"
17
Skriv "ALL ABOUT CHOCOLATE" (Eller cut n' paste / kopier og sæt ind [[CTRL + C & CTRL + V]] [[ENTER]] fra tekstdokumentet fra dokumentationen)
18
Kopier tekst fra dokumentation [[ctrl]] + [[c]]
19
Trippel klik for at markere hele brødteksten "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo."
20
Indsæt med [[ctrl]] + [[v]]
21
Klik på ikonet
22
Klik på knappen for ikon indstillinger
23
Klik her.
24
Skriv "wiki"
25
Indsæt dette ikon.
26
I højre side finder du "Learn More Settings"
27
Slå "Show Learn More" feltet til.
28
Kopier [[ctrl]] + [[c]] linket til Wikipedia artikel fra dokumentationen.
29
Klik på "Paste URL or type to search" feltet.
30
Indsæt linket med [[ctrl]] + [[v]]
31
Klik submit for at få linket til at blive gemt.
32
Klik på ikonet her og fold flere indstillinger ud.
33
Vælg "Open in New Tab" feltet.
34
Så er indholdet på plads i InfoBox!
Tip! Spring evt. smukering over og gå direkte til at duplikere infobox' en ud til de andre kolonner i step [https://scribehow.com/shared/The-chocolate-cooperative_Workflow__GTY0CUhCSWaHICQPhyMLTg#33a6a4ac](https://scribehow.com/shared/The-chocolate-cooperative_Workflow__GTY0CUhCSWaHICQPhyMLTg#33a6a4ac)
VALGFRIT - Smuksering
VALGFRIT - Container
35
Klik her for at folde indstillingerne ud for InfoBox'ens Container.
36
Klik her.
37
Klik i "Top" feltet og sæt det til '6' pixels.
38
Klik her.
39
Vælg hvid baggrundsfarve.
VALGFRIT - Sæt en border top på
40
Klik her.
41
Sæt border top farven til brun.
42
Klik på "Hover" fanebladet.
43
Klik her.
44
Sæt hover border farven til rød.
VALGFRIT - Ikonet
45
Klik og fold "Media Settings" ud.
Tip! Det er smart at folde indstillingerne for de andre sektioner sammen. Kun have én foldet ud ad gangen = Overblik
46
Sæt Icon Size til 75.
47
Klik her.
48
Sæt ikonets farve til brun.
49
Klik på "Hover"
50
Klik her
51
Sæt ikonets hover farve til rød.
52
Fold 'Media Settings' (= ikon) indstillingerne sammen.
53
Fold "Title Settings" ud.
54
Klik her.
55
Sæt farven på overskriften til 'næst-mørkeste'.
56
Vælg overskrift størrelse H4
57
Fold 'Title Settings' sammen igen.
VALGFRIT - Brødtekst
58
Fold Text Settings ud
59
Klik her.
60
Vælg fjerde mørkeste tekstfarve. (lyseste tekstfarve)
61
Fold Text Settings sammen igen.
VALGFRIT - Learn more settings
62
Fold "Learn More Settings" ud
63
Klik her.
64
Vælg næstmørkeste tekstfarve.
65
Klik her.
66
Sæt border color til brun.
67
Click here.
68
Klik her.
69
Klik "Top" feltet og sæt det til 1 pixel.
70
Klik på Padding "Top" feltet og sæt det til 25 pixels.
71
Klik på Margin "Top" feltet og sæt det til 25 pixels.
72
Klik på Margin "Bottom" feltet og sæt det til 25 pixels.
73
Klik på "Hover" fanebladet.
74
Klik her.
75
Sæt tekstfarven til næst mørkeste.
76
Klik her.
77
Sæt baggrundsfarven til 'hvid'.
78
Klik her.
79
Sæt hover border color til 'rød'.
VALGFRIT - Container shadow
80
Fold "Container Shadow" ud.
81
Aktiver "Enable Shadow" feltet.
82
Klik på pilen for at slå shadow fra.
83
Klik på "Hover" og sæt standard shadow på.
84
Klik på "Update" for at gemme.
85
Inspicer siden på "View Page"
86
Tilbage og ret de sidste småting, klik på "Edit Page"
87
Klik på info-boksen.
88
Klik på "Row Layout" nederst på 'breadcrumbs' for at markere Row Layout. (Den container der skal indeholde alle tre infobokse)
89
Klik på "Background Settings"
90
Klik her.
91
Vælg den mørkeste af de tre baggrundsfarver til baggrunden i vores infoboks container.
92
Klik "Update" for at gemme. Inspicer. Tilbage til rediger for sidste punkt -> Duplikering af den første og færdige infoboks.
Dupliker InfoBox
Tip! Duplikering af indhold kan spare meget tid hvis man tænker sig om. Har du indhold der er magen til i struktur flere steder? Så dupliker! Brug det som en slags skabelon. 🙌
93
Klik på infobox.
94
Klik på ikonet med tre lodrette punktummer yderst til højre for at folde menuen ud for denne block.
95
Vælg "Duplicate"
96
Hold fast i den nye infobox med musen og gør klar til at flytte den.. (træk den med musen)
97
Træk den hen i anden kolonne, lige på plus ikonet. Bingo!
98
Klik her.
99
Vælg "Duplicate" igen for at lave endnu en kopi.
100
Træk den hen i tredje kolonne, og slip den på lige på plus-ikonet. Sådan!
Tilpas de nye kopier
101
De nye kopier skal nu have tilpasset deres indhold. (kopier fra dokumentationen) Du skal skifte: 1. Ikon 2. Title 3. Brødtekst/manchet 4. Selve link destinationen Ligesom du har gjort på første infoboks. Det er god træning!
Tip! Øv dig i at trippel-klikke for at markere et helt tekstafsnit på en gang.
102
Klik her for at skifte ikon.
103
Et godt bud på et ikon til The Dark Side of Chocolate.
104
Søg efter 'heart' til Chocolate and Health ikonbox.
Dupliker en hel sektion (Row / container)
105
Nu er sektionen med 3 infobokse færdig. Fedt! Vi duplikerer den så vi få en ny sektion med yderligere 3 infobokse. Så skal indholdet i dem bare tilpasses. God træning!
106
Klik på List View ikonet.
107
Marker "Row Layout" containeren med de 3 infobokse i.
108
Klik på de 3 lodrette punktummer til højre for at folde menuen ud for Row Layout block'en.
109
Vælg "Duplicate".
110
Tilpas nu de tre nye infobokse (4, 5 og 6.) 1. Ikon 2. Titel 3. Brødtekst/manchet 4. Link destination Du finder det i dokumentationen :)
111
Du er nu klar til sidste justering af Info-boksene. Kig på WordPress 4.1 White Space [https://scribehow.com/shared/WordPress_41_White_Space__77UpiH4SSa2zMKmxswYuZA](https://scribehow.com/shared/WordPress_41_White_Space__77UpiH4SSa2zMKmxswYuZA)
WordPress 4 - Content section InfoBox
Husk 3C Container (beholder) Column (kolonne) Content (indhold)
Jes Conradsen
111 steps
12 minutes
Wikipedia
1
Vi laver den næste sektion -> InfoBokse!
Tip! En InfoBox giver struktur og overblik på et mindre antal punkter/emner
2
Klik her og gå til List View.
3
Marker den Row hvor HERO sektionen ligger i (containeren) Klik på de 'tre lodrette punktummer' for at åbne menuen for Row Layout Block'en.
Tip! Ved at markere et element du ved præcis hvor befinder sig List View kan du bruge Insert before/after til at ramme præcist med at indsætte en ny block!
4
Klik på "Insert after"
3C - Container
5
Tryk på plus ikonet for at tilføje en ny block.
6
Vælg Row Layout.
3C - Columns (3 stk)
7
Vælg tre ens colums (3 ens kolonner)
8
Klik her
9
Vælg "Full width"
10
Klik her.
11
Vælg "Use Theme Content Inner Width?"
3C - Content Info Box
12
Klik på plus ikonet "Add block" i første kolonne for at sætte indhold ind.
13
Klik på "Search for blocks and patterns" feltet og skriv 'info'.
14
Indsæt 'Info Box'
15
Vælg dette layout.
16
Double-click "Title"
17
Skriv "ALL ABOUT CHOCOLATE" (Eller cut n' paste / kopier og sæt ind [[CTRL + C & CTRL + V]] [[ENTER]] fra tekstdokumentet fra dokumentationen)
18
Kopier tekst fra dokumentation [[ctrl]] + [[c]]
19
Trippel klik for at markere hele brødteksten "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo."
20
Indsæt med [[ctrl]] + [[v]]
21
Klik på ikonet
22
Klik på knappen for ikon indstillinger
23
Klik her.
24
Skriv "wiki"
25
Indsæt dette ikon.
26
I højre side finder du "Learn More Settings"
27
Slå "Show Learn More" feltet til.
28
Kopier [[ctrl]] + [[c]] linket til Wikipedia artikel fra dokumentationen.
29
Klik på "Paste URL or type to search" feltet.
30
Indsæt linket med [[ctrl]] + [[v]]
31
Klik submit for at få linket til at blive gemt.
32
Klik på ikonet her og fold flere indstillinger ud.
33
Vælg "Open in New Tab" feltet.
34
Så er indholdet på plads i InfoBox!
Tip! Spring evt. smukering over og gå direkte til at duplikere infobox' en ud til de andre kolonner i step [https://scribehow.com/shared/The-chocolate-cooperative_Workflow__GTY0CUhCSWaHICQPhyMLTg#33a6a4ac](https://scribehow.com/shared/The-chocolate-cooperative_Workflow__GTY0CUhCSWaHICQPhyMLTg#33a6a4ac)
VALGFRIT - Smuksering
VALGFRIT - Container
35
Klik her for at folde indstillingerne ud for InfoBox'ens Container.
36
Klik her.
37
Klik i "Top" feltet og sæt det til '6' pixels.
38
Klik her.
39
Vælg hvid baggrundsfarve.
VALGFRIT - Sæt en border top på
40
Klik her.
41
Sæt border top farven til brun.
42
Klik på "Hover" fanebladet.
43
Klik her.
44
Sæt hover border farven til rød.
VALGFRIT - Ikonet
45
Klik og fold "Media Settings" ud.
Tip! Det er smart at folde indstillingerne for de andre sektioner sammen. Kun have én foldet ud ad gangen = Overblik
46
Sæt Icon Size til 75.
47
Klik her.
48
Sæt ikonets farve til brun.
49
Klik på "Hover"
50
Klik her
51
Sæt ikonets hover farve til rød.
52
Fold 'Media Settings' (= ikon) indstillingerne sammen.
53
Fold "Title Settings" ud.
54
Klik her.
55
Sæt farven på overskriften til 'næst-mørkeste'.
56
Vælg overskrift størrelse H4
57
Fold 'Title Settings' sammen igen.
VALGFRIT - Brødtekst
58
Fold Text Settings ud
59
Klik her.
60
Vælg fjerde mørkeste tekstfarve. (lyseste tekstfarve)
61
Fold Text Settings sammen igen.
VALGFRIT - Learn more settings
62
Fold "Learn More Settings" ud
63
Klik her.
64
Vælg næstmørkeste tekstfarve.
65
Klik her.
66
Sæt border color til brun.
67
Click here.
68
Klik her.
69
Klik "Top" feltet og sæt det til 1 pixel.
70
Klik på Padding "Top" feltet og sæt det til 25 pixels.
71
Klik på Margin "Top" feltet og sæt det til 25 pixels.
72
Klik på Margin "Bottom" feltet og sæt det til 25 pixels.
73
Klik på "Hover" fanebladet.
74
Klik her.
75
Sæt tekstfarven til næst mørkeste.
76
Klik her.
77
Sæt baggrundsfarven til 'hvid'.
78
Klik her.
79
Sæt hover border color til 'rød'.
VALGFRIT - Container shadow
80
Fold "Container Shadow" ud.
81
Aktiver "Enable Shadow" feltet.
82
Klik på pilen for at slå shadow fra.
83
Klik på "Hover" og sæt standard shadow på.
84
Klik på "Update" for at gemme.
85
Inspicer siden på "View Page"
86
Tilbage og ret de sidste småting, klik på "Edit Page"
87
Klik på info-boksen.
88
Klik på "Row Layout" nederst på 'breadcrumbs' for at markere Row Layout. (Den container der skal indeholde alle tre infobokse)
89
Klik på "Background Settings"
90
Klik her.
91
Vælg den mørkeste af de tre baggrundsfarver til baggrunden i vores infoboks container.
92
Klik "Update" for at gemme. Inspicer. Tilbage til rediger for sidste punkt -> Duplikering af den første og færdige infoboks.
Dupliker InfoBox
Tip! Duplikering af indhold kan spare meget tid hvis man tænker sig om. Har du indhold der er magen til i struktur flere steder? Så dupliker! Brug det som en slags skabelon. 🙌
93
Klik på infobox.
94
Klik på ikonet med tre lodrette punktummer yderst til højre for at folde menuen ud for denne block.
95
Vælg "Duplicate"
96
Hold fast i den nye infobox med musen og gør klar til at flytte den.. (træk den med musen)
97
Træk den hen i anden kolonne, lige på plus ikonet. Bingo!
98
Klik her.
99
Vælg "Duplicate" igen for at lave endnu en kopi.
100
Træk den hen i tredje kolonne, og slip den på lige på plus-ikonet. Sådan!
Tilpas de nye kopier
101
De nye kopier skal nu have tilpasset deres indhold. (kopier fra dokumentationen) Du skal skifte: 1. Ikon 2. Title 3. Brødtekst/manchet 4. Selve link destinationen Ligesom du har gjort på første infoboks. Det er god træning!
Tip! Øv dig i at trippel-klikke for at markere et helt tekstafsnit på en gang.
102
Klik her for at skifte ikon.
103
Et godt bud på et ikon til The Dark Side of Chocolate.
104
Søg efter 'heart' til Chocolate and Health ikonbox.
Dupliker en hel sektion (Row / container)
105
Nu er sektionen med 3 infobokse færdig. Fedt! Vi duplikerer den så vi få en ny sektion med yderligere 3 infobokse. Så skal indholdet i dem bare tilpasses. God træning!
106
Klik på List View ikonet.
107
Marker "Row Layout" containeren med de 3 infobokse i.
108
Klik på de 3 lodrette punktummer til højre for at folde menuen ud for Row Layout block'en.
109
Vælg "Duplicate".
110
Tilpas nu de tre nye infobokse (4, 5 og 6.) 1. Ikon 2. Titel 3. Brødtekst/manchet 4. Link destination Du finder det i dokumentationen :)
111
Du er nu klar til sidste justering af Info-boksene. Kig på WordPress 4.1 White Space [https://scribehow.com/shared/WordPress_41_White_Space__77UpiH4SSa2zMKmxswYuZA](https://scribehow.com/shared/WordPress_41_White_Space__77UpiH4SSa2zMKmxswYuZA)
