Obs: I nästa ämne du kommer att läsa kommer du att lära dig om: Gutenberg wide block layout i full bredd WordPress
Gutenberg-blockredigeraren för WordPress har förändrat sättet vi skapar innehåll i CMS. Men det har också öppnat upp några nya möjligheter på fronten.
En av de mest spännande utvecklingarna inom detta område är möjligheten att lägga till “fulla” eller “breda” block till en sida eller ett inlägg. Den här funktionen tillåter Gutenberg-blocket att avvika från standardbredden på ett temas innehåll, vilket var nästan omöjligt i den gamla klassiska redigeraren.
Det finns olika användningsområden för ett block med full eller bred orientering. Du kan till exempel introducera nya sidavsnitt med en tabell i full bredd som lägger text över en bildbakgrund. Eller så kan du använda funktionen för att skapa ett område med uppmaning som inte går att hoppa över. Nästan alla sorters innehåll kan läggas till här, vilket är en del av överklagandet.
Det finns dock en liten begränsning: ditt tema måste stödja fullständiga, justerade block. Tur att det är lätt. Här är en snabbguide om hur du lägger till omfattande anpassningsstöd till dina WordPress-layouter och hur du designar block med CSS.
Lägg till temastöd
Det första steget är att lägga till en enda kodrad till filen function.php i ditt aktivitetstema. Ladda ner den här filen från din webbplats om du inte redan har gjort det (hitta den i /wp assets/themes/themes-mappen/din mapp och ersätt det aktuella mappnamnet med ditt tema. Kopiera och klistra sedan in följande PHP-kodavsnitt:
add_theme_support( 'align-wide' );
När du har lagt till koden, ladda om den modifierade Functions.php-filen till ditt temas katalog.
Denna kod betyder att du vill aktivera block med full och bred justering. Om du loggar in på WordPress nu och går till sidan/inläggsredigeraren bör du notera att vissa (inte alla) block har de nya inriktningsalternativen “Fullständig” och “Bred”.
Använder du ett kommersiellt eller standardtema?
Om du använder ett standard WordPress- eller affärstema, se till att använda ett undertema. Detta gör att du kan ändra teman utan att förlora dem efter uppdatering.
Grundläggande blocktyp
Att designa ett brett block eller en perfekt passform kan vara lite knepigt. Och det finns flera olika tekniker. Den som används här kommer från detta exempel i CodePen.
@media screen and (min-width: 960px) {
.alignwide, .alignfull {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
}
}
Observera att vi använder CSS-mediefrågor för att bädda in denna stil endast när skärmstorleken är 960 pixlar eller mer. Detta beror på att vi inte nödvändigtvis vill ha den här effekten på mindre skärmar.
I det här fallet använder vi samma stil för båda blockinställningarna. Det är såklart mycket möjligt att designa dem separat så att alla får en unik look framtill.
Notera också en möjlig nackdel: Med denna teknik kan en horisontell rullningslist visas på vissa mönster. Detta kan fixas med CSS genom att lägga till följande i body-elementet:
body {
overflow-x: hidden;
}
Resultat
När vi har aktiverat fullständig och tät låsning är det dags att testa saker. Här har vi skapat en sida med ett omslagsblock med bred orientering.
Om du tittar på framsidan av webbplatsen fungerar omslagsblocket som det är tänkt. Elementet spänner över hela sidans bredd, medan det underliggande innehållet håller sig inom standardtematbredden på 960 pixlar.
Om du bara använder standardformat sticker denna artikel verkligen ut. Det finns fortfarande sätt att göra mer med design.
Genom att lägga till ytterligare CSS-klasser eller rikta in oss på specifika block har vi många designalternativ tillgängliga. Saker som bakgrunder, ramar eller urklippsbanor kan vara unika.
Utökning med WordPress-teman
I standardinstallationen tillhandahåller inte Gutenberg alla funktioner i insticksprogrammet Page Builder. Men inriktningen av blocken tillåter oss att gå in i detta område.
Detta är bra eftersom webbdesign har utvecklats sedan den dag då Classic Editor först dök upp. På den tiden använde webbplatser en stor mängd enhetligt innehåll hela tiden.
Idag är sektioner i full bredd ett av de mest populära och användbara designvalen. Möjligheten att använda detta utan plugins eller temahack gör WordPress ännu bättre för designers.
