Så här Customize du bakgrundsfärgen för WordPress Block Editor

Genom att ändra bakgrundsfärgen i WordPress blockredigerare kan du förbättra din redigeringsmiljö, göra den visuellt tilltalande och anpassa den till dina övergripande designpreferenser.

En personlig bakgrund ger inte bara en touch av kreativitet utan kan också förbättra läsbarheten och hjälpa dig att hålla fokus när du skapar innehåll.

Om du till exempel arbetar med ett anpassat kundprojekt kan du justera Gutenberg-redigerarens bakgrundsfärg så att den matchar kundens varumärke, vilket hjälper dig att hålla dig visuellt konsekvent under hela designprocessen.

I den här artikeln visar vi dig hur du enkelt customize bakgrundsfärgen i WordPress Block Editor för admin area.

Varför ändra bakgrundsfärgen för Block Editor i WordPress?

Det kan finnas flera anledningar till att du vill ändra bakgrundsfärgen i Block Editor i WordPress.

Till exempel använder de flesta moderna WordPress-themes samma bakgrundsfärg för block editor som för live-webbplatsen, inklusive Astra, OceanWP, GeneratePress och mer.

Men om ditt WordPress theme inte använder samma färger kommer utseendet på ditt post i editorn att se helt annorlunda ut än vad dina användare kommer att se på live website.

Ett annat skäl till att ändra bakgrundsfärgen kan vara personliga alternativ.

Som standard använder Block Editor till exempel en vit bakgrund. Vissa användare kan tycka att det är lite stressande att klistra på den vita vyn under långa timmar. Ögonbelastning kan vara en verklig issue för många människor, och den vita bakgrunden som är standard är inte lätt för ögonen.

Med detta sagt, låt oss se hur du enkelt kan ändra bakgrundsfärgen för WordPress editor.

Så här ändrar du bakgrundsfärgen för WordPress Editor

Du kan enkelt ändra bakgrundsfärgen för WordPress editor genom att lägga till customizer-kod i ditt temas functions.php-fil.

Men även det minsta error i koden kan knäcka din website och göra den otillgänglig.

Det är därför vi rekommenderar att du använder WPCode plugin. Det är det bästa WordPress code snippets plugin på marknaden och är det enklaste och säkraste sättet att lägga till custom code till din WordPress website.

Först måste du installera och aktivera pluginet WPCode. För mer instruktioner, vänligen se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Efter aktivering, besök Code Snippets ” +Add Snippet page från WordPress admin sidebar.

Härifrån klickar du på knappen ”Use Snippet” under alternativet ”Add Your Custom Code (New Snippet)”.

Detta tar dig till sidan ”Create Custom Snippet”, där du kan börja med att skriva ett namn för ditt code snippet. Detta är bara för you och kan vara vad som helst som hjälper dig att identifiera koden.

Välj sedan ”PHP Snippet” som ”Code Type” från dropdown-menyn i det högra hörnet av vyn.

Följ detta genom att copy and paste följande kod i boxen ”Code Preview”:

add_action( 'admin_footer', function() {
	?>
	<style>
		.editor-styles-wrapper {
			background-color: #bee0ec;
		}
	</style>
	<?php
});

När du har gjort det måste du leta efter följande kod i PHP snippet som du just klistrade in:

background-color: #bee0ec;

Sedan måste du add to hex-koden för din önskade färg bredvid alternativet bakgrundsfärg. Om du inte vill använda en hex-kod kan du använda några grundläggande färgnamn som ”vit” eller ”blå” istället.

Därefter rullar du ner till sektionen ”Insertion” och väljer alternativet ”Auto Insert”.

Därefter måste du välja ”Location” för code snippet som ”Admin Only” från dropdown-menyn.

Därefter går du tillbaka högst upp på sidan och togglar omkopplaren ”Inaktiverad” till ”Aktiv”.

Slutligen, glöm inte att clicka på knappen ”Save Snippet” för att store dina ändringar.

Gå nu till block editor från admin sidebar.

Så här såg block editor ut på vår site efter att ha lagt till PHP code snippet.

Video Tutorial

Om du hellre vill se en video kan du kolla in vår YouTube-handledning om hur du anpassar bakgrundsfärgen i WordPress blockredigerare:

Bonus: Ändra bakgrundsfärg i WordPress

Om du vill ändra bakgrundsfärgen na front-endzie på din webbplats kan du göra det genom att gå till skärmen Utseende ” Anpassa ” i kokpiten på WordPress.

Detta kommer att starta temaanpassaren, där du måste klicka på kartan ”Colors & Dark Mode” i den vänstra kolumnen. Tänk på att din customizer kan se annorlunda ut beroende på vilket tema du använder.

Detta öppnar en new panel i sidebaren där du måste clicka på alternativet ”Select Color”.

Färgväljaren öppnas nu på skärmen och du kan välja önskad bakgrundsfärg. När du är klar, kom ihåg att klicka på knappen ”Publicera” högst upp för att lagra dina inställningar.

Du kan också ändra textfärgen, markeringsfärgen, färgen på knapparna och mer från temats customizer. Men om du använder ett block theme måste du göra dessa ändringar i hela Site Editor.

För mer detaljer om allt detta kan du se vår guide för nybörjare om hur du customize färger på din WordPress website.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt ändrar bakgrundsfärgen för WordPress-redigeraren. Du kanske också vill se vår ultimata przewodnik om hur du inaktiverar helskärmsredigeraren i WordPress eller ta en titt på våra toppval för de bästa Gutenberg-blockpluginsen för WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.