Gå till innehållet

Hur man ändrar den sida av sidofältet på Wordpress

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]

Nyligen frågade en av våra läsare oss hur man ändrar sidofältet av ett WordPress-tema?

Vi får vanligtvis denna fråga från användare som vill ändra platsen för sin sidofält från vänster till höger eller från höger till vänster.

I den här tutorialen kommer vi att visa dig hur du ändrar platsen för sidofältet på WordPress.

Men tidigare, om du aldrig har installerat WordPress-upptäckt Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg 

Tillbaka till varför vi är här.

Hur man ändrar sidofältets placering på wordpress e1568058176266

Varför ändra platsen för sidofältet på WordPress?

Användarexperter tror att människor skannar sidor från vänster till höger. De rekommenderar att du placerar viktigt innehåll till vänster så att användarna först ser innehållet. Detta kan dock vändas om din webbplats är på ett RTL-språk (höger till vänster).

Ta reda på om bör din WordPress-blogg ha sidofält

Många WordPress-webbplatser använder den typiska blogglayouten med två kolumner. En för innehållet och den andra kolumnen för sidofältet.

typisk innehålls demo WordPress sidofält

Om du är ny på webbplatser bör du välja ett WordPress-tema som har en sidofält på din önskade plats.

Många WordPress-teman erbjuder alternativ för att ändra sidofältets sida i inställningarna för det senare. Om ditt WordPress-tema inte har det här alternativet måste du dock ändra sidofältet manuellt. Gå längre genom att upptäcka hur man tar bort sidofältet på WordPress

Som sagt, låt oss ta en titt på metoden du behöver använda för att enkelt ändra sidofältets sida av WordPress med hjälp av CSS.

Ändra sidofältet med CSS

Innan du gör några ändringar i ditt WordPress-tema bör du först överväga skapa ett barntema. Genom att använda ett barntema kan du uppdatera ditt föräldertema utan att förlora dina ändringar.

Upptäck Hur man visa en annan sidofältet för varje punkt på Wordpress

För det andra bör du alltid skapa en säkerhetskopia av din WordPress-webbplats när du gör realtidsändringar av ditt aktiva tema.

Du behöver en FTP-klient för att redigera WordPress-temafiler. Konsultera guide om hur man använder FTP.

Logga in på din WordPress-webbplats med FTP-klienten och navigera till temamappen. Det är vanligtvis beläget på:

 / DinWebbplats / wp-content / themes / din-theme-mapp / 

Nu måste du ladda ner och öppna huvudformatfilen för ditt WordPress-tema i en textredigerare som Anteckningar. Den här filen heter style.css, och det finns i rotkatalogen för ditt WordPress-tema.

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]

Upptäck hur man hanterar WordPress-filer och -mappar

I den här filen hittar du CSS-klassen på din sidofält. I allmänhet är denna klass " sidebar ". I det här exemplet använder vi standard WordPress-tema " tjugo femton Vem har denna klass för sidofältet:

.sidebar {float: left; marginal-höger: -100%; max-bredd: 413px; position: relativ; bredd: 29.4118%; }

Som du kan se sidofältet flyter till vänster med en marginal på -100%. Vi kommer att ändra flottören till höger:

.sidebar {float: höger; marginal-vänster: -100%; max-bredd: 413px; position: relativ; bredd: 29.4118%; }

Spara dina ändringar och ladda upp filen style.css till din webbplats med en FTP-klient. Om du besöker din webbplats så ser den ut så här:

demo webbplats ändra sidofältet

Vi har faktiskt flyttat sidofältet, men vi rörde inte innehållsområdet. " Tjugo Femton Använder denna CSS för att definiera innehållet i innehållsområdet.

.site-content {display: block; flyta: vänster; marginal-vänster: 29.4118%; bredd: 70.5882%; }

Vi kommer att ändra det för att flytta innehållet till höger. Följande:

.site-content {display: block; flyta: vänster; marginal-höger: 29.4118%; bredd: 70.5882%; }

Så här ser din webbplats ut efter att du har använt denna CSS-kod.

ny presentation flyttade sidofältets webbplats

Som ni kan se ändrade vi platsen för innehållsområdet och sidofältet. Men det finns fortfarande ett vitt kvarter till vänster.

Gå längre genom att upptäcka hur man hanterar WordPress-filer och -mappar

Du kommer ofta att stöta på dessa fel när du arbetar med CSS. Det kommer att krävas lite detektivarbete för att förstå vad som orsakar detta och hur man fixar det.

Använd webbläsarens "Inspektör" -verktyg för att titta på källkoden. Rikta musen mot det drabbade området i webbläsaren, högerklicka och välj "Inspektör" i webbläsarens meny.

inspektera webbläsarverktyg

När du flyttar musen runt källkodsvyn kommer du att märka de områden det påverkar markeras i liveförhandsgranskningen. I den högra rutan kommer du att kunna se CSS som används för det valda elementet.

Upptäck vårt 5 WordPress plugins för att visuellt redigera CSS på din blogg

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]

Så CSS som motsvarar det markerade objektet måste justeras om.

@media skärm och (min-bredd: 59.6875em) {body: före {bakgrund-färg: #fff; box-skugga: 0 0 1px rgba (0, 0, 0, 0.15); innehåll: ""; display: block; höjd: 100%; min-höjd: 100%; position: fast; överst: 0; vänster: 0; bredd: 29.4118%; z-index: 0; / * Fixar blinkande fel med rullning på Safari * /}

Denna CSS-kod lägger till ett tomt block med 29,4118% bredd och en bredd av 100% längst upp till vänster. Så här ska vi flytta den till höger.

@media skärm och (min-bredd: 59.6875em) {body: före {bakgrund-färg: #fff; box-skugga: 0 0 1px rgba (0, 0, 0, 0.15); innehåll: ""; display: block; höjd: 100%; min-höjd: 100%; position: fast; överst: 0; höger: 0; bredd: 29.4118%; z-index: 0; / * Fixar blinkande fel med rullning på Safari * /}

Efter att du har sparat och laddat upp stilarket till servern, så ser din webbplats ut.

nytt utseende hemsida sidofältet till höger

Att arbeta med CSS kan vara förvirrande för nybörjare. Om du inte vill göra allt manuellt arbete kan du prova WordPress CSS Hero-plugin. Det låter dig redigera CSS utan att skriva kod, och det fungerar med alla WordPress-teman.

Upptäck också några premium WordPress-plugins  

Du kan använda andra WordPress-plugins för att ge ett modernt utseende och optimera greppet på din blogg eller webbplats.

Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.

1. Zxeion

Zxeion är ett kraftfullt premium WordPress-plugin som ansvarar för att förbättra säkerheten på din webbplats. Detta plugin innehåller en samling skydds- och säkerhetsverktyg som skyddar din webbplats från eventuella attacker.Zxeion wordpress-plugins skyddar webbplatsen mot skadliga virusattacker

Dess realtidsskyddssystem hjälper dig att identifiera hot mot din webbplats och blockera dem, utan att du behöver göra något.

Upptäck också vår 7 plugins för att öka dina sidfält på WordPress

Dess funktioner är: realtidsskydd, utmärkt kundsupport, regelbundna uppdateringar, IP-adressblockerare, utmärkt dokumentation, modernt och professionellt gränssnitt, dedikerad kundsupport och andra

Ladda ner | demo | webbhotell

2. Slaido 

Slaido är ett premium WordPress-plugin som låter dig välja mellan nästan 320 responsiva skjutmallar och importera en av dem till din webbplats med bara några få klick. Det är ett komplett paket med mallar, perfekt för Slider Revolution. Så du måste först installera den senare för att helt kunna använda detta WordPress-pluginSlaido mallpaket för skjutreglage wordpress

Dess huvudfunktioner är: en lyhörd layout av dess skjutreglage, enkel att importera eller exportera skjutreglage, regelbundna uppdateringar, tillgänglig kundsupport dygnet runt, flytande och väldigt coola animationer, tillgängligheten av videohandledning för en snabb start, stöd för Google Fonts och många fler.

Ladda ner | demo | webbhotell

3. Kontakta oss formulär

Contact Us Form är ett förstklassigt WordPress-tillägg och ett enkelt verktyg men rikt på anpassningsalternativ som gör att du kan visa en tydlig och uppmuntrande form som dina besökare kan kontakta dig genom att lämna sitt meddelande.

Kontakta oss formulär plugin för wordpress-kontaktformulär

Du kommer att kunna definiera nödvändiga fält, välja den bästa layouten för fälten och anpassa dem helt för att uppmuntra dina kunder eller besökare att lämna sina förslag eller meddelanden.

Vi inbjuder dig också att läsa: 10 WordPress plugins för att skapa och hantera en restaurangwebbplats

Ställ bara in e-postadressen där du vill ta emot meddelandena och använd den för att växa ditt företag i den mest lönsamma riktningen.

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]

Ladda ner | demo | webbhotell

Rekommenderade resurser

Ta reda på om andra rekommenderade resurser som hjälper dig att bygga och hantera din webbplats.

Slutsats

Där! Det är det för denna handledning. Vi hoppas att det hjälper dig att ändra sidofältet på din WordPress-blogg. Känn dig fri att dela den här artikeln med dina vänner på dina favorit sociala nätverk

Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande.

Om du har förslag eller kommentarer, lämna dem i vårt avsnitt commentaires.

.  

Denna artikel innehåller 1 kommentar

  1. [...] I denna handledning lär du dig hur du ändrar platsen för sidofältet för ditt WordPress-tema. […]

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
1 aktier
del
tweet
Enregistrer1