Door naar hoofdmenu

Hoe u een aangepaste lay-out met Elementor creëren

Divi: het gemakkelijkste te gebruiken WordPress-thema

Divi: Het beste WordPress-thema aller tijden!

Meer 701.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. [Aanbevolen]

Wilt u uw eigen aangepaste lay-outs maken op WordPress? Wilt u eenvoudig een website maken met een professionele uitstraling? Dus je moet Download hier de WordPress Elementor-plug-in.

 Elementor is een visuele paginabuilder die de "Drag and Drop" -functie biedt waarmee u eenvoudig aangepaste lay-outs op WordPress kunt maken zonder enige kennis van codering.

In deze zelfstudie laten we u zien hoe u eenvoudig met enkele klikken aangepaste WordPress-lay-outs kunt maken met Elementor. Wij bieden ook bekijk de andere alternatieven van deze prachtige WordPress-plug-in.

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.

Waarom en wanneer aangepaste lay-outs maken op WordPress?

Voordat u begint, kunt u deze WordPress-plug-in ontdekken door de artikelen te raadplegen Presentatie van een WordPress builder-pagina: Elementor of het ontdekken van de Elementor tutorial: introductie van de interface 

Veel gratis en premium WordPress-thema's bieden verschillende indelingskeuzes voor verschillende soorten pagina's. Soms voldoet echter geen van deze lay-outsjablonen aan uw behoeften.

Als u echter een fan bent van PHP, HTML en CSS, kunt u uw eigen paginasjablonen maken of zelfs een kindthema voor uw website maken. Maar de meeste WordPress-gebruikers zijn geen ontwikkelaars, dus deze optie werkt niet voor hen.

Ontdek ook deze 8 WordPress plug-ins om eenvoudig uw lay-outs te maken

Zou het niet geweldig zijn om lay-outs te maken met behulp van een eenvoudige interface (slepen en neerzetten)?

Dit is precies wat Elementor doet. Dit is een plug-in voor het maken van WordPress-pagina's waarmee u eenvoudig uw eigen aangepaste WordPress-lay-outs kunt maken zonder codeervaardigheden.

Het heeft een intuïtieve gebruikersinterface waarmee u aangepaste lay-outs kunt maken met realtime preview. Het wordt geleverd met tal van kant-en-klare modules voor alle soorten webontwerpelementen.

Het biedt verschillende professioneel ontworpen paginasjablonen die u direct als startpunt kunt laden en gebruiken. Met dat gezegd, laten we eens kijken hoe we aangepaste WordPress-lay-outs kunnen maken met de WordPress Elementor-plug-in.

Aan de slag met Elementor

U moet eerst de plug-in kopen " Elementor Pro ". Dit is de betaalde versie van de plug-in " Elementor Gratis die u toegang geeft tot extra functies en de klantenservice van 1.

Vervolgens moet u de Elementor-plug-in installeren en activeren. Zie onze stapsgewijze handleiding voor meer informatie manier om een ​​WordPress-plug-in te installeren.

Ga na activering naar de " Elementor> Instellingen Om de werking van deze plug-in te configureren.

Elementinstellingen

Hier kunt u "Elementor" voor verschillende soorten publicaties activeren. Het is standaard ingeschakeld voor uw artikelen en WordPress-pagina's. Als u aangepaste publicatie-indelingen op uw website heeft, verschijnen deze hier ook en u kunt ze ook inschakelen.

U kunt gebruikersrollen uitsluiten of opnemen die Elementor kunnen gebruiken tijdens het schrijven van berichten of pagina's. Standaard is het alleen ingeschakeld voor beheerders.

Ontdek onze 8 WordPress-plug-ins om rollen en gebruikers te beheren

Vergeet niet op de knop «te klikken Wijzigingen opslaan Om uw instellingen op te slaan.

Creëer eenvoudig uw website met Elementor

Met Elementor kunt u eenvoudig elk website-ontwerp maken met een professionele uitstraling. Stop met betalen duur voor wat je zelf kunt doen. [Gratis]

Een aangepaste lay-out maken met Elementor

Eerst moet u een nieuwe pagina (of bericht) op uw WordPress-website maken. Op de pagina voor het bewerken van berichten zul je de nieuwe knop "Bewerken met Elementor" opmerken.

Bewerk met elementor

Als u erop klikt, wordt de gebruikersinterface van Elementor geopend, waar u uw pagina kunt bewerken met behulp van de visuele paginabuilder met slepen en neerzetten.

Sleep elementor

U kunt nu secties toevoegen en uw pagina helemaal opnieuw maken, of u kunt nog steeds een van de standaard verzonden sjablonen laden.

Modellen zijn een snellere manier om snel aan de slag te gaan. Elementor biedt dus verschillende professioneel ontworpen sjablonen die u zoveel kunt aanpassen als u wilt.

Laten we beginnen met een sjabloon door op de knop ' Voeg een sjabloon toe .

Dit geeft een pop-upvenster weer waarin u de verschillende beschikbare modellen kunt zien. Je moet op zoek gaan naar een model dat eruit ziet zoals je wilt. 

Layout elemntor plugin

Klik nu om het gewenste model te selecteren en klik vervolgens op de knop invoegen Om het aan uw pagina toe te voegen.

Elementor laadt de sjabloon voor u.

U kunt nu beginnen met het aanpassen van de sjabloon aan uw behoeften. Wijs en klik gewoon op een element om het te selecteren, en Elementor zal u de instellingen in de linkerkolom laten zien.

Begin van het bewerken van pagina's op elementor

Laten we het nu hebben over hoe de lay-outs van Elementor werken.

De modellen die worden aangeboden door de Elementor-plug-in zijn gebaseerd op secties, kolommen en widgets. Secties zijn als lijnen of blokken die u op uw pagina plaatst.

Elke sectie kan meerdere kolommen hebben en elke sectie en kolom kan zijn eigen stijlen, kleuren, inhoud, enz. Hebben.

Een pagina bewerken met elementor

Je hebt de mogelijkheid om elementen in je kolommen en secties toe te voegen met behulp van de widgets die Elementor aanbiedt.

Deze widgets zijn soorten inhoudsblokken die u in secties van uw pagina's kunt plaatsen.

Ben je op zoek naar de beste WordPress-thema's en -plug-ins?

Download de beste plug-ins en WordPress-thema's op Envato en maak eenvoudig uw website. Al meer dan 49.720.000-downloads. [EXCLUSIEF]

Selecteer gewoon een widget en zet deze neer in uw sectie of kolom. Er is een enorme reeks widgets beschikbaar die elk populair webontwerpelement dekken dat u maar kunt bedenken.

Element e-ontwerp met elementor

U kunt afbeeldingen, teksten, onderwerpen, afbeeldingsgalerijen, video's, kaarten, pictogrammen, getuigenissen, schuifregelaars, carrousels en nog veel meer toevoegen.

Zie ook onze 15 Elementor-thema's en sjablonen om een ​​website te maken

U kunt ook standaard WordPress-widgets en zelfs widgets die door andere WordPress-plug-ins zijn gemaakt, aan uw website toevoegen.

Als u klaar bent met het maken van uw eigen of het wijzigen van uw lay-out, kunt u klikken op de knop ' Enregistrer Om uw wijzigingen te behouden.

Pas de lay-out aan met elementor

Opmerking: Als u een lay-out opslaat, wordt de pagina niet op uw WordPress-website gepubliceerd. Het slaat eenvoudig uw lay-out op.

Op dit punt heb je de mogelijkheid om een ​​voorbeeld van je pagina te bekijken of naar het WordPress-dashboard te gaan. Dat brengt je terug naar de standaard WordPress-berichteditor. U kunt nu uw WordPress-pagina opslaan of op uw website publiceren.

Lay-outpublicatie met elementor

Dat is alles, dus klaar met het maken van een pagina met de WordPress Elementor-plug-in.

Maar zoals veel paginabouwers biedt het ook extensies waarmee u gemakkelijk en snel nieuwe lay-outs kunt maken door meer ontwerpelementen naar de standaardplug-in te brengen.

Elementor downloaden

Ontdek ook enkele premium WordPress-plug-ins  

U kunt andere WordPress-plug-ins gebruiken om een ​​moderne look te geven en de grip van uw blog of website te optimaliseren.

We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.

1. JetElements 

Deze plug-in zal je Elementor-bundel uitbreiden met een breed scala aan modules, wat erg handig zal zijn bij het bouwen van je website. Krachtige elementen zijn speciaal gemaakt om te worden geïntegreerd met de functionaliteit van Elementor om u eindelijk veelzijdige oplossingen en elegante elementen te bieden.

Elementor wordpress plugin jetelement

De belangrijkste kenmerken zijn: veel nuttige modules, met veel stijlopties, functionele parameters en absoluut aanpasbare elementen, ongelooflijke elementen om snel uw online winkel te starten, ondersteuning voor RTL-talen, Ondersteuning voor WPML-plug-ins en een module Contact Formulier 7 geweldig, waarmee u uw contactformulieren kunt toevoegen en in uw website kunt insluiten.

Downloaden | demonstratie | web hosting

2. JetMenu 

JetMenu is een extensie zeer functioneel plugin Elementor, waarmee u kunt maken megamenus met eenvoudig te gebruiken schuifelementen. Deze plug-in beperkt uw verbeelding niet en biedt de mogelijkheid om verbazingwekkende menu's te maken en deze te vernieuwen volgens uw visie en uw behoeften.

Jetmenu wordpress element of plug-in

De belangrijkste kenmerken zijn: Geen kennis van codering vereist, rijke functies die perfect combineren met eenvoud en duidelijkheid, een grote selectie inhoudsmodules, speciaal ontwikkeld om u te helpen bij het maken van uw menu's, een zeer responsieve lay-out en meer.

Als u de menu's of megamenus van uw website wilt opfleuren, is deze WordPress-plug-in te raadplegen.

Downloaden | demonstratie | web hosting

Maak eenvoudig uw online winkel

Download gratis WooCommerce, de beste e-commerce plug-ins om uw fysieke en digitale producten te verkopen op WordPress. [Aanbevolen]

3. JetWooBuilder 

JetWooBuilder is een onmisbare add-on waarmee u volwaardige WooCommerce-productpagina's met Elementor kunt maken.

Jetwoobuilder wordpress element of plug-in

Als functies vindt u onder andere: verschillende unieke productpagina-sjablonen, veel visuals om productpagina's te maken WooCommerceveel opvallende inhoudwidgets, zoals Toevoegen aan winkelwagentje, Voorbeeld, Afbeelding, Beoordeling, Gerelateerd en nog veel meer, de mogelijkheid om producttaxonomieën en nog veel meer.

Downloaden | demonstratie | web hosting

Enkele nuttige bronnen:

Conclusie:

Dat is alles voor deze tutorial, ik hoop dat je hiermee moderne en professionele lay-outs kunt maken met de plug-in Elementor.

U kunt echter ook onze ressources, 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.

Deel dit artikel vooral op uw verschillende sociale netwerken.

...

Dit artikel bevat opmerkingen 24

  1. Hallo Thierry!

    Hartelijk dank voor deze geweldige post.
    Ik gebruik ELEMENTOR PRO en ik heb een pagina gemaakt waarin ik via ELEMENTOR een reeds gebouwde lay-out heb gedownload. Maar ik begrijp het niet, deze is te vinden in AL mijn website ... al mijn webarchitectuur is veranderd en het is deze lay-out die ik op alle pagina's van mijn site vind. Aan de andere kant is de oude lay-out niet verwijderd, maar staat deze onderaan de pagina. Als ik op "BEWERK met ELEMENTOR" klik, kan ik het niet verwijderen ... enig idee waar het vandaan komt?
    Heel erg bedankt!

  2. Hallo Thierry
    Heel erg bedankt voor het artikel. Nu heb ik een probleem dat me al een paar dagen dwarszit, ik ben nieuw bij WordPress en ik gebruik ocean WP als een thema en daarna heb ik elementor als een gratis versie geïnstalleerd, dus met deze gratis versie ben ik begonnen met het maken van mijn pagina's en dat is goed, maar het probleem dat zich voordeed, is dat wanneer ik mijn pagina of het artikel publiceer zodra ik het heb, de hoofdletters niet verschijnen na een punt of aan het begin van mijn zin is het nodig instellingen op de typografie of op de lettertypefamilie heeft ervoor gekozen om me beter te helpen begrijpen waar het de gratis versie is die geen hoofdletters na een punt heeft. Bedankt voor het begrip.

    1. Hallo,

      Ik raad u aan contact op te nemen met de ondersteuning van de Elementor-plug-in op de WordPress.org-pagina. U zult zeker een antwoord van de auteurs vinden.

  3. Dag
    Ik heb mijn startpagina gemaakt via het aangepaste tabblad van mijn WordPress-interface. Waarom vind ik niet hetzelfde in elementor? op element of mijn menubalk bevindt zich niet op dezelfde plaats en ik heb mijn logo niet dat verschijnt! Ik geef de voorkeur aan die op wordpress maar wanneer ik een visualisatie van mijn site maak is de startpagina van element of die verschijnt! Kun je me vertellen hoe ik het moet doen?
    Bedankt p

  4. Hallo,
    Ik heb een probleem Sinds een paar maanden heb ik mijn website niet bijgewerkt waar ik dit element gebruik; vandaag heb ik geprobeerd het te doen, maar ik heb een probleem, de meeste secties laten me een doorgestreept vak zien met het woord UIT SECTIE en er is niets dat ik kan doen. Ik kan maar één gedeelte van de pagina bewerken, het gedeelte waar ik de tekst zelf heb.
    Weet je wat het kan werken?

  5. Hallo,
    Ik leer hoe ik een website moet bouwen met WordPress, Elementor is een geweldige plug-in, het helpt veel, ik ontdek iets nieuws.
    Ook problemen;) Ik werk meestal met oplossingen. Niet nu.

    Ik heb een probleem met het bewerken van tekst. Zowel de alinea als de koppen zijn rigide en ik kan het lettertype, de kleur, het gewicht, enz. Niet wijzigen. Ondanks de wijzigingen in de instellingen verandert er niets. Het is geen patroonprobleem, omdat het een ander lettertype en kleurenschema heeft dan wat Elementor me geeft.
    Ik weet niet hoe ik deze sjabloonparameter moet wijzigen, is mij overkomen, zelfs met header 1, maar ik heb het gewijzigd door html-code in de header in te voeren en hielp, nu werkt het niet.

    Hoe gaat dit veranderen? - Help alstublieft.

    1. Hallo,

      Probeer alle WordPress-plug-ins uit te schakelen en probeer het opnieuw. Als uw probleem is opgelost wanneer ze allemaal zijn uitgeschakeld, kunt u ze eerst een voor een activeren en vervolgens elke keer controleren.

      Als het een compatibiliteitsprobleem is met een andere plug-in, weet u welke.

  6. Bonsoir.
    Ik heb een foto toegevoegd aan de site (bestemmingspagina) en ik probeerde te veranderen naar een andere die ik niet kon ... meerdere keren verwijderen en ik heb de nieuwe foto geplaatst, maar deze wordt niet geladen ... de oude foto blijft staan ​​...
    Zou je me kunnen helpen?

  7. Hallo en bedankt voor dit artikel dat mijn keuze voor Elementor als mijn paginabuilder bevestigt. ^^

    Aan de andere kant, wat vindt u van het maken van een onderliggende site vóór wijzigingen. Is dit nodig bij Elementor?

    Ik ben bang dat alle aangebrachte wijzigingen worden overschreven bij het bijwerken van het thema? Is er geen risico?

    Bedankt voor uw antwoord,
    Bien à vous,
    Nicolas

  8. Hallo en bedankt voor dit zeer interessante artikel.
    Ik begon Elementor te gebruiken en vroeg me af of het nodig was voordat ik verder ging met het maken van een child-thema van degene die ik gebruik. Is er anders geen risico dat de updates van het thema of de plug-ins de lay-out die met Elementor is gebouwd, gewoon overschrijven?
    Bedankt voor je terugkeer,

  9. Hallo,

    Ik zou graag willen weten hoe ik de PHP-code van de ELEMENTOR-extensie kan krijgen om deze in mijn homepage te integreren?

    Bedankt voor uw aandacht voor mijn verzoek.

  10. Hallo,

    zeer interessant artikel.
    Ik heb een vraag voor de pro-elementor die jij bent.
    Is het mogelijk om in de gegenereerde formulieren een methode = "POST" toe te voegen?

    Jeanson

  11. heel goed artikel, wil ik het vragen, wanneer ik naar elementor ging, of waarom het lijkt alsof er een header en footernya is, hoe leeg te lijken

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Deze site gebruikt Akismet om ongewenst te verminderen. Meer informatie over hoe uw opmerkingen worden gebruikt.

Terug naar boven
24 aandelen
aandeel18
gekwetter
Enregistrer6