Lägga till ytterligare CSS-klasser till block

Den här guiden beskriver hur du använder funktionen Ytterligare CSS-klasser i WordPress-redigeraren.

I denna guide

1. Så här fungerar det
2. Lägga till en ytterligare CSS-klass
3. Tips för att använda ytterligare CSS-klasser
   1. Anpassa ett specifikt block på en specifik sida
   2. Ändra punktikonen i en lista
   3. Utnyttja befintliga anpassade CSS-klasser

Så här fungerar det

Grundläggande kunskaper om CSS-kod rekommenderas för att använda den här funktionen. Så här kan vi hjälpa dig med CSS.

Blockinställningen Avancerat gör det möjligt att lägga till en CSS-klass till ditt block, så att du kan skriva anpassad CSS-kod och utforma blocket som du vill.

Ytterligare CSS-klasser kan läggas till under sektionen Avancerat i blockinställningarna

Om du till exempel bara vill justera texten för vissa block kan du lägga till en klass som my-justify-class till fältet Ytterligare CSS-klass i inställningarna för styckeblocket. Därefter går du till din CSS-redigerare och skriver en stil för klassen, till exempel:

p.my-justify-class { text-align: justify;  }

Lägga till en ytterligare CSS-klass

För att lägga till en ytterligare CSS-klass till ett block klickar du på blocket som du redigerar. Därefter tittar du efter inställningen Avancerat i blockinställningarna till höger.

Om du inte ser blockinställningarna till höger klickar du på verktygsikonen (⚙️) i det övre högra hörnet för att öppna inställningarna.

Alla block har inställningen Avancerat, där du kan lägga till Ytterligare CSS-klasser

Du kan definiera din klass som:

• Ett enstaka ord, till exempel special
• En term som består av flera ord där alla ord är åtskilda med bindestreck, till exempel special-class

Du kan också lägga till flera klasser till samma block genom att separera varje klass med ett mellanslag. Till exempel: special-class-1 special-class-2

När du definierar din klass, var noga med att inte använda en klass som redan har definierats i webbplatsens kod. Du bör använda unika termer som inte redan används i webbplatsens CSS-kod.

När man skriver CSS-kod riktar man in sig på en klass genom att placera en punkt framför den aktuella klassen, dvs. .page. Du ska dock inte placera en punkt framför klassen när du definierar den som en Ytterligare CSS-klass i blockinställningarna. Om du gör det kommer den inte att fungera.

Tips för att använda ytterligare CSS-klasser

Anpassa ett specifikt block på en specifik sida

Låt oss säga att du vill ändra utseendet på ett media- och textblock på din webbplats, men att alla andra media- och textblock på webbplatsen ska lämnas orörda. I det här exemplet definierar vi klassen special-media-text-block i blockinställningen Avancerat:

Därefter kan vi lägga till CSS-koden på vår webbplats under Anpassa → Ytterligare CSS för att ge blocket en häftig, tonad bakgrundsfärg.

.special-media-text-block { background-image: linear-gradient(to bottom right, red, blue); }

Här är resultatet:

Ändra punktikonen i en lista

Du kan ändra ikonen som används i en lista, från en cirkulär skiva till en kvadrat, en tom cirkel, en romersk siffra och mycket mer!

Definiera en klass som square-bullet-list-block, till exempel:

Lägga till en anpassad klass till listblocket

Därefter lägger du till den här CSS-koden i din CSS-redigerare:

.square-bullet-list-block { list-style-type: square; }

så kommer resultatet att bli:

Ett listblock med kvadratiska punkter!

Tänk på att du, beroende på ditt temas design, kan behöva lägga till en klass som

Utnyttja befintliga anpassade CSS-klasser

Vissa klasser är fördefinierade i WordPress och du kan lägga till dessa till dina block för coola effekter.

Till exempel gör is-style-circle-mask att bilden i ett bildblock visas som en cirkel:

Effekten av klassen is-style-circle-mask

Om du tar bort klassen försvinner även cirkeleffekten.

Nedan finns en lista över några andra befintliga CSS-klasser som vissa block stöder, men kom ihåg att temastilar kan åsidosätta dessa befintliga klasser. För bästa möjliga resultat, använd ett rekommenderat tema.

• aligncenter
• alignright
• alignleft
• alignwide
• alignfull
• has-small-font-size
• has-large-font-size
• has-huge-font-size
• has-drop-cap