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: Att storleksanpassa block korrekt 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.

Med det sagt, låt oss 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
• Metod 2: Ändra blockbredd med hjälp av kolumnblocket
• Metod 3: Ändra blockhöjd och bredd med hjälp av gruppblocket
• Metod 4: Ändra blockhöjd med hjälp av täckblocket
• Bonus: Skapa vackra sidor med avancerade block i SeedProd

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.

För närvarande erbjuder WordPress inte samma storleksändringsalternativ för alla block. Blockredigeraren ger dock många sätt att ändra storlek på höjden och bredden på olika block.

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

Först kan du ändra justeringen av bildblocket genom att klicka på knappen "Justera" i verktygsfältet ovanför blocket.

Här kommer valet av alternativet 'Bred bredd' att göra blocket lika brett som behållaren. Eller så kommer justeringsalternativet 'Full bredd' att göra blocket till hela sidans bredd.

Du kan också ändra storlek på ett block genom att gå till panelen ‘Blockinställningar’ till höger och skrolla ner till avsnittet ‘Inställningar’. Härifrån kan du ändra storlek på ett block från rullgardinsmenyn ‘Bildstorlek’.

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 ändra storlek på dessa block genom att justera höjden och bredden på kolumnerna.

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

Du kan också justera bredden och höjden på block med hjälp av Gruppblocket. Det låter dig gruppera dina önskade block och styla dem tillsammans.

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 har gjort det kommer Gruppblocket att visa tre olika layoutalternativ. För den här handledningen kommer vi att använda '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 ändra layouten kommer också att ändra storleken på de olika blocken. 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 mediabibliotek. Denna bild eller färg kommer att användas som bakgrund för täckblocks.

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, kanske du vill se vår nybörjarguide om Omslagsbild kontra Framhävd bild i WordPress blockredigerare (Nybörjarguide).

Bonus: Skapa vackra sidor med avancerade block i SeedProd

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

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 detta verktyg för att designa hela sin webbplats, och deras användare har älskat det fräscha, moderna utseendet. För att lära dig mer, se vår SeedProd-recension.

Först måste du installera och aktivera pluginet SeedProd. 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.

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.

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å justera bildstorlek och position genom att växla till fliken ‘Avancerat’ högst upp i inställningspanelen.

Klicka sedan bara på panelen "Mellanrum" för att expandera dess inställningar.

Här anger du helt enkelt värden för att justera blockets marginal och stoppning enligt dina behov.

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

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.

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, byt till fliken 'Avancerat' högst upp. Du kan ändra blockets höjd genom att dra i skjutreglaget 'Vertikal utfyllnad'.

För att ändra bredden, dra reglaget ‘Horisontell stoppning’ i den vänstra kolumnen.

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

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 bästa Gutenberg-vänliga WordPress-teman.

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