Hoe Responsive WordPress-websites (met thema's) te maken

Het gebruik van een responsief website-ontwerp is niet langer een optie bij het bouwen van websites. In termen van de leek zorgt een responsief websiteontwerp ervoor dat uw site er goed uitziet, ongeacht welk apparaat uw bezoekers gebruiken om de inhoud te bekijken en ermee om te gaan.

Gezien het feit dat meer dan 80% van de mensen een smartphone bezitten, is het een must om ervoor te zorgen dat uw website reageert. Volgens mobiele marketingstatistieken uit 2016 zegt 57% van de gebruikers dat ze een bedrijf met een slecht ontworpen mobiele site niet zullen aanbevelen en dat 88% van de consumenten die op zoek zijn naar een type lokaal bedrijf op een mobiel apparaat, belt of belt naar dat mobiele apparaat zaken binnen 24 uur.

Wanneer u het bovenstaande in overweging neemt, is het gemakkelijk te begrijpen waarom de inhoud van uw website toegankelijk moet zijn op verschillende apparaten. Gelukkig is het gemakkelijk om je WordPress-website responsief te maken dankzij een overvloed aan responsieve thema's.

In deze zelfstudie laten we u zien hoe u een responsief WordPress-thema kiest, hoe u een responsief thema voor uw site gebruikt en hoe u meer informatie krijgt over responsief ontwerp en hoe u uw eigen responsieve WordPress-thema kunt maken.

Hoe een responsief WordPress-thema te kiezen

Wanneer u op zoek bent naar een responsief thema voor uw site, zijn er een paar dingen die u moet overwegen. Afhankelijk van uw branche is het belangrijk om een ​​thema te kiezen dat niet alleen een aantrekkelijk ontwerp heeft, maar ook noodzakelijke functies die uw bezoekers helpen meer te leren over uw bedrijf en van prospects naar betalende klanten gaan.

Hier zijn een paar belangrijke dingen om op te letten bij het winkelen voor een responsief WordPress-thema voor uw site.  

1. Overweeg de functies

Als het gaat om functies, moet u op zoek naar een thema met functies die aansluiten bij uw branche. Als u bijvoorbeeld een creatief bureau of een ontwerper bent, wilt u een thema dat de mogelijkheid heeft om uw portfolio te presenteren, evenals getuigenissen van klanten in het verleden..

Als u producten verkoopt, zoekt u naar een thema dat goed kan worden geïntegreerd met een e-commerce-plug-in of waarmee u prijstabellen kunt weergeven. Evenzo, als u vertrouwt op de mogelijkheid om klanten van uw site te boeken, zoek dan naar een thema met een ingebouwd boekingsformulier.

Gelukkig zijn er tal van branchespecifieke WordPress-thema's die alle benodigde functies hebben en reageren.

2. Controleer of er maatwerkopties zijn

U wilt een thema zoeken met flexibele aanpassingsopties. In de meeste gevallen wordt uw thema geleverd met een paneel met thema-instellingen waarmee u kleuren, lettertypen, uw logo en nog veel meer kunt aanpassen. Als u graag met verschillende lay-outs wilt experimenteren, kiest u een thema dat is geïntegreerd met een paginabuilder of heeft u een alternatieve manier om verschillende lay-outs voor uw pagina's te configureren..

3. Zoek naar een responsief WordPress-thema met een aantrekkelijk ontwerp

Ga ten slotte op zoek naar een thema met een aantrekkelijk ontwerp dat lijkt op hoe u uw website eruit wilt laten zien. Dit elimineert de tijd die u nodig heeft om te wijzigen of de lay-out van uw pagina's helemaal opnieuw uit te werken en het zal gemakkelijker voor u zijn om het aan te passen.

Als je eenmaal een responsief WordPress-thema hebt gevonden dat je leuk vindt, hoef je het alleen maar te kopen en het gecomprimeerde bestand naar je computer te downloaden. Ontdek responsieve WordPress-thema's op ThemeForest of Envato Elements: 

Aan de slag met uw responsieve website

Nu u uw thema heeft, is het tijd om aan de slag te gaan met het bouwen van uw responsieve website. U moet een domeinnaam en een hostingplan kopen waar u WordPress en uw voorkeursthema installeert.

Het is ook een goed idee om de inhoud voor te bereiden die op uw site wordt weergegeven, zodat u de inhoud eenvoudig kunt kopiëren en plakken wanneer het tijd is om deze te uploaden, in plaats van tijd te besteden aan het zoeken ernaar.

1. Een domeinnaam

De eerste stap is om een ​​domeinnaam voor uw website te kopen. Hiermee kunnen uw bezoekers en klanten uw website op internet vinden. Het is dus belangrijk om een ​​naam te kiezen die uw bedrijf of merk vertegenwoordigt. Probeer waar mogelijk uw domeinnaam te koppelen aan een .COM-extensie. U kunt ervoor kiezen om uw website dezelfde naam te geven als uw bedrijfsnaam of u kunt uw eigen naam kiezen als u een persoonlijke portfolio, een blog of een cv-website maakt.

2. Een hostingplan

Zodra u uw domeinnaam heeft afgehandeld, moet u een hostingplan kiezen zodat mensen toegang hebben tot uw site. Er zijn tal van opties als het gaat om hosting, van goedkope, gedeelde plannen tot duurdere, beheerde WordPress hostingplannen.

Als u niet zeker weet waar u moet beginnen, kunt u Envato Hosted overwegen. Envato Hosted biedt premium beheerde WordPress-hosting, maar het echte voordeel is dat ze WordPress kunnen installeren en instellen samen met het door u gekozen thema en zorgen voor de technische details van het opzetten van uw site.  

Het door Envato gehoste plan omvat ook:

  • Tot 100.000 maandelijkse bezoeken van inkomend verkeer, 5 GB schijfruimte en 100 GB aan maandelijkse bandbreedte.
  • Dagelijkse back-ups, serverbeveiliging en sitemonitoring, evenals voortdurende ondersteuning door ons team van WordPress-experts.

3. Inhoud en afbeeldingen

Neem ten slotte enige tijd om alle inhoud voor te bereiden die op uw website wordt weergegeven. Dit omvat meestal afbeeldingen, kopie die op uw belangrijkste pagina's zoals de Wat betreft, Diensten of Werk met ons pagina's. Als u meerdere afdelingen heeft, overweeg dan om bios en headshots op te nemen van de mensen die elke afdeling beheren, zodat uw bezoekers weten met wie ze contact moeten opnemen.

Als u uw inhoud van tevoren voorbereidt, kunt u deze eenvoudig kopiëren en plakken in plaats van demo-inhoud die beschikbaar is met de meeste moderne thema's.

Hoe u uw site kunt maken

Nu u alles op orde hebt, is het tijd om uw site te maken. Het eerste dat u moet doen is WordPress installeren. Vervolgens kunt u uw thema, de benodigde plug-ins installeren en doorgaan met het instellen en aanpassen van het thema.

Voor deze tutorial gebruiken we het Oshine responsive WordPress-thema. Het Oshine-thema heeft een modern en responsief ontwerp en kan voor verschillende niches worden gebruikt. Het bevat meer dan 30+ demo's die met een enkele klik kunnen worden geïmporteerd en worden gebruikt om uw website snel in te stellen.

Oshine Theme

1. Installeer WordPress

Zoals eerder vermeld, is de eerste stap het installeren van WordPress. Uw hostingbedrijf stuurt u een welkomstmail met de link naar het dashboard of het dashboard van uw hostingaccount, samen met uw gebruikersnaam en wachtwoord. Klik op de link en voer de verstrekte informatie in.

Nadat u bent ingelogd, kunt u zoeken naar een sectie met het label WordPress Installeren, Installatieprogramma's met één klik, Softaculous Installers, of iets dergelijks. Vind de WordPress pictogram, klik erop en volg de instructies.

In de meeste gevallen wordt u begroet met een scherm waarin u wordt gevraagd om de naam en beschrijving van uw site, uw gewenste gebruikersnaam en wachtwoord en uw e-mailadres op te geven. Vul de velden in met uw informatie en druk op de Installeren knop.

Na een paar minuten wordt WordPress geïnstalleerd, wat betekent dat u nu kunt inloggen op uw WordPress-dashboard. Gewoon bezoeken www.yoursitename.com/wp-admin (vervang de yoursitename.com door uw werkelijke domeinnaam) en voer de gebruikersnaam en het wachtwoord in die u tijdens de installatie hebt gemaakt.  

2. Installeer een WordPress-thema

Ga in uw WordPress-dashboard naar Uiterlijk> Thema's> Nieuw toevoegen. Dan klikken Thema uploaden.

Het Oshine-thema installeren.

Zoek de gedownloade zip-map met de bestanden van het thema en upload deze. Nadat de installatie is voltooid, klikt u op Activeren.

3. Installeer de vereiste invoegtoepassingen

Nadat u het thema hebt geactiveerd, ziet u een melding in het dashboard met een bericht dat bepaalde plug-ins vereist zijn voor het thema om alle functionaliteit te hebben. Klik op de Begin met het installeren van plug-ins link om rechtstreeks naar het installatiescherm te worden gebracht.

De vereiste plug-ins installeren.

Selecteer alle plug-ins en klik op Installeren. Ga daarna naar Plug-ins> Alle plug-ins> Inactief en selecteer alle inactieve plug-ins en kies vervolgens de Activeren optie in het vervolgkeuzemenu.

Hoe u uw site kunt aanpassen

Het volgende deel van het opzetten van uw website omvat het importeren van demo-inhoud, het vervangen van uw inhoud en het wijzigen van thema-instellingen om uw lettertypen, kleuren, logo en meer op te nemen.

1. Demo-inhoud importeren

De snelste manier om uw site in te stellen, is door de demo-inhoud te installeren. Hierdoor ziet uw thema eruit als de door u gekozen demo, waarbij alle pagina's zijn gemaakt en ingesteld, dus alles wat u hoeft te doen is de inhoud vervangen.

Ga om te beginnen naar het Oshine responsieve WordPress-thema en navigeer naar de Importeren tab. Selecteer de gewenste demoversie en kies welke inhoud u wilt installeren. In ons geval heb ik alle inhoud geselecteerd en op de knop geklikt Installeren knop. Wacht tot het proces is voltooid en uw site klaar is voor aanpassing. Bekijk het om ervoor te zorgen dat het importproces is geslaagd.

Demo-inhoud importeren in Oshine.

Laten we doorgaan met het vervangen van de demo-inhoud. Ga in uw WordPress-dashboard naar Pages en klik op de Bewerk op de pagina waarmee u wilt werken. In dit voorbeeld zullen we de startpagina bewerken.

Het Ower responsive WordPress-thema gebruikt de Tatsu-paginabuilder om de lay-out voor alle pagina's op uw site te maken, waardoor het heel gemakkelijk is om ze te bewerken. Klik gewoon op de Bewerken met Tatsu knop en kunt u de lay-out wijzigen, extra modules toevoegen en meer.

Tatsu Editor

Om elementen op uw pagina te bewerken, klikt u eenvoudig op het gedeelte van de pagina dat u wilt bewerken, voert u uw eigen tekst in en past u de instellingen naar wens aan. U kunt ook extra elementen toevoegen, zoals tekstvakken, knoppen, pictogrammen, video's, afbeeldingen en meer.

Modules toevoegen aan het responsieve WordPress-thema.

2. Pas visuele verschijning aan

Als u klaar bent met het vervangen van de inhoud door uzelf, is het tijd om de visuele uitstraling van uw site vorm te geven. Ga naar Oshine-opties om te beginnen met het aanpassen van uw site. Je zult merken dat er nogal wat opties zijn.

U kunt uw eigen logo en achtergrondafbeelding uploaden, de lettertypen aanpassen die op uw site worden gebruikt, mobiele stijlen beheren, de informatie instellen die wordt weergegeven in de voettekst en de kop, en meer. U kunt ook standaardinstellingen voor algemene stijlen aanpassen, uw contactgegevens en trackingscripts zoals Google Analytics-code invoegen en de prestaties van uw site optimaliseren door stijlbladen en scripts te minimaliseren.

Hoe maak je een responsief websitethema en waarom doe je dat

Het gebruik van een vooraf ingesteld WordPress-thema is een geweldige manier om tijd te besparen en ervoor te zorgen dat uw site reageert. U kunt uw site echter naar een hoger niveau tillen door uw eigen responsieve WordPress-thema helemaal zelf te bouwen.

Hoewel dit misschien ontmoedigend lijkt, geeft het je de ultieme controle over het ontwerp en de functies van je site. Als je nieuwsgierig bent naar hoe je je eigen responsieve thema kunt maken of meer wilt weten over responsive website-ontwerp, volgen hier een paar handleidingen om je op weg te helpen.

1. Responsive Web Design voor beginners

Deze cursus behandelt de basisprincipes van responsief ontwerp, legt de mobile-first benadering en verschillende lay-outs uit die worden gebruikt in responsief webontwerp en pakt geavanceerdere onderwerpen aan, zoals zorgen dat uw afbeeldingen responsief zijn en het gebruik van mediaquery's om de lay-out van uw website voor verschillende apparaten.

2. Een mobiel eerste responsief WordPress-thema bouwen

Deze stapsgewijze zelfstudie leidt u door het proces van het gebruik van een startthema en verandert het in een responsief antwoord, waarbij u de mobiel-eerst-benadering in gedachten houdt. U leert hoe u stijlen voor mobiele apparaten kunt toevoegen en kunt overstappen op het stylen van uw thema voor desktopapparaten.

3. Zeven plug-ins om uw mobiele gebruikers te helpen

In dit bericht ontdek je zeven nuttige WordPress-plug-ins die je site voor mobiele apparaten zullen optimaliseren; om ervoor te zorgen dat uw afbeeldingen en widgets reageren op specifieke invoegtoepassingen om ervoor te zorgen dat uw site er goed uitziet op mobiele apparaten, zelfs als uw thema nog niet reageert.

Ga aan de slag met uw responsieve website

Het creëren van een responsieve website lijkt misschien ontmoedigend, maar responsieve WordPress-thema's maken die taak veel gemakkelijker, zelfs voor complete beginners. Gebruik onze zelfstudie hierboven als een referentiepunt en onderzoek aanvullende bronnen over responsief webontwerp. En als u een responsief WordPress-thema nodig hebt, bekijk dan onze verzameling van hoogwaardige, responsieve WordPress-thema's voor elke branche.

SaveSave