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%;
}
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:
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;
}
