Skaber markup, styling og script der viser et eller flere produkter på websiden. Først skal Sale Button aktiveres som salgskanal. Derefter lægges koden ind i WP som tilpasset HTML. Herunder er et eksempel:
Sale channel
Sale channel aktiveres.
Billedet viser, hvordan du aktiverer Sale Button, som giver den kode, som skal lægges ind på websitet.
Styling
Produktet kan med fordel styles med lidt ekstra CSS, der kan tilføjes på flere måder. I et childtheme kan du fx skrive denne CSS direkte ind i style.css. Farver fra theme.json kan anvendes ved hjælp af de variabler, som automatisk skabes - og således bliver det relativt enkelt at anvende sitets overordnede designlinje.
Kolonner er responsive i WordPress. På mindre enheder stables de typisk sådan, at kolonnen til venstre ligger øverst. Som regel er det ok. Men ikke altid. Hvordan får man en af de andre kolonner øverst? Denne tutorial viser, hvordan du kan lægge den midterste kolonne øverst.
Hvis du har brug for at stable på en anden måde, så er det let at modificere denne CSS, så det passer med dine behov.
Herunder ser du tre kolonner. På mindre skærme vil kolonnerne stakke indholdes sådan, at den venstre kolonne lægger sig øverst.
Kolonnerne fungerer ved hjælp at flexbox. Det kan du udnytte. Kolonnerne herunder demonstrerer princippet.
Kolonne 1
Heks med kat (Co-Pilot feb. 2025)
Prøv at gøre browseren mindre. Den midterste heks lægger sig øverst.
Kolonne 2 (stables øverst)
Heks (Co-Pilot, 2025)
Kolonne 3
Heks (Co-Pilot, 2025)
Keine Hexerei. CSS!
A) Giv dine Kolonner en class
Marker kolonnerne i “Dokumentpanelet”. Under fanebladet Blok / Avanceret kan du tilføje “Ekstra CSS-klasser. Herunder kan du se, hvordan jeg har tilføjet klassen box:
I venstre side er Dokumentpanelet åbent. Laget Kolonner er markeret. Til højre er panelet indstillinger åbent. Under fanebladet Avanceret er klassen box tilføjet til “Ekstra CSS-klasser”.
B) Blok: Tilpasset HTML
Når klassen er tilføjet kan du begynde trylleriet med CSS.
Blokken “Tilpasset HTML” er indsat oven over kolonnerne med klassen box.
Tilføj blokken Tilpasset HTML oven over kolonnerne. Her kan du så skrive dine styles i en <style> container.
I <style> containeren skrives CSS a la det her:
<style>
/** Flexbox ændrer rækkefølgen på stakken. Du kan altså den kolonne som skal vises øverst */
@media only screen and (max-width: 800px) {
.box {
display: flex;
flex-direction: row;
}
.box :nth-child(1) {
order: 2;
}
.box :nth-child(2) {
order: 1;
}
.box :nth-child(3) {
order: 3;
}
}
</style>
C) Test
Sandhedens time er inde. Virker vores CSS-hekseri? Prøv at ændre størrelsen på browservinduet – eller brug Inspect Tool.
Flere muligheder
Den viste kode vil kun påvirke en enkelt webside. Hvis du ønsker at bruge effekten andre steder, så kan CSS’en tilføjes ved hjælp af fx Simple Custom CSS and JS.
Gør sådan:
Opret et CSS med koden ovenover.
Gem det.
Opret Kolonner med tre kolonner – og giv blokken classen box.
