Door naar hoofdmenu

Hoe aan de zijkant van de zijbalk op WordPress te veranderen

Divi: het gemakkelijkste te gebruiken WordPress-thema

Divi: Het beste WordPress-thema aller tijden!

Meer 600.000-downloads, Divi is het populairste WordPress-thema ter wereld. Het is compleet, gemakkelijk te gebruiken en wordt geleverd met meer dan 62-vrije sjablonen. [Aanbevolen]

Onlangs vroeg een van onze lezers ons hoe de zijbalk van een WordPress-thema te veranderen?

We krijgen deze vraag meestal van gebruikers die de locatie van hun zijbalk van links naar rechts of van rechts naar links willen wijzigen.

In deze zelfstudie laten we u zien hoe u de locatie van de zijbalk op WordPress kunt wijzigen.

Maar eerder, als je WordPress nog nooit hebt geïnstalleerd, ontdek je Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog

Ga dan terug naar waarom we hier zijn.

Waarom de locatie van de zijbalk op WordPress wijzigen?

Bruikbaarheidsexperts denken dat mensen pagina's van links naar rechts scannen. Ze raden aan om belangrijke inhoud links te plaatsen, zodat gebruikers deze inhoud eerst kunnen zien. Dit kan echter worden teruggedraaid als uw website in een RTL-taal is (rechts aan de linkerkant).

Zoek uit of moet uw WordPress-blog zijbalken hebben

Veel websites op WordPress gebruiken de typische lay-out van blogs met twee kolommen. Een voor de inhoud en de andere kolom voor de zijbalk.

typische inhoud demo WordPress zijbalk

Als u nieuw bent bij websites, moet u een WordPress-thema selecteren met een zijbalk op de gewenste locatie.

Veel WordPress-thema's bieden opties voor het wijzigen van de zijbalk in de instellingen van de laatste. Als uw WordPress-thema deze optie echter niet heeft, moet u de zijkanten van de zijbalk handmatig wijzigen. Ga verder door te ontdekken hoe de zijbalk op WordPress te verwijderen

Dat gezegd hebbende, laten we eens kijken naar de methode die u moet gebruiken om de zijbalk van WordPress gemakkelijk te wijzigen met behulp van CSS.

De zijbalk wijzigen met CSS

Voordat u wijzigingen aanbrengt in uw WordPress-thema, moet u eerst de een kindthema maken. Door een kindthema te gebruiken, kunt u uw ouderthema bijwerken zonder uw wijzigingen te verliezen.

Ontdek Hoe maak je een ander sidebar voor elk item op WordPress display

Ten tweede moet u altijd een back-up maken van uw WordPress-website wanneer u realtime wijzigingen aanbrengt in uw actieve thema.

U hebt een FTP-client nodig om de WordPress-themabestanden te bewerken. Bekijk de handleiding over het gebruik van FTP.

Log in op uw WordPress-website met behulp van de FTP-client en navigeer naar de themamap. Het bevindt zich meestal op:

 / Yoursite / wp-content / themes / your-theme-map / 

Nu moet u het hoofdstijlbladbestand van uw WordPress-thema downloaden en openen in een teksteditor zoals Kladblok. Dit bestand wordt genoemd style.css, en het bevindt zich in de hoofdmap van uw WordPress-thema.

Creëer eenvoudig uw website met Elementor

Met Elementor kunt u eenvoudig elk website-ontwerp maken met een professionele uitstraling. Stop met betalen duur voor wat je zelf kunt doen. [Gratis]

Ontdek hoe WordPress-bestanden en mappen te beheren

Zoek in dit bestand de CSS-klasse van uw zijbalk. Over het algemeen is deze klasse " sidebar ". In dit voorbeeld gebruiken we het standaard WordPress-thema " twintig vijftien Wie heeft deze les voor de zijbalk:

.sidebar {float: links; marge-rechts: -100%; max-breedte: 413px; positie: relatief; breedte: 29.4118%; }

Zoals u ziet, zweeft de zijbalk naar links met een marge van -100%. We zullen de vlotter naar rechts veranderen:

.sidebar {float: rechts; marge-links: -100%; max-breedte: 413px; positie: relatief; breedte: 29.4118%; }

Sla uw wijzigingen op en upload het style.css-bestand naar uw website met behulp van een FTP-client. Als u nu uw website bezoekt, ziet deze er als volgt uit:

demo website wijziging van de zijbalk

We hebben inderdaad de zijbalk verplaatst, maar we hebben het inhoudsgebied niet verplaatst. " twintig Vijftien Gebruikt deze CSS om de positie van het inhoudsgebied te definiëren.

.site-content {display: block; zweven: links; marge-links: 29.4118%; breedte: 70.5882%; }

We zullen het veranderen om de inhoud naar rechts te verplaatsen. Als volgt:

.site-content {display: block; zweven: links; marge-rechts: 29.4118%; breedte: 70.5882%; }

Zo ziet uw website eruit na het toepassen van deze CSS-code.

nieuwe presentatie verplaatst zijbalk website

Zoals u kunt zien, hebben we de locatie van het inhoudsgebied en de zijbalk gewijzigd. Er is echter nog steeds een wit blok aan de linkerkant.

Ga verder door te ontdekken hoe WordPress-bestanden en mappen te beheren

U zult deze fouten vaak tegenkomen bij het werken met CSS. Er is wat speurwerk nodig om te begrijpen wat dit veroorzaakt en hoe dit te verhelpen.

Gebruik de tool 'Inspector' in uw browser om de broncode te bekijken. Plaats uw muis op het getroffen gebied in de browser, klik met de rechtermuisknop en selecteer "Inspector" in het browsermenu.

tool inspecteer de browser

Wanneer u uw muis in de weergave van de broncode beweegt, worden de gebieden waarop dit van invloed is gemarkeerd in het realtime voorbeeld. In het rechterdeelvenster ziet u de CSS die voor dit geselecteerde item is gebruikt.

Ontdek onze 5 WordPress plug-ins om CSS op uw blog visueel te bewerken

Ben je op zoek naar de beste WordPress-thema's en -plug-ins?

Download de beste plug-ins en WordPress-thema's op Envato en maak eenvoudig uw website. Al meer dan 49.720.000-downloads. [EXCLUSIEF]

De CSS die overeenkomt met het gemarkeerde item moet dus opnieuw worden aangepast.

@media-scherm en (min-width: 59.6875em) {body: before {background-color: #fff; box-schaduw: 0 0 1px rgba (0, 0, 0, 0.15); blij: ""; weergave: blok; hoogte: 100%; min-hoogte: 100%; positie: vast; boven: 0; links: 0; breedte: 29.4118%; z-index: 0; / * Corrigeert knipperende bug met scrollen in Safari * /}

Deze CSS-code voegt linksboven een leeg blok van 29,4118% breedte en een breedte van 100% toe. Hier is hoe we het naar rechts gaan verplaatsen.

@media-scherm en (min-width: 59.6875em) {body: before {background-color: #fff; box-schaduw: 0 0 1px rgba (0, 0, 0, 0.15); blij: ""; weergave: blok; hoogte: 100%; min-hoogte: 100%; positie: vast; boven: 0; rechts: 0; breedte: 29.4118%; z-index: 0; / * Corrigeert knipperende bug met scrollen in Safari * /}

Na het opslaan en downloaden van het stylesheet op de server, ziet uw website er zo uit.

nieuwe look sidebar website aan de rechterkant

Werken met CSS kan voor beginners verwarrend zijn. Als u niet al het handmatige werk wilt doen, kunt u het proberen WordPress CSS Hero-plug-in. Hiermee kunt u CSS bewerken zonder code te schrijven, en het werkt met elk WordPress-thema.

Ontdek ook enkele premium WordPress-plug-ins

U kunt andere WordPress-plug-ins gebruiken om een ​​moderne look te geven en de grip van uw blog of website te optimaliseren.

We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.

1. Zxeion

Zxeion is een krachtige premium WordPress-plug-in die verantwoordelijk is voor het verbeteren van de beveiliging van uw website. Deze plug-in bevat een verzameling beveiligings- en beveiligingstools die uw website beschermen tegen mogelijke aanvallen.

Het realtime beveiligingssysteem helpt u om bedreigingen voor uw website te identificeren en te blokkeren, zonder dat u iets hoeft te doen.

Ontdek ook onze 7 plug-ins om uw zijbalken op WordPress te stimuleren

De functies zijn: realtime bescherming, uitstekende klantenondersteuning, regelmatige updates, een IP-adresblokkering, uitstekende documentatie, de moderne en professionele interface, toegewijde klantenondersteuning en andere

Downloaden | demonstratie | web hosting

2. Slaido

Slaido is een premium WordPress-plug-in waarmee u kunt kiezen uit bijna 320 responsieve slider-sjablonen en een daarvan met slechts een paar klikken in uw website kunt importeren. Het is een compleet pakket sjablonen, perfect voor Slider Revolution. U moet deze dus eerst installeren om deze WordPress-plug-in volledig te gebruiken

De belangrijkste kenmerken zijn: een responsieve lay-out van de schuifregelaars, het gemak van het importeren of exporteren van schuifregelaars, regelmatige updates, 24 / 7 beschikbare klantenondersteuning, coole en coole animaties, de beschikbaarheid van videozelfstudies voor snelle start, ondersteuning voor Google-lettertypen en meer.

Downloaden | demonstratie | web hosting

3. Neem contact met ons op Formulier

Contactformulier is een premium responsieve WordPress-plug-in en een eenvoudige tool, maar rijk aan personalisatie-opties waarmee u een duidelijk en bemoedigend formulier kunt weergeven, waarop uw bezoekers contact met u kunnen opnemen door hun bericht achter te laten.

U kunt de benodigde velden definiëren, de beste lay-out van de velden kiezen en deze volledig aanpassen om uw klanten of bezoekers aan te moedigen hun suggesties of berichten achter te laten.

We nodigen u ook uit om te lezen: 10 WordPress plug-ins om een ​​restaurantwebsite te maken en beheren

Stel gewoon het e-mailadres in waar u de berichten wilt ontvangen en gebruik dit om uw bedrijf in de meest winstgevende richting te laten groeien.

Maak eenvoudig uw online winkel

Download gratis WooCommerce, de beste e-commerce plug-ins om uw fysieke en digitale producten te verkopen op WordPress. [Aanbevolen]

Downloaden | demonstratie | web hosting

Aanbevolen bronnen

Ontdek andere aanbevolen bronnen die u zullen begeleiden bij het maken en beheren van uw website.

Conclusie

Hier! Dat is het voor deze tutorial. We hopen dat het u zal helpen de zijbalk van uw WordPress-blog te wijzigen. Aarzel niet om deel dit artikel met je vrienden op je favoriete sociale netwerken.

U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie.

Als u suggesties of opmerkingen heeft, laat ze dan achter in onze rubriek commentaires.

...

Dit artikel bevat 1 reactie
  1. [...] In deze handleiding leert u hoe u de locatie van de zijbalk van uw WordPress-thema kunt wijzigen. [...]

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Deze site gebruikt Akismet om ongewenst te verminderen. Meer informatie over hoe uw opmerkingen worden gebruikt.

Terug naar boven
1 aandelen
aandeel
gekwetter
Enregistrer1