Merch Styling

Innehållet på startsidan

Innehållet på hemsidan byggs upp med WordPress 5 Block editor, även kallad Gutenberg. Den använder endast Core Blocks och Woocmmerce Shortcodes. Och som man kan förvänta sig har lite CSS lagts till.

Bortsett från rubrikelementet byggs hela hemsidans innehåll med blockredigeraren (även kallad Gutenberg). I kombination med GeneratePress editor-stilar har vi nu en mycket bättre representation på framsidan när vi redigerar. Genom att låta varje element få specifika stilar och ytterligare CSS-klasser behöver vi inte gå in i HTML så ofta. På den här webbplatsen gör vi det faktiskt aldrig.

Sidans struktur

Låt oss börja med att titta på hierarkin.

  • Header Element – Detta behandlas i denna artikel.
  • H2 Rubriker
  • Kategorier i butiken
  • Senaste produkterna
  • Raden för uppmaning till åtgärder – fyrtio / sextio split
  • Raden för uppmaning till åtgärder – sextio/fyrtio split
  • Försäljningsprodukter
  • Registrera dig
  • GP Footer – Temats standard widgets

H2 Rubriker

På vår landningssida ville jag ha stora feta H2-rubriker. Större än vad vi har angett i vår Customizer. Men gör dem också superflexibla. För att få detta att hända har jag skapat lite anpassad CSS med hjälp av en Additional CSS Class of:

stor rubrik

Välj helt enkelt ditt rubrikblock, se till att det är en H2, öppna den avancerade rullgardinsmenyn i sidofältet Inställningar och lägg till klassen i fältet Ytterligare CSS-klass. Observera: Du kommer inte att se stilförändringen i redigeraren. Precis som alla CSS finns den i anpassaren > Additional CSS. Det ser ut så här

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

Detta ser komplicerat ut, men det är det som ger de responsiva kontrollerna. Om du vill ha mer information om vad allt detta innebär kan du läsa Responsive and Fluid Typography With vh and vw Units (Responsiv och flytande typografi med vh och vw-enheter).

Kategorier i butiken

Byggd med ett kolumnblock som är inställt på två kolumner. Varje kolumn innehåller en bild, en rubrik, en text och ett länkblock. Inget märkvärdigt och mycket enkelt att redigera. Du kan lägga till ytterligare kolumner i kolumninställningarna. Att skapa ytterligare rader är helt enkelt att duplicera den befintliga raden.

Länka bilden till kategorin

Inställningar för bilder har ett alternativ för länk till. Ställ bara in Länk till: Anpassad URL och lägg till din kategorilänk

Anpassad länkstyling

Förhoppningsvis har du lagt märke till länken för anpassad stil. Detta uppnås med hjälp av anpassad CSS. Om du vill lägga till den här stilen till alla dina innehållslänkar ger du blocket en ytterligare CSS-klass av typen: loud-link.

Senaste produkterna

Efter vårt titelblock lägger vi helt enkelt till en Woocommerce: Recent Products Shortcode.

Rader för uppmaningar till åtgärder (CTA)

Återigen kommer Columns Block in i bilden. Det finns inget sätt att justera kolumnbredden. I redigeringsverktyget har du alltså lika stora kolumner. För att komma runt detta och visa ojämnt stora kolumner har vi lagt till några enkla CSS-klasser.

Ytterligare CSS-klassResultat av stilen
fyrtiosextio kolumner en 40/60 % två kolumnrader
sextio fyrtio kolumner en 60 %/40 % två kolumnrader
mobil kolumn-omvändning Vänd om ordningen på de två kolumnerna i mobilen.
Lägg till den här kursen tillsammans med en av de ovanstående.

Observera: dessa klasser tillämpar inte stilarna i redigeringsverktyget.

Registrera dig

Anmälningsformuläret tillhandahålls av insticksprogrammet Happy Forms. Formuläret läggs till i den andra kolumnen med hjälp av en widget med kort kod. Den korta koden för ditt formulär finns i Dashboard > Happy Forms. En vanlig metod är att använda dessa typer av CTA för att bryta upp en sida. För att göra detta har vi gett den vår egen speciella stil.

För det första måste vi se till att raden sträcker sig till behållarens kant (utanför innehållsutfyllnaden). Detta görs helt enkelt genom att välja alternativet Justera brett i verktygsfältet Block. Resten kräver lite CSS som du känner igen från våra CTA-rutor och lite extra. Här är de klasser som används:

  • sextio fyrtio kolumner
    en 60 %/40 % två kolumnrader
  • kolumn-banner
    Detta gör det nödvändigt att justera stoppningen.
  • centrum-vertikal
    vertikalt centrera allt innehåll som placeras i en av CTA-kolumnerna
  • bg-grå
    Tillämpar den grå bakgrundsfärgen.

Redigera formuläret

Formuläret kan redigeras från Dashboard > Happy Forms. Om du skapar ett nytt formulär måste du uppdatera den korta koden som används på förstasidan.

Ändra radernas bakgrundsfärg

Gå till Customizer > Additional CSS (eller till ditt Child Theme Style sheet om du har flyttat det). Redigera denna CSS:

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

Du kan naturligtvis skapa egna klasser med mer relevanta namn för de färger du väljer.

Kan jag använda ett annat formulär?

Självklart. Om du vill använda ett annat insticksprogram för formuläret är det bara att ställa in det och ersätta den korta koden med den nya.

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