Lägga till ytterligare CSS-klasser till block

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

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.

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;  }

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.

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.

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:

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:

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:

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

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:

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