Merch Styling

Indholdet på forsiden

Hjemmesidens indhold er opbygget ved hjælp af WordPress 5 Block editor, også kendt som Gutenberg. Den bruger kun Core Blocks og Woocmmerce Shortcodes. Og som forventet er der også blevet smidt en smule CSS ind.

Bortset fra Header-elementet er hele hjemmesidens indhold bygget op med Block Editor (også kaldet Gutenberg). Kombineret med GeneratePress editor stilarter har vi nu en meget bedre front end repræsentation, mens vi redigerer. Ved at give hvert element mulighed for at få specifikke stilarter og yderligere CSS-klasser betyder det, at vi ikke behøver at bevæge os ud i HTML så ofte. Det gør vi faktisk aldrig på dette websted.

Sidestruktur

Lad os begynde med at se på hierarkiet.

  • Overskriftselement – Dette er beskrevet i denne artikel
  • H2-overskrifter
  • Kategorier i butikken
  • Seneste produkter
  • Call to Action Row – fyrre / tres split
  • Call to Action Row – tres / fyrre split
  • Salg af produkter
  • Tilmeld dig
  • GP Footer – Standard tema widgets

H2-overskrifter

Til vores landingsside ønskede jeg nogle store fede H2-overskrifter. Større end det, vi har angivet i vores Customizer. Men gør dem også super responsive. For at få dette til at ske, har jeg oprettet noget brugerdefineret CSS ved hjælp af en ekstra CSS-klasse på:

med stor udgiftsområde

Du skal blot vælge din overskriftsblok, sikre dig, at det er en H2, åbne den avancerede dropdown-liste i sidebaren Indstillinger og tilføje klassen til feltet Yderligere CSS-klasse. Bemærk: Du vil ikke kunne se stilændringen i editoren. Som alle CSS findes den i Customizer > Additional CSS. Det ser således ud

h2.large-heading {
    font-size: calc(28px + (86 - 28)*(100vw - 400px)/(1600 - 400));
    line-height: 1.1em;
}

Det ser kompliceret ud, men det er det, der giver de responsive kontroller. Hvis du vil have flere oplysninger om, hvad det betyder, kan du læse Responsive og flydende typografi med vh- og vw-enheder

Kategorier i butikken

Opbygget ved hjælp af en kolonneblok, der er indstillet til to kolonner. Hver kolonne indeholder et billede, en overskrift, tekst og en linkblok. Ikke noget smart og meget enkelt at redigere. Tilføjelse af yderligere kolonner kan ske fra kolonneindstillingerne. Oprettelse af yderligere rækker er blot et spørgsmål om at duplikere den eksisterende række.

Gør billedet til et link til kategorien

Indstillinger for billeder har en mulighed for at linke til. Du skal blot indstille Link til: Brugerdefineret URL og tilføj dit kategorilink

Brugerdefineret linkstyling

Forhåbentlig har du bemærket linket til den tilpassede stil. Dette opnås ved hjælp af brugerdefineret CSS. Hvis du vil tilføje denne stil til et af dine links i indholdet, skal du blot give blokken en ekstra CSS-klasse på: loud-link

Seneste produkter

Efter vores titelblok skal vi blot tilføje en Woocommerce: Recent Products Shortcode.

Rækker med opfordringer til handling (CTA)

Endnu en gang kommer kolonneblokken i spil. Der er ingen mulighed for at justere kolonnebredden. Så i editoren er du fastlåst med lige store kolonner. For at komme uden om dette og vise kolonner af forskellig størrelse har vi tilføjet nogle enkle CSS-klasser.

Yderligere CSS-klasseResulterende stil
fyrre-syv kolonner en 40% / 60% to-kolonne række
tres-fyrre kolonner en 60% / 40% to-kolonne række
mobile-column-reverse Omvend rækkefølgen af de to kolonner på mobilen.
Tilføj denne klasse sammen med en af de ovennævnte.

Bemærk: disse klasser anvender ikke stilarter i editoren

Tilmeld dig

Tilmeldingsformularen leveres af Happy Forms-plugin’et. Formularen tilføjes til den anden kolonne ved hjælp af en kort kode widget. Den korte kode til din formular findes i Dashboardet > Happy Forms. Et almindeligt design er at bruge disse typer CTA’er til at opdele en side. Derfor har vi givet den vores egen specielle styling.

Først og fremmest skal vi sørge for, at rækken strækker sig til kanten af containeren (uden for indholdsudfyldningen). Dette gøres ved at vælge indstillingen Juster bredt på værktøjslinjen Blok. Resten kræver noget velkendt CSS fra vores CTA-rækker og lidt ekstra. Her er de klasser, den bruger:

  • tres-fyrre kolonner
    en 60% / 40% to-kolonne række
  • kolonne-banner
    der foretages de nødvendige justeringer af polstringen
  • center-vertikal
    lodret centrering af ethvert indhold, der er placeret i en af CTA-kolonnerne
  • bg-grey
    Anvendelse af den grå baggrundsfarve

Redigering af formularen

Formularen kan redigeres fra Dashboard > Happy Forms. Hvis du opretter en ny formular, skal du opdatere den korte kode, der bruges på forsiden.

Ændring af rækkernes baggrundsfarve

Gå til Customizer > Additional CSS (eller til dit Child Theme Style sheet, hvis du har flyttet det). Og rediger denne CSS:

.bg-grey {
    background-color: #f2f3f4;
}

Du kan selvfølgelig også oprette dine egne klasser med mere relevante navne for de farver, du vælger.

Kan jeg bruge en anden formular?

Selvfølgelig. Hvis du ønsker at bruge et andet formularplugin, skal du blot oprette det og erstatte den korte kode med din nye kode.

Click to rate this post!
[Total: 0 Average: 0]
Item added to cart.
0 items - 0,00