hoe een WordPress Website te bouwen in 2021 in 6 stappen. An A to Z Guide

in 2017 was er een kans bij het bedrijf waar ik werkte om webdesign te leren.

ik begon HTML, CSS en Javascript te leren. Ik heb ervan genoten. Tot ik mijn eerste insecten tegenkwam. Later kreeg ik een nevenproject toegewezen: een echte website. Ik was blij, mijn collega ‘ s waren er voor mij toen ik om hulp vroeg.

een paar maanden later werkte ik aan een pro-bono WordPress opdracht voor een NGO.

laat me zeggen dat we in de reismarkt waren en ik marketing deed. Maar er was een cultuur van mensen in staat stellen om nieuwe vaardigheden te leren.

ik ben het DIY-type en realiseerde me dat de leercurve voor leercode veel langer is dan verwacht. Met WordPress werkte het anders.

snel vooruit, in 2020 werkte ik voor de Colibri makers, Colibri is een populaire WordPress drag and drop page builder.

het is vandaag de dag zo eenvoudig met dergelijke tools. WordPress kan echt mensen in staat stellen om een website te bouwen vanuit het niets in een mum van tijd. En inspiratie voor websites is gewoon…over het hele internet.

nu, hier zijn de stappen:

1. Kies uw domeinnaam
2. website hosting
3. maak kennis met de WordPress interface
4. Installeer een WordPress thema
5. Bouw uw WordPress website
6. installeer vitale WordPress plugins

omdat sommige stappen niet genoeg zijn voor een supercalifragilisticexpialidocious website, heb ik er een bonus voor u aan het einde van de gids: UX design tips en trucs.

maar voordat ik in het onderwerp Spring, wil ik een licht werpen op een ander onderwerp. Het duurt niet lang, dat beloof ik.

hoeveel kost Een WordPress-website?

als we een kosten uitsplitsing voor een WordPress website te maken, hier is wat we moeten opnemen:

• een domein kopen: prijzen kunnen beginnen bij $ 15 / jaar
• hosting acquisitie: prijzen beginnen al vanaf $ 8 / jaar
• WordPress thema. Nu, afhankelijk van de niveaus van aanpassing en hoeveel functies die u wilt opnemen, kunt u beginnen met $0. Als u niet wilt regelen met een eenvoudige website, jaarlijkse WordPress theme plannen draaien rond $70.
• WordPress-plugins. Veel van hen zijn gratis, maar als u geavanceerde opties wilt, moet u upgraden naar een betalend plan.

dit betekent dat de meest basale website zal beginnen vanaf $23/jaar. Het moment dat u wilt geavanceerde thema functies, zullen de kosten stijgen tot ongeveer $100/jaar.

wanneer u plug-ins bijwerkt, betaalt u mogelijk ongeveer $200-500 per jaar.

als u iets op maat wilt maken en u moet een WordPress-ontwikkelaar inschakelen, kunnen de kosten in het eerste jaar meer dan $1000 bedragen.

voor online winkels kunnen de kosten aanzienlijk stijgen, omdat u veel functionaliteiten nodig hebt, en prestaties en veiligheid zijn top of mind.

nu we dit duidelijk hebben gemaakt, is het tijd om vandaag tot de bodem van ons onderwerp te komen: hoe maak je een WordPress website in 2021.

Kies uw domeinnaam

bron: https://unsplash.com/photos/N1XUwR8iOf0

als u dit nog niet wist, is de domeinnaam Uw bedrijfsnaam of Productnaam. Namen kunnen echt krachtig zijn, dus wees niet te haastig bij het kiezen van uw domeinnaam. Als je voelt dat je koude voeten krijgt, maak je geen zorgen, er zijn hulpmiddelen die je kunnen helpen.

Tips en trucs voor website domeinnaam kiezen

ik was een tijdje geleden aan het brainstormen voor een website domein voor een bedrijf en realiseerde me dat “Wazz” heel interessant klonk. Het is kort, makkelijk te onthouden. Maar op het moment dat ik het googelde, nou … laat me zeggen, ik barstte in lachen uit. In het Britse jargon betekende het “urineren”. Echt mensen, doe je onderzoek.

Later wilde ik mijn fotowebsite een naam geven. Ik analyseerde “moonshine”. Het voelde zo mooi, romantisch, sprookjesachtig…behalve dat het niet zo was. het lijkt erop dat het “illegaal gedistilleerde of gesmokkelde alcohol” betekende.

dus, zorg ervoor dat uw naamgeving uniek is, gedenkwaardig, en geen vreemde betekenis heeft in het Engels of een andere populaire taal (bijvoorbeeld: Spaans) als u internationaal wilt gaan. Als je een lokaal bedrijf bent, sla je dit misschien over.

nu, laten we een beetje kijken naar een kleine checklist voor het kiezen van een domeinnaam voor uw WordPress website:

• Maak een lijst met relevante zoekwoorden voor uw bedrijf/product. Denk aan hoe de gebruikers moeten voelen na het gebruik van het product. Laten we zeggen dat je een huid productlijn op basis van natuurlijke ingrediënten. Uw lijst kan woorden bevatten zoals “huid”, “verzorging”, “veilig”, “natuurlijk”, “mooi”, “fris” enz. Gebruik een tool zoals Namelix of Novanym om domeinnaamideeën te genereren.
• controleer de Betekenis van uw nieuw gevonden domeinnaam. Ik google het altijd als deze”{naam invoegen hier} betekenis”. Ik zal eindigen met woordenboekuitleg. Volgende, Ik Ga naar Google afbeeldingen en zie hoe het wordt gematched. Misschien is er een zanger met die naam, een manga cartoon Naam, enz. Als dat zo is, moet u het proces opnieuw uitvoeren.
• zoek naar de domeinnaam op Facebook of LinkedIn om te zien of er een zakelijke pagina met die naam is.
• Controleer of er een website domein beschikbaar is voor verkoop. Voor veel sites is”. com “het beste top-level domain (TLD), gevolgd door”. org”,”. net “of”. io”.
• Koop uw domeinnaam. U kunt dit doen via een domeinregistrator zoals GoDaddy of via uw hosting provider.

en dit leidt ons naar ons volgende hoofdstuk.

Website Hosting verwerven

elke website die u ooit hebt bezocht wordt gehost op een server. Dit betekent dat je nodig hebt om web hosting te verwerven van een hosting provider.

aangezien we een WordPress website bouwen, kunt u een hostingplan kiezen uit WordPress.com of een andere hosting provider van derden.

laat me iets duidelijk maken voordat we verder gaan. Er zijn wordpress.com en wordpress.org. het verschil is dat op WordPress.com u kunt hosten en bouwen van een website. Van WordPress.org u meestal verwerven thema ‘ s en plugins voor uw website, die elders wordt gehost. U kunt de WordPres.com plannen hier.

de hypothese van deze gids is dat u echt een merk wilt bouwen en volledige controle over uw website wilt hebben. Dit betekent dat je naar een derde partij hosting provider.

er zijn drie belangrijke hostingdiensten: shared hosting, VPS en managed hosting. In de eerste situatie server resources worden verdeeld over meer sites. Op de lange termijn, als deze sites groeien, en de jouwe ook, je zou kunnen tegenkomen problemen met de prestaties. Je zou kunnen beseffen dat je een VPS service of een managed hosting plan nodig.

u moet dit dus in gedachten houden bij het kiezen van een hostingprovider: wat zijn uw zakelijke doelen?

als u met VPS hosting gaat, zullen de bronnen nog steeds gedeeld worden, maar u zult enige controle over hen krijgen. Je ziet ook verbeteringen op het gebied van beveiliging en prestaties.

Managed hosting is een soort” à la carte ” – dienst. Je krijgt je eigen fysieke server helemaal voor jezelf, en je ziet een boost in prestaties en beveiliging.

zeker, dingen kunnen ingewikkelder worden dan dit, maar ik wilde gewoon het grote plaatje van hosting schilderen.

wanneer u vervolgens de plannen analyseert, bekijkt u:

• prijs
• opslag
• ondersteuning
• prestaties

sommige hostingproviders hebben een aantal extra functies verpakt, zoals domeinaanbieding (bijv.: Namecheap), website builder (bijv.: GoDaddy), e-commerce opties, enz.

nu hebt u waarschijnlijk gemerkt dat sommige websites “HTTP” of “HTTPS”gebruiken. Wat is er met die?

HTTP is de basis van het moderne web. Het verbindt de browsers en servers, en functies op verzoek-reactie basis. Nu, de extra “s” betekent dat de verbinding met de website is versleuteld en de gegevens gedeeld met de website is veilig.

stel dat een gebruiker een betaling doet op uw website of zich aanmeldt bij een account. De informatie die de gebruiker intypt zal privé zijn. Veilig voor hacken. Dit gebeurt via de SSL-technologie, wat staat voor ” Secure Sockets Layer.”Voor consumenten, het zien van “HTTPS” signalen vertrouwen, omdat je hun gegevens en privacy te beschermen. Dit betekent dat u een SSL-certificaat moet verwerven.

zorg ervoor dat uw gekozen plan dit ook bevat.

op het moment dat u uw hostingplan aanschaft, en u uw logingegevens hebt ingesteld, zal het enige ontbrekende stuk WordPress zelf zijn. De meeste van de hosting providers die er zijn kunt u WordPress installeren vanaf hun dashboard / wizard. Het is allemaal vrij intuïtief.

hoe logt u in op uw site? Easy peasy. Typ in de browser uw website adres en voeg toe aan het “/wp-admin”, zoals hieronder te zien.

maak kennis met de WordPress interface

het WordPress dashboard heeft 9 secties. Laten we ze eens bekijken.

WordPress instellingen

in deze sectie zijn er nog 7 menu-items. Ik zal kort de belangrijkste dingen beschrijven die hier gedaan moeten worden.

• onder “Algemeen” kunt u de sitetitel, tagline, URL, Tijdzone, tijd & datumnotatie en taal instellen.
• onder “Reading” zul je “vertellen”WordPress welke pagina dient als homepage, en welke je “blog” is. Dit is een belangrijke stap. U zult ook kiezen hoeveel blogberichten kunnen worden weergegeven op een pagina of als u wilt dat uw website geà ndexeerd door Google.
• onder “discussie” ga je de blog comments setup doen.
• in “Media” kunt u de maximale afmetingen in pixels bepalen die gebruikt worden bij het toevoegen van een afbeelding aan de mediabibliotheek.
• in ‘Permalinks” stelt u het formaat van uw URL ‘ s in.
• u kunt uw Privacybeleid pagina ‘ s in “Privacy”.

de beste manier om het “instellingen” paneel te benaderen is om al deze items in te voeren en de ontbrekende info in te vullen, alleen om er zeker van te zijn dat u niets belangrijks overslaat. Het is vrij eenvoudig, dus wees niet bang. Alle setup kan worden gedaan in minder dan 30 minuten.

WordPress pagina ‘ s en berichten

wat u moet weten is dat uw inhoud in “pagina ‘ s” of “berichten”zal gaan. Hier besteed je 95% van je tijd.

de” pagina ‘ s ” zijn statisch. U kunt een “homepage”, “diensten” pagina, “contact” PAGINA, je krijgt het punt. Onder berichten kunt u uw nieuwste blog artikelen, misschien uw portfolio. Dit zijn dynamische pagina ‘ s omdat ze automatisch uw nieuwste website-inhoud bovenaan plaatsen.

wanneer u “berichten” in het dashboard selecteert, kunt u een bericht aanmaken, alle berichten visualiseren en tags en categorieën beheren.

u kunt een nieuw bericht aanmaken als u “nieuwe toevoegen” selecteert zoals hierboven te zien is, of naar “alle berichten” gaat en vervolgens “Nieuwe toevoegen”selecteert.

hetzelfde werkt voor pages.
wat u ziet in uw “alle pagina’ s “of” alle berichten “zijn enkele standaard pagina’ s en berichten die door uw thema worden ingezet.

nu, hoe kunt u een bericht of een pagina bewerken?

wanneer u de muisaanwijzer op uw standaardpagina ‘ s en berichten plaatst, ziet u enkele opties: bewerken, Snel bewerken, prullenbak, bekijken. In de screenshot hierboven is er ook “bewerken in Colibri”. Dit komt omdat we een plugin die u toelaat om pagina ‘ s aan te passen met behulp van de Colibri WordPress builder geïnstalleerd (maar we zullen een beetje later over praten).

WordPress media

al uw media worden hier weergegeven: afbeeldingen en video ‘ s. U kunt ze slepen en neerzetten of uploaden.

u kunt ook media toevoegen vanaf uw post / paginaniveau. Ik zal je later meer over het onderwerp laten zien.

WordPress comments

de vierde dashboard sectie heet “Comments”. Hier kunt u de reacties van uw berichten beheren. Je ontvangt tonnen spam opmerkingen die kunnen worden verplaatst naar spam of prullenbak. U kunt de relevante goedkeuren.

het “uiterlijk” menu

op dit niveau kunt u:

• een thema zoeken, installeren en activeren (meer details in het volgende hoofdstuk).
• pas widgets aan om blokken inhoud toe te voegen aan de zijbalken, voetteksten en andere gebieden van uw site.
• Definieer de menu ‘ s van uw WordPress website.
• voeg een achtergrondafbeelding toe aan uw site.
• Bewerk de code van uw thema in “Theme Editor” (alleen aanbevolen als u een ontwikkelaar bent).

op het moment dat u bepaalde plugins activeert, ziet u mogelijk enkele nieuwe menu-items onder “Appearance”. In dit geval, omdat we het Skyline thema hebben geactiveerd, zien we een optie om het op te zetten onder “SkylineWP Instellingen”. Elk thema kan komen met een eigen setup.

“installeer Plugins” is de andere extra menu-item toegevoegd door de Skyline thema. Hier zie je een aantal plugin aanbevelingen die goed werken met Skyline.

dit leidt ons naar ons volgende menu-item.

Plugins

er zijn veel functies die niet alleen per thema kunnen worden beheerd, zoals SEO-optimalisatie, SEO-audit, websitebeveiliging en back-up, tabellen, formulieren, e-commercefuncties en meer. Plugins zijn hier om te compenseren voor het gebrek aan dergelijke opties.

hier is een kleine handleiding over het installeren, activeren en deactiveren van plugins. Het is allemaal intuïtief en gebruiksvriendelijk.

gebruikers

op dit niveau bepaalt u wie toegang heeft tot uw website. U kunt toegang geven tot bijdragers, gastauteurs, redacteuren en meer, afhankelijk van uw behoeften.

Tools

onder “Tools” hebt u de mogelijkheid om tools gegevens te importeren en exporteren naar en van andere content management systemen (bijv. Blogger).

er is ook een “site health” sectie, die u belangrijke informatie toont over uw WordPress configuratie en items die uw aandacht vereisen, met wat advies.

omdat we het privacybeleid moeten respecteren, kunt u hier persoonlijke gegevens voor uw gebruikers exporteren of wissen.

en hiermee hebben we het hoofdstuk WordPress dashboard ingepakt.

laten we naar interessantere zaken gaan.

Hoe installeer ik een WordPress thema

hiervoor moet je naar je WordPress admin dashboard, klik op “Appearance” in het linkermenu en vervolgens op “Themes”.

klik vervolgens op de knop” Nieuwe Toevoegen”.
u ziet een hoop sjablonen verschijnen, en u kunt ze filteren op laatste, aanbevolen, populariteit…of op functies.

we zijn trots om te zeggen dat onze eigen hypnotiseren en Colibri thema ’s zijn opgenomen in de top 20 meest populaire WordPress thema’ s.

op het moment dat u een thema kiest, klikt u op “Install” en vervolgens op “Activate”.

u kunt uw WordPress thema ook activeren als u terug gaat naar het uiterlijk->thema ‘ s.

het hele installatieproces wordt ook uitgelegd in onze tutorial.

nu ben je klaar om te rock and roll!

via GIPHY

Bouw uw WordPress website

in WordPress, uw website ontwerp is afhankelijk van uw gekozen thema. Als je iets extra ‘ s nodig hebt, moet je misschien iets vinden om de ontbrekende functies in te vullen.

meestal heeft elk WordPress thema 2 ontwerpen: een voor de blog en een voor de pagina ‘ s. Kleuren zijn beperkt, er zijn geen speciale aanpassingen. Dit betekent dat op een bepaald moment, plugins van pas komen.

nu, WordPress thema ‘ s hebben een thema customizer met basisfunctionaliteit. Ze zijn een goede pasvorm voor degenen die geen aangepaste functies nodig hebben en willen hun site echt snel te bouwen. Wanneer nodig, kunt u uw eigen CSS stijlen toe te voegen. Zorg ervoor dat u een thema kiest dat een lay-out heeft die overeenkomt met uw eigen visie.

Hoe kunt u een thema aanpassen? Ga gewoon naar Uiterlijk – > aanpassen.

aan de linkerkant kunt u kiezen wat u wilt wijzigen: inhoud, menu en meer. Aan de rechterkant, is er uw website preview. U kunt de tekst in real-time wijzigen door op het potloodpictogram te klikken.

aan de andere kant van het verhaal hebben we WordPress builders. Ze zijn plugins die u helpen om echt unieke websites te bouwen. U kunt de lay-out van uw thema volledig te wijzigen.

in ons geval installeert Skyline zo ‘ n builder genaamd Colibri, we gaan het als voorbeeld gebruiken.

afhankelijk van de versie van het thema, de gratis of betaalde, heb je verschillende elementen om mee te spelen: van headers, specifieke pagina secties, tot kleinere componenten zoals calls to action, tabbladen, tellers, accordeons, en meer.

u kunt uw thema bewerken zoals voorheen, vanaf uiterlijk – > aanpassen, of gebruik de snelkoppeling, zoals hieronder getoond.

welke veranderingen? Je krijgt toegang tot meer functies in de Customizer.

naast het gebruik van de customizer, is er een andere optie voor website aanpassen in WordPress – de standaard editor. U kunt het openen vanuit de” bewerken ” optie onder elke post en pagina. Ook, het moment dat u een nieuwe post of pagina toe te voegen, krijg je direct in de standaard editor (tenzij je een builder geactiveerd).

dus, in ons volgende hoofdstuk gaan we dieper in op hoe:

1. Maak een WordPress website met behulp van een WordPress page builder
2. Maak een WordPress site met behulp van de standaard WordPress editor

A. Hoe maak je een WordPress website met behulp van gratis website builders

WordPress website builders help je de WordPress Customizer naar een geheel nieuw niveau. U kunt alles aanpassen: kopteksten, pagina-inhoud, voetteksten, navigatiemenu ‘ s, globale, individuele styling, noem maar op! Geen ontwerp of codering vaardigheden nodig!

het is meestal een slepen en neerzetten proces. En u hoeft zich geen zorgen te maken over het mobiele ontwerp, de bouwers hebben de responsiviteit aspect gedekt.

websiteinstellingen aanpassen in de aangepaste instellingen

kijk op uw linker zijpaneel. Scroll nu naar beneden naar “Algemene instellingen”.

:

• de naam van uw website.
• het algemene kleurenschema en de typografie van uw website.
• sjablonen voor blog, header en footer: welke achtergronden te gebruiken, spatiëring, randen, schaduwen, enz.
• spatiëring: binnenknoppen, kolommen, enz.
• Custom CSS Styling

Hoe maak je inhoud in WordPress met behulp van bouwers

zoals eerder vermeld, als u een nieuwe website pagina wilt maken, ga dan naar “Pages” en selecteer “Add New”. U wordt doorverwezen naar de standaard WordPress-editor waar u uw pagina een naam geeft. Selecteer vervolgens “Bewerken met Colibri”.

wanneer u een bestaande WordPress pagina wilt bewerken, klikt u op “Bewerken in Colibri”.

hoe secties aan uw WordPress-pagina ’s toe te voegen

elk” + ” – teken in het linkerzijpaneel opent een venster met blokken en componenten. Je kunt naar beneden scrollen totdat je een ontwerp vindt dat je leuk vindt, of gewoon een categorie typen. Hier zijn de categorieën beschikbaar in de Colibri builder: Hero Accent, over, functies, inhoud, oproep tot actie, Blog, tellers, Portfolio, fotogalerij, getuigenissen, klanten, Team, Contact, F. A. Q., en prijzen.

dit zijn vooraf gedefinieerde sjablonen, die overeenkomen met het kleurenschema van uw keuze.
door een van de blokken te selecteren, door op het ” + ” – teken te klikken dat op het blok verschijnt, wordt het blok onderaan de pagina geplaatst.

u kunt ze verplaatsen waar u maar wilt, door de sectie van het linkerpaneel te slepen en neer te zetten.

er is ook een optie voor” blanco ” blokken.

dit betekent dat u ze kunt aanpassen zoals u wilt. Uiteindelijk kunt u uw ontwerp zelfs opslaan voor later gebruik.

vanaf het instellingspictogram in de rechterbovenhoek van elke sectie kunt u het aantal items per rij aanpassen, items opnieuw ordenen, nieuwe blokken toevoegen en zelfs de hele sectie verwijderen.

hoe u secties van uw WordPress-pagina aanpast

Als u de tekst in uw secties wilt wijzigen, kunt u dit in-line doen, wat betekent in de sectie zelf, live.

In-line editing is niet beschikbaar voor teksten op knoppen. Ze worden beheerd in het paneel aan de linkerkant.

als u een afbeelding van uw site wilt wijzigen, is het allemaal intuïtief. Begin met het selecteren van uw afbeelding.

u kunt het ook zien in het paneel aan de linkerkant. Klik op de afbeelding. Er verschijnt een nieuw venster waarin u wordt gevraagd een afbeelding te uploaden of er een te selecteren uit de bibliotheek. Als u ervoor kiest om te uploaden, kunt u dit doen door slepen en neerzetten.

nu, teruggaand naar het paneel dat ik zojuist heb genoemd, heeft het 3 hoofdopties: lay-out, stijl en geavanceerd. Wanneer u een sectie selecteert uit het voorbeeld van de website aan de rechterkant, ziet u het bijbehorende paneel van de sectie.

laten we ze één voor één nemen:

• opmaak

Hier kunt u de breedte en hoogte van de container aanpassen, op structuurniveau. . Simpel gezegd, de container is de werkelijke ruimte een blok bezet. In de container plaatst u de inhoud (tekst, afbeeldingen).

u kunt ook de spatiëring van uw inhoud aanpassen, en hoe dicht bij de boven – of onderkant deze wordt geplaatst.

u kunt ook nieuwe rijen in uw Blok toevoegen.

• stijl

op dit niveau kunt u de achtergrond van uw blok aanpassen of tabbladen toevoegen. Dividers zijn visuele aanwijzingen die aangeven wanneer een website sectie eindigt of begint.

• Geavanceerd

Hier komt het plezier, mensen!

van typografie en spatiëring tot responsiviteit, dit is waar u in de kleinste details van de website kunt komen.

u kunt variaties maken afhankelijk van de status van het element: normaal of zweven.

als u een bepaald element in een blog selecteert, laten we zeggen een kop, zal hetzelfde paneel aan de linkerkant verschijnen.

dit betekent dat u meer in detail kunt gaan met uw editing.

wanneer het gaat om posten en meer korrelige elementen, worden deze “componenten”genoemd. Eens kijken hoe je met ze kunt spelen.

Hoe gebruikt u componenten in uw WordPress site

de componenten verwijzen naar rubrieken, schuifregelaars, tussenschotten, knoppen, carrousels, prijzen en meer. Ze zijn toegankelijk op dezelfde manier als blokken. Ze zitten naast elkaar en ze hebben drag and drop functionaliteit. Colibri biedt 40 componenten.

toevoegen zoals eerder vermeld, kunt u ze aanpassen vanuit het paneel aan de linkerkant, Als u naar “layout”, “style” of “advanced”gaat.

mobiele responsiviteit

in een wereld met meerdere apparaten is het van vitaal belang om een volledig responsieve website te hebben. Standaard is Skyline een mobiel responsief thema. Dit betekent dat de secties aan te passen aan verschillende apparaten. Als u wilt bekijken hoe uw WordPress site eruit ziet op tablets of mobiel, kunt u dit doen, bij het spelen met de besturingselementen in de linkerbenedenhoek.

u kunt er ook voor kiezen om bepaalde functies op mobiel te verbergen, bijvoorbeeld in de “advanced” – opties.

Hoe maak je een menu in de WordPress Customizer

stel nu dat je je pagina ‘ s hebt ontworpen en dat je ze aan een menu moet toevoegen. In het paneel aan de rechterkant heb je al je secties, van boven naar beneden besteld, zoals op je site. De voettekst is je laatste sectie. Hieronder ziet u een aantal extra functies.

Hier kunt u uw menu aanmaken.

na het selecteren van “Create New Menu” krijgt u de mogelijkheid om uw menu een naam te geven en er een plaats voor te kiezen (koptekst, voettekst, pagina ‘ s, enz.).

wanneer u “Next” selecteert, kunt u uw pagina ‘ s toevoegen aan het menu, via de optie “Items toevoegen”. Het kan niet makkelijker dan dit.

hoe te werken met WordPress widgets

ik heb al gezegd dat widgets blokken van inhoud zijn die u kunt toevoegen aan de zijbalken, voetteksten en andere gebieden van uw site.

wanneer u een WordPress builder-plugin gebruikt, gebruikt u widgets alleen voor uw WordPress-zijbalken, omdat u de voettekstlay-outs vooraf hebt ontworpen.

gewoonlijk worden zijbalken gebruikt door blogpagina ‘ s. Elk thema heeft verschillende widgets opties, van zoekbalken, recente berichten, en opmerkingen, sociale widgets, afbeeldingen en video ‘ s. Laten we Instagram profiel laten zien in een zijbalk, er is een Instagram WordPress widget voor dat.

een van mijn favoriete widgets is degene die het mogelijk maakt om aangepaste HTML bewerken. Ik vind het heel krachtig.

dit gezegd zijnde, ben je een beetje klaar. Gefeliciteerd, uw WordPress site is up and running!

laten we nu de andere methode voor het bouwen van sites in WordPress controleren.

B. Hoe maak je een WordPress website met behulp van de standaard WordPress editor (Gutenberg)

ik ga dit heel snel. Deze editor is nog steeds nieuw in WordPress (het is de standaard WordPress editor sinds December 2018), maar het is voortdurend in ontwikkeling dankzij de bijdrage van de gemeenschap.

de klassieke WordPress editor zag er zo uit:

nu hebben we:

nu moet u weten dat niet elk thema compatibel is met deze nieuwe editor. Je moet een Gutenberg-ready vinden.

lay-outontwerp met de standaard WordPress-editor is beperkt. Het is ook gebaseerd op blokken. Nu, zoals je waarschijnlijk in het vorige hoofdstuk hebt ontdekt, kunnen blokken vrijwel alles zijn: koppen, afbeeldingen, knoppen, video ‘ s, enz.

nu, waarom ik niet aandringen op het onderwerp: als je kijkt voor Gutenberg beoordelingen, de meest recente zijn 1-sterren beoordelingen. Het is geen goede ervaring. Zelfs als het al 2 jaar na de lancering, en veel updates in het midden, Dit is nog in de kinderschoenen. WordPress vertrouwt nu op de gemeenschap om nieuwe blokken te maken, zodat de bewerkingservaring kan evolueren.

op dit moment gedraagt het gereedschap zich als een teksteditor, met weinig vermogen aan de opmaakzijde.

er zijn hulpmiddelen zoals Kadence, die je kunnen helpen, maar we zijn er nog niet.

installeer vitale WordPress-plugins

het WordPress-ecosysteem bestaat uit thema ‘ s en plugins

er zijn duizenden WordPress-plugins beschikbaar die de functionaliteit kunnen uitbreiden of nieuwe functies aan uw website kunnen toevoegen.

dit is een korte handleiding over het installeren van een plugin.

Onze plugin aanbevelingen

nu, laten we een beetje in een ander onderwerp: pagina snelheid.

zowel uw bezoekers als Google geven veel om de snelheid van uw site.

Waarom Google?

snelheid is een belangrijke factor waarmee rekening wordt gehouden bij het rangschikken van organisch materiaal, wat hier betekent:

Waarom is de snelheid van de site slecht voor de gebruikers, en uiteindelijk voor u?
Nou, als je ze een slechte ervaring aanbiedt, zullen ze misschien niet meedoen met je aanbod, of misschien zelfs niet snel terugkomen.

volgens onderzoek van Google uit 2018 verlaat 53% van de mobiele gebruikers een site die langer dan 3 seconden duurt om te laden (Holy Moly!).

en kijk eens!

hoe beïnvloedt pagina laden mobiele bezoekers (opmerking: bounce betekent het verlaten van de site)?
.
dus, hoe kunt u dit oplossen, en ook het verbeteren van uw algehele website prestaties, zodat u niet ontvangt een thumbs down van zowel uw gebruikers als Google?

ik heb 2 laid back oplossingen gekozen (er zijn er veel meer, maar vrij technisch).

● afbeeldingen optimaliseren
afbeeldingen van uw website moeten niet in hun oorspronkelijke grootte worden geüpload. Probeer ook te gaan met PNG ’s in plaats van JPEG’ s (ze hebben minder kleuren).
Smush is onze voorkeur WordPress plugin voor beeldcompressie. U zult geen zichtbare daling van de kwaliteit te zien en uw pagina snelheid zal worden geoptimaliseerd.

● Caching
simpel gezegd biedt cache tijdelijke opslag voor inhoud die later kan worden geopend. Uw website laadt anders als deze voor de eerste of de vijfde keer door dezelfde bezoeker wordt geopend.

Waarom is dat?
wanneer u te maken hebt met browsercaching, slaat uw browser een kopie op van bestanden van een website op het apparaat
van de gebruiker(harde schijf, mobiele telefoon). Wanneer een website in de cache wordt geplaatst, hoeft de browser alleen nieuwe of bijgewerkte stukken van een pagina te laden en hoeft hij geen nieuwe serveraanvraag te starten. Hetzelfde gebeurt als u op de “terug” knop, uw browser zal de pagina van de cache weer te geven. Dit is
ook super handig bij het omgaan met een trage internetverbinding, de pagina ‘ s zullen snel worden geladen.

wilt u meer weten over hoe caching werkt? Lees hier verder.

de tools die we hier aanbevelen zijn:
➔ W3 Total Cache (W3TC) verbetert de SEO-en gebruikerservaring van uw site door de prestaties van de website te verhogen en de laadtijden te verkorten.
➔ Kolibrie. Dit heeft ook een aantal extra functies die we leuk vinden, zoals de compressie van Javascript, HTML & CSS-bestanden.

Hoe kunt u nu controleren hoe snel uw website wordt geladen?
Google heeft alleen de tool om u te helpen met dat, en biedt ook een aantal vaststelling ideeën.

Bonus: UX-ontwerptips en-trucs

Weet je nog dat ik de “sky’ s the limit” zei met de WordPress-pagina-bouwers?

Nou … er is altijd een “maar”. Wanneer u een website ontwerpt, moet u altijd rekening houden met uw
publiek, of de koper persona ‘ s (zoals de marketeers graag zeggen). Je moet ze een geweldige ervaring bieden op je website, dat is waar UX voor staat (user-experience).

daarvoor zijn er bepaalde regels die u moet volgen om een wrijvingsloze gebruikerservaring te bieden.

voldoen aan de behoeften van de gebruikers
gebruikers op een website willen niet te veel nadenken. Ze hebben nuttige informatie nodig die gemakkelijk kan worden afgeroomd en begrepen. Ze hebben geen ervaring nodig die bestaat uit veel klikken of veel heen en weer.

mensen zoeken naar onmiddellijke bevrediging: snel en gemakkelijk vinden wat ze nodig hebben. Als dit niet gebeurt op uw website, zullen ze op zoek naar een andere.

visuele hiërarchie

niet alle delen van de website worden gelijk behandeld, sommige zijn belangrijker dan andere (formulieren, knoppen, koptekst, waardepropositie, enz.).

waar wilt u dat uw gebruiker landt? Waar wil je dat hij klikt?

gebruik visuele aanwijzingen om hem te helpen bereiken wat u wilt. Alle elementen op de pagina ‘ s moeten zich gedragen als een gids.

onderzoekers hebben ontdekt dat gebruikers die van links naar rechts lezen websites scannen in een Z-vormig patroon.

dit betekent dat u daar uw belangrijkste informatie heen moet sturen.

eenvoudige navigatie

u moet de navigatiebalk eenvoudig houden, ga niet te veel opties in. Je zou kunnen eindigen met een paradox keuze situatie wanneer gebruikers overweldigd met de mogelijkheden.

pagina ’s moeten intern worden gekoppeld aan andere relevante pagina’ s, zodat de navigatie soepel verloopt, en de gebruiker moet niet vaak op “back” klikken om naar vorige pagina ‘ s te gaan.

maak gebruik van witruimte. Witruimte maakt het mogelijk informatie te organiseren in verteerbare inhoud gebieden. Dit zorgt ervoor dat gebruikers zich comfortabeler voelen en niet overweldigd worden door veel gegevens.

zelfde kleurenschema (consistentie)

vermijd super donkere of super intense kleuren op uw website. Ze kunnen gebruikers wegsturen. U kunt sterkere kleuren gebruiken om belangrijke aspecten van uw website te markeren.

gebruik kleuren die even gebalanceerd zijn. Hier is wat inspiratie.

en nog een ding voordat we overgaan tot het volgende UX-ontwerpprincipe. Kleuren hebben betekenissen over de hele wereld, ze zijn verbonden met verschillende emoties. Deze infographic zal een licht schijnen op het onderwerp.

effectief schrijven

gebruik geen overdreven en clickbait kopie. Schrijf met gezond verstand, in een natuurlijke taal, gebruik geen jargon (niet iedereen is bekend met bepaalde technische woorden).

gebruik max. 3 lettertypen in maximaal 3 punten-maximaal 18 woorden of 50-80 tekens per regel tekst zoals Smashing Magazine aanbeveelt.

gebruik sociaal bewijs

waarom zou ik u, uw bedrijf of uw producten vertrouwen?
wij, mensen, zijn sociale wezens. We leven in gemeenschappen, we hebben vrienden en familie. Ze kunnen onze influencers zijn. We geven veel om hun mening.
.
laat me een lijst van enkele voorbeelden voor u:
● beoordelingen en reviews

● getuigenissen

● Nee. van klanten (“Je bent in goed gezelschap”).

● Clients ‘logo’ s

● Case studies ondersteund door resultaten

● Press featuring and awards

Als u meer wilt weten over de laatste ontwerptrends, hebben de Coastal Creative folks een prachtige infographic over het onderwerp gemaakt.

conclusies

we kunnen het een wrap noemen, vind je niet?

we wilden de korte weg gaan, niet om u te overweldigen met informatie. Maar uiteindelijk zit de duivel in de details. We hebben je net het helikopterzicht gegeven.

het punt is dat u uw website in minder dan 2 uur up and running kunt hebben. Maar, hoe meer functies, pagina ‘ s, inhoud die u wilt toevoegen, hoe langer het zal duren. En heb je nooit verwaarlozing van de nieuwste web design trends.

een laatste ding echter, als u het DIY-type bent, moet u zeker onze Colibri builder meenemen voor een spin!

hier is een video over het bouwen van een WordPress website pagina met behulp van tal van functies.

Als u dit artikel leuk vond en meer wilt weten over hoe u een WordPress-website ontwerpt, schrijf u dan in op ons Youtube-kanaal en volg ons op Twitter en Facebook!