Gutenberg-blockredigeraren för WordPress har förändrat hur vi skapar innehåll i CMS. Men det öppnar också upp flera nya möjligheter i frontend.
En av de mest intressanta utvecklingen inom detta område är förmågan att lägga till “hela” eller “breda” block på en sida eller inlägg. Denna funktion gör att Gutenberg-blocket kan avvika från standardbredden för tematinnehållet, vilket nästan är omöjligt i den gamla klassiska redaktören.
Det finns olika användningsområden för block med full eller bred inriktning. Till exempel kan du introducera ett nytt sidavsnitt med ett ark med full bredd som täcker texten på bildens bakgrund. Eller så kan du använda den här funktionen för att inte göra uppmaningen till åtgärdsområdet. Nästan alla typer av innehåll kan läggas till här, som är en del av överklagandet.
Det finns emellertid några begränsningar: Ditt tema måste stödja block som är fulla och anpassade. Lyckligtvis var det enkelt. Nedan följer en snabbguide om hur du lägger till omfattande nivelleringsstöd till din WordPress-layout och hur du utformar block med CSS.
Lägg till temasupport
Det första steget är att lägga till en rad med kod till filen function.php i ditt aktiva tema. Ladda ner den här filen från din webbplats om du inte redan har (hittat i / wp-innehåll / teman / katalog / ditt tema och byt namn på den aktuella katalogen med “ditt tema”). Kopiera och klistra sedan in följande PHP-utdrag:
add_theme_support( 'align-wide' );
När du har lagt till koden läser du in den ändrade filen Functions.php i mappen med ditt tema.
Den här koden innebär att du vill aktivera block med full och bred justering. Om du går in i WordPress nu och går till Page / Post Editor, bör du vara medveten om att vissa (inte alla) blocken har nya inriktningsalternativ “Full” och “Width”.
Använder du ett kommersiellt eller standardtema?
Om du använder ett standard WordPress- eller företagstema, se till att använda ett sekundärt tema. Detta gör att du kan göra ändringar i teman utan att förlora dem efter uppdateringen.
Grundläggande blockstil
Att utforma block som är breda eller helt parallella kan vara lite komplicerade. 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 den här stilen endast när skärmstorleken är 960 pixlar eller mer. Det beror på att vi inte vill ha denna effekt på mindre skärmar.
I det här fallet använder vi samma stil för båda blockeringsinställningarna. Naturligtvis är det möjligt att designa det separat så att alla har en unik frontvy.
Observera också de eventuella nackdelarna: Med denna teknik kan horisontella rullningslister visas i flera utföranden. Detta kan korrigeras med CSS genom att lägga till följande i kroppselementet:
body {
overflow-x: hidden;
}
Resultatet
När vi har aktiverat den fulla och snäva låsfunktionen är det dags att testa allt. Här har vi gjort en sida med ett stängningsblock med en bred orientering.
Om du ser framsidan av webbplatsen fungerar stängningsblocket som avsett. Detta element inkluderar hela bredden på sidan, medan innehållet nedan förblir i standardtemabredden på 960 pixlar.
Om du bara använder standardformatet sticker det här objektet verkligen ut. Det finns fortfarande många sätt att göra mer med design.
Genom att lägga till ytterligare CSS-klasser eller rikta in sig på specifika block har vi ett stort arsenal av designalternativ tillgängliga. Saker som bakgrunder, ramar eller punktklipp kan vara unika. Obs Lägg till.
Expandera med ett WordPress-tema
I en standardinstallation erbjuder Gutenberg inte alla Page Builder-pluginfunktioner. Men justeringen av blocken tillåter oss att komma in i detta område.
Vilket är bra eftersom webbdesign har utvecklats sedan Classic Editor började. Vid den tiden använde webbplatsen enhetligt innehåll hela tiden.
För närvarande är delar med full bredd bland de mest populära och användbara designalternativen. Möjligheten att använda detta utan plugins eller temahackning gör WordPress bättre för designers.
