Merch styling

Innhold på hjemmesiden

Innholdet på hjemmesiden er bygget ved hjelp av WordPress 5 Block-editoren aka Gutenberg. Den bruker bare Core Blocks og Woocmmerce Shortcodes. Og som forventet har en liten CSS blitt kastet inn.

Bortsett fra Header-elementet er hele hjemmesidens innhold bygget med Block Editor (alias Gutenberg). Kombinert med GeneratePress-redigeringsstiler har vi nå en mye bedre frontend-representasjon mens vi redigerer. Å tillate at hvert element får spesifikke stiler og ekstra CSS-klasser betyr at vi ikke trenger å forville oss inn i HTML veldig ofte. Faktisk på denne siden gjør vi aldri.

Sidestruktur

La oss begynne med å se på hierarkiet.

  • Overskriftselement – Dette er dekket i denne artikkelen
  • H2 overskrifter
  • Butikkkategorier
  • Nyeste Produkter
  • Call to Action-rad – førti/seksti delt
  • Call to Action-rad – seksti / førti delt
  • Salgsprodukter
  • melde deg på
  • GP-bunntekst – Standard tema-widgets

H2 overskrifter

For landingssiden vår ville jeg ha noen store dristige H2-overskrifter. Større enn det vi har spesifisert i vår Customizer. Men gjør dem også super responsive. For å få dette til å skje har jeg laget en egendefinert CSS ved å bruke en ekstra CSS-klasse av:

stor overskrift

Bare velg overskriftsblokken din, sørg for at det er en H2, åpne rullegardinmenyen Avansert i sidelinjen for innstillinger og legg til klassen i feltet Ekstra CSS-klasse. Merk: Du vil ikke se stilendringen i redigeringsprogrammet. Som all CSS finner du den i Customizer> Ekstra CSS. Det ser slik ut

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

Så dette ser komplisert ut, men det er det som gir de responsive kontrollene. Hvis du vil ha mer informasjon om hva dette betyr, sjekk ut Responsive And Fluid Typography With vh And vw Units

Butikkkategorier

Bygget med en kolonneblokk satt til to kolonner. Hver kolonne inneholder en bilde-, overskrift-, tekst- og lenkeblokk. Ikke noe fancy og veldig enkelt å redigere. Du kan legge til flere kolonner fra kolonneinnstillingene. Å lage flere rader er ganske enkelt et tilfelle av å duplisere den eksisterende.

Gjør bildet lenke til kategorien

Bildeinnstillinger har en kobling til alternativ. Bare sett koblingen til: Egendefinert URL og legg til kategorikoblingen din

Tilpasset lenkestil

Forhåpentligvis la du merke til den tilpassede stillenken. Dette oppnås ved hjelp av tilpasset CSS. For å legge til denne stilen til noen av innholdslenkene dine, gi blokken en ekstra CSS-klasse av: høy-link

Nyeste Produkter

Etter tittelblokken vår legger vi ganske enkelt til en Woocommerce: Recent Products Shortcode.

Handlingsfremmende rader (CTA).

Nok en gang kommer kolonneblokken inn i bildet. Ut av esken er det ingen måte å justere kolonnebreddene på. Så i redaktøren sitter du fast med like store kolonner. For å komme rundt dette for å vise kolonner med ulik størrelse la vi til noen enkle CSS-klasser.

Ekstra CSS-klasseResulterende stil
førti-seksti-kolonner en rad med to kolonner på 40 % / 60 %
seksti-førti kolonner en 60 % / 40 % to kolonnerader
mobil-kolonne-omvendt Omvendt rekkefølgen på de to kolonnene på mobil.
Legg til denne klassen sammen med en av de ovennevnte.

Vennligst merk: disse klassene bruker ikke stilene i redaktøren

melde deg på

Registreringsskjemaet leveres av Happy Forms-plugin. Skjemaet legges til i den andre kolonnen ved hjelp av en Short Code-widget. Kortkoden for skjemaet ditt finner du i dashbordet> Glade former . Et vanlig design er å bruke disse typene CTA for å dele opp en side. For å gjøre dette har vi gitt den vår egen spesielle styling.

Først må vi få denne raden til å strekke seg til kanten av beholderen (utenfor innholdspolstringen). Dette gjøres ganske enkelt ved å velge alternativet Align Wide fra Block-verktøylinjen. Resten krever litt kjent CSS fra våre CTA-rader og litt ekstra. her er klassene den bruker:

  • seksti-førti kolonner
    en 60 % / 40 % to kolonnerader
  • kolonnebanner
    dette gjør nødvendige polstringsjusteringer
  • senter vertikal
    vertikalt sentrere alt innhold plassert i en av CTA-kolonnene
  • bg grå
    Bruker den grå bakgrunnsfargen

Redigere formen

Skjemaet kan redigeres fra Dashboard> Glade former . Hvis du oppretter et nytt skjema, må du oppdatere kortkoden som brukes på forsiden.

Endre bakgrunnsfargen på radene

Gå til Customizer> Ytterligere CSS (eller til stilarket for undertema hvis du har flyttet det). Og rediger denne CSS:en:

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

Du kan selvfølgelig enkelt lage dine egne klasser med mer relevante navn for fargene du velger.

Kan jeg bruke et annet skjema?

Selvfølgelig. Hvis du vil bruke et annet skjemaplugin, kan du bare sette opp det og erstatte kortkoden med den nye.

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