Hvordan bruke «Gruppe» blokka?

Hvordan bruke «Gruppe» blokka?

I siste versjon av WordPress dukket det opp en ny blokk som heter «Gruppe». Som navnet sier, så er den ment for gruppering av blokker. Vi skal se på noen tilfeller hvor den er grei å bruke.

Dette er en blogg for deg som er litt over gjennomsnittet interessert i «tweaking» i WP 😉

I en del theme så finnes det ikke noen mal under «Sideattributter» som går i 100% bredde. Men det betyr ikke nødvendigvis at det ikke er mulig å få til allikevel. For å få til dette i det themet jeg har brukt over(Altitude Pro), har jeg installert denne utvidelsen:

I eksemplet i videoen, så har jeg lagt overskrift og undertittel over et «Omslag». Det er det standardfunksjonen for bakgrunnsbilde kalles 🙂 Men som du ser, så flyter teksten mye lenger ut til venstre enn det jeg ønsker. Dette er ikke helt uvanlig om themet ditt ikke fungerer helt perfekt med blokkredigering enda.

En måte å løse det på er å legge teksten i en gruppe, og så legge inn en liten kodesnutt som begrenser bredden til det jeg selv ønsker. Denne er lagt inn under Tilpass -> Ekstra CSS

Her er koden brukt i videoen over og den er lagt inn under «Avansert» valget på gruppa.

.beholder {
width: 1200px;
margin: 0 auto;
max-width: 85%;
}

Her har jeg lagt inn "beholder" som CSS klasse på gruppe blokka.
Her har jeg lagt inn «beholder» som CSS klasse på gruppe blokka.

Neste blokk består av tre kolonner med tekst. Her har jeg brukt samme CSS klasse, siden jeg ønsker samme bredde. Her fungerer egentlig kolonnene som en gruppe, så her er «beholder» lagt til under Avansert på kolonneblokka.

I det siste eksemplet har jeg startet med å legge til en gruppe og lagt inn en bakgrunnsfarge på denne. Så lenge jeg har valgt malen som heter FW Fullwidth, så vil denne gå i full bredde og bakgrunnsfargen går fra kant til kant på skjermen.

Men så var det innholdet som skal ligge over. Her har jeg lagt til flere blokker, både overskrift, avsnitt, bilde og en kortkode. Disse har jeg så markert og deretter valgt «Gruppér» for å samle innholdet i en beholder. Og som i eksemplet over har jeg lagt til «beholder» under «Avansert». Ergo får vi dette resultatet:

Her er bakgrunnen en gruppe, mens resten ligger inni en annen gruppe.
Slik ser det ut etter å ha lagt inn «beholder» under Avansert -> CSS klasse .

Slik ser det ut etter å ha lagt inn beholder som CSS klasse under Avansert på denne blokka også. En gruppe kan altså ha en bakgrunnsfarge som går i 100% bredde, mens gruppen som ligger inne første gruppe igjen, har begrensning på bredde pga CSS klassen som legges inn på den.

Her la jeg inn én CSS klasse til for å få lik bredde på tekst, bilde og optin. Siden beholder klassen sørger for midtstilling og riktig bredde på mobil, så trenger vi kun én linje med kode for å få det til:

.optin {
width: 1024px;
}

Med denne koden i tillegg får vi alt "på linje".
Med denne koden i tillegg får vi alt «på linje».

Dette er bare et par eksempler på hva gruppe blokka kan brukes til!

WP Basis + VIP tilbud i mai!

Kjøper du WP Basis kurset før 1. juni får du VIP medlemskap gratis den første måneden, deretter kun kr 599,- ink.mva pr mnd. Prisen låses så lenge du er aktiv medlem.

Fra 1. juni går prisen opp til kr 999,- pr mnd, men kun for nye medlemmer.

Skriv en kommentar

Din e-postadresse vil ikke bli publisert.

Dette nettstedet bruker Akismet for å redusere spam. Lær om hvordan dine kommentar-data prosesseres.

Ikke gå glipp av nyheter fra WP Skolen

Du vil motta e-post fra oss når vi har nye blogginnlegg, nyheter eller tilbud som vi tror vil være av interesse for deg. Du kan melde deg av når du vil!

Tilbakestill passord

Gjenopprett passordet ditt

En link for å gjenopprette passord vil bli sendt deg på e-post.

Tilbake