Het ontwerpen van een professioneel ogende website was niet voor iedereen weggelegd, vooral omdat we allemaal het gevoel hadden dat je absoluut een codeer- en webdesignprofessional moest zijn. Tegenwoordig zien we nieuwe tools opkomen voor het WordPress-ecosysteem, om een steeds eenvoudigere oplossing te bieden voor het ontwerpen van een website en dit binnen het bereik van de meeste beginners.
Wat betreft het ontwerp van WordPress-lay-outs, moesten we de plug-in al indienen Visual Composer, wat absoluut een van de beste tools is als het gaat om lay-outontwerp. Houd er echter rekening mee dat deze oplossing niet voor iedereen geschikt is. Dit is de reden waarom we u in deze tutorial meer kennis laten maken met de WordPress Plugin Elementor, dat is een WordPress Plugin freemium (gratis, maar verlengbaar onder abonnement).
Waar Elementor te krijgen voor WordPress
We overwegen serieus om u het potentieel van de plug-in te laten zien, en de gratis oplossing helpt u op weg zonder een cent te betalen. Deze gratis oplossing is beschikbaar op WordPress.org. Een Zijn WordPress Plugin, de laatste wordt geïnstalleerd zoals alle andere plugin vanaf het dashboard.
Als de plug-in u volledig tevreden stelt, kunt u de volledige licentie met alle functionaliteiten op de site verkrijgen officiële elementor.
Hoofdkenmerken van Elementor
Voordat we de tutorial starten met een overzicht van de plug-in, laten we je eerst kennismaken met de belangrijkste kenmerken van de plug-in (gratis versie en volledige versie).
| Freeware | Volledige versie |
|---|---|
| Meerdere kolommen | Navigatiemenu, artikel |
| Moduleteksten, titels | Module WooCommerce (producten, categorieën) |
| Videomodules, afbeelding, carrousel, galerijen, soundcloud | Facebook-integratie (pagina, knop, opmerkingen) |
| Module delen | Prijs tabel |
| HTML-module | Portfolio, Formulier |
| Module voor WordPress widget | Onderzoeksmodule |
Merk op dat dit een enigszins uitputtende lijst is van de verschillende functies die door de plug-in worden aangeboden. U vindt meer details in hun website verkennen.
Ga aan de slag met Elementor
We gaan hier niet het hele installatieproces behandelen. Aangezien dit een WordPress-plug-in is, is de installatieprocedure al uitgelegd in een eerdere tutorial. Na de installatie wordt u echter naar de startpagina van de plug-in geleid.
Als je deze pagina op je scherm hebt staan, dan heb je de Plug-in Elementor. We gebruiken momenteel de volledige versie voor deze tutorial, maar de interface mag niet te veel verschillen van de gratis versie.
Voordat ik naar de bewerkingsinterface ga, zal ik u uitnodigen om uw licentie te registreren. Dit geldt alleen voor degenen die hebben gekozen voor de volledige versie. Als u de gratis versie heeft, kunt u naar de volgende sectie gaan. Om uw licentie te registreren, ziet u een melding op WordPress waarin u wordt gevraagd om uw licentie te registreren.
Dus klik er gewoon op om naar de registratiepagina te gaan en klik op Activeren.
Normaal heb je je bevestigingspagina nodig als je licentie geldig is.
Als u niet op deze pagina terechtkomt, nodig ik u uit om contact op te nemen met de ontwikkelaars van de plug-in voor meer informatie hulp bij het probleem.
Elementor gebruiken
Elementor werkt aan pagina's en berichten op WordPress. Of je nu de klassieke interface of de nieuwe Gutenberg-interface gebruikt, je ziet een knop die je zal vragen om de Elementor-builder te gebruiken.
In de praktijk hoef je je berichten niet altijd met Elementor te bewerken. Ik nodig je daarom uit om de plug-in alleen op de pagina's te gebruiken. Door op de knop te klikken, krijgt u toegang tot de Elementor-ontwerpinterface die een sfeer van déjà vu geeft (voor degenen die de WordPress Customizer gebruiken).
Je hebt dus aan de linkerkant de verschillende bedieningselementen die door de plug-in worden aangeboden en aan de rechterkant heb je de live preview van je wijzigingen. In deze tutorial gebruiken we het Twenty Sixteen WordPress-thema.
Elementor secties
Secties in Elementor zijn groepen blokken met functionaliteit die Elementor biedt. Het aantal secties hangt af van of u de volledige versie gebruikt en of u gebruik maakt van WooCommerce, Yoast SEO of andere compatibele plug-ins. Afhankelijk van deze omstandigheden zul je meer of minder secties op je interface hebben. Omdat we de volledige versie met de plug-in gebruiken WooCommerce geactiveerd, zo ziet onze interface eruit.
Hoe een Elementor-blok te plaatsen
Zodra u een sectie uitvouwt, vindt u de Elementor-blokken. De verschillende Elementor-blokken worden door middel van "Drag & Drop" op het met stippellijnen gemarkeerde gebied geplaatst.
Hoe een lay-out op Elementor te kiezen
Voordat u een blok aan Elementor toevoegt, moet u eraan denken om een lay-out te kiezen door op de "+" knop op het gemarkeerde gedeelte te klikken.
Afhankelijk van uw wensen kiest u de indeling die het beste bij u past. Als je eenmaal een lay-out hebt gekozen, heb je een weergave van dat gedeelte op hetzelfde gebied gemarkeerd. In deze sectie wordt hetzelfde aantal kolommen weergegeven dat overeenkomt met uw keuze. In mijn geval heb ik gekozen voor een kolom met 3 kolommen.
De verschillende blokken met een "+" teken erin, zijn de gebieden die Elementor-blokken kunnen accepteren. Als u een Elementor-blok toevoegt zonder eerst een lay-out te kiezen, wordt standaard de lay-out met één kolom gekozen.
Elementor-secties kunnen onderling opnieuw worden gerangschikt volgens hetzelfde “slepen & neerzetten” -principe. U kunt ook een sectie verwijderen als u deze niet langer wenst te gebruiken.
Hier is een voorbeeld van een sectie die 2 blokken bevat, namelijk het titelblok en het tekstblok.
Hoe andere ontwerptools te gebruiken
Nadat u klaar bent met uw ontwerp, is een van de dingen die u wilt doen, uw werk opslaan. U vindt deze optie helemaal onderaan de sectie met de verschillende Elementor-secties.
U kunt kiezen tussen direct opslaan (publiceren) en opslaan als concept of sjabloon. We zullen deze verschillende punten later meer onderzoeken.
Tijdens uw ontwerp wilt u misschien ook een voorbeeld van de wijzigingen bekijken zonder de extra interface van Elementor. Het enige dat u hoeft te doen, is op het oogpictogram te klikken.
Het gebeurt dat er tijdens het ontwerp een fout optreedt (een onvrijwillige actie). In dit geval biedt Elementor een geschiedenis, waarmee u door al uw acties kunt navigeren.
Hiermee kunt u gemakkelijk teruggaan.
Met de "Browser" -optie, die net voor de geschiedenisknop komt, kunt u de verschillende secties verder aanpassen in relatie tot de browser die door bezoekers wordt gebruikt. Deze optie geeft u toegang tot geavanceerde modificatie van doorsnedestructuren (kolombreedte). U moet hier zeer zorgvuldig wijzigingen aanbrengen.
Met de knop "Instellingen" kunt u bepaalde opties aanpassen die specifiek zijn voor de pagina, zoals de titel, de uitgelichte afbeelding of de status onder andere.
Dat is het voor deze tutorial, we zullen Elementor meer verkennen in onze volgende tutorial. Neem gerust een kijkje in het site officiel die veel meer succesvolle voorbeelden biedt.
