Vormgeving aanpassen met css-stijlen

uit de cursus Website bouwen met WordPress

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Volgende video: Een Child-theme maken

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Website bouwen met WordPress

perm_identity Walter van Rooij | video_library 34 video's | query_builder 3:06:49

Content Management Systeem (CMS) WordPress

Met het gratis Open Source CMS WordPress kun je professionele websites maken voorzien van alle functionaliteiten die je maar wenst. WordPress maakt gebruik van Thema’s voor de vormgeving en plug-ins voor de functionaliteiten.

Omdat WordPress wereldwijd een enorm populair CMS is en de basis vormt voor miljoenen websites is het een zeer betrouwbaar CMS waar continu gewerkt wordt aan veiligheid en functionaliteit. Vanwege de populariteit worden er ook veel plug-ins ontwikkeld door derden.

Je leert…

In deze cursus leer je hoe je met WordPress een website opzet met behulp van templates. We behandelen het downloaden en installeren van de meest belangrijke plug-ins. Denk aan SEO, Google maps, contactformulieren, privacyverklaring (GDPR), fotogallerijen etcetera

Uiteindelijk zorgen we ervoor dat je precies weet hoe je jouw website online op het world wide web krijgt. Binnen no time ben jij online.

Deze les gaat over het maken van aanpassingen aan de vorm van je website

door gebruikmaking

van CSS ofte wel Cascading Style Sheets

Css is een programmeertaal

die ondersteunend is aan HTML

Met CSS kan je zaken regelen als

de kleuren van je website, de kleuren van je tekst,

gebruikte lettertypes, tekstgroottes,

de hoogte en breedte van verschillende gedeeltes van je website,

kortom, eigenlijk alles wat de vorm van de website definieert.

Voor het maken van die aanpassingen heb je natuurlijk kennis van CSS nodig.

In deze les zal ik je wat voorbeelden laten zien

en ik zal je laten zien waar Wordpress de gelegenheid geeft

om die CSS-codes toe te voegen aan je website.

Om dat te laten zien log ik in op de achterkant van de website.

Ik ben hier in de achterkant van de website

Ik ga nu naar die plek in de website

waar je toegevoegde CSS-informatie kan opslaan.

Ik ga daarvoor naar Appearance > Customize

Afhankelijk van het gebruikte Theme of thema

wat je in je Wordpress-website gebruikt

heb je hier meer of minder opties.

maar in bijna alle gevallen kom je hier ook de optie

Additional CSS tegen.

Die optie kies ik.

Je ziet dat ik niet scherm een lege pagina voor me krijg

diebegint bij tekstregel

en die kan ik gebruiken

om codes toe te voegen die de vormgeving van mijn website zullen sturen.

Daar ga ik gebruik van maken.

Ik ga terug naar de voorkant van de website

om te laten zien hoe ik de aanpassingen zou willen maken.

Ik sluit dit venster.

en ik ga naar de voorkant van de website.

Voor het gemak open ik die in een eigen tabblad.

Daar is de voorkant van de website.

Zoals je misschien ziet

maak ik hier gebruik van de Browser Firefox.

dat vind ik zelf een erg prettige browser

omdat die over van die gemakkelijk bereikbare gereedschappen beschikt

om het de codetaal CSS in je website in te grijpen.

Andere browser hebben ze ook

maar ik vind Firefox erg prettig.

Ik zie overigens dat ik mijn Cookie-waarschuwing nog even moet sluiten.

In de rechter bovenhoek van mijn scherm vind ik een hamburgermenu.

Dat klik ik open.

en daar vind ik Webontwikkelaar

die brengt me bij de Inspector.

De inspector deelt mijn scherm in twee helften.

Boven zie ik de website, en onder zie ik voor een gedeelte

de codetaal

waaruit de webpagina is opgebouwd,

en de CSS-taal die voor de styling van die paginadelen zorgt.

Ik zal je een voorbeeld geven.

Daarvoor scroll ik in de website naar het tekstgedeelte.

In het linkergedeelte van de Inspector

zie ik dat het codeblok Body is geselecteerd.

Je noemt dat de Body-Tag.

Aan het codeblok Body zijn standaard verbonden:

Aan het codeblok Body zijn standaard verbonden:

de achtergrondkleur van je website en het lettertype van je website.

de achtergrondkleur van je website en het lettertype van je website.

In de rechterhelft van de inspector

zie ik dat aan de Body-Tag gekoppeld zijn

zie ik dat aan de Body-Tag gekoppeld zijn

zie ik dat aan de Body-Tag gekoppeld zijn

de Color, dat is de kleur van het lettertype,

de Font-Size, dus de lettergrootte,

de Font-Weight, de vetheid van de letter, en de Font-Family, het lettertype.

Daaronder zie ik dat ook de Background, de achtergrondkleur van de website

is gedefinieerd.

De inspector biedt me nu mogelijkheden

om in te grijpen in de vormgeving van de website.

Bij voorbeeld in de keuze van het lettertype.

Door de checkbox Font-Family uit te klikken

kan ik zien welke delen van de tekst er daardoor beïnvloed worden

en die zou ik een nieuw aangezicht kunnen geven.

Ik plaats er een CSS-instructie onder

Ik geef nu de instructie: de Font-Family is Georgia

Georgia is een van de standaard Scheef-lettertypes

die in de computer voorhanden zijn.

en je ziet: dat maakt al een flink verschil in de website.

Een stukje lager

kom ik tegen de definitie voor de Background-kleur

en ik zie dat die kleur

een heel lichtblauw-grijze kleur is

die de definitie ECEFF heeft

Maar ik zou daar een andere kleur kunnen neerzetten.

bijvoorbeeld

FF, de kleur geel.

En je ziet dat de Background-kleur van mijn website zich aanpast.

De wijzigingen die je mij hier ziet maken

zijn natuurlijk niet echt, het zijn Previews.

Als iemand anders naar deze website kijkt, ziet hij die wijzigingen niet.

Ze worden pas definitief

als ik deze aanpassingen opsla in de website.

En om dat te doen

zou ik ze kunnen selecteren en kunnen kopiëren. Dat doe ik hier.

Ik kopieer de regel

en ik ga naar de achterkant van de website en ik ga naar de achterkant van de website

en ik ga daar naar Appearance > Customize

en daar kies ik Additional CSS.

In het nog lege tekstveld plak ik hier

de code die ik zojuist gekopieerd heb.

en uit dat codeblok haal ik weer weg

de instructies die ik zelf niet heb gewijzigd.

Color, Font-size en Font-weight

heb ik verder niet gewijzigd.

Deze delete ik

en ik houd over

de twee wijzigingen die ik zelf wel heb gemaakt.

Font-Family: Georgia

en Body-background-kleur Geel.

Deze wijzigingen Publish ik.

En vanaf nu zijn ze definitief.

Tot zover de les: Aanpassingen maken in je website met CSS.