Divi: Het beste WordPress-thema aller tijden!

Meer 901.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.

Elementor biedt regelmatig thema's aan die u helpen hier een complete website van te maken. Elke maand brengen we nieuwe thema's uit die zijn gebouwd rond een specifieke niche, maar toch flexibel genoeg zijn om ze eindelijk aan je eigen behoeften aan te passen.

In combinatie met Elementor Pro helpen deze thema's je om snel aan de slag te gaan met elk onderdeel van je website, inclusief:

de Pstatische leeftijden, zoals de startpagina,

  • de koptekst
  • de voettekst
  • pagina 404
  • de sectie Archief 
  • de blog
  • Pop-ups en anderen

Dus in deze tutorial laten we je zien hoe je een complete website bouwt met Elementor visuele paginabuilder.

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.

Hoe u een complete website bouwt met Elementor-thema's

In deze tutorial leer je hoe je een thema gebruikt als basis voor alle belangrijke onderdelen van je website en vervolgens alles samenvoegt om een ​​samenhangende website te maken.

Om precies te zijn, het thema Digital Agency.

Uw website heeft een aantal basispagina's, zoals pagina's:

  • Home
  • Over ons
  • Diensten
  • Klanten
  • Blog
  • Contact

En het biedt ook secties die ook zijn gewijd aan dynamische inhoud. Uw blogpostarchieven en postsjablonen komen bijvoorbeeld automatisch overeen met uw zelfstandige pagina's. U kunt ook uw koptekst, voettekst en pagina's 404.

Hoe maak je een complete website elementor blogpascher 1

Dus hier is hoe je een website met een Elementor-thema maakt:

1. Installeer en activeer het Elementor Hello-thema 

Omdat je Elementor en een themasjabloon gaat gebruiken om je hele website te bouwen, hoef je niet naar andere elementen te zoeken.

In plaats daarvan heb je alleen een lichtgewicht, voor prestaties geoptimaliseerde website nodig, die het Elementor Hello-thema biedt.

Ga naar om te beginnen Uiterlijk → Thema's → Toevoegen en zoeken " Hallo Elementor". Installeer en activeer vervolgens het thema. 

2. Configureer de standaard statische pagina's van uw website

Ga dan naar het menu Pagina's → Toevoegen om de basispagina's van uw website te maken.

Maak eerst een pagina met de naam ' Home 'En klik op de knop Bewerken met Elementor om Elementor te starten.

Klik op instellingen om het pagina-instellingen en verander de lay-out om gelijk te zijn aan Elementor volledige breedte.

Open vervolgens de Elementor-sjabloonbibliotheek en zoek naar "Digital Agency" onder Pages :

U zou een lijst met paginasjablonen van dit thema moeten zien. Sjabloon invoegen Startpagina uit de lijst met modellen.

Nu zou je een volledige homepage moeten zien. De koptekst ziet er voorlopig een beetje saai uit, maar maak je geen zorgen, we zullen dat binnenkort oplossen.

Voeg vervolgens nog een pagina toe om te gebruiken voor uw " Over ons".

Creëer eenvoudig uw website met Elementor

Met Elementor kun je creëren Gemakkelijk en gratis elk website- of blogontwerp met een professionele uitstraling. Betaal niet langer veel voor een website die u zelf kunt doen.

Maak zoals eerder een pagina en wijzig de lay-out in Elementor volledige breedte. Open vervolgens de sjabloonbibliotheek en voeg de sjabloon in Over ons van het thema Digital Agency.

Herhaal nu hetzelfde proces om alle andere pagina's te maken, inclusief: Diensten, Klanten, en Contact.

Maak je nog geen zorgen over de blogpagina. Deze pagina is niet statisch zoals de andere. Om deze reden ga je het daar maken via een andere methode (die we later in deze tutorial zullen behandelen).

Om het instellen van uw statische pagina's te voltooien, moet u uw WordPress-installatie vertellen om een ​​statische startpagina te gebruiken. Om dit te doen…

  • gaan naar Instellingen → Afspelen
  • Kiezen  Een statische pagina (kies hieronder) onder uw homepage-instellingen 
  • Selecteer de pagina met de startpaginasjabloon van het thema

3. Maak de andere delen van uw website

Nu ben je klaar om de andere delen van je website te bouwen met Elementor. Met Elementor kun je verder gaan dan het maken van statische pagina's (zoals je hierboven hebt gedaan).

Met Elementor kunt u ook secties ontwerpen zoals: en-hoofd; de voettekst, enz ...

En dankzij het Elementor-thema kun je sjablonen importeren voor alle secties die al op de statische pagina's staan ​​die je in de vorige stap hebt gemaakt.

Ga naar om toegang te krijgen tot de visuele bouwer van Elementor Sjablonen→ Themabouwer. U moet Elementor Pro installeren om er toegang toe te hebben.

Nu is het tijd om uw secties te maken

hoofd

Ga naar het tabblad om te beginnen Voorvoegsel van de visual builder-interface en klik op Voeg een nieuwe. Op het volgende scherm ziet u een selectie van sjablonen in de Elementor-bibliotheek. Zoek, net als bij statische pagina's, naar "Digital Agency" en voeg vervolgens het volgende in:

Elementor - kopsjabloon invoegen

Nu zou u een visueel voorbeeld van uw koptekst moeten zien, evenals een navigatiemenu van de sjabloon die u hebt ingevoegd.

Als je het wilt veranderen

  • gaan naar  Uiterlijk → Menu's in uw WordPress-dashboard
  • Een nieuw menu maken

Nadat u een menu heeft gemaakt, kunt u de pagina's die u in stap # 2 heeft gemaakt, toevoegen aan uw navigatiemenu.

Lees ook: 10 automatiseringstools voor marketing voor kleine bedrijven

Als u klaar bent met het toevoegen van menu-items, slaat u uw menu op en keert u terug naar uw koptekstsjabloon in de Elementor-interface.

dan publiceren uw koptekst en gebruik weergavevoorwaarden om uw koptekstsjabloon op uw hele website weer te geven. Als je wilt, kun je ook weergavevoorwaarden gebruiken om verschillende kopteksten te maken voor verschillende soorten inhoud:

Druk dan op Opslaan en sluiten

footer

Nu is het tijd om uw voettekst voor uw website te maken:

  • Ga terug naar de interface van de visuele paginabuilder
  • Klik op het tabblad footer 
  • Klik op de knop om Nieuwe voettekst toevoegen
  • Geef in de pop-up een naam aan uw voettekst en klik op Sjabloon maken

Nu zou u een lijst met voettekstsjablonen moeten zien, net zoals u deed met uw koptekst. Zoek naar "Digital Agency" en voeg de voettekstsjabloon in.

Wilt u uw producten op internet verkopen?

Download gratis WooCommerce, de beste e-commerce plug-ins om uw fysieke en digitale producten op WordPress te verkopen en eenvoudig uw online winkel te creëren. Ideaal voor beginners.

Nadat u de voettekstsjabloon heeft ingevoegd, zou u een voorbeeld van uw voettekst moeten zien:

dan publiceren uw voettekstsjabloon en gebruik de weergavetermen om deze op uw hele website weer te geven.

Blogpagina

In tegenstelling tot de statische pagina's die u in stap 2 heeft gemaakt, is de blogpagina van uw website een ' archief ". Kort gezegd betekent dit dat het dynamisch de nieuwste inhoud van uw website weergeeft.

Als een gebruiker op een specifiek item op de blogpagina klikt, wordt hij naar een pagina geleid die de inhoud van dat item weergeeft. Dit wordt de "enkele" pagina genoemd. Uw unieke ontwerp zorgt ervoor dat al uw inhoud er hetzelfde uitziet - het enige dat verandert, is de daadwerkelijke inhoud (zoals de titel van het bericht, de hoofdtekst, de uitgelichte afbeelding, enz.).

Ontdek ook Inhoudsopgave toevoegen in WordPress met Elementor

Om unieke archiefpagina's en paginasjablonen te maken, moet u Elementor visuele bouwer gebruiken - niet zones pagina ou dit artikel WordPress standaard.

Beginnen…

  • Open de Theme Builder-interface
  • Ga naar het tabblad Archief
  • Klik op Nieuw toevoegen
  • Geef het een naam en klik op Sjabloon maken

Net als bij uw kop- en voettekst, ziet u een lijst met archiefpaginasjablonen. Zoek de sjabloon "Digital Agency" en voeg deze in.

Nu zou u het basisontwerp van uw artikelenpagina moeten zien.

Opgemerkt moet worden dat als u slechts één artikel ziet, dit normaal is, omdat WordPress alleen wordt geleverd met een standaardvoorbeeld dat "Hallo wereld! ".

Voorlopig hoeft u alleen maar te doen publiceren uw archiefpagina en stel deze in om in alle archieven weer te geven.

Lees onze gids verder Hoe een WordPress-website handmatig te migreren

Vervolgens kun je naar het berichtenmenu in je dashboard gaan en nieuwe blogberichten maken. Wijs elk item toe aan een categorie met de naam "Nieuws'.

Als je nu naar je blogpagina gaat, zou je automatisch al deze nieuwe berichten moeten zien:

Creatie van de blogpostsjabloonpagina

Op dit moment ziet uw blogpagina er vrij gebruiksvriendelijk uit. Maar als je op een specifieke blogpost klikt, komt de lay-out niet overeen met de rest van je website.

Om dit probleem op te lossen, moet u een "uniek" sjabloon maken met Elementor:

  • Open Elementor visuele bouwer
  • Ga naar het tabblad Enkele (single) Post
  • Klik op Voeg een nieuwe

In de pop-up Nieuwe sjabloon :

  • Geef het een naam
  • Selecteer Post in de vervolgkeuzelijst Selecteer berichttype. Dit vertelt Elementor dat je deze sjabloon wilt gebruiken voor je blogposts (in tegenstelling tot Pages of een ander aangepast berichttype dat je zou kunnen gebruiken)

Opnieuw ziet u de Elementor-sjabloonbibliotheek. Zoek de unieke artikelsjabloon van de "Digital Agency" -sjabloon en voeg deze in.

Lees ook Onderhoudsmodus op WordPress: uitleg en configuratie

Als u wilt, kunt u de vele widgets voor dynamische publicatiegegevens gebruiken om het uiterlijk van uw pagina te bepalen.

Als u bijvoorbeeld de widget wijzigt  Info plaatsen, kunt u de metadata-elementen beheren die verschijnen, zoals bij de publicatie ...

  • Auteur
  • Publicatiedatum
  • Opmerkingen
  • Enz.

Als u tevreden bent met uw artikelmodel, klikt u op publiceren. Vervolgens kunt u de weergave-opties gebruiken, zodat deze unieke sjabloon alleen van toepassing is op berichten in de categorie "Beyond News":

  • Kies uit de categorie
  • Kies de categorie Nieuws

Druk dan op Opslaan en sluiten.

Nu moeten al uw blogberichten een ontwerp hebben dat past bij de rest van uw website.

Om dingen af ​​te maken, ga naar Uiterlijk → Menu's en voeg je blogpagina toe aan je navigatiemenu. Om dit te doen, kunt u een link toevoegen aan de categorie "Nieuws" in de sectie Categorieën.

pagina 404

Ten slotte moet u de 404-pagina van uw website maken. De 404-pagina van uw website is wat bezoekers te zien krijgen als ze een verbroken link volgen of een pagina proberen te bezoeken die niet bestaat.

Ontdek ook onze 5 WordPress plugins om fouten beter te beheren 404

Om uw 404-pagina te maken, gebruikt u de Elementor-visualbuilder om nog een unieke sjabloon toe te voegen.

  • Open Elementor visuele bouwer
  • Ga naar het tabblad error 404
  • Klik op Voeg een nieuwe
  • Sjabloon voor digitaal bureau invoegen vanaf 404-pagina
404-pagina - maak een complete website

Publiceer vervolgens uw sjabloon om uw website te voltooien.

Download Elementor Pro nu!

Conclusie

Alstublieft ! Dat is het voor deze gids die u stap voor stap laat zien hoe u een complete website bouwt met Elementor. Si vous avez reacties of suggesties, aarzel niet om ons te laten weten in de gereserveerde sectie.

U kunt echter ook overleggen onze middelen, 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 of die op Divi: het beste WordPress-thema aller tijden.

Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken

...

0 aandelen
aandeel
gekwetter
Enregistrer