Så här ställer du in bildbakgrund i WordPress

Så här ställer du in bildbakgrund i WordPress
WordPress Bakgrundsbild för hemsida med andra element.

Det finns fler sätt att lägga till bakgrundsbilder i WordPress. Från grundläggande till mycket avancerade med ändring av temakod. Vi är dock glada över att kunna presentera ett användarvänligt verktyg som är perfekt för webbplatsadministratörer utan kunskap om kodning och design. Citadela Pro insticksprogram har många funktioner och inställningar för anpassning av webbplatsen.

Prova de kraftfulla blocken, inställningarna och funktionerna i pluginet Citadela Pro. Du kan utforska det perfekta verktyget som gör att du kan lägga till bakgrundsbilder till WordPress-sidor, inlägg och anpassade inläggstyper.

Cluster är ett Gutenberg-block i WordPress som gör det möjligt att lägga till en bakgrundsbild. Det multifunktionella elementet gör att du kan ändra bakgrunden WordPress från dess standard. Du kan inte bara lägga till en bakgrundsbild, utan även kombinera den med andra block. Du får många variationer och mångsidighet.

I kombination med Sidans titelblockMed Gutenberg får du enkelt en fantastisk webbplats. Du kan lägga till fler Gutenberg-block och anpassa bakgrundsbilden i WordPress. Du kan också spara en uppsättning block som återanvändbara block och lägga till ett tema var som helst på din webbplats. Så du kan ändra bakgrunden WordPress webbplats på en gång.

Så här lägger du till en bakgrundsbild i WordPress med Gutenberg-blocket

Kom igång nu

Engångsbetalning. 30 dagars pengarna-tillbaka-garanti.

WordPress Bakgrundsbild genom klusterblock

Vi presenterar ett praktiskt block som vi har skapat för WordPress Gutenberg-block för bakgrundsbild - Cluster-block. Det är en del av vår egen blockgrupp. Citadela Pro-plugin har många funktioner som hjälper dig att skapa en vacker webbplats. Alla AitThemes anpassade block finns tillgängliga i Citadela Pro insticksprogram.

Vänligen läs Dokumentation om Cluster Block för detaljerade inställningar.

Med Cluster Block kan du gruppera flera block till ett. Du kan effektivt arbeta med hela den klustrade gruppen som om det vore ett block. Klusterbredden kan ställas in till full sidbredd, vilket innebär att du har ett extra stort utrymme för att lägga till olika block.

Klustret kommer inte att sträcka sig till full bredd om:

  • Du har ett aktivt sidofält
  • Om du använder kolumner kommer det att begränsa utrymmet för Cluster

Eftersom vissa av WordPress kärnblock endast kan anpassas till innehållsbredden, erbjuder Cluster Block större variation när du bygger din webbplats. En annan bra funktion är att du kan WordPress en bakgrundsbild, ändra dess färg eller ställa in överlagring av bakgrundsbilden. På så sätt kan bakgrunden anpassas till webbplatsens design.

I den här artikeln kommer vi att visa dig:

Hur man lägger till Cluster block

Cluster-blocket är ett premiumblock och är endast tillgängligt om du installerar och aktiverar Citadela Blocks plugin. När du har installerat plugin-programmet läggs Cluster-blocket automatiskt till i WordPress blockredigerare och du kan omedelbart börja arbeta med det.

Klusterblock kan läggas till i både inlägg och sidor. Klicka bara på "+" -tecknet i toppfältet eller var som helst på redigeringsskrivbordet. Efter det är det bara att söka efter Cluster block.

Lägg till Cluster-block i WordPress-redigeraren genom att klicka på "+"
Lägga till klusterblock genom att klicka på "+"

Det andra alternativet för att lägga till Cluster-block är att skriva "/" och blocknamnet efter det. Cluster-blocket är då klart att användas.

Lägg till klusterblock med snedstreck "/"
Lägga till klusterblock med hjälp av snedstreck "/"

Gruppering av block med hjälp av Cluster

Huvudfunktionen i Cluster block är att gruppera flera block till ett. Låt oss ta en titt på hur det fungerar. Om du infogar Cluster-blocket på din sida ser du omedelbart en platshållare "Infoga fler block här". Om du klickar på den får du upp en lista över alla tillgängliga block. Du kan också söka efter önskat block med hjälp av sökfältet högst upp i listan.

Process för att välja kapslade block
Process för att välja och infoga nästlade block

Alla kapslade block kommer att ha alla standardalternativ och inställningar tillgängliga. Om du till exempel infogar ett bildblock har du möjlighet att ladda upp bilden eller välja den från mediebiblioteket.

Med Cluster-blocket kan du t.ex. skapa ett iögonfallande avsnitt på din webbplats för att presentera dina senaste arbeten. Lägg till bilder från din portfolio och ställ sedan in bakgrundsbilden under den. Du har just skapat en fin länk till din portfolio.

Bildblock inbäddat i klusterblock
Portföljwebbplats skapad med hjälp av Cluster block

Cluster block kan också användas för att skapa en attraktiv produktpresentation. Du kan ställa in produktbilden som sektionsbakgrund och välja dess färg. Serviceblock kan också nischas inuti Cluster-block.

Serviceblock inbäddat i klusterblock
Använd Service block i Cluster block för att presentera din produkt (och dess funktioner) på ett mer attraktivt sätt

Flera block i ett och samma

Om du vill lägga till flera nästlade block i Cluster kan du använda Columns-blocket. Med hjälp av Column-blocket kan du lägga till flera block sida vid sida. Varje kolumn kan ha olika innehållstyper, t.ex. bild, stycke, listor eller knapp.

Ett typiskt exempel på flera kolumner i kombination med klusterblock är en webbplats med en sida.

Kolumnblock inbäddat i klusterblock
Hur kan klusterblock användas i en webbplats med en sida

Grundläggande inställningar i verktygsfältet: Alternativ för justering av innehåll

Som standard är klusterblockets bredd inställd på innehållets storlek. Du kan ändra detta beteende i verktygsfältet. Det finns följande alternativ tillgängliga:

  • Innehållsstorlek - standardalternativ, klusterblocket har samma bredd som innehållet.
  • Bred storlek - innehållet i klustret är bredare än innehållets bredd.
  • Full bredd - i det här fallet är klusterbredden från sida till sida i webbläsarfönstret.

Det är viktigt att notera att den här inställningen endast påverkar Cluster-innehåll om ditt aktiva tema stöder det. Alla kapslade block kan konfigureras baserat på tillgängligheten av deras alternativ.

Ladda ner CitadelaWP WordPress Tema & Plugins

Engångsbetalning. 30 dagars pengarna-tillbaka-garanti.

Färginställningar för rubrik och separator

Ändring av rubrikens färg

Sedan WP 5.3 kan du byta färg på din header genom Heading-blocket. Det här är en mycket användbar funktion - särskilt om du har en mörk layout och ett mörkt färgschema är det bättre att ändra standardtextfärgen (som är svart) till en ljusare färg.

Det var inte möjligt att ändra rubrikens färg förrän i den nya versionen, vilket orsakade problem med dess synlighet på en mörk bas. Därför hände det ofta att rubriken blandades med WordPress bakgrundsbild eller foto som du lagt till. Nu kan du välja rätt rubrikfärg för att få din webbplats att skina.

Ny färg för Separator som används på din webbplats

När du lägger till en bakgrundsbild eller någon annan typ av innehåll på din WP kan du ibland behöva separera det från resten av webbplatsen. För detta ändamål kan du använda ett speciellt block som heter Separator. Genom att infoga Separator kan du:

  • Separera specifika block
  • Dela upp hela texten i mindre avsnitt
  • Markera viktiga delar
  • Säkerställ bättre läsbarhet av innehållet
  • Förenkla navigeringen på din webbplats

Dessutom kan du nu ändra färgen på separatorlinjen med den uppdaterade WordPress. Colored Separator är perfekt för att komplettera din webbplats färgschema.

Hur man lägger till bakgrundsbild under grupperade block

Den verkliga kraften i Cluster-block är att du kan lägga till bakgrundsbild och ställa in bakgrundsfärg under grupperade block. Allt kan enkelt konfigureras i WordPress-inspektören. Låt oss ta en titt på hur du gör det.

  1. Klicka på Bakgrundsbild och aktivera funktionen "Visa bakgrundsbild".
  2. Klicka på "Välj bild". Mediabiblioteket öppnas. Du kan välja en befintlig bild eller ladda upp en ny bild till ditt bibliotek.
  3. Bakgrundsbilden kan också ställas in på fast. Det innebär att om du skrollar på sidan kommer bakgrunden inte att flyttas med innehållet och dess position kommer att vara fast.
  4. Du kan också välja vilken del av bakgrundsbilden som ska visas med hjälp av "Focal Point Picker". Det är också möjligt att välja en del av bilden med hjälp av procent.
Hur man lägger till bakgrundsbild under grupperade block
Steg-för-steg-guide för hur du lägger till en bakgrundsbild

Kom igång nu

Engångsbetalning. 30 dagars pengarna-tillbaka-garanti.

Överlagring av bakgrund

Ett av de avancerade alternativen i Cluster är Bakgrundsbildöverlägg. Du kan välja en av standardfärgerna eller välja anpassad färg med hjälp av färgväljaren. Det är också möjligt att ställa in färgens opacitet. Dessa Cluster-blockinställningar hjälper dig att skapa en riktigt attraktiv webbplatspresentation.

Överlagring av bakgrundsbild i WordPress
Ställ in bakgrundsöverlägg och ändra dess opacitet för att skapa iögonfallande design

Nytt gruppblock tillgängligt i kärnverksamheten

Vad är skillnaden mellan Group block och AitThemes Cluster block?

Vårt skräddarsydda Cluster-block släpptes tidigare än Group-blocket och ger en mer komplex lösning. Du kan använda Group-blocket för att gruppera flera block, men det har fortfarande begränsade funktioner. Du kan t.ex. inte ställa in färgöverlagring i blocket - du kan bara välja en grundläggande bakgrundsfärg som kommer att ligga runt bilden, inte över den.

I vårt Cluster-block är det enkelt att redigera bakgrundsbilder.

Du kan ladda upp en bakgrundsbild till din WordPress, ställa in bakgrundsfärg för den och även bakgrundsfärgöverlägg (och anpassa överläggets opacitet också!). Det tar bara några minuter.

4 svar på ”How to set image background in WordPress

  1. Är det möjligt att låta en besökare på din webbplats som använder Cluster-block välja en bakgrundsbild och en överlagringsbild från ett urval av bilder?

    1. Hej, John,

      Tack för att du är intresserad av Citadela-produkter. Ja, för att ställa in bakgrund kan du välja mellan olika alternativ. Detaljerad information finns på: https://www.ait-themes.club/citadela-doc/cluster-block/

      Vänliga hälsningar!
      Zlatko
      AIT-team

Kommentarer är stängda.