Hoe u een zakelijke website maakt met WordPress & Elementor

Leer hoe u een website voor uw bedrijf maakt met WordPress, Elementor en Astra. Dit zijn allemaal 100% gratis tools die ik persoonlijk gebruik.


In deze tutorial voor het maken van een website 2019, zal ik je meer laten zien dan alleen hoe je een website maakt, ik zal je ook leren hoe je je website kunt optimaliseren en hoe je er leads uit kunt genereren.

Deze tutorial is uitgebreid, mijn langste manier om een ​​website-tutorial te bouwen. ik hoop dat je ervan geniet.

Dingen die je nodig hebt:

  • Hosting. Ik raad SiteGround aan.
  • EEN domeinnaam.
  • WordPress-thema. Voor deze tutorial gebruiken we het gratis Astra-thema.
  • WordPress Page Builder. Hiervoor gebruiken we de gratis Elementor-paginabuilder.

Laten we beginnen!

Stap 1: Koop een webhosting en domeinnaam.

Het belangrijkste onderdeel van uw bedrijfswebsite is hosting. De hosting gaat bepalen hoe snel uw website wordt geladen, wat een zeer belangrijke factor is die van invloed is op het genereren en converteren van leads. Google geeft ook de voorkeur aan snellere websites met lage bouncepercentages, dus een snellere website vergroot je kansen op ranking op Google.

Een ding waar ik op wil wijzen is om EIG- en GoDaddy-bedrijven zoveel mogelijk te vermijden. EIG staat voor Endurance International Group en heeft meer dan 60 hostingbedrijven in handen. Het ontslaat hun interne ondersteunend personeel en consolideert alles onder één paraplu. Wat er gebeurt, is de klantenondersteuning, de kwaliteit van de hosting en de algehele kwaliteit van de dienstverlening.

Hier zijn enkele van de bekende EIG-bedrijven:

  • Hostgator
  • BlueHost
  • iPage
  • Arvixe
  • Dikke koe
  • HostMonster Small Orange

GoDaddy heeft ook veel slechte recensies met betrekking tot kwaliteit en klantenservice, en de websites die ze hosten, laden gewoon heel langzaam.

U wilt ook ‘mom and pop’-hosts vermijden omdat ze niet over de middelen beschikken om geavanceerde hostingtechnologieën te gebruiken die uw website een voorsprong geven.

U wilt ook een hosting kiezen die gratis SSL-certificaten biedt. Zonder een SSL-certificaat heeft uw website bovenaan dit lelijke “Not Secure” -label:

niet veilig

Als u een bedrijf bent, kunt u met dat label praktisch afscheid nemen van potentiële klanten. Als uw hosting geen gratis SSL-certificaten levert, kost één SSL-certificaat u $ 50- $ 100 per jaar per website.

U wilt ook een service waarmee u kunt upgraden naar iets genaamd PHP7, waardoor uw website een stuk sneller wordt.

Siteground, My Preferred Web Hosting Service

Een hostingservice die ik heb gevonden en die aan al deze criteria voldoet, is SiteGround. SiteGround biedt een gratis SSL-certificaat, stelt u in staat om te upgraden naar PHP7, heeft hoogwaardige hosting en geweldige klantenondersteuning. Het is echt het beste dat er is.

Dit zijn de belangrijkste kenmerken van SiteGround:

  • Gratis SSL-certificaat
  • SNEL geïnformeerde ondersteuning
  • WordPress Staging-omgeving
  • Gratis website-migraties
  • 30 dagen back-up

Ik heb een geweldige deal met hen gesloten om 70% korting te geven aan iedereen die zich aanmeldt bij het gebruik deze link. Dus als u geld wilt besparen op uw hosting, klik op deze link en koop nu uw hosting.

Om uw hosting van SiteGround te kopen, klik op deze link. Zodra u op hun startpagina terechtkomt, ziet u vier verschillende soorten hosting:

kies een siteground plan

Kies WordPress-hosting en klik op Begin. Je ziet dan drie tariefplannen:

siteground WordPress hosting prijzen

Kies er een volgens uw behoeften en budget. Je kunt ook hun bekijken vergelijking van elk hostingplan om te kunnen beslissen welke het beste bij uw zakelijke behoeften past.

Zodra je een plan hebt gekozen, klik je op Plan krijgen. U wordt dan naar de volgende stap geleid, namelijk het kiezen van een domein. Selecteer als u al een domeinnaam heeft ‘Ik heb al een domein’. Maar als je er geen hebt, selecteer dan ‘Registreer een nieuw domein’ zodat u een domein rechtstreeks in SiteGround kunt kopen. Dit kost $ 15,95 per jaar.

kies een domein

Houd er rekening mee dat als de domeinnaam die u wilt kopen niet meer beschikbaar is, SiteGround u dit laat weten en u een andere moet kiezen. Zodra u een domeinnaam heeft, klikt u op Doorgaan.

De volgende stap om uw aankoop te voltooien, is het verstrekken van uw nauwkeurige persoonlijke en factuurgegevens. Zodra dat is gebeurd, klikt u op Nu betalen. U heeft nu een betrouwbare webhosting en domeinnaam.

Stap 2: installeer WordPress.

WordPress is de tool voor het maken van websites die we zullen gebruiken om uw bedrijfswebsite te maken. Het is helemaal gratis, heel gemakkelijk te gebruiken en toch erg krachtig. Het wordt geleverd met duizenden plug-ins en thema’s waarmee u kunt doen wat u maar wilt met uw website.

SiteGround wordt eigenlijk geleverd met een WordPress-installatie met één klik waarmee WordPress snel voor u kan worden geïnstalleerd.

Zodra u uw hostingaankoop heeft voltooid, ziet u een scherm met een link die zegt ‘Ga door naar de klantruimte’. Klik daarop en u wordt naar een pagina geleid waar u uw nieuwe hostingaccount kunt instellen. Onder Stel uw website in, selecteer Start een nieuwe website.

U ziet dan een lijst met software die u kunt installeren. Selecteer WordPress.

installeer wordpress

Om het proces te voltooien, moet u beheerdersaanmeldingsgegevens (e-mailadres, gebruikersnaam en wachtwoord) voor uw website opgeven. Dit zijn de details die u gebruikt om toegang te krijgen tot de backend van uw website, dus zorg ervoor dat u ze goed beveiligt.

Zodra dat is gebeurd, klikt u op Bevestigen > Voltooi de installatie. En je hebt nu een live, zelf gehoste WordPress-website.

Stap 3: Installeer SSL-certificaat.

Voordat ik iets anders ga doen, wil ik u eerst laten zien hoe u een SSL-certificaat installeert om het Not Secure-label te verwijderen dat ik u eerder heb laten zien. Onder Mijn accounts, Klik Ga naar het cPanel.

ga naar cpanel

CPanel is waar u verschillende software en tools voor uw website kunt installeren. Als u helemaal naar beneden scrolt, zou u een sectie met de naam moeten zien Veiligheid. Klik onder deze sectie op Laten we versleutelen.

laten versleutelen

Selecteer het domein waarop u het SSL-certificaat wilt installeren en selecteer Laten we SSL coderen, en klik Installeren.

Nu is het tijd om in te loggen op je nieuwe website. Klik Mijn accounts weer bovenaan en klik op de Installaties tabblad. Hier ziet u de domeinnaam die u heeft geregistreerd. Aan de overkant is een groen Ga naar Admin Portal knop. Klik op deze knop om naar uw WordPress inlogpagina te gaan.

ga naar WordPress admin dashboard

WordPress inlogpagina’s volgen meestal deze formaten: uwdomein.com/wp-admin en uwdomein.com/wp-login. De jouwe kan anders zijn. Maar u moet uw inlogpagina-URL onthouden of noteren, zodat u er de volgende keer toegang toe heeft door de URL rechtstreeks in uw adresbalk te typen en zonder u opnieuw aan te hoeven melden bij Siteground.

De inlogpagina van WordPress ziet er als volgt uit:

wordpress login pagina

Voer hier uw gebruikersnaam en wachtwoord in om voor de eerste keer in te loggen op uw website.

Als je eenmaal binnen bent, moet je WordPress als eerste vertellen dat je een SSL-certificaat hebt. Dit is vrij eenvoudig te doen.

Ga in de linkerzijbalk naar Instellingen > Algemeen. Op het scherm zie je twee vakjes met je domeinnaam: WordPress Address (URL) en Site Address (URL). U moet voor beide vakken de letter “s” typen na “http” en voor de dubbele punt “:”.

ssl-certificaat toevoegen in wordpress

Als je klaar bent, klik je op Wijzigingen opslaan. Uw website moet nu een hangslotpictogram naast de domeinnaam hebben:

beveiligde website met https

Het laatste wat we moeten doen voor het SSL-certificaat is ervoor te zorgen dat mensen die “http” in hun adres typen, worden omgeleid naar uw “https” -URL. Daar hebben we een plug-in voor nodig.

Ga naar om een ​​plug-in te installeren Plug-ins > Nieuw toevoegen. Zoek in de zoekbalk rechtsboven naar de plug-in Echt eenvoudige SSL. Installeer en activeer het.

installeer echt eenvoudige ssl

Je ziet dan dit pop-upbericht op je dashboard:

activeer echt eenvoudige ssl

Klik op het blauw Ga je gang, activeer SSL! knop. U wordt uitgelogd en zodra u weer inlogt, is de Really Simple SSL-plug-in volledig van kracht.

Stap 4: Installeer Astra Theme en Astra Sites.

Voor een zakelijke website wilt u een thema met een schone code en flexibele functies om maatwerk zo eenvoudig en snel mogelijk te maken. Er zijn veel WordPress-thema’s van hoge kwaliteit, maar het thema dat we hier gaan gebruiken, is Astra-thema.

Astra Theme is een gratis WordPress-thema met een uitstekende snelheid en eenvoud. Wat ik het leukst vind, is dat het zichzelf configureert op basis van de tools die je nodig hebt, en dit maakt het je gemakkelijker. Er is ook een Pro-versie als u toegang wilt tot premiumfuncties.

Astra thema

Dit zijn de functies die ik het leukst vind aan Astra:

  • Een van de snelste thema’s die beschikbaar zijn
  • Meer dan 100 startersites (de meeste zijn 100% gratis)
  • Flexibele Mega Menu-functie
  • Krachtig uitbreidingspakket
  • Uitgebreide WooCommerce-ondersteuning

Ga naar om Astra te installeren Verschijning > Thema > Nieuw toevoegen. Zoek naar Astra, klik Installeren, en Activeren.

astra installeren

Een ander geweldig ding over Astra is het feit dat het een plug-in heeft genaamd Astra-startersites. Deze plug-in heeft een bibliotheek met vooraf gebouwde gratis en premium sjablonen die u met een paar klikken op uw eigen website kunt gebruiken. We gebruiken een Astra-sitesjabloon om de tijd voor het maken van onze website te halveren.

Na het installeren van Astra, zie je dit bericht op je dashboard:

aan de slag met astra-site

Klik Begin. Hiermee wordt Astra Starter-sites voor u geïnstalleerd. U kunt Astra Sites ook installeren door naar te gaan Plug-ins > Nieuw toevoegen. Zoeken Astra-sites en installeer en activeer het. Ga voor toegang tot Astra Sites naar Optredens >Astra-startersites.

Uw paginabuilder kiezen

Nadat Astra Sites is geïnstalleerd, wordt u gevraagd welke paginabuilder u verkiest: Gutenberg, Elementor, Beaver Builder of Brizy. In deze tutorial ga ik Elementor gebruiken.

Elementor is een WordPress-paginabuilder die het bouwen van pagina’s naar een nieuw niveau heeft gebracht. Het heeft een diepe functieset, maar het is heel gemakkelijk te gebruiken en te beheersen. De gratis versie is voldoende om een ​​fatsoenlijke webpagina te bouwen, maar als je meer geavanceerde functies wilt, zoals het toevoegen van contactformulieren, schuifregelaars, prijstabellen en meer, kun je upgraden naar de Pro-versie.

Uw Astra-sitethema kiezen

Nadat u uw paginabuilder heeft gekozen, wordt u naar de bibliotheek met Astra Sites-sjablonen geleid. Er zijn talloze strakke, professioneel ogende sjablonen – zowel gratis als premium – waaruit u kunt kiezen. De sjablonen zijn onderverdeeld in de volgende categorieën: Blog, Business, eCommerce, Free en Other. Aangezien u een zakelijke website maakt, kunt u het beste bladeren in de Bedrijf sectie.

Neem de tijd om te kiezen welke sjabloon volgens u het beste bij uw merk past. Deze sjablonen zijn volledig bewerkbaar met de paginabuilder die u hebt gekozen, wat betekent dat u eenvoudig de tekst, afbeeldingen, lay-out, knoppen en eigenlijk alles op de pagina kunt wijzigen.

Voor deze tutorial ga ik de gebruiken Accountant sjabloon omdat het er geweldig en gemakkelijk uitziet.

Om een ​​thema te installeren, hoeft u er alleen maar op te klikken om naar het voorbeeld te gaan. Als het je bevalt wat je ziet, klik dan op Thema importeren knop en zorg ervoor dat de vakjes allemaal zijn aangevinkt.

dozen astra sites thema

Als je het merkt, is er een vak dat zegt “Installeer Vereiste Plugins”. Als u dit vakje aanvinkt, worden alle vereiste plug-ins geïnstalleerd zodat het thema er precies zo uitziet als het is. Voor dit thema installeerde het WPForms Lite, een plug-in waarmee je eenvoudige contactformulieren kunt maken, en Elementor, de paginabuilder die ik zal gebruiken. U kunt op het kleine vraagteken ernaast klikken om te zien welke plug-ins worden geïnstalleerd.

WPForms is een plug-in die u kan helpen om via effectieve formulieren kwalitatieve leads voor uw bedrijf te krijgen. U kunt mijn WPForms-recensie bekijken om er meer over te weten. als u een andere formulieren-plug-in wilt gebruiken, kunt u WPForms gewoon deactiveren / verwijderen in Plug-ins > Geïnstalleerde plug-ins en installeer uw favoriete formulierbouwer.

astra site thema installeren

Het importeren van het thema kan even duren. Sluit uw browser niet en klik niet op vernieuwen. Wacht het af en als het klaar is, zie je een blauw Site bekijken knop. Klik op die knop om naar uw website te gaan die nu het thema heeft dat u zojuist hebt geïmporteerd.

Stap 5. Ontwerpelementen kiezen.

Uw website ziet er nu prachtig uit, maar u wilt er uw eigen website van maken. Om dat te doen, heb je je eigen kleurenschema, typografie en logo nodig.

Laten we beginnen met je kleurenpalet. Als u uw merkkleur al heeft, wordt dit gemakkelijker.

Een kleurenpalet kiezen

Een website heeft normaal gesproken een set van 2-3 kleuren: de primaire, accent- en popkleur. De primaire kleur is de dominante kleur van uw website en hoogstwaarschijnlijk uw merkkleur. Dit is de kleur waarmee u wilt dat mensen uw merk onthouden.

Bij het kiezen van uw primaire kleur moet u onderzoeken naar kleurenpsychologie of hoe kleuren de perceptie of het gedrag van mensen beïnvloeden. Bij bepaalde kleuren voelen mensen iets, b.v. rood zorgt ervoor dat ze zich ongerust voelen, dus u moet met deze dingen rekening houden bij het kiezen van uw primaire kleur.

De accent kleur wordt meestal gebruikt om bepaalde elementen te laten opvallen dan de rest, zoals koppen of posttitels.

Ten slotte is de pop kleur contrasteert met de rest van de kleuren om belangrijke elementen van de website te laten opvallen, zoals call-to-action-knoppen of formulieren voor het genereren van leads.

Er zijn twee tools die ik graag gebruik bij het kiezen van een kleurenpalet. De eerste is Coolors.co, een website waar u door verschillende kleurenpaletten kunt bladeren om ideeën of inspiratie op te doen. Als je iets ziet dat je leuk vindt, kun je de Hex-code snel kopiëren om het op WordPress te gebruiken.

Als je klikt Verken op de kop ziet u deze uitgebreide verzameling paletten:

coolors kleurenpaletten

Als u een palet ziet dat u bevalt, beweeg uw muis erover en klik op Visie, en je wordt naar een nieuw venster gebracht waar je de hex-codes van elke kleur ziet.

hex codes van kleurenpaletten

Deze Hex-codes zijn wat u nodig hebt om deze kleuren op uw website te gebruiken. Later zal ik je laten zien hoe je deze Hex-codes kunt gebruiken op de WordPress-backend.

Een andere coole tool is Colorzilla. Dit is een Google Chrome-extensie waarmee u de hex-code van elke kleur die u op elke website ziet, kunt krijgen door erop te klikken.

Als je de Colorzilla-extensie wilt hebben, Klik hier. Dan klikken Toevoegen aan Chrome.

colorzilla

Je ziet dan dit pictogram op je werkbalk:

colorzilla icoon

Dus als u nu de hex-code van een kleur die u op een website zag wilt weten, klikt u gewoon op dit pictogram en vervolgens op de kleur die u wilt kopiëren. De hex-code wordt dan automatisch gekopieerd. U kunt deze hex-code in specifieke gebieden in WordPress plakken.

Typografie aanpassen

U wilt ook uw eigen typografie gebruiken die past bij uw merkidentiteit en waarmee uw website opvalt. Websites hebben normaal gesproken 2-3 lettertypen. Net als bij kleuren heb je een primair lettertype dat zijn lettertypen voor koppen of menu. Je hebt ook een body lettertype voor paragrafen van teksten en ook een extra “pop lettertype”Om sommige teksten te laten opvallen.

Net als kleuren heeft u typografie nodig die trouw blijft aan uw merk, er aantrekkelijk uitziet en de juiste boodschap over uw merk uitzendt.

Een van mijn favoriete tools bij het kiezen van typografie is Fontpair.co. Dit is een website die je laat zien hoe twee verschillende lettertypen er samen uitzien.

fontpair.co

Als je iets ziet dat je leuk vindt, noteer dan hoe het wordt genoemd, zodat je ernaar kunt zoeken in WordPress en het op je website kunt gebruiken.

Ik gebruik ook graag WhatFont, een Google Chrome-extensie die je vertelt welk lettertype op elke website wordt gebruikt, gewoon door er met je muis over te bewegen.

WhatFont installeren, Klik hier dan klikken Toevoegen aan Chrome. Dan zie je dit pictogram op je werkbalk:

whatfont

Om de naam van een lettertype te kennen, klik je op dit pictogram en beweeg je je muis over de tekst. WhatFont vertelt u de naam van dit lettertype en als u erop klikt, ziet u ook de lettergrootte, kleur, familie, stijl, gewicht en meer.

met behulp van whatfont

Een logo krijgen

Ten slotte heeft uw bedrijf een mooi logo nodig dat vertelt waar uw merk om draait. Je kunt hier met drie verschillende routes gaan. U kunt uw logo zelf maken met een gratis tool genaamd Canva, een populaire ontwerptool die het ontwerpen heel gemakkelijk maakt, zelfs voor beginners.

Je zult versteld staan ​​hoeveel logo-sjablonen Canva heeft en ze zien er allemaal geweldig uit. U kunt deze sjablonen aanpassen om ze uw eigen te maken.

U moet echter weten dat u moet upgraden naar Pro als u het logo met een transparante achtergrond wilt exporteren. Er is echter een gratis proefperiode van een maand, dus u kunt upgraden naar Pro, uw transparante logo exporteren en annuleren voordat de proefperiode eindigt.

canva logo's

U kunt ook een logo-ontwerper inhuren om het voor u te doen. U kunt websites zoals Fiverr.com of 99design proberen, maar u moet voorzichtig zijn bij het kiezen van een artiest op basis van hun stijl, staat van dienst, recensies, beoordelingen en meer.

De derde route, en waarschijnlijk een goed idee als u een sterk merklogo wilt, is het inhuren van een ontwerpstrateeg / consultant. Mensen als deze zijn professionals die de tijd nemen om te begrijpen waar uw merk over gaat, waar uw bedrijf naartoe gaat en wat uw kernwaarden zijn, zodat ze dat kunnen opnemen in het logo.

Stap 6. Pas uw website aan.

Zodra u een kleurenpalet, lettertypen en logo voor uw website heeft, is het nu tijd om ze op uw website te gebruiken. Ga naar als u zich in het WordPress-backend-dashboard bevindt Verschijning > Aanpassen om de thema-aanpasser te openen.

thema aanpassen

Je kunt hier ook terecht als je aan de voorkant van je website staat. Er zou een zwarte balk bovenaan uw scherm moeten zijn, die alleen zichtbaar is voor degenen die zijn ingelogd op uw website. Klik Aanpassen om de thema-aanpasser te openen.

thema frontend aanpassen

Zodra u zich binnen de thema-aanpasser bevindt, kunt u uw logo toevoegen, kleuren wijzigen, de sitelay-out wijzigen en nog veel meer.

thema aanpassen

In de linkerzijbalk ziet u verschillende opties om uw website aan te passen. Elk thema heeft verschillende aanpassingsopties, dus als je een ander thema gebruikt, kan wat je hier ziet een beetje anders zijn dan het mijne. Alle wijzigingen die u hier aanbrengt, worden realtime weergegeven op uw website.

Ga in dit thema naar om uw sitekleuren te wijzigen Kleuren en achtergrond. Je hebt de mogelijkheid om de basiskleuren, breadcrumb, koptekst en voettekstbalk te wijzigen.

kleur achtergrondeditor

De basiskleuren zijn de themakleur, linkkleur, tekstkleur en link zweefkleur van uw website. Klik op om de basiskleuren te wijzigen Basiskleuren. Binnenin zie je knoppen die zeggen Selecteer kleur. Klik op deze knoppen om een ​​specifieke kleur te veranderen.

Klik bijvoorbeeld op om de themakleur te wijzigen Selecteer kleur naast dat. Je ziet dan twee manieren om een ​​kleur te selecteren. Ten eerste kunt u een hex-code in een vak plakken. Als je je herinnert waar we het in de vorige stap over Hex-codes over hadden, kun je in dergelijke velden die Hex-codes invoeren.

Dus als je een kleur hebt gevonden in Coolors.co of op andere plaatsen, kun je de Hex-code hier plakken. U kunt ook een kleur selecteren in een ingebouwde kleurselectietool.

basiskleureditor

Vervolgens verandert uw typografie. Ga terug naar de aanpasser door op de terugpijl bovenaan de zijbalk te klikken en klik op Typografie. Je kunt de basis-, broodkruimel-, inhouds- en blogtypografie wijzigen.

typografie

Ga ten slotte naar om uw logo te uploaden Indeling > Koptekst > Site-identiteit. Klik onder het gedeelte Logo op de Logo wijzigen knop en upload uw logo.

logo wijzigen

Met Astra kunt u ook een ander logo gebruiken voor apparaten met een netvlies of hoge resolutie, evenals voor mobiele apparaten. U kunt ook de breedte van het logo aanpassen. Als u naar beneden scrolt, kunt u ook uw sitetitel wijzigen, een sitetagline en een sitepictogram of favicon toevoegen.

Ik stel voor dat u de thema-aanpasser verkent om de verschillende dingen te zien die u hier kunt doen. Met Astra Theme kunt u meer doen, zoals de lay-out van uw koptekst en voettekst wijzigen, de structuur van blogposts wijzigen, de breedte van uw site wijzigen en nog veel meer.

Als je klaar bent met aanpassen, vergeet dan niet te klikken Publiceren om uw wijzigingen live te laten gaan op uw site.

Stap 7. Uw website aanpassen met Elementor.

Nu uw websitekleuren, typografie en logo allemaal zijn ingesteld, is het tijd om naar Elementor te springen en de manier waarop de website eruitziet volledig te veranderen, zodat deze bij uw merk past. We gaan de afbeeldingen, teksten, knoppen, lay-out en nog veel meer veranderen.

Er zijn twee manieren om een ​​pagina met Elementor te bewerken. Ga eerst naar als je in de backend zit Pagina’s en je zou een lijst met alle pagina’s van je website moeten zien. Dit omvat de pagina’s die Astra Site automatisch heeft gemaakt. Pagina’s die zijn gemaakt met een specifieke paginabuilder (bijvoorbeeld Elementor), worden als zodanig gelabeld:

Pagina's

Beweeg uw muis over de pagina die u met Elementor wilt bewerken en klik Bewerk met Elementor.

bewerk met elementor backend

Dat brengt je naar Elementor.

Als u zich op de frontend van uw website bevindt, kunt u Elementor openen door naar de pagina te gaan die u wilt bewerken en op te klikken Bewerk met Elementor op de zwarte balk bovenaan:

bewerk met elementor frontend

De Elementor-interface is eenvoudig te begrijpen en eraan te wennen, omdat deze redelijk lijkt op de thema-aanpassing. Het grootste deel van het scherm toont de pagina die je aan het bewerken bent, terwijl aan de linkerkant een zijbalk is met de bedieningselementen en opties.

elementor

Als je het hebt opgemerkt, is de koptekst niet zichtbaar in Elementor. De reden is dat de gratis versie van Elementor geen kopteksten en voetteksten kan bewerken. Deze functie is alleen beschikbaar voor Elementor Pro.

In de linkerzijbalk vindt u de elementen die u aan uw pagina kunt toevoegen. Zoals je kunt zien, kun je een kop, afbeelding, video, knop, scheidingslijn en meer toevoegen. U kunt deze elementen toevoegen door ze naar het gewenste gebied te slepen en neer te zetten.

Elementor maakt ook inline tekstbewerking mogelijk, wat betekent dat u de tekst in het inhoudsgebied zelf kunt wijzigen. Hier zijn enkele dingen die u kunt doen met teksten in Elementor:

tekst bewerken in elementor

Zoals u kunt zien, kunt u de tekst rechtstreeks in het inhoudsgebied bewerken of verwijderen, wat het zoveel gemakkelijker maakt. U vindt meer aanpassingsopties op de zijbalk, zoals het wijzigen van de grootte, kleur, gewicht, typografie-familie en schaduw. Je kunt ook animaties toevoegen zoals eenvoudige vervagingen, zoomen, stuiteren en meer.

Je zou ook je eigen afbeeldingen willen gebruiken om deze website helemaal eigen te maken. U kunt een afbeelding eenvoudig vervangen of verwijderen als u dat wilt. Om een ​​afbeelding aan te passen, klikt u erop en de opties verschijnen in de linkerzijbalk. U kunt een nieuwe afbeelding uploaden, de grootte wijzigen, een rand of schaduw toevoegen, een animatie toevoegen en meer.

afbeelding bewerken in elementor

Voor mijn website wil ik deze afbeelding helemaal verwijderen en alleen een andere achtergrondafbeelding gebruiken. Om een ​​afbeelding te verwijderen, beweeg uw muis erover en klik met de rechtermuisknop op blauw penpictogram in de rechterbovenhoek. Er verschijnt een pop-upmenu. Klik Verwijderen om de afbeelding te verwijderen.

een afbeelding verwijderen in elementor

Om de kop aan te passen, beweeg je je muis erover en klik je op het gestippelde pictogram bovenaan:

kop aanpassen in elementor

De aanpassingsopties voor de kop verschijnen dan in de linkerzijbalk. Klik op om de achtergrondafbeelding van uw kop te wijzigen Stijl en ga naar Achtergrond. Hier kun je een nieuwe achtergrond uploaden.

het aanpassen van de kop

Zoals je kunt zien, heb ik na het uploaden van de afbeelding de achtergrondoverlay aangepast om ervoor te zorgen dat de afbeelding duidelijk zichtbaar is. Ik heb dit gedaan door naar te gaan Achtergrondoverlay en het aanpassen van de dekking.

Ik heb ook de kleur van de tekst aangepast om ervoor te zorgen dat deze zichtbaar is, en ik heb de breedte van de tekst aangepast zodat deze niet overlapt met de afbeelding. Ik heb dit gedaan door naar te gaan Geavanceerd > Aangepaste positionering en selecteren Op maat voor de breedte.

Het bouwen van een verbluffende webpagina is zo eenvoudig met Elementor. Er zijn zoveel opties beschikbaar, dus het is gewoon een kwestie van elk hoekje en gaatje verkennen. Je kunt het in je eigen tempo verkennen en als er iets is dat je niet begrijpt, kun je contact met me opnemen via het onderstaande commentaargedeelte of zelfs zoeken in de uitgebreide Elementor kennis basis.

Ik heb ook een Elementor-zelfstudie waarin ik je laat zien hoe je snel aan de slag kunt met Elementor. Je kunt het bekijken hier.

Stap 8. Beveilig uw website.

Het is ook van cruciaal belang dat een bedrijfswebsite zo goed mogelijk is beveiligd tegen mogelijke hacking- en identiteitsdiefstalprogramma’s. Het feit is dat sommigen van jullie kwetsbaar zijn voor cyberaanvallen vanwege zwakke wachtwoorden, kwetsbaarheden voor plug-ins en verouderde software. Deze dingen laten een gat achter op uw website en u moet een manier vinden om deze gaten te blokkeren.

De beste WordPress-plug-in die ik tot nu toe heb gevonden en die dit doet, is iThemes-beveiliging. De gratis versie van deze plug-in biedt u al sterke beveiligingsfuncties en u kunt deze met één klik activeren.

Ga naar om iThemes-beveiliging te installeren Plug-ins > Nieuw toevoegen zoek dan naar iThemes-beveiliging.

installeer ithemes

Zodra het is geactiveerd, zie je een nieuwe optie in de zijbalk genaamd Veiligheid. Ga naar Veiligheid > Instellingen en je zou een bericht moeten zien over de verschillende functies die iThemes voor je kan doen.

beveiligde site-ithemes

Het inschakelen van al deze functies duurt slechts één klik van de blauwe Beveiligde site knop. Zodra u op die knop klikt, ziet u dit bericht:

activeer netwerk brute force bescherming

De Network Brute Force Protection is een functie waarbij gebruikers die hebben geprobeerd in te breken op andere sites die lid zijn van dit netwerk, automatisch worden uitgesloten van het inbreken op de jouwe. Dit is een redelijk goede functie die alleen iThemes heeft, dus om dit te activeren, geeft u gewoon uw e-mailadres op en klikt u op Activeer Network Brute Force Protection.

Met slechts een paar klikken is uw website nu veilig. Je kunt zoveel meer doen met deze plug-in, en als je er meer over wilt weten, kun je mijn iThemes Security review en setup tutorial bekijken hier.

Stap 9. Maak een back-up van uw website.

U moet ook een back-up van uw website maken om uzelf te redden van de mogelijke ongelukkige gebeurtenis waarbij uw gegevens verloren gaan. Hiervoor gaan we gebruiken UpdraftPlus-back-up.

Ga naar om deze plug-in te installeren Plug-ins > Nieuw toevoegen en zoek naar UpdraftPlus-back-up. Installeer en activeer het.

installeer updraftplus

Zodra het is geactiveerd, maakt het een nieuwe optie onder Instellingen gebeld UpdraftPlus-back-ups. Klik erop om te beginnen met het configureren van uw back-upinstellingen.

updraftplus back-ups in instellingen

Als je eenmaal binnen bent, klik je op Instellingen. Hier zullen we het zo instellen dat er regelmatig offsite automatische back-ups worden gemaakt. Voor de Back-upschema voor bestanden, Ik raad aan om het in te stellen wekelijks en het behouden ervan back-up. Bestanden veranderen niet vaak, dus dat is goed genoeg.

Wat betreft de Back-upschema voor database, aangezien dit vaak verandert, stelt u het in op dagelijks en bewaar 7 back-ups.

Zodra je de schema’s hebt ingesteld, scroll je naar beneden en druk je op Wijzigingen opslaan. Blader vervolgens weer omhoog om te kiezen waar u uw back-ups wilt opslaan. Ik raad Dropbox meestal aan omdat het heel gemakkelijk te gebruiken is, maar je kunt alles en zoveel gebruiken als je wilt.

het opzetten van updraftplus back-ups

Klik op de gewenste externe opslag en klik op Wijzigingen opslaan opnieuw. Je ziet dan dit bericht:

verificatie op afstand

U moet op deze link klikken om UpdraftPlus-back-ups te autoriseren om back-ups op uw geselecteerde opslag op te slaan. In dit voorbeeld, aangezien ik Dropbox heb gekozen, zal het klikken op deze link me naar de Dropbox-inlogpagina leiden. Zodra ik me aanmeld, zie ik dit bericht:

voltooi setup updraftsplus back-ups

Ik moet gewoon klikken Voltooi de installatie, en ik word teruggebracht naar UpdraftsPlus backend in WordPress met dit bevestigingsbericht bovenaan:

authenticatie volledige updraftplus

Als ik een back-up wilde maken, hoef ik alleen maar op het blauw te klikken Nu backuppen knop. UpdraftPlus zal ook back-ups maken volgens het schema dat ik eerder heb gemaakt en deze in DropBox pushen.

Als u een back-up wilt herstellen, klikt u gewoon op Bestaande back-ups en klik op de Herstellen.

Stap 10. Optimaliseer uw website.

We gaan verder met de laatste stap en in deze stap gaan we bekijken hoe u uw website kunt optimaliseren voor zoekmachines zoals Google. Ik weet zeker dat de meesten van jullie al gehoord hebben van SEO of zoekmachineoptimalisatie. In een notendop, het is de gewoonte om ervoor te zorgen dat uw website op de juiste manier is geoptimaliseerd, zodat zoekmachines uw pagina’s gemakkelijker kunnen vinden en u op de resultatenpagina’s kunnen tonen.

SEO heeft een aspect genaamd on-page SEO, en dit zijn praktijken die u kunt implementeren op uw website in WordPress om duidelijk aan zoekmachines te communiceren waar uw website en inhoud over gaan.

Dit zijn enkele on-page SEO-best practices die u moet implementeren:

  • Schrijf een metatitel en metabeschrijving voor elke pagina en post.
  • Voeg trefwoorden of sleutelzinnen toe en gebruik ze in de hele inhoud.
  • Voeg ALT TXT toe voor elke afbeelding op uw pagina / post.

Als je niet weet wat deze dingen zijn, is dat goed. Ze zijn vrij eenvoudig te leren. De metatitel is de titel die op Google Results verschijnt en de metabeschrijving is de korte beschrijving onder de titel. Hier is een voorbeeld:

voorbeeld van een Google-zoekresultaat

Het sleutelwoord is wat gebruikers in de zoekmachine typen om naar iets te zoeken. De metatitel is de titel van het resultaat en de metabeschrijving is de korte beschrijving hieronder. Dit zijn belangrijke details omdat ze Google vertellen waar de pagina over gaat en dat deze relevant is voor de sleutelzin ‘salon new York’.

Dit is een korte lijst met SEO-technieken op de pagina omdat je hier letterlijk zoveel doet. Maar voor nu gaan we ons hierop concentreren.

Om deze dingen te doen, hebben we een plug-in nodig. Een van de beste SEO WordPress-plug-ins op de pagina is Yoast SEO, en die gaan we in deze tutorial gebruiken. Ga naar om deze plug-in te installeren Plug-ins > Nieuw toevoegen en zoek naar Yoast SEO. Klik Installeer nu en Activeren.

installeer yoast seo

Wanneer je nu naar een pagina of post gaat, zie je dit nieuwe vak onder het editorgebied:

yoast seo box

Hier kunt u uw metatitel, metabeschrijving en zoekwoorden toevoegen. Typ een trefwoord in het onderstaande vak om een ​​trefwoord toe te voegen Focus sleutelzin:

voeg een trefwoord toe

Klik op om een ​​metatitel en beschrijving toe te voegen Fragment bewerken knop.

fragment bewerken

Onder SEO-titel is waar u uw metatitel moet toevoegen. Het is een goede gewoonte om hier uw focussleutelzin op te nemen. In het metabeschrijvingsveld moet u een duidelijk idee geven waar de pagina over gaat en hier ook de sleutelzin opnemen.

Terwijl u iets typt in de SEO-titel en het metabeschrijvingsveld, ziet u een oranje voortgangsbalk eronder. Dit betekent dat de tekst nog steeds te kort is. Als het eenmaal groen wordt, betekent dat dat de lengte van uw tekst precies goed is. Als het rood wordt, is het te lang en moet je het inkorten. Lange titels en beschrijvingen worden afgebroken in resultaten, dus het is beter om in het groene gebied te blijven.

Een ander ding dat u wilt doen, is ervoor zorgen dat uw sitemap is ingeschakeld en echt werkt. Ga daarvoor naar Yoast SEO > Algemeen > Kenmerken. Scroll naar beneden tot je het ziet XML-sitemaps. Zorg ervoor dat dit is ingeschakeld en klik vervolgens op de blauwe vraagteken icoon. Je ziet dan een link die zegt Zie de XML-sitemap. Klik hierop om uw sitemap te bekijken.

sitemaps inschakelen

Voor velen van jullie kan dit je naar een 404-pagina leiden. Maar maak je geen zorgen. De oplossing is vrij eenvoudig. Het enige wat je hoeft te doen is naar te gaan Instellingen > Permalinks. Selecteer Plaats naam en raak Wijzigingen opslaan.

post naam permalink

Wanneer u nu opnieuw probeert toegang te krijgen tot de XML-sitemap, ziet u zoiets als dit:

xml sitemap

Afsluiten

En dat sluit deze tutorial af over het maken van een zakelijke website met WordPress. Ik zou je een tik op de schouders willen geven omdat je zoveel hebt gedaan en zoveel hebt bereikt door deze tutorial te volgen. Als je vragen hebt, kun je ze hieronder in de sectie Opmerkingen plaatsen en ik help je graag verder.

SiteGround

SiteGround is een sterk aanbevolen webhost online omdat ze zich hebben toegelegd op WordPress-gebruikers en toch een betaalbare prijs hebben. Ze staan ​​vooral bekend om hun snelle prestaties en even snelle ondersteuning.

Belangrijkste kenmerken van SiteGround:

  • Gratis SSL-certificaat
  • SNEL geïnformeerde ondersteuning
  • WordPress Staging Enviroment
  • Gratis website-migraties
  • Dagelijkse back-ups

SiteGround is een solide keuze voor uw webhostingbehoeften. Ze spelen in op WordPress-websites en bieden minder middelen dan hun concurrenten, maar een hogere betrouwbaarheid.

Bekijk SiteGround

Astra-thema

Astra is een gratis WordPress-thema dat is gericht op snelheid. Optioneel kun je de Pro-versie kopen voor $ 59, wat een aantal extra instellingen en opties toevoegt.

Belangrijkste Astra-themafuncties:

  • Niet het Fastes-thema, maar het is geen flauw idee
  • Veel gratis demosites
  • Flexibele Mega-menufunctie
  • Aangepaste lay-outopties
  • WooCommerce-ondersteuning
  • LearnDash-ondersteuning

Astra Theme is een goede keuze voor elk WordPress-webontwerpproject. Ik veronderstel dat de grootste vraag is of je tegenwoordig zelfs een thema moet kopen, omdat paginabouwers allemaal dezelfde dingen doen waarvoor je een thema nodig hebt. Elementor heeft bijvoorbeeld het gratis Hallo-thema waarmee uw paginabouwer al het werk kan doen.

Er zijn nog steeds enkele goede redenen om een ​​pro-thema te kopen, maar voor de meeste mensen zullen ze waarschijnlijk een gratis thema hebben.

Voor mij denk ik echter dat Astra Theme de huidige trends niet heeft bijgehouden en ik raad het niet langer aan.

Er zijn veel betere moderne thema’s beschikbaar die ingebouwde builders voor kop- en voetteksten bieden in vergelijking met drie lay-outs, plus flexibelere pagina- en postlay-outs.

Bekijk Astra Theme

Elementor

Elementor is een WordPress-paginabuilder die het webdesign van WordPress stormenderhand heeft veroverd. Het heeft de diepste functieset, maar is toch heel gemakkelijk te gebruiken en te beheersen. Elementor is de meest complete gratis paginabuilder. Er is ook een Pro-add-on om extra ontwikkelaarsfuncties toe te voegen.

Belangrijkste Elementor-functies:

  • Live Front End Page Editor
  • Website-personalisatiefuncties
  • Sjabloon- en blokbibliotheek
  • Uitgebreide mobiele responsieve opties
  • Krachtigste Popup Builder
  • PRO Maak aangepaste kopteksten / voetteksten
  • PRO Maak berichttype-indelingen

Elementor is de sterkste paginabuilder die momenteel beschikbaar is. Ze brengen consequent nieuwe functies uit die in lijn zijn met de huidige designtrends. Dit betekent dat u uw website relevant kunt houden.

Elementor Pro is een ongelooflijke waarde gezien alle extra modules en vermogensfuncties die het bevat.

Als ik vandaag een nieuw websiteproject zou starten, zou Elementor de paginabuilder zijn die ik zou kiezen. Ik beschouw het als een must-have WordPress paginabuilder die een genot is om te gebruiken.

Bekijk Elementor

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector