Elementor Pro + geavanceerde aangepaste velden = revolutionair (2021)

Elementer Pro + geavanceerde aangepaste velden

At CollectiveRay, we zijn een beetje een mashup, we zijn ex-ontwikkelaars, webdesigners, productmanagers en we willen gewoon dat onze website doet wat we nodig hebben, zonder dat we dingen op hun plaats hoeven te hameren. Daarom experimenteren we graag met combinaties van eigenschappen en functies om dingen te maken gewoon werk. De nieuwste combinatie die we revolutionair hebben gevonden voor de manier waarop we werken, is Elementor in combinatie met geavanceerde aangepaste velden - deze twee plug-ins die samen werken, hebben ons werk naar een hoger niveau getild.

Blijf bij ons om een ​​volledig beeld te krijgen van de mogelijkheden van deze twee plug-ins en hoe ze kunnen worden gecombineerd om een ​​winnende combinatie te creëren. We hebben zojuist het artikel opnieuw bekeken in september 2021 en indien nodig bijgewerkt met alle relevante nieuwe details.

Samengevat

   Elementor  Geavanceerde Aangepaste velden
Prijs Gratis of Pro vanaf $ 49 Gratis of Pro vanaf $ 25
Free Trial Elementor Designer Lite Geavanceerde Aangepaste velden
Performance  Licht en snel - vooral in vergelijking met andere paginabuilders Niet van toepassing
Wat we leuk vonden  Nette, georganiseerde UI / UX  Flexibiliteit, veelzijdigheid
   Lichtgewicht, gebouwd voor snelheid  Ontwikkelaarsvriendelijke functies
   Goede selectie van elementen  Geavanceerde weergaveregelsets
   Ingebouwde aangepaste formulieren  Aanpassing van WordPress-backend zonder codering
globaal
Website Bezoek Elementor Bezoek ACF

Elementor recensie

Elementor is de meest populaire WordPress Page Builder. Dankzij de gratis versie en de goedkope Pro-prijs ($ 49) heeft het een geweldige groei doorgemaakt. Het enorme aantal elementen dat het heeft, betekent dat je heel weinig extra plug-ins van derden nodig hebt. Het heeft ook mogelijkheden voor het bouwen van thema's en een uitgebreide bibliotheek met sjablonen.

Laten we beginnen met een diepe duik in Elementor. Nu Page builders tegenwoordig een rage zijn, kost het wat tijd om indruk op ons te maken, maar Elementor had precies dat gedaan - indruk op ons maken.

Eerste indruk 

Deze supergepolijste plug-in voor het bouwen van pagina's en berichten met slepen en neerzetten is zeker een sterke kanshebber voor mensen zoals wij om te gebruiken als hun goto-product voor het ontwerpen van hun eigen sites.

Het is geen wonder dat deze plug-in bekend staat als de #1 WordPress Pagebuilder en u zult merken dat deze wordt beoordeeld als een van de beste producten in elke vergelijking van producten in zijn categorie.

Een van de eerste dingen die je opvalt als je met Elementor werkt, is het absoluut strakke ontwerp. Geen rommel, netjes georganiseerd, deze plug-in zal een plezier zijn om mee te werken voor degenen die obsessief georganiseerd zijn, en natuurlijk voor iedereen die graag dingen netjes georganiseerd heeft.

U kunt zien dat de gebruikersinterface van de elementen (aan de linkerkant) heel gemakkelijk te begrijpen en mee te werken is. De daadwerkelijke canvas (aan de rechterkant) wordt ook heel netjes gehouden en houdt opties uit de weg totdat u daadwerkelijk op een specifiek element klikt. Alleen dan worden de opties getoond. Deze zorgen ervoor dat alles er net zo uitziet als op de eigenlijke voorkant, zodra de pagina of het bericht is gepubliceerd.

Elementor eerste gebruik

Performance

Een ander ding dat meteen duidelijk is wanneer je Elementor gebruikt, is hoe licht het aanvoelt als je het gebruikt. Nadat we een flink aantal van de meer populaire pagebuilders hebben gebruikt, kunnen we gemakkelijk een echt waarneembaar verschil voelen. Terwijl plug-ins als Visual Composer en Divi een paar seconden nodig hebben om te laden en onhandig aanvoelen, wat afbreuk doet aan het daadwerkelijke gebruik ervan. Hoewel je er uiteindelijk aan moet wennen, is het niet iets waar je ooit van kunt genieten, het is gewoon iets waar je mee moet leven omdat je gewoon geen optie hebt.

Lees verder: 

Divi versus Beaver Builder: https://www.collectiveray.com/beaver-builder-vs-divi

Elementor versus Divi: https://www.collectiveray.com/elementor-vs-divi

Divi Thema Beoordeling: https://www.collectiveray.com/divi-theme-review

Dit. Deze aan de andere kant is een verademing. Als u met Elementor op Bewerken klikt, laadt de pagina of post die u moet bewerken vrijwel onmiddellijk, zouden we durven zeggen, niet veel anders dan wanneer u de post of pagina ZONDER ingeschakelde plug-in zou moeten laden, dat wil zeggen met de native WordPress-editor. 

Zelfs als je met de daadwerkelijke drag-and-drop-builder werkt, kun je voelen hoe het toevoegen of verwijderen van elementen direct is. Je hoeft niet te wachten tot de bouwer verder rommelt en hebt die paar seconden "wachttijd" totdat een element is geladen. U kiest, u sleept, u ​​laat vallen, u blijft werken - de tool werkt met u mee, in uw tempo.

Hoe te gebruiken 

Er zijn twee manieren om Elementor te gebruiken. De manier waarop u ervoor kiest om ermee te werken, hangt af van of u van plan bent een pagina helemaal opnieuw op te bouwen of wilt beginnen met een van de bestaande sjablonen die beschikbaar zijn voor de meest voorkomende websitescenario's.

Als u helemaal opnieuw wilt beginnen, maakt u eenvoudig een nieuwe pagina of post, klikt u op de knop Bewerken met Elementor en wordt de plug-in geladen, zodat u kunt beginnen met bewerken.

Bewerken met Elementor

Dit brengt dan een schone pagina naar voren, klaar om ofwel te beginnen met het toevoegen van de secties (rijen) die je nodig hebt of om te laden vanuit een bestaande sjabloon (we zullen dit binnenkort bespreken).

Lege pagina of bericht klaar om secties widgets-sjablonen toe te voegen

 

Wanneer u klikt om een ​​sectie (een rij) toe te voegen, wordt u gevraagd om het aantal kolommen te kiezen dat deze sectie daadwerkelijk zal hebben. Binnen elke kolom kunt u vervolgens de verschillende beschikbare elementen toevoegen. 

Structuur van sectie instellen (kolommen)

Nadat u de structuur hebt ingesteld, kunt u nu widgets naar de verschillende secties slepen en neerzetten. Er zijn natuurlijk tal van verschillende widgets om uit te kiezen, van eenvoudige elementen die bij de gratis versie van de plug-in worden geleverd, tot de meer complexe functies en functies die beschikbaar zijn in de PRO-versie.

Elementen beschikbaar om toe te voegen

Beschikbare elementen

Veel van de verwachte standaardfuncties van een website zijn beschikbaar als widgets die aan de pagina kunnen worden toegevoegd. Enkele van de aantrekkelijkere widgets om te gebruiken zijn:

  • pictogrammen
  • Google Maps
  • Portfolio
  • Geanimeerde kop (roterende of omcirkelde tekst)
  • Prijslijst of prijstabel
  • Oproepen tot actie
  • Recensies
  • countdowns
  • Facebook-opmerkingen en insluitingen
  • Auteur doos
  • Progress bars
  • Afbeeldingsgalerijen of carrousels
  • Shortcodes
  • Etc etc

Het volstaat te zeggen dat er in één enkele plug-in alle elementen zijn die u ooit op een pagina zou kunnen gebruiken.

Niet alleen dat, maar Elementor gaat verder dan de meeste andere plug-ins. 

Dit komt omdat de plug-in niet alleen zijn eigen native elementen ondersteunt, maar ook shortcodes en standaard WordPress-widgets. Dit betekent dat u niet alleen alle eigen elementen en ALLE WordPress-widgets ondersteunt, maar ook alle functies en functies van derden die via shortcodes zijn ingeschakeld, kunt insluiten. Dit betekent min of meer dat je praktisch onbeperkt bent in wat je kunt toevoegen aan een pagina of bericht dat wordt ontworpen.

Probeer Elementor nu

Dynamische elementen

Een andere geweldige functie van deze paginabuilder is de unieke mogelijkheid om pagina's te ontwerpen met dynamische inhoud in plaats van statische inhoud. Dit is nogal een innovatieve functie en zeker iets dat we vaak (of helemaal niet) zijn tegengekomen.

Het is natuurlijk geweldig dat je de hierboven beschreven elementen kunt slepen en neerzetten, maar dat is een verwachte functie van dit soort tool geworden.

Elementor is echter verder gegaan dan dat - door dynamische pagina-elementen toe te staan. De eenvoudigste manier om dit uit te leggen is door de titel of kop van een pagina te gebruiken.

Stel dat u een pagina wilt ontwerpen die het huidige nieuws weergeeft dat met uw bedrijf te maken heeft. Nu, in plaats van de alledaagse titel "Laatste Nieuws" te gebruiken, willen we ons huidige hoofdevenement presenteren. 

Dus in plaats van de pagina te laten bouwen met Elementor en een statische "titel" weer te geven, gebruiken we het thema-element Bericht Titel die daadwerkelijk de naam van de huidige titel uit de database opvraagt ​​en die weergeeft in plaats van enige generieke inhoud.

Een ander uitstekend gebruik in dezelfde lijn als dit is de Uitgelichte afbeelding. Door een dynamische uitgelichte afbeelding te hebben, kunt u er zeker van zijn dat het uw laatste uitgelichte afbeelding is die daadwerkelijk wordt weergegeven (aangepast voor de huidige headline-gebeurtenis) in plaats van een generieke afbeelding die u zou moeten weergeven met behulp van de statische elementen.

Bekijk de onderstaande uitlegvideo van 2 minuten over de dynamische elementen van Elementor.

ruMtMAVVF_Y

Elementor-sjablonen

Hierboven hebben we gezien hoe een pagina of bericht helemaal opnieuw kan worden opgebouwd met behulp van de ingebouwde elementen die beschikbaar zijn bij dit product. Maar er is een sneller, efficiënter manier om pagina's te maken. Of, in plaats van alleen pagina's, kunt u eenvoudig binnen enkele minuten volledige websites bouwen! Dit is door het gebruik van Elementor-sjablonen.

Dit is een functie die een behoorlijk effectieve manier wordt om een ​​paginabuilder te gebruiken. In wezen is het idee dit: in plaats van de pagina's zelf helemaal opnieuw te maken, met het risico dat u het verprutst (vooral als u niet typisch wordt blootgesteld aan website-ontwerp of ontwerp in het algemeen), gebruikt u een vooraf gedefinieerde paginasjabloon .

Als je eenmaal een sjabloon hebt geselecteerd, is je enige taak om de elementen enigszins aan te passen aan de behoefte van de pagina of het bericht dat je aan het maken bent. Of dit nu voor een klant of voor uzelf is, uw werk zou zijn om de inhoud aan te passen aan de behoeften van de website die u aan het maken bent.

Dit zal natuurlijk uw ontwerptijd aanzienlijk verkorten. Niet alleen dat, maar het zorgt er ook voor dat uw ontwerp dat van een professioneel ontwerpbureau wordt, in plaats van dat van iemand die misschien niet helemaal gewend is aan ontwerpen.

Er zijn standaard meer dan 100 sjablonen beschikbaar bij Elementor Pro, maar dit is niet alles.

Elementor-sjablonen zijn nu een niche-industrie op zich. U zult merken dat er honderden andere gratis en premium plug-ins beschikbaar zijn om te kopen en te downloaden, voor dekking en niche, branche of behoefte.

Elementor-sjablonen

Om maar een paar van de beschikbare sjablonen te noemen, kan men vinden

  •  Interior Design
  • App-sjabloon
  • Koffiebar, restaurant en maaltijdservice
  • Productpagina's
  • GESCHIKTHEID
  • Advocatenkantoor
  • Copywriting
  • Bureau en creatievelingen
  • Hotels
  • Architect
  • Huwelijk
  • Grafisch ontwerper
  • Startup
  • persoonlijk
  • CV
  • Portfolio
  • Ebook
  • en vele vele anderen.

Elementor - landingspagina voor fotografie

We raden je aan om te bezoeken bibliotheek.elementor.com om de volledige lijst met sjablonen voor WordPress-bestemmingspagina's te bekijken die standaard beschikbaar zijn met de plug-in, waar u ook een daadwerkelijke demo kunt zien van de exacte pagina die door de sjabloon zou worden gemaakt.

Tarieven

Elementor is verkrijgbaar in zes smaken:

elementor prijsstelling

  • Gratis
  • essentieel (voor 1 site) - $ 49
  • Geavanceerd (voor 3 locaties) - $ 99
  • Expert voor (25 sites) - $199
  • studio (voor 100 locaties) - $ 499
  • Zo vaak als u wilt (onbeperkt aantal sites) - $999

Alle plannen komen met 1 jaar updates en ondersteuning. Met de belachelijk goedkope prijs van $ 49, waarbij het letterlijk hoogstens een paar uur kost (gebaseerd op de sjablonen) om een ​​geheel nieuwe site helemaal opnieuw te maken, geloven we dat dit een uitstekende waarde is. 

Als je een ontwerper bent, is het waarschijnlijk dat je meer dan 4 websites per jaar zult maken (zelfs gezien de snelheid waarmee sites worden ontwikkeld nu je Elementor in je arsenaal hebt), dus het is ten zeerste aan te raden om direct te kiezen voor de Onbeperkt abonnement direct. 

Elementor kortingscode

Elke keer dat we een Elementor-kortingscode of couponcode hebben, zullen we deze hier plaatsen, zodat u de beste prijs krijgt.

De onderstaande link brengt je naar de officiële site waar je de beste prijs krijgt voor Elementor in september 2021.

Klik hier voor de laagste prijs op Elementor

 

Kijk eens naar wat sommige mensen hebben gezegd over de plug-in:

Klantervaringen

 

Geavanceerde Aangepaste velden

Het volgende deel van ons artikel verschuift de aandacht naar een andere plug-in waar we van houden, Advanced Custom Fields.

We beginnen met een kort overzicht van ACF, daarna zullen we ons concentreren op het combineren van geavanceerde aangepaste velden en Elementor om verbluffende resultaten te bereiken. Revolutionair zelfs.

Voor niet-ingewijden stelt ACF een gebruiker in staat om aangepaste velden te maken om schermen te bewerken om zowel de ervaring van de gebruiker die de site maakt als natuurlijk, uiteindelijk de gebruiker die de site bezoekt, te verbeteren.

Even een korte intro

  • Met de ACF-veldbouwer kunnen velden binnen enkele seconden aan WP-bewerkingsschermen worden toegevoegd
  • De velden kunnen worden toegevoegd aan alle inhoud, berichten, gebruikers, taxonomietermen, media, opmerkingen of waar dan ook
  • U kunt de velden dan overal weergeven, met ontwikkelaarsvriendelijke functies

Zodra je als ontwikkelaar/ontwerper het bovenstaande ziet, kan je geest snel racen tegen de enorme mogelijkheden die er zijn. Met het bovenstaande kunt u letterlijk een "aangepaste kopie" van WordPress maken die precies geschikt is voor de behoefte van elke klant die u heeft. 

U weet waarschijnlijk dat de meeste klanten, hoewel ze graag WordPress zouden gebruiken, nog steeds hun eigen specifieke vereisten zullen hebben. U weet ook dat het aanpassen van de kerncode om deze wijzigingen door te voeren meestal een slecht idee is, omdat dat betekent dat u geen kernupdates kunt krijgen, wat aanzienlijke beveiligingsrisico's voor die installatie met zich meebrengt.

Met ACF kunt u WordPress "aanpassen", zonder enige kerncode aan te raken, gewoon via een plug-in.

U kunt hier meer lezen over plug-ins: https://www.collectiveray.com/wp/plug-ins/

En natuurlijk zijn niet alleen wij enthousiast over de mogelijkheden van het gebruik van geavanceerde aangepaste velden. Dit is een van de meest populaire, geïnstalleerde en hoogst gewaardeerde plug-ins die er zijn. Gezien het feit dat dit ontwerper/ontwikkelaar-georiënteerd is, kun je zien dat de onderstaande installatiestatistieken ronduit buitengewoon zijn.

Dus voordat we zelfs nog verder gaan, is het goed om op te merken dat deze plug-in meer dan 1 miljoen actieve installaties heeft en een 5-sterrenbeoordeling geniet van meer dan 1000 beoordelingen. Dat is een uitstekende prestatie als je het mij zou moeten vragen.

Geavanceerde aangepaste velden, actieve installaties en huidige beoordelingen 

Aangepaste velden maken

Het sterke punt van ACF is natuurlijk het creëren van aangepaste velden die vervolgens volledig kunnen worden gecombineerd tot complexe vormen. We zien dit als erg handig voor het maken van verschillende dingen:

  • Aangepaste contactformulieren vragen een bezoeker om gedetailleerde en specifieke informatie die kan worden gebruikt om hun vragen beter te beantwoorden. Als uw klant bijvoorbeeld een service- of productiegerichte klant is, kunt u klant een complexe vorm geven waarin zeer specifieke vragen worden gesteld over de behoeften van de bezoeker. Uiteindelijk is al deze informatie gecombineerd om een ​​betere klant af te geven of een beter antwoord te geven op de specifieke vraag.

Dit is allemaal slechts het oppervlak van wat ACF in werkelijkheid kan doen. Gezien hoe gericht dit is op ontwikkelaars, is het geen wonder dat deze plug-in zo populair is. Nadat de aangepaste velden zijn gemaakt, kan men deze velden eenvoudig insluiten in

  • Thema's - als ontwikkelaar van een thema kunt u de aangepaste velden en functies die u hebt gemaakt, opnemen om uw werk zo aan te passen dat uw gebruikers kunnen profiteren van deze aanpassingen - denk bijvoorbeeld aan de mogelijkheid om verschillende aangepaste formulieren te maken voor verschillende niches
  • Plugins - nogmaals, als ontwikkelaar van plug-ins kunt u specifieke formulieren aanpassen om uitgebreide functionaliteit te creëren voor specifieke functies van WordPress of uw eigen plug-in - u kunt ACF gebruiken om uitgebreide formulierfunctionaliteit te ontwerpen die kan worden gebruikt om de gegevensvastlegging van uw inpluggen

Nogmaals, als ontwikkelaar, of zelfs als webdesigner, kun je al beginnen te zien (en waarschijnlijk enthousiast worden) over het potentieel van ACF.

Dus laten we een beetje met ACF gaan rommelen en kijken waartoe het in staat is. Bekijk hieronder het volgende formulier dat we in een paar minuten hebben gemaakt. We willen graag een paar dingen onder uw aandacht brengen die we niet hadden verwacht.

Een aangepast formulier maken

Naast uw standaard formuliervelden zoals tekst, checkbox en select, datepicker en uw standaard standaard opties, ondersteunt ACF ook

  • Soorten relationele berichten - met dit veldtype kunt u items (zoals berichten en pagina's) weergeven die al op de huidige site bestaan. Dus nogmaals, laten we ons even voorstellen dat we een thema-ontwikkelaar zijn en de gebruiker de mogelijkheid willen geven om een ​​paar berichten te selecteren om op de startpagina te tonen. Met behulp van de geavanceerde filters van dit type kunnen we eenvoudig een gebruikersinterface maken waarmee we dit allemaal kunnen doen. We hebben ook toegang tot zaken als pagina's, taxonomieën, gebruikers en rollen.
  • Google Maps, Datumkiezer en ColorPicker - deze veldtypen zijn allemaal jQuery-aangedreven en worden allemaal standaard ondersteund (zelfs met de gratis versie van ACF)
  • Reglement - de velden kunnen al dan niet worden weergegeven op basis van voorwaardelijke logica die u kunt definiëren via de ACF-gebruikersinterface. Dit betekent dat uw formulier kan worden aangepast aan de invoer van de gebruiker, waarbij indien nodig extra velden worden weergegeven of andere worden verborgen op basis van wat de gebruiker daadwerkelijk invoert
  • Opties - de finale en de kers op de taart, u kunt de exacte opties bepalen hoe en waar u uw formulier wilt weergeven. Of je het formulier bovenaan de pagina (in de backend) wilt weergeven, al dan niet met een Metabox en andere opties.

Hier is een volledige lijst van alle beschikbare veldtypen:

  • Tekst — Eenregelig tekstveld met optionele HTML-ondersteuning en tekenlimieten
  • Tekstgebied — Hetzelfde als tekst, maar kan meerdere regels hebben
  • Getal — Nummerveld dat optionele min/max-waarden kan hebben voor limieten en validatie
  • E-mail — Aangepast veld voor e-mailinvoer inclusief validatie
  • Wachtwoord — Wachtwoordinvoer met tekstmaskering
  • WYSIWYG Editor - WordPress-editorinvoer met opties voor media-invoeging en editorknoppen
  • Afbeelding — Upload een afbeelding of selecteer er een uit de mediabibliotheek. Retourneert een object, URL of ID.
  • Bestand — Hetzelfde als de afbeelding, maar voor bestanden in het algemeen
  • Selecteren — Vervolgkeuzemenu met ondersteuning voor meerdere selecties
  • Selectievakje — Selectievakje voor enkele of meerdere items
  • Keuzerondje — Kies een enkel item via keuzerondje
  • Waar / Onwaar — Basis selector voor waar of onwaar
  • Paginalink — Retourneert de URL van een bericht of pagina. Kan worden beperkt tot specifieke berichttypen.
  • Post Object — Retourneert een WordPress-object van een bericht of pagina, berichttype of taxonomie
  • Relatie — Hetzelfde als een postobject, maar met een geavanceerde interface en opnieuw ordenen via slepen en neerzetten
  • Taxonomie — Retourneert een object of ID voor een of meer taxonomieën. Kan worden beperkt tot tags, categorieën of aangepaste taxonomietermen.
  • Gebruiker — Selecteer een of meer gebruikers. Optie om de keuze per gebruikersrol te beperken.
  • Google Map — Stel een centrum, zoomniveau en breedte in
  • Datumkiezer — Selecteer een kalenderdatum en retourneer een opgemaakte datumreeks
  • Kleurkiezer — Selecteer een hexadecimale kleur
  • Bericht — Laat een bericht achter
  • Tab — Combineer velden in een interface met tabbladen 

 

Het is moeilijk om scenario's te bedenken die de bovenstaande functies niet dekken. Het is geen wonder dat de plug-in Advanced Custom Forms wordt genoemd, omdat de geboden functionaliteit zeer krachtig is in de handen van iemand die weet hoe deze functies te exploiteren. het is extreem flexibel en kan de standaard WordPress-functies uitbreiden, alleen beperkt door uw verbeeldingskracht.

Het mooie is dat al deze aanpassingen worden gedaan zonder een regel code aan te raken, en nog belangrijker, zonder kernbestanden aan te raken - zodat u geen beveiligingsproblemen creëert voor de websites die u aanpast.

Dit is zonder twijfel een gamechanger.

Frontend versus backend 

Uit de bovenstaande voorbeelden en opties kunt u zien dat ACF zowel aan de voorkant als aan de achterkant kan worden gebruikt. Nu, echt en waar, we weten dat er een miljoen en één formulier-plug-ins zijn, waarmee u aangepaste formulieren voor de backend kunt maken.

Het echte voordeel komt van de mogelijkheid om de beheerderspagina's van WordPress aan te passen - dit maakt dit product in wezen een product dat is gebouwd door ontwikkelaars voor ontwikkelaars en ontwerpers. Als ontwikkelaars kennen en begrijpen ze de beperkingen van het werken binnen de limieten van WordPress.

Dit is dus een product waarmee ontwikkelaars en ontwerpers de grenzen van WordPress kunnen verleggen, niet vanaf de frontend, maar vooral in termen van de mogelijkheden die de WordPress-beheerder of webmaster krijgt.

Nu we de mogelijkheden van ACF en Elementor hebben gezien, laten we een paar voorbeelden geven van hoe deze kunnen samenwerken.

Aangepaste contactformulieren

We hebben hierboven al besproken hoe een aangepast contactformulier specifiek voor uw service, branche of product een grote bijdrage zal leveren aan het sluiten van nieuwe zaken. Laten we dus eens kijken wat we kunnen doen met Elementor en Advanced Custom Fields.

We hebben al een aangepast formulier gemaakt voor een specifieke branche (het is nog steeds vrij algemeen van aard, maar je snapt het idee, je kunt dan velden aanpassen en toevoegen volgens jouw specifieke geval).

Dus nu willen we dit formulier toevoegen aan een Contact Us-pagina gemaakt door Elementor. We maken de Contact Us-pagina en in plaats van deze helemaal opnieuw te ontwerpen, nemen we een sjabloon op uit de kant-en-klare.

sjabloon contactpagina

Nu we een basis hebben van waar we moeten beginnen, laten we ons eigen aangepaste formulier toevoegen:

We verwijderden de bestaande Contactformulier en liet de formulierwidget vallen en paste het contactformulier aan om ons eigen aangepaste offerteformulier te maken - letterlijk in een paar minuten waren we klaar.

Aangepast offerteformulier ontwerpen

En dat is het mooie van het gebruik van deze twee plug-ins. Of u nu aangepaste formulieren in de backend wilt maken voor uw eigen thema's en plug-ins, of dat u aangepaste formulieren wilt gebruiken in de frontend, de mogelijkheden zijn eindeloosless.

Een ding dat we graag zouden kunnen doen, en we zijn er zeker van dat het team van Elementor uiteindelijk in hun producten zal integreren, is de mogelijkheid om formulieren te maken met ACF en deze direct in de pagebuilder toe te voegen. 

UPDATE september 2018 - de nieuwe releases van deze twee plug-ins kunnen nu rechtstreeks worden geïntegreerd. Aangepaste formulieren die in ACF zijn gemaakt, kunnen nu rechtstreeks in Elementor worden geïntegreerd met behulp van aangepaste berichttypen.

ACF en Elementor combineren

Dit is dus iets dat de twee plug-ins tot een paar maanden geleden over het hoofd hebben gezien toen we deze twee producten aan het beoordelen waren. Onze lezers zijn er ook enigszins verwarrend en teleurstellend achter gekomen dat ze dit niet kunnen doen.

Zoals een goede recensent zou moeten doen, hebben we contact opgenomen met het ontwikkelteam en voorgesteld dat dit iets zou moeten zijn dat in deze twee producten zou moeten worden ingebouwd, om een ​​mooie oplossing voor integratie tussen de twee te kunnen creëren.

En zoals een goed team dat voor hun klanten zorgt, sprongen ze hier snel op in en slechts een paar maanden later hebben we nieuwe versies van beide producten die nu een directe integratie bieden.

Dit kan mogelijk zijn met behulp van aangepaste berichttypen in WordPress. Alleen voor degenen die niet bekend zijn, zijn de meest voorkomende aangepaste berichttypen berichten, pagina's en bijlagen, maar er zijn er meer. Andere veelvoorkomende berichttypen die u mogelijk hebt gezien, zijn WooCommerce-producten, getuigenissen, evenementen, recensies, portfolio's ... en nog veel meer. 

Met andere woorden, aangepaste berichttypen zijn een specifiek type "inhoud" dat een bepaald formaat heeft.

Houd er rekening mee dat het ook 100% mogelijk is om nieuwe aangepaste berichttypen te definiëren als u specifieke inhoud heeft die "gestructureerd" moet worden.

Wat je in wezen moet doen om een ​​aangepast berichttype te maken, is ofwel een Custom Post-plug-in gebruiken om de nieuwe velden te definiëren die je nodig hebt, of dit doen met behulp van code.

De jongens van Elementor hebben een zeer gedetailleerd artikel in lange vorm gemaakt over: hoe deze integratie uit te voeren?.

De eenvoudigste manier om dit te doen, is door de CPT UI-plug-in te gebruiken die u kunt vinden CDL Super Session.. We zullen niet ingaan op de volledige details van het maken van een aangepast berichttype, er zijn genoeg artikelen die er zijn, hoewel we je ten zeerste aanbevelen om deze te bezoeken?.

Aangepast berichttype CPT UI

Nadat je het aangepaste berichttype hebt gemaakt, moet je nu de aangepaste velden maken met ACF en alleen de specifieke velden weergeven op basis van het feit of het berichttype er een is dat je zojuist hebt gedefinieerd.

maak aangepaste velden met acf

 

Om deze aangepaste berichttypen op blogpagina's weer te geven, moet je begrijpen hoe deze aangepaste berichttypen werken in de verschillende delen van uw site.

Als je een testimonial aangepast berichttype moest bedenken, kun je dit toevoegen aan elke pagina of elk bericht dat je gebruikt. Je kunt ook een volledig "bericht" maken met behulp van het aangepaste berichttype.

Om ze met Elementor te gebruiken, maken we gebruik van sjablonen en dit zijn de stappen die je moet volgen:

  • Maak een nieuwe enkele sjabloon, u kunt deze de naam van uw nieuwe type geven en een nieuwe tekstwidget toevoegen. Als voorbeeld gebruiken we de rubriekwidget. 
  • Klik op het dynamische pictogram en kies ACF-veld. Klik er nogmaals op en kies onder 'sleutel' het aangepaste berichttype dat je hebt gemaakt. De inhoud die u eerder hebt toegevoegd, wordt nu weergegeven.
  • Nu hoeft u alleen nog te publiceren en nu kunt u deze sjabloon in uw inhoud gebruiken.

 

Als u deze inhoudstypen en velden opnieuw wilt kunnen gebruiken, kunt u ze gebruiken in Elementor-sjablonen. Met behulp van de Theme Builder-functionaliteit kunt u sjablonen maken met behulp van deze aangepaste typen, door de velden uit de dynamische inhoud te selecteren.

Bezoek Elementor voor een langere uitleg van aangepaste berichttypen

Elementor Extra's

Nu we deze twee geweldige producten in detail hebben besproken, willen we graag een klein beetje uitbreiden. Wanneer plug-ins zoals deze twee zo populair worden, is het onvermijdelijk dat ze een geheel eigen niche en industrie worden en softwareleveranciers gaan aantrekken die daadwerkelijk andere extensies maken om de functionaliteit van deze plug-ins uit te breiden.

We gaan dus kijken naar een aantal Elementor-extra's die je zou kunnen overwegen om de functionaliteit verder te pushen.

Ultieme add-ons voor Elementor

Dit is een set widgets die is gericht op het toevoegen van meer functionaliteit en flexibiliteit aan de paginabuilder. Aangezien deze widgets afkomstig zijn van Brainstorm Force, het bedrijf achter WP Astra, kun je begrijpen dat de kwaliteit van deze functies van een zeer hoog niveau is.

Ultieme add-ons

Er zijn meer dan 24 widgets beschikbaar op het moment van schrijven, inclusief, maar niet beperkt tot:

  • Tijdlijn - dit is een geweldige manier om tijdlijndiagrammen, routekaarten of andere op tijd gebaseerde items weer te geven
  • Inhoud wisselen - hierdoor kan uw eindgebruiker schakelen tussen specifieke stukken inhoud, u wilt bijvoorbeeld maandelijkse versus jaarlijkse prijzen of andere vergelijkbare prijswissels weergeven
  • Modale pop-up - een schone en gemakkelijke manier om pop-ups te maken, bijvoorbeeld voor abonnementen op nieuwsbrieven of andere inhoud die u wilt laten zien.
  • Kantooruren - gebruikt om uw kantooruren aantrekkelijker en professioneler te maken
  • Google Map - een essentiële functie voor elke site voor een lokaal bedrijf, om ervoor te zorgen dat klanten weten waar u zich bevindt
  • Prijslijst en Prijsdoos - prijsstelling is natuurlijk een andere essentiële functie als u zich bezighoudt met het verkopen van diensten of bundels

Het mooie van deze bundel widgets zijn de verschillende prijsstructuren, als u kiest voor de bureaubundel, krijgt u zelfs een gratis exemplaar van de Astra Pro- en WP Portfolio-plug-in naast een aantal kant-en-klare starterswebsites om uw webdesign een vliegende start te geven werk.

Crocoblock

Dit is een bedrijf dat grote fans van Elementor is en een groot aantal premium plug-ins heeft gemaakt, zoals:

  • JETElementen - een aantal prachtige widgets om uw pagina's prachtig op te maken, zoals prijstabellen, inline SVG, tijdlijnen, voortgangsbalken, metselwerklay-outs en nog veel meer, er zijn meer dan 40 widgets om uit te kiezen
  • JETMenu - een gemakkelijke manier om een ​​gebruiksvriendelijk en aanpasbaar Mega-menu te maken
  • JETabs - een geweldige manier om drukke pagina's te organiseren die veel essentiële informatie vereisen, zoals productpagina's
  • JETWoolbuilder - dit is weer een geweldig product dat in wezen een geweldige manier is om WooCommerce-pagina's te maken die verkopen
  • Straalmotor - dit is een plug-in die uitstekend geschikt is voor het maken van dynamische inhoud binnen uw pagina's, zoals dynamische velden, meta, links en zelfs afbeeldingen en lay-outs.

Crocoblock-plug-ins

Al met al, met Crocoblock, heeft u één enkele leverancier die in al uw WordPress-behoeften kan voorzien. Zowel hun Kava-thema, de meerdere Elementor-widgets, verschillende plug-ins en nog veel meer, allemaal voor een enorme prijs beschikbaar via het Lifetime-pakket, dit is een uitstekende deal.  

 

Elementor versus Beaver Builder

Aanbevolen literatuur: Beaver Builder vs Elementor - Een ultieme gids en vergelijking (2019) 

Er zijn veel verschillende producten om WordPress-websites te bouwen. Zonder enige aarzeling kunnen we zeggen dat dit product zeker een van de meest populaire en succesvolle producten is die er zijn, met 5 miljoen actieve installaties in september 2020.

Maar het is zeker niet de enige die u kunt gebruiken. Terwijl webdesigners en websitebeheerders bijvoorbeeld een voorkeur hebben voor paginabuilder met slepen en neerzetten, geven webontwikkelaars doorgaans de voorkeur aan frameworks als Beaver Builder waardoor ze wat meer flexibiliteit hebben in plaats van ze alleen de optie te geven die de plug-in ondersteunt.

Er zijn nog veel meer punten om te bespreken als het gaat om het vergelijken van Elementor met Beaver Builder. In feite hebben we beide items zojuist beoordeeld en een volledige vergelijking en ultieme gids gemaakt die u op de bovenstaande link kunt zien.

Conclusie

We zijn van mening dat Elementor de lat legt als het gaat om paginabuilders - en het legt deze behoorlijk hoog.

Dit is absoluut een van de beste paginabuilders die er zijn en andere leveranciers zouden zichzelf een plezier doen als ze naar dit product kijken om er zeker van te zijn dat ze op zijn minst hetzelfde niveau van functies bieden als Elementor.

Niet alleen dat, maar als ontwerper en ontwikkelaar geeft de combinatie van het samen gebruiken van Elementor en ACF om uw eigen aangepaste thema's aan te sturen, u de mogelijkheid om zeer nichethema's te maken, die zich richten op zeer specifieke industrieën, op een manier die voorheen nauwelijks mogelijk was.

We zijn van mening dat beide plug-ins op zich al een game-changer zijn, maar samen een echte winnende combinatie.

Klik hier voor de laagste prijs op Elementor

Over de auteur
David Attard
Auteur: David AttardWebsite: https://www.linkedin.com/in/dattard/
David heeft de afgelopen 18 jaar in of rond de online / digitale industrie gewerkt. Hij heeft uitgebreide ervaring in de software- en webdesign-industrie met WordPress, Joomla en niches eromheen. Als digitale consultant richt hij zich op het helpen van bedrijven om een ​​concurrentievoordeel te behalen door een combinatie van hun website en digitale platforms die vandaag beschikbaar zijn.

Nog een ding... Wist je dat mensen die nuttige dingen zoals dit bericht delen er ook GEWELDIG uitzien? ​
Alstublieft laat een nuttig geef commentaar met je mening, deel dit dan op je Facebook-groep (en) die dit nuttig zouden vinden en laten we samen de vruchten plukken. Bedankt voor het delen en aardig zijn!

Disclosure: Deze pagina kan links bevatten naar externe sites voor producten die we geweldig vinden en die we van harte aanbevelen. Als u producten koopt die we aanbevelen, kunnen we een verwijzingsvergoeding verdienen. Dergelijke vergoedingen hebben geen invloed op onze aanbevelingen en we accepteren geen betalingen voor positieve beoordelingen.

Auteur (s) Uitgelicht op:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   en nog veel meer ...