Hur man ändrar blockhöjd och bredd i WordPress

Att få dina WordPress-block att ha exakt rätt storlek krävde tidigare anpassad CSS eller komplexa lösningar.

Vi vet det eftersom vi har spenderat otaliga timmar med att hjälpa användare med exakt detta problem. Men tack vare de senaste WordPress-uppdateringarna har det blivit mycket enklare att styra blockdimensioner.

Vad som överraskar många är att det faktiskt finns flera inbyggda sätt att justera blockstorlekar i WordPress. Genom mycket experimenterande har vi identifierat de mest pålitliga metoderna som fungerar i olika situationer och teman.

I den här guiden kommer vi att dela de enklaste sätten att ändra blockhöjder och bredder i WordPress.

Varför ändra blockhöjd och bredd i WordPress?

Medan WordPress blockredigerare gör det enkelt att lägga till innehåll, kanske standardblockstorlekarna inte alltid passar den design du har i åtanke. Att justera ett blocks höjd och bredd är ett enkelt sätt att få mer kontroll över sidans utseende.

Här är några viktiga skäl till varför du kanske vill ändra ett blocks storlek:

• Förbättra visuell layout: Du kan skapa mer balanserade och professionellt utseende designer genom att kontrollera exakt storlek på dina element.
• Förbättra läsbarheten: Att justera bredden på textblock kan göra ditt innehåll lättare att läsa, särskilt på breda skärmar.
• Säkerställ responsivitet: Korrekt storleksanpassning av block hjälper ditt innehåll att se bra ut på alla enheter, från stationära datorer till mobiltelefoner.
• Skapa betoning: Att göra ett block större eller mindre kan dra uppmärksamhet till viktiga uppmaningar till handling eller nyckelinformation.

Förståelse för WordPress blockstorlekar

Innan vi går igenom metoderna är det bra att förstå de olika sätten som WordPress låter dig definiera blockdimensioner:

Term	Vad det betyder	När du ska använda den
Pixlar (px)	En fast storleksenhet som inte ändras beroende på skärmstorlek.	Använd pixlar när du vill att något ska förbli exakt lika stort överallt.
Procent (%)	En flexibel enhet som anpassas baserat på föräldrabehållaren.	Använd procent för att få din layout att se bra ut på alla skärmstorlekar.
Bred bredd	En WordPress-justering som gör ett block bredare än innehållsområdet, men inte helskärm.	Använd detta för att få sektioner att sticka ut utan att sträckas över hela sidan.
Helskärm	En WordPress-justering som sträcker ett block kant-till-kant över skärmen.	Prova detta för hjältesektioner, banderoller eller stora bakgrundsbilder.
Minsta höjd	Ställer in den minsta höjd ett block kan ha, men tillåter det att växa vid behov.	Välj detta när du vill att sektioner (som omslagsblock) ska behålla en konsekvent höjd.

Nu ska vi se hur du enkelt kan ändra blockhöjd och bredd i WordPress.

Vi kommer att gå igenom några olika metoder, och du kan använda snabblänkarna nedan för att hoppa till den du vill använda:

Metod 1: Ändra blockets höjd och bredd med hjälp av blockinställningar

I den här metoden visar vi hur du ändrar ett blocks höjd och bredd med hjälp av WordPress standardinställningar.

Även om WordPress inte erbjuder exakt samma storleksändringsalternativ för varje enskilt block, erbjuder blockredigeraren flera kraftfulla sätt att justera höjd och bredd för olika block.

Låt oss börja med bildblocket i WordPress.

För ett bildblock kan du justera dess bredd med hjälp av justeringsalternativen. Klicka på knappen 'Justera' i verktygsfältet ovanför blocket.

Att välja 'Bred justering' gör att bilden spänner över det mesta av ditt innehållsområde, medan 'Heltäckande' gör att den sträcker sig över hela sidan.

Du kan också justera bildens visningsstorlek genom att gå till panelen 'Blockinställningar' till höger.

I avsnittet 'Inställningar' använder du rullgardinsmenyn 'Bildstorlek' för att välja mellan förinställda alternativ som Miniatyr, Medium, Stor eller Full storlek.

Detta ändrar bildens dimensioner så att de matchar den valda förinställningen.

Du kan också justera blockets bredd och höjd genom att skriva in önskad pixelstorlek i rutorna ‘Bredd’ och ‘Höjd’ i avsnittet ‘Bilddimensioner’.

Nedanför kan du också justera blockets storlek i procent.

Ett annat sätt att ändra storlek på ett bildblock är att klicka på själva bilden, vilket tar fram en blå kant med cirkulära handtag.

Dra sedan helt enkelt dessa ankare för att ändra höjd och bredd på bildblocket.

När du är klar, klicka på knappen ‘Uppdatera’ eller ‘Publicera’ för att spara dina inställningar.

Metod 2: Ändra blockbredd med hjälp av kolumnblocket

Om blocket du vill ändra storlek på inte har inbyggda storlekskontroller, som Paragraph-blocket, då är denna metod för dig. Den fungerar som en lösning genom att placera ditt block inuti en behållare som du kan kontrollera.

För den här metoden placerar vi vårt block inuti Kolumnblock. Det är en behållare där du kan lägga till olika block i varje kolumn.

Sedan kan du främst styra bredden på blocken inuti genom att justera kolumnernas bredd. Kolumnens höjd anpassas automatiskt för att passa dess innehåll.

Klicka först på knappen 'Lägg till block' (+) i det övre vänstra hörnet av skärmen.

Härifrån, leta upp och lägg till blocket Kolumner i Gutenberg-redigeraren. Sedan kommer du att bli ombedd att välja en variation.

Därefter visas kolumnlayouten på skärmen, och du kan nu lägga till det block du vill genom att klicka på knappen "Lägg till block (+)" inuti en kolumn.

När blocket har lagts till kan du styra dess bredd genom att justera kolumnen det ligger i.

Välj helt enkelt kolumnen, och i inställningspanelen för blocket till höger kan du ändra kolumnens bredd i avsnittet 'Inställningar'. Detta kommer i sin tur att ändra storlek på blocket inuti det.

När du är klar klickar du helt enkelt på knappen 'Publicera' för att spara dina ändringar.

Så här såg innehållet ut på vår demosida efter att ha ändrat storlek på och anpassat två paragrafblock inuti ett tvåkolumnsblock.

Metod 3: Ändra blockhöjd och bredd med hjälp av gruppblocket

Gruppblocket är utmärkt för att organisera flera block och hantera deras layout och avstånd. Även om det inte direkt ställer in höjden och bredden på enskilda block inuti det, kan du styra gruppens övergripande dimensioner och hur dess innehåll är arrangerat.

Först måste du klicka på knappen "Lägg till block" (+) högst upp. Lokalisera sedan och lägg till gruppblocket i innehållseditor.

När du lägger till det kommer Gruppblocket att erbjuda layoutalternativ som 'Grupp', 'Rad' eller 'Stapel'. För den här handledningen använder vi standard 'Grupp'-layouten.

Därefter visas knappen ‘Lägg till block’ på skärmen. Du kan nu lägga till vilket block du vill.

I den här handledningen lägger vi till och ändrar storlek på ett rubrikblock, ett styckeblock och ett bildblock.

För att lägga till flera block i gruppen, klicka på knappen 'Välj grupp' från verktygsfältet för blocket.

När gruppen är vald, klicka helt enkelt på knappen "Lägg till block" (+) längst ner.

När du har gjort det öppnas sidofältet med blockinställningar till höger. Härifrån kan du enkelt justera layouten, justeringen och orienteringen för alla block.

Att justera dessa layoutinställningar kommer att påverka hur blocken är arrangerade och hur mycket utrymme de upptar inom gruppen. Du kan konfigurera dessa inställningar tills du är nöjd med resultatet.

När du är klar, klicka på knappen ‘Uppdatera’ eller ‘Publicera’ för att spara dina inställningar.

Så här såg gruppblocket ut på vår demowebbplats.

Metod 4: Ändra blockhöjd med hjälp av täckblocket

Den här storleksändringsmetoden är för dig om du vill använda Omslagsblocket och ställa in en specifik minimihöjd för en sektion. Det är idealiskt för att skapa heltäckande banderoller eller hjältebilder som har text och annat innehåll ovanpå.

Klicka först på knappen "Lägg till block" (+) högst upp och leta reda på omslagsblocket.

När du har gjort det kommer du att bli ombedd att välja en färg eller ladda upp en bild från WordPress mediebibliotek. Denna bild eller färg kommer att användas som bakgrund för Omslagsblocket.

Dra och släpp sedan helt enkelt vilket block du vill in i täckblocket.

Därefter måste du klicka på omslagsblocket för att öppna dess blockinställningar i den högra kolumnen.

Härifrån, scrolla ner till panelen 'Dimensioner', där du kan justera höjden på Omslagsblocket med pixlar.

Slutligen, glöm inte att klicka på knappen "Spara ändringar" för att lagra dina inställningar.

För mer detaljerade instruktioner om hur du använder Omslagsblocket kan du se vår nybörjarguide om Omslagsbild kontra framhävda bild i WordPress blockredigerare.

Bonus: Skapa vackra sidor med avancerade block i SeedProd

Du kan enkelt skapa vackra och estetiskt tilltalande sidor med hjälp av SeedProd-pluginet.

Det är den bästa WordPress-sidbyggaren på marknaden som låter dig skapa landningssidor med hjälp av block, som är superenkla att anpassa och ändra storlek efter dina behov.

Flera av våra partner varumärken har använt det här verktyget för att designa hela sin webbplats, och deras användare har älskat den fräscha, moderna looken. För att lära dig mer, se vår SeedProd-recension.

Steg 1: Installera och aktivera SeedProd

Först måste du installera och aktivera SeedProd-pluginet. För mer information kan du läsa vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering måste du gå till sidan SeedProd » Inställningar från din WordPress-instrumentpanel och ange licensnyckeln i rutan ‘Licensnyckel’.

Du hittar licensnyckeln på din kontosida på SeedProd-webbplatsen.

Steg 2: Skapa en ny landningssida

Besök sedan skärmen SeedProd » Landningssidor från administratörs sidomenyn för att börja skapa en landningssida.

Härifrån klickar du bara på knappen 'Lägg till ny landningssida'.

Du kommer nu att tas till skärmen 'Välj en ny sidmall'. SeedProd erbjuder många färdiga mallar som du kan välja mellan.

Efter att du har valt en mall kommer du att bli ombedd att ange ett namn och en URL för din landningssida.

När du har angett dessa detaljer, klickar du helt enkelt på knappen ‘Spara och börja redigera sidan’ för att fortsätta.

Steg 3: Ändra storlek på bildblockets dimensioner

Detta startar SeedProd's dra-och-släpp-sidbyggare, där du nu kan börja redigera din sida. För detaljerade instruktioner, se vår guide om hur man skapar en landningssida med WordPress.

För den här handledningen kommer vi att lägga till och ändra storlek på ett bildblock och ett knappblock.

Först måste du dra bildblocket från blockpanelen till vänster och släppa det var du vill på sidan.

Klicka sedan på Bild-blocket för att öppna dess blockinställningar i den vänstra kolumnen. Härifrån kan du ladda upp en bild från ditt mediabibliotek.

Därefter kan du ändra blockets höjd och bredd med pixlar eller procent.

Du kan också finjustera avståndet runt och inom bildblocket genom att växla till fliken 'Avancerat' högst upp i inställningspanelen.

Klicka sedan på panelen 'Avstånd' för att expandera dess inställningar.

Här kan du lägga till värden för att justera blockets marginal (utrymme utanför blocket) och stoppning (utrymme inuti blocket) enligt dina behov.

Du kan justera marginalen och utfyllnaden för de övre, nedre, vänstra och högra områdena av blocket.

Steg 4: Justera höjden på avståndsblocket

Med Seedprod kan du också lägga till ett "Spacer"-block mellan två olika block för att skapa lite utrymme mellan dem.

Först måste du lokalisera och lägga till blocket 'Avståndshållare' från den vänstra kolumnen. Klicka sedan på det för att öppna dess inställningar.

Nu kan du styra höjden på avståndshållaren med skjutreglaget 'Höjd'.

Avståndshållarblocket kan hjälpa dig att skapa en webbplats utan rörighet.

Steg 5: Konfigurera stoppning för knappblocket

Du kan också ändra bredden och höjden på andra block på samma sätt, inklusive video-, rubrik- och knappblock.

Hitta helt enkelt knappblocket i den vänstra kolumnen och dra det till din sida.

Därefter behöver du klicka på knappen för att öppna dess blockinställningar.

Härifrån, växla till fliken 'Avancerat' högst upp. Du kan öka knappens vertikala storlek genom att dra reglaget 'Vertikal stoppning', vilket lägger till utrymme ovanför och under knapptexten.

För att öka dess horisontella storlek, dra reglaget 'Horisontell stoppning', vilket lägger till utrymme till vänster och höger om texten.

När du är klar, glöm inte att klicka på knappen "Spara".

Vanliga frågor om att ändra blockbredd och höjd

Här är några frågor som våra läsare ofta har ställt om att ändra blockbredd och höjd i WordPress:

Hur minskar jag storleken på ett block i WordPress?

Du kan minska storleken på ett block i WordPress genom att justera dess bredd, stoppning eller teckenstorlek i blockinställningarna. Börja med att välja blocket och sänka dimensionerna eller avståndet tills det ser bra ut.

Hur ändrar jag storlek på ett textblock i WordPress?

Du kan ändra storlek på ett textblock i WordPress genom att ändra teckenstorleken i Typografiinställningarna. Du kan också justera radhöjd eller avstånd om texten fortfarande känns för stor.

Hur justerar jag blockavstånd i WordPress?

Du kan justera blockavstånd i WordPress genom att redigera marginal- och stoppningsinställningarna. Vi rekommenderar att du minskar stoppningen först om det finns för mycket utrymme inuti blocket.

Hur ändrar jag storlek på en webbsida i WordPress?

Du kan ändra storlek på en webbsida i WordPress genom att ändra layoutinställningarna i ditt tema eller sidbyggare. Du kan prova att växla mellan "boxed" och "full-width" layouter beroende på den design du vill ha.

Hur krymper jag storleken på en webbplats i WordPress?

Du kan krympa storleken på en webbplats i WordPress genom att minska teckensnittstorlekar, avstånd och containerbredder. Börja med att göra små justeringar i olika element istället för att ändra allt på en gång.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du ändrar blockbredd och höjd i WordPress. Du kanske också vill se vår artikel om hur man lägger till och justerar bilder i WordPress blockredigerare och våra toppval för de bästa Gutenberg-vänliga WordPress-teman.

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.