Gå till innehållet

Hur man lägger stil till ditt navigeringsmenyer

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Vill du anpassa dina WordPress-navigeringsmenyer för att ändra färger eller utseende? Ditt WordPress-tema hanterar utseendet på navigeringsmenyerna på din webbplats. Du kan enkelt anpassa det med CSS för att uppfylla dina krav. I den här handledningen visar vi hur du utformar din WordPress-bloggs navigeringsmenyer.

to-the-style-to-menyer de navigation de wordpress

1-metod: Så utformar du dina WordPress-menyer med ett plugin

Ditt WordPress-tema använder CSS för dina navigeringsstilar. Många nybörjare är inte bekväma med CSS-redigering av WordPress-teman. Så det här är när ett plugin för att utforma en meny blir praktiskt, eftersom det sparar dig från att redigera temafiler eller skriva kod.

Först, vad du behöver göra är att installera och aktivera plugin " CSS hjälte ". För mer information, se vår steg-för-steg-guide om hur du installerar ett WordPress-plugin.

CSS Hero är ett premium WordPress-plugin som låter dig designa ditt eget WordPress-tema utan att skriva en enda kodrader (Ingen HTML eller CSS krävs).

När du har aktiverat plugin-programmet omdirigeras du till en sida där du måste ange din licens. Följ bara instruktionerna på skärmen så omdirigeras du till din webbplats med bara några få klick.

Nu måste du klicka på knappen hjälte CSS I ditt WordPress-verktygsfält.

css-hero-menu-wordpress

CSS Hero erbjuder en WYSIWYG-redaktör (vad du ser är vad du får "Vad du ser är vad du får"). Genom att klicka på den här knappen kommer du till din webbplats med ett flytande verktygsfält CSS Hero till höger.

bar tools-css-hjälte

Du måste klicka på den blå ikonen högst upp för att börja redigera.

Flytta musen över navigationsmenyn och CSS Hero kommer att markera den genom att visa dess gränser. När du klickar på den markerade navigeringsmenyn visar den olika objekt du kan redigera.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Anpassa-a-meny-med-css-hjälte

På skärmdumpen ovan kan du se menyalternativet, navigeringsmenyn och behållaren för navigeringsmenyn etc.

Anta att vi vill ändra textfärgen på alla objekt på navigationsmenyn. I detta fall väljer vi navigationsmenyn som berör hela menyn.

CSS Hero kommer nu att visa dig de olika egenskaperna du kan ändra som text, bakgrundsfärg, gränser, marginaler, stoppning etc.

css-fastighets hjälte

Du kan klicka på en egenskap som du vill redigera. CSS Hero kommer att ge dig ett enkelt gränssnitt där du kan göra dina ändringar.

edit-a-fastighets css-med-css-hjälte

I skärmdumpen ovan valde vi texten och det visade oss ett trevligt gränssnitt för att välja typsnitt, ändra textfärg, storlek och andra egenskaper.

När du gör ändringar kommer du att ha en direkt förhandsvisning av det slutliga resultatet.

Preview-to-live-css-hjälte

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

När du är nöjd med ändringarna klickar du på knappen "Spara" på " hjälte CSS För att spara dina ändringar.

Det bästa med den här metoden är att du enkelt kan ångra de ändringar du gör. CSS Hero har en fullständig historik över alla dina förändringar, och du kan komma och gå mellan dessa förändringar.

Metod två: Hur man ändrar stilen på din navigeringsmeny manuellt

Denna metod kräver att du redigerar dina WordPress-temafiler. Du bör bara använda den om du är utvecklare och har viss kunskap om skapandet av WordPress-temat.

Det bästa sättet att göra detta är att anpassa ditt WordPress-tema genom att skapa ett barntema. Om du bara ändrar CSS, uppmanar jag dig att läsa vår handledning om hur man lägger till anpassad CSS-kod på WordPress.

Navigationsmenyerna för WordPress visas i en oordnad lista (punktlista).

Om du använder följande php-tagg kommer den att visa en lista utan CSS-klasser associerade med den.


Din punktlista skulle ha "menyn" för klassnamnet med varje listobjekt med sin egen CSS-klass.

Detta kan fungera om du har en menyplats. De flesta teman har dock flera platser där du kan visa navigationsmenyer.

Användning av endast standard CSS-klasser kan orsaka konflikter med menyer på andra platser.

Detta är anledningen till att du måste definiera CSS-klassen och menyplatsen. Chansen är att ditt WordPress-tema redan gör det genom att lägga till navigeringsmenyerna med kod så här:

'primär', 'menu_klass' => 'primär-meny',)); ?>

Den här koden säger till WordPress att det är här temat visar huvudmenyn. Det lägger också till en CSS-klass " primära meny I navigationsmenyn.

Nu kan du hitta stilen på din navigeringsmenyn med hjälp av CSS struktur.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

#header .primary meny {} // class behållare #header .primary menyn ul ​​{} // class behållare första oordnad lista #header .primary menyn ul ​​ul {} // oordnad lista Inom en oordnad lista #header .primary -menyn li {} // Varje navigationspost #header .primary meny li {} // Varje navigations item # header li ankare .primary meny ul {} // oordnad lista om det finns rullgardins objekt #header .primary -menyn li li {} // varje droppe ner navigerings item # header li li .primary menyn har {} // Varje blad ankare ner navigeringspost

Ersätt #header med behållarklassen eller " ID Används av ditt WordPress-tema.

Denna struktur hjälper dig att helt ändra utseendet på din navigeringsmeny.

Det är det för den här tutorialen. Jag hoppas att det gör att du kan anpassa menyerna i din WordPress-blogg. Dela gärna det med dina vänner på dina favorit sociala nätverk.

 

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
2 aktier
del1
tweet1
Enregistrer