Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Guide för Beginnare: Så här använder du WordPress Block Patterns

Det har aldrig varit enklare att bygga WordPress-webbplatser, och blockmönster är en stor del av detta. När vi först upptäckte dem såg vi deras potential att påskynda vårt arbetsflöde.

Vi använder nu blockmönster som återanvändbara block för CTA:er och knappar för kupongerbjudanden – de har blivit viktiga för hur vi skapar innehåll.

Blockmönster gör det enkelt att få professionell design utan att behöva kunskaper i kodning eller webbdesign.

De är förbyggda kombinationer av block som du snabbt kan infoga och anpassa, vilket ger dig ett försprång i stället för att börja från början varje gång.

Oavsett om du bygger din första WordPress-webbplats eller vill arbeta snabbare, visar den här nybörjarguiden hur du hittar, använder och skapar blockmönster som sparar tid i varje projekt.

WordPress block patterns explained for beginners

Här är de ämnen som vi kommer att täcka i denna guide:

Vad är WordPress blockmönster?

WordPress blockmönster är fördesignade samlingar av block som hjälper dig att skapa anpassade layouter snabbt och effektivt. De har varit en game-changer för oss när vi byggt sidor med korta deadlines.

Blockredigeraren i WordPress är intuitiv och gör det möjligt att utforma vackra layouter med innehållsblock. Dessa innehåller text, bilder, knappar och andra element som du kan ordna efter dina behov.

WordPress block editor

Men det är inte alla användare som har tid eller designkunskaper nog att skapa layouter från grunden varje gång. Vi har själva ställts inför den här utmaningen, och det är därför blockmönster har varit ett så värdefullt verktyg i vårt arbetsflöde.

Blockmönster erbjuder en enkel lösning. WordPress innehåller en mängd olika förbyggda mönster som standard, vilket gör det enkelt att lägga till professionellt snygga layouter på några sekunder.

Patterns in WordPress block editor

Populära WordPress-teman innehåller ofta sina egna anpassade mönster. Dessa mönster sparar ännu mer tid genom att ge dig färdiga mönster som är skräddarsydda för ditt tema.

Mönstren kan innehålla layouter som flerkolumniga designer, kombinationer av media och text, sektioner med uppmaningar till handling, rubriker och anpassade knappar. Denna flexibilitet gör dem lämpliga för en mängd olika innehållstyper.

Du kan också hitta fler blockmönster på WordPress.org-webbplatsen. Om du tycker om att designa kan du till och med skapa och dela dina egna mönster med WordPress-communityn.

Nu ska vi visa dig hur du använder blockmönster i WordPress för att skapa fantastiska layouter för din webbplats.

Ta din WordPress-design till nästa nivå 🎨

Att använda blockmönster är ett bra sätt att förbättra designen på din webbplats. Men om du vill ha en helt anpassad WordPress-webbplats kan du överväga vår tjänst WordPress Site Design.

  • Anpassade layouter: Utöver blockmönster skapar vi design som är skräddarsydd för ditt varumärke.
  • Professionella resultat: 16+ års erfarenhet av att leverera vackra, funktionella WordPress-webbplatser.
  • Tidsbesparande lösningar: Vi tar hand om designen så att du kan fokusera på att utveckla ditt företag.

Låt inte designbegränsningar hålla dig tillbaka. Låt WPBeginners tjänst för design av WordPress-webbplatser bygga din drömsida.

Så här använder du block patterns i WordPress

Som standard levereras WordPress med flera användbara block patterns som du kan använda på din website. Your WordPress theme och vissa tillägg kan också add to sina egna mönster.

För att använda block patterns måste du editera den WordPress post eller page där du vill använda block pattern.

På skärmen för redigering av inlägg klickar du på knappen Lägg till block [+] för att öppna blockinläggaren. Här kan du växla till fliken “Patterns” för att visa tillgängliga blockmönster.

Block patterns in post editor

Du kan rulla ner för att se available block patterns.

Du kan också view block patterns i olika kategorier, till exempel utvalda, knappar, kolumner, headers med mera.

Alternativt kan du också klicka på knappen “Utforska alla mönster” för att se blockmönster.

Här kan du se större previews i en popup.

Explore all patterns

När du har hittat ett mönster som du vill prova klickar du bara för att infoga det i innehållsområdet på din post eller page.

Mönstret kommer att visas i content editor med placeholder-innehåll som du kan edit och ersätta med ditt eget.

Edit block pattern

Du behöver bara peka och clicka på ett block i mönstret för att editera och ändra dess content enligt dina obligatoriska önskemål.

Du har fortfarande alla alternativ som du normalt har för varje block. Om det t.ex. är ett omslagsblock kan du ändra omslagsfärg eller bakgrundsbild.

Du kan add to så många mönster som du behöver för ditt blogginlägg eller din page. Du kan också ta bort ett pattern för att ta bort det från en post eller page, precis som du skulle ta bort ett WordPress-block.

Remove cover block

Med hjälp av block patterns kan du snabbt skapa beautiful layouts för dina artiklar och din WordPress site.

I slutändan hjälper block patterns dig att save tid som du annars skulle spendera på att manuellt ordna block varje gång du behöver add to en header, gallery, knappar och mer.

Hur man skapar mönster i Block Editor

WordPress gör det superenkelt att skapa mönster i block editor som du kan återanvända senare.

När du redigerar ett inlägg eller en sida markerar du bara de block som du vill inkludera i ditt mönster och klickar på “Skapa mönster”.

Create pattern block editor

Du kan välja flera block genom att trycka på shift-tangenten på ditt tangentbord och clicka på dem.

Men om dina block är ordnade på ett sätt som gör det svårare att välja dem kan du använda List view under tabben Document Overview.

Select multiple blocks in List View

Om du skapar ett mönster kommer en popup upp.

You will need to provide a name for your pattern and choose a category.

New pattern name and settings

Under det ser du en toggle för att hålla mönstret synkroniserat eller osynkroniserat.

Synkade mönster: När you eller andra användare editar mönstret, kommer dessa ändringar att saved nästa gång mönstret används.

Osynkroniserade mönster: Ändringar som görs i dessa mönster efter att de har infogats i ett inlägg eller en sida påverkar inte det ursprungliga mönstret.

Klicka på knappen “Skapa” för att spara ditt mönster.

Nästa gång du vill använda det mönstret behöver du bara leta efter dess namn eller kategori i block inserter.

Reuse custom pattern

Så här skapar du mönster i Site Editor

Om du använder ett block editor-tema med fullt stöd för Site Editor kan du också skapa mönster i Site Editor.

Öppna Site Editor genom att gå till sidan Appearance ” Editor.

You will now land in the site editor interface.

Site Editor screen

Klicka på “Mönster” i den vänstra sidofältet för att fortsätta.

Du kommer att se alla tillgängliga mönster och kategorier.

För att skapa ett nytt mönster klickar du på knappen Lägg till [+] och väljer sedan “Skapa mönster”.

Create pattern in site editor

Detta kommer att visa en popup där du måste ange ett namn för ditt mönster, välja en kategori och bestämma om du vill att mönstret ska synkroniseras eller osynkroniseras.

Klicka på “Skapa” för att fortsätta.

Configure custom pattern settings

WordPress skapar en tom duk där du kan skapa ditt mönster.

Härifrån kan du lägga till block för att designa ditt mönster.

Design pattern in site editor

När du är klar, glöm inte att klicka på knappen “Save” för att spara ditt mönster.

Hantering av mönster i WordPress

Om du använder ett block editor-tema med fullt stöd för Site Editor kan du hantera patterns i Site Editor.

Öppna Site Editor genom att gå till sidan Appearance ” Editor.

Site Editor screen

På vyn Mönster kan du clicka på ett mönster för att edit:a det. You can also click on the three-dot menu next to a pattern to duplicate, exportera eller delete it.

Om du vill hantera alla dina mönster klickar du på fliken “Hantera alla mina mönster” i sidofältet.

Manage patterns shortcut

Då visas en lista över alla dina mönster. Nu kan du redigera, exportera eller ta bort dem.

Om du använder ett klassiskt tema (WordPress-teman som inte stöder den fullständiga webbplatsredigeraren) kan du hantera mönster genom att besöka sidan Utseende “ Mönster.

List view to manage all your patterns

Härifrån kan du add, delete och exportera dina block patterns.

Tänk på att även vissa klassiska teman som Hestia nu hanterar mönster på samma sätt som teman för fullständig webbplatsredigering, medan andra fortfarande använder det äldre gränssnittet som visas i skärmdumpen nedan.

Så hur du hanterar blockmönster beror verkligen på vilket tema du använder.

Managing patterns in classic themes

Hitta fler block patterns att använda på din website

Som standard levereras WordPress med några vanligt förekommande block patterns. WordPress teman kan också add to sina egna mönster till din website.

Du kan dock hitta mycket fler block patterns än de som är tillgängliga från block inserter på din website.

Gå bara till WordPress Patterns Directory website för att view många fler block patterns.

WordPress block patterns directory

Här hittar du blockmönster som har skickats in av WordPress-communityn.

För att använda ett av dessa blockmönster klickar du bara på för att visa mönstret och sedan på knappen “Kopiera mönster”.

Copy block pattern

Därefter måste du gå tillbaka till din WordPress-blogg och redigera inlägget eller sidan där du vill insert detta block pattern.

På redigeringsskärmen högerklickar du bara och väljer “Paste” i webbläsarmenyn eller trycker på CTRL+V (Command + V på Mac).

Paste pattern in block editor

Hur du skapar och delar dina block patterns

Vill du skapa dina egna WordPress block patterns och dela med dig av dem till hela världen?

WordPress gör det superenkelt att skapa block patterns och använda dem på dina egna websites eller dela dem med alla WordPress användare över hela världen.

Besök helt enkelt WordPress Pattern Directory-webbplatsen och klicka på länken “Nytt mönster”.

Create new pattern in WordPress.org pattern directory

Obs: Du måste logga in eller skapa ett gratis WordPress.org-konto för att spara dina mönster.

När du har loggat in kommer du till sidan för blockmönsterredigering. Den är identisk med WordPress standardblockredigerare och du kan använda den för att skapa ditt mönster.

Block pattern creator

Lägg bara till block för att skapa din layout för mönstret.

Du kan använda layoutblock som gillar grupp, cover, gallery, och mer för att organisera din layout.

Editing block pattern layout

Det finns också royaltyfria images available att använda i dina media block. Med mediabiblioteket i WordPress kan du enkelt hitta och använda dessa images i dina mönster.

När du är nöjd med ditt block pattern kan du save det som ett draft eller submit det till pattern directory.

Innan du kan submitte your block pattern till pattern directory, se till att du har läst riktlinjerna för block pattern directory.

Du kan hantera alla dina blockmönster genom att klicka på länken “My Patterns”. Där visas alla blockmönster som du har delat, utkast till mönster och mönster som du har favoritmarkerat.

Manage patterns in WordPress.org directory

Om du bara vill skapa block patterns för eget bruk kan du save dem som drafts. Därefter kan du copy and paste dem från sidan My Patterns till din website i WordPress.

Skapa WordPress Block Patterns manuellt

Du kan också skapa block patterns manuellt och add to ditt WordPress-tema eller custom snippets plugin som WPCode.

Skapa helt enkelt en new post eller page i WordPress. I innehållsområdet använder du block för att skapa en custom layout eller block collection som du vill save som ett pattern.

Switch to the code editor

Därefter växlar du till läget Code Editor.

Härifrån måste du kopiera all content som du ser i code editor.

Copy raw code blocks

Öppna sedan en vanlig textredigerare som Notepad och klistra in den koden. Du kommer att behöva den i nästa steg.

Nu är du redo att registrera dina block som ett mönster.

För att göra det kopierar du bara och klistrar in följande kod i ditt temas functions.php-fil eller i ett kodsnuttsplugin som gratispluginet WPCode (rekommenderas).

För mer details, här är den kompletta guiden för att lägga till custom code i WordPress.

function wpb_my_block_patterns() {
    register_block_pattern(
        'my-plugin/my-awesome-pattern',
        array(
            'title'       => __( 'Two column magazine layout', 'my-theme'),
            'description' => _x( 'A simple magazine style two-column layout with large image and stylized text', 'my-theme' ),
            'categories'  => array( 'columns' ),
            'content'     => ' Your block content code goes here'
            )
    );
}
add_action( 'init', 'wpb_my_block_patterns' );

Nu kopierar du och klistrar in de råa blockdata som du kopierade tidigare som värde för innehållsparametern. Med andra ord måste du ersätta texten som säger “Din blockinnehållskod hamnar här” med din blockkod. Var noga med att låta de enkla citattecken som omger texten vara kvar.

Glöm inte att ändra titeln och beskrivningen till dina egna och spara ändringarna.

You can now visit your website and edit a post or page. Ditt nyligen registrerade block pattern kommer att visas i block inserter.

Add custom block pattern to your post

Så här tar du bort ett block pattern i WordPress

Du kan enkelt ta bort eller avregistrera ett blockmönster i WordPress. Låt oss säga att du vill ta bort det blockmönster som du skapade i exemplet ovan.

Allt du behöver göra är att kopiera och klistra in följande kod i ditt temas functions.php-fil eller WPCode:

function wpb_unregister_my_patterns() {
  unregister_block_pattern( 'my-plugin/my-awesome-pattern' );
}
add_action( 'init', 'wpb_unregister_my_patterns' );

I det här exemplet är "my-plugin/my-awesome-pattern ” namnet på det mönster vi använde när vi registrerade det.

Du kan använda den här koden för att avregistrera alla block patterns som skapats av your theme eller ett plugin. Allt du behöver veta är det namn som användes för att registrera mönstret.

Remove WordPress Core-mönster

WordPress core-mönstren är tillgängliga för alla användare av WordPress. Detta innebär att de kan vara överanvända och kanske inte ens matchar resten av ditt WordPress theme.

Om du inte vill använda ett mönster kan du helt enkelt undvika att lägga till det i ditt innehåll. Men om du driver en WordPress-webbplats med flera författare kanske du vill hindra alla användare från att använda dessa kärnmönster.

För att ta bort alla WordPress-kärnmönster måste du lägga till följande kod i ditt temas functions-fil eller WPCode:

remove_theme_support( 'core-block-patterns' );

Vad hände med återanvändbara Block?

Block patterns och återanvändbara block syftade båda till att lösa ett liknande problem: att ge användare alternativ för att enkelt kunna add to vanligt förekommande block.

För att fixa detta sammanfogade Core WordPress-teamet återanvändbara block till mönster.

För att få samma funktionalitet som återanvändbara block kan du nu använda Synced Patterns. När du eller andra användare editerar mönstret, kommer dessa ändringar att saved nästa gång mönstret används.

Configure custom pattern settings

Vanliga frågor och svar

Här är några frågor som ofta ställs av våra läsare om blockmönster.

Var kan jag hitta fler blockmönster?

Förutom standardmönstren i WordPress kan du utforska WordPress Patterns Directory online för ännu fler alternativ som skapats av communityn.

Kan blockmönster göra min webbplats långsammare?

Nej, blockmönster i sig påverkar inte webbplatsens hastighet. De är ett sätt att strukturera innehåll, men se till att du använder optimerade bilder och block för bästa prestanda.

För tips, se vår ultimata guide om WordPress hastighet och prestanda.

Ytterligare resurser

Om du vill anpassa designen på din WordPress-webbplats kan du använda följande resurser:

Vi hoppas att den här guiden hjälpte dig att lära dig hur du använder WordPress block patterns på din website. Du kanske också vill se vår guide om hur du bemästrar WordPress Block Editor eller ta en titt på dessa praktiska WordPress-genvägar för att bli mer produktiv.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

8 kommentarerLeave a Reply

  1. Johann

    In what table in WordPress are the patterns stored?

    • WPBeginner Support

      Those should normally be stored in wp_posts

      Admin

  2. Jim Weisman

    “To do that, simply copy and paste the following code into your theme’s functions.php file or a site-specific plugin.” my question is where in the function.php file at the beginning or end or somewhere else

    • WPBeginner Support

      We normally recommend the bottom of your functions.php file to prevent any issues as well as make it easier to find in the future.

      Admin

  3. Jay Castillo

    Thanks for explaining what block patterns are.

    You mentioned that reusable blocks are not as flexible compared to block patterns because changes to a reusable block will also change all pages/posts where you used that reusable block. But isn’t that the point of using a reusable block?

    Just wanted to make it clear to other wordpress users that if you don’t want changes to a reusable block to appear globally, you can simply add the reusable block to a post/page and convert it to a regular block BEFORE making any changes/tweaks. Other instances with the reusable block won’t be affected by the changes.

    • WPBeginner Support

      Converting it will allow it to be changed safely and that is useful. For most, it is not always intuitive that changing the block in the post itself instead of requiring an action to update the block across the site without the block warning that will happen or adding markup to note that you are editing a reusable block.

      Admin

  4. John Mason

    I have started from scratch again.

    I have made a mess of things in the past with my website.

    But am now going to learn the ropes.

    • WPBeginner Support

      We hope our guides help get you up to speed.

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.