Uw toegewijde partner voor alles wat met WordPress te maken heeft

Hoe u een productsjabloon maakt op Elementor

Inhoudsopgave

Elementor-productsjabloon is het beste wat u aan uw e-commercewebsite kunt toevoegen. U kunt eenvoudig beginnen met de E-commerce website door WooCommerce te installeren. De productpagina in WooCommerce geeft echter heel weinig functionaliteit. Bovendien zijn de looks allemaal hetzelfde, wat het een beetje saai maakt. Daarom kunt u voor het alternatief kiezen en een Elementor-productsjabloon gebruiken. In deze handleiding wordt precies beschreven hoe u de beste Elementor-productsjabloon kunt maken die u voor alle producten kunt gebruiken.

Laten we beginnen met het overzicht en dan zullen we de stappen zien om dit te doen.

 

Overzicht van Elementor-productsjabloon

Elementor-productsjabloon is de sjabloon waarmee u de productpagina kunt wijzigen en nieuwe dingen aan de pagina kunt toevoegen. Hier zullen we niet zien hoe u een individuele productpagina kunt maken, ook wel verkoopbestemmingspagina genoemd. In plaats daarvan zullen we zien hoe u een Elementor-productsjabloon kunt maken die voor elk afzonderlijk product kan worden gebruikt.

De volgende keer dat u een product publiceert, wordt dus automatisch rekening gehouden met de nieuwe sjabloon. Telkens wanneer de gebruiker de productpagina bezoekt, ziet hij een nieuwe productpagina volgens de nieuwe sjabloon. Daarom kunt u deze techniek hier zeker gebruiken.

Hiermee kunt u een compleet Elementor-productsjabloon maken.

Het belangrijkste dat u hier in gedachten moet houden, is de naam van de elementen. Er kunnen veel elementen aan de productpagina worden toegevoegd. Als je weet welke elementen je moet toevoegen en je kent de naam ervan, ben je al halverwege. Dus wanneer u deze handleiding leest. Zorg ervoor dat u de naam onthoudt.

Je hebt ook nodig Elementor pro als u een Elementor-productsjabloon wilt maken. Dit kan niet vanuit de gratis versie van Elementor. Dus als u van plan bent een sjabloon te maken, kunt u nu meteen upgraden naar de pro-versie.

Daarna kunnen we direct de handleiding starten en kijken hoe u een compleet sjabloon kunt maken.

 

Dingen gereed maken

Het eerste dat u hoeft te doen, is de voorbereiding voordat u met de stappen begint. Hier zullen we alleen de basisvoorbereidingen doen.

Om te beginnen moet u dus de Elementor- en WooCommerce-plug-in installeren. Je moet ook de Pro-versie van Elementor installeren. Het geeft je een nieuwe plug-in, de Elementor pro-plug-in die je kunt installeren.

Nadat u het hebt geïnstalleerd en geactiveerd, kunt u met de handleiding beginnen.

 

Maak een lege sjabloon

We gaan eerst naar Elementor en klikken vervolgens op de themabouwer. Met de themabouwer kunt u een pagina voor de sjabloon maken.

Wanneer u erop klikt, wordt u gevraagd welk type Elementor-productsjabloon u wilt maken. U moet “enkel product"Hier.

In sommige oudere versies moet u hetzelfde doen door naar Sjablonen te gaan en van daaruit de nieuwe sjabloon voor één product te maken. Hoe dan ook, de stappen zijn vrijwel hetzelfde.

Wanneer u daar bent, moet u de gewenste Elementor-indeling selecteren. De standaardlay-out wordt aanbevolen en zal in de meeste gevallen werken. U kunt dus de standaardindeling behouden en vervolgens doorgaan naar het volgende deel.

We gaan nu beginnen met het maken van een volledige productpagina en kijken wat u nog moet toevoegen.

Elementor-productsjabloon

Menu winkelwagen

De meerderheid van de mensen zal dit ding vergeten. Als je het al in het thema hebt, hoef je je er geen zorgen over te maken.

Als je het echter niet in het thema hebt of als je er zelf veel hebt gemaakt met Elementor, moet je de menuwagen toevoegen.

Er zal een widget voor hetzelfde zijn. er wordt het winkelwagenpictogram in het menu weergegeven. Gebruikers kunnen vanaf hier hun winkelwagenitems bekijken.

 

Breadcrumbs

Zodra u dit doet, zijn de broodkruimels het eerste dat gebruikers zien. Dit is niets anders dan de locatie van het product.

Winkel > Schoenen > Casual schoenen > Model123

Zo zien de broodkruimels eruit. U kunt de broodkruimels dus ook op de webpagina toevoegen. Nadat u deze heeft toegevoegd, kunt u doorgaan naar de daadwerkelijke productinformatie.

We verdelen het productgedeelte in twee delen. De eerste is degene waar mensen meestal naar zoeken, zoals een korte beschrijving, prijs, beoordelingen, enz. De volgende helft zal meer details behandelen, zoals de exacte lijst met functies, recensies, enz. De meeste mensen zullen alleen naar de eerste helft kijken en Maak de beslissing. U moet dus de juiste aandacht besteden aan de eerste helft van het product.

Daarna kunt u ook de tweede helft van de Elementor-productsjabloon maken.

Elementor-productsjabloon eerste helft

De eerste Elementor-productsjabloon zal de spotlight-dingen bestrijken.

Eerst moet u de titel van het product toevoegen. Je kunt het in de volledige breedte toevoegen of de gewenste kolom staat in de rechterkolom, waar de linker de productafbeelding is.

Hier maken we een sectie met twee kolommen.

In de eerste kolom hebben we alleen de productafbeeldingen. Daarna hebben we in de rechterkolom een ​​heleboel productinformatie die we hier zullen zien.

U kunt de titel toevoegen zoals we de verkoper hebben genoemd. Onder de titel vindt u de productbeoordeling. Dit zal de gebruikers overtuigen om het product te kopen. Als daar direct een beoordeling wordt weergegeven, is de kans groter dat gebruikers bij u kopen. U kunt de beoordelingen daar dus toevoegen.

Daarna kunt u onderaan de prijs toevoegen. U kunt daar ook de korte beschrijving toevoegen en vervolgens de knop Toevoegen aan winkelwagen toevoegen.

Zo zien de meeste productpagina's eruit. Je kunt zeker onderaan het aantal resterende hoeveelheden toevoegen. Dit zal schaarste veroorzaken.

Hier is de lijst met dingen die u hier moet toevoegen. Dit zijn ook dezelfde namen die u in de widget kunt vinden. U kunt dus naar de volgende widgets zoeken en deze vervolgens toevoegen.

  • Productafbeeldingen
  • Product titel
  • Prijs
  • Productbeoordelingen
  • Korte beschrijving
  • Toevoegen aan winkelwagen knop
  • Productvoorraad:
  • Metabeschrijving (SKU en andere zaken)

Product tweede helft

Nadat u alle bovengenoemde dingen heeft toegevoegd, is het tijd om meer details over het product te laten zien,

Hier zijn er verschillende manieren waarop u dingen kunt toevoegen. De meest geprefereerde manier is de manier met tabbladen. Je hebt misschien in WooCommerce zelf gezien dat er tabbladen zijn waar gebruikers op elk tabblad kunnen klikken en de gewenste informatie kunnen zien.

Als u niet aan tabbladen wilt toevoegen, kunt u dit ook rechtstreeks aan de pagina toevoegen. Dit is afhankelijk van de hoeveelheid informatie die u hier wilt invoeren.

Meestal omvat de tweede helft een lange beschrijving. Dat is het. Er zijn geen andere dingen die u hier nodig heeft. Mensen spelen hier echter vaak een beetje mee en voegen hier meer dingen aan toe.

Als u bijvoorbeeld elektronische artikelen verkoopt, heeft u één tabblad voor de beschrijving, het tweede tabblad voor de tabel met kenmerken en het derde tabblad kan de handleiding zijn. Je kunt de technische zaken ook toevoegen in een nieuw tabblad.

Het belangrijkste doel van deze sectie is om ervoor te zorgen dat de gebruiker alle details over het product kan begrijpen en dat elke vraag kan worden opgelost.

 

Veelgestelde vragen en recensies

Over vragen gesproken, u kunt ook een sectie met veelgestelde vragen toevoegen, net zoals grote e-commercewebsites dat doen. Hiermee worden de meest voorkomende vragen van gebruikers beantwoord. Dit zal de kansen op een verkoop opnieuw vergroten.

Het volgende gedeelte gaat helemaal over de beoordelingen. Hier kunt u de beoordelingen van de klanten toevoegen. Geef niet alle beoordelingen weer. U kunt gewoon de nuttigste recensies van het product weergeven.

 

Upsell

Dit is waar de echte magie binnenkomt voor de Elementor-productsjabloon. Zodra de gebruiker aan het einde van de pagina is gekomen, heeft hij mogelijk twee dingen in gedachten. Ofwel scrollen ze direct naar boven en kopen het product, ofwel gaan ze op zoek naar een ander product. De kans is groot dat de gebruiker de pagina verlaat en de producten op een andere website zoekt. Dat wil je zeker niet doen.

Daarom zullen we “Producten die je misschien leuk vindt"En"gerelateerde producten" hier. U kunt naar producten zoeken en u zult veel van dergelijke widgets vinden die u hier kunt toevoegen. Zo kunt u de productverkoop verhogen.

Hier zullen we meer van dergelijke widgets toevoegen waarmee we meer kunnen verkopen. Daarna is uw productpagina voltooid.

U kunt de wijzigingen vervolgens opslaan en dat is alles.

Sla de Elementor-productsjabloon op

Maar wacht, sparen is niet zo eenvoudig als het klinkt. Voor gewone sjablonen kunnen we gewoon op de knop Opslaan klikken en dat is alles. Hier liggen de zaken echter anders.

Hier moet u nog een paar stappen ondernemen om de exacte wijzigingen op te slaan.

Wanneer u op de knop Opslaan klikt, wordt u gevraagd de voorwaarden in te stellen. Dit is waar de dingen een beetje veranderen. Hier dient u de voorwaarden in te stellen.

Omdat we willen dat alle producten dit specifieke sjabloon gebruiken, zullen we die voorwaarde hier gebruiken.

Voeg gewoon alle producten toe en dat is alles. Vervolgens wordt voor alle producten hetzelfde sjabloon gebruikt.

Maar wacht eens, wat als u de Elementor-productsjabloon alleen voor specifieke producten wilt weergeven en niet voor alle producten.

Je hebt twee manieren om het te doen. U kunt de uitsluitingsvoorwaarde instellen en specifieke categorieën uitsluiten. Als alternatief kunt u ook de producten uit een specifieke categorie opnemen.

Zo kun je de voorwaarden stellen. Wanneer u de voorwaarden instelt om deze op te nemen, wordt de Elementor-productsjabloon weergegeven voor die specifieke sjabloon.

Er is nu nog een manier om de Elementor-productsjabloon in te stellen. Laten we daarover praten.

 

Elementor-productsjabloon importeren

Er is nu een eenvoudige manier om de Elementor-productsjabloon in te stellen. hier krijgt u geen volledige aanpassingsfuncties, maar het is eenvoudiger om de sjabloon met deze methode te maken.

Elementor heeft enkele van de sjablonen die u kunt gebruiken direct importeren en gebruiken. U kunt de sjablonen voor het WooCommerce-product importeren en ze vervolgens opslaan als uw sjabloon.

U kunt het importeren net zoals u het gewone sjabloon importeert.

Daarvoor heb je hier twee methoden. U kunt de volledige sjabloon importeren en daar de wijzigingen aanbrengen. Als u dat niet wilt doen, is er nog een optie die u hier heeft. Hier kunt u de blokken importeren en zelf de sjabloon maken.

Elementor levert blokken. Deze blokken zijn niets anders dan een sectie die al voor u is gemaakt. je kunt direct beginnen met het importeren van de blokken. Er zullen veel blokken zijn. Als u bijvoorbeeld een blok wilt voor de eerste helft van het product, kunt u dat blok direct importeren. Alle elementen zijn al toegevoegd. Als u hier iets wilt veranderen, kunt u de wijzigingen zeker aanbrengen, aangezien het volledig bewerkbaar is. U kunt de wijzigingen aanbrengen en deze vervolgens publiceren. Zo creëer je de beste Elementor productimpact voor jouw website.

Als alternatief kunt u de sjabloon ook importeren en aanpassen. Door deze beide te combineren, wordt uw werk aanzienlijk eenvoudiger.

 

Laatste woorden

Concluderend: dit is hoe u een Elementor-productsjabloon kunt maken die goed werkt met elke afzonderlijke website. In plaats van het helemaal opnieuw te maken, raden we u aan de sjabloon of op zijn minst blokken te importeren. Als u de blokken importeert, wordt het werk een stuk eenvoudiger voor u. Zo kunt u beginnen met het aanbrengen van wijzigingen in uw Elementor-productsjabloon. Vergeet niet de widgets toe te voegen aan het kant-en-klare sjabloon. U kunt zeker extra widgets toevoegen of de bestaande widgets naar eigen keuze aanpassen. Dit is de voorkeursmanier om een ​​Elementor-productsjabloon te maken.

Hoe aan de slag te gaan?

Kom meer te weten

Elementor-ontwikkelaars

Huur flexibel personeel op afstand en onverdeelde aandacht in.

Start nu

Heeft u problemen met WordPress?

Claim uw Gratis WordPress-onderhoud

In het snelle digitale landschap van vandaag verdient elke website de zorg en expertise van een professioneel onderhoudsteam, dat optimale prestaties, verbeterde beveiliging en naadloze gebruikerservaringen garandeert, zodat u zich met een gerust hart kunt concentreren op de groei van uw bedrijf.

Alexey Seryapin
Oprichter van WPServices

Couponcode toegepast!

Neem de tijd en blader door onze diensten.

Alexey Seryapin
Oprichter van WPServices