Vill du lära dig hur du väljer och använder kapslade block i WordPress?
Gutenbergs utvalda funktion för nästlade block allow you to add multiple blocks within a parent block. Då kan du customize olika blockelement samtidigt, organisera postens content effektivt och få tillgång till mer designflexibilitet.
I den här artikeln visar vi dig hur du enkelt kan välja och använda WordPress Nested Blocks.
Vad är WordPress Nested Blocks?
WordPress Gutenbergs funktion för nästlade block allow you att insertera (eller ”nästla”) ett eller flera block inom ett annat block.
Inga annonser block hjälper dig att skapa mer komplexa layouts på din WordPress website genom att lägga till flera block inuti varandra. Detta allow mer flexibilitet när du utformar och formaterar content för pages och posts.
You kan till exempel placera flera Imagely-block i ett Group-block för att displayed en uppsättning foton från en viss händelse eller en serie konstverk som skapats med en viss teknik.
Dessutom tillåter funktionen för nästlade block att du kan editera enskilda block separat. Detta innebär att du kan customize varje block efter dina behov utan att påverka de andra blocken.
Detta leder i sin tur till bättre innehållsorganisation, gör your content mer attraktivt och effektiviserar den kreativa processen.
Med detta sagt, låt oss se hur du enkelt kan välja och använda WordPress Gutenberg kapslade block.
Så här använder du WordPress Nested Blocks
Du kan enkelt lägga ihop flera block med hjälp av blocket Grupp eller Column i Gutenberg block editor.
Först måste du öppna en befintlig eller new post i block editor från WordPress admin sidebar.
Härifrån klickar du helt enkelt på knappen ”+” för att lägga till block högst upp till vänster på vyn och hittar Group-blocket. När du klickar på det och lägger till det på sidan måste du välja en layout för de block som du ska lägga in tillsammans.
I denna tutorial kommer vi att välja layouten ”Group”.
Därefter klickar du helt enkelt på knappen ”+” på vyn för att börja lägga till content i det överordnade blocket.
I denna tutorial kommer vi att lägga till ett Image block.
När du har lagt till blocket klickar du bara på knappen ”Grupp” i blockets toolbar högst upp för att välja det överordnade blocket.
Därefter måste du klicka på knappen ”+” för att öppna blockmenyn igen, där du kan välja andra block att add to.
Så här konfigurerar du Settings för WordPress Nested Block
När du har kapslat in flera block kan du konfigurera deras enskilda Settings genom att clicka på varje block. Då visas inställningarna för blocket i den högra columnen på vyn.
Härifrån kan du justera bakgrundsfärg, textfärg och storlek på de enskilda blocken utan att påverka de andra blocken som är kapslade i dem.
För att konfigurera settings för alla de kapslade blocken tillsammans måste you click the ”Group” button in the block toolbar at the top. Detta kommer att öppna inställningarna för parent block i den högra colonnen.
Du kan nu konfigurera justering, orientering, bakgrundsfärg, textfärg och typografi för alla de nästlade blocken.
Tänk på att dessa Settings kommer att påverka alla block som är kapslade i parent-blocket.
Du kan också konvertera ett befintligt enskilt block till nästlade block genom att clicka på knappen ”Options” i den övre toolbaren för ett block.
Då öppnas en meny där du måste selecta alternativet ”Create Pattern”.
När du har gjort det kommer en prompt att öppnas där du uppmanas att ge ett namn och välja en kategori för ditt nya återanvändbara block.
Klicka sedan på knappen ”Create” för att store dina settings.
När du är nöjd, glöm inte att klicka på knappen ”Publicera” eller ”Update” för att save your changes.
I vårt exempel har vi kapslat in ett block med Rubrik, Image och Paragraph i ett Group-block.
Så här såg de nästlade blocken ut på vår demo website.
Bonus: Använd tillägget Wayfinder för att enkelt välja nästlade block
Ibland kan det vara svårt att välja ett enskilt block och konfigurera det när det finns flera block som är kapslade i varandra.
Lyckligtvis gör Wayfinder-pluginet det superenkelt att välja kapslade block från ett parent block och berättar till och med typen och klassen för blocken.
Först måste du installera och aktivera Wayfinders plugin. För mer instruktioner, se vår guide för nybörjare om hur du installerar ett plugin för WordPress.
Efter aktivering, heada över till Settings ” Wayfinder page från WordPress admin sidebar.
När du väl är där kommer alla Settings redan att vara aktiverade. Du behöver bara avmarkera boxen bredvid de inställningar som du inte vill använda.
Om du till exempel vill att Wayfinder ska visa blocktyper för alla block i editorn, ska du låta boxen vara kontrollerad bredvid alternativet ”Display block type”.
Men om du inte vill att pluginet ska visa blockklasser, avmarkerar du bara boxen bredvid det alternativet.
Glöm inte att klicka på knappen ”Save Changes” när du har konfigurerat inställningarna.
Därefter måste du öppna ett befintligt eller nytt inlägg i WordPress block editor från instrumentpanelen.
När du väl är där och hoverar musen över ett inre block visas en kontur med dess namn. You will also be able to see the outline and name of any nested blocks within the parent block.
Detta hjälper dig att identifiera alla de olika block som är kapslade i ett Group- eller Column-block.
Härifrån kan du enkelt selecta ett enskilt block från parent-blocket för att konfigurera dess settings.
Du kan också välja alla nested blocks samtidigt genom att helt enkelt clicka på ”Columns” eller ”Group” heading. Då öppnas inställningarna för parent block i den högra colonnen.
När du har konfigurerat inställningarna för blocket klickar du bara på knappen ”Update” eller ”Publicera” för att save your changes.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du väljer och använder WordPress kapslade block. Du kanske också vill se vår Step-by-Step tutorial om hur du ändrar höjd och bredd på block i WordPress och våra toppval för de WordPress tillägg som måste finnas för att hjälpa din site att växa.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ralph
I’m using nest blocks for image on left and text on the right and I want it to stay that way not only on desktop but also on mobile but it just doesn’t It places text under the image. Is this normal in case of mobile or am I doing something wrong?
WPBeginner Support
It would depend on the theme but it is very common to happen on mobile to ensure the text remains readable on mobile.
Administratör
Jiří Vaněk
Thanks to these articles, I’m slowly getting acquainted with Gutenberg. I’m used to very simple solutions from Elementor, and here everything seems a bit complicated or rather unfamiliar to me. However, sometimes I come across people who want help with a website exclusively using Gutenberg and nothing else. So, I appreciate these guides where I can get my hands on, try out, and learn things that might be completely ordinary for someone using Gutenberg.