Elementor: Hur man skapar ett filuppladdningsformulär

Elementor: Hur man skapar ett filuppladdningsformulär

Vill du lära dig hur du skapar ett filöverföringsformulär i Elementor?

Som du säkert vet kommer proversionen av Elementor med en formulärwidget som du kan använda för att skapa formulär på din WordPress-webbplats. Med den här widgeten kan du skapa nästan alla typer av former. Det finns ungefär 19 typer av fält som erbjuds av denna widget, inklusive ett fält för att ladda upp en fil.

I den här artikeln visar vi dig hur du skapar ett formulär som består av ett filöverföringsfält.

Men innan du börjar, se till att du har uppgraderat din version av Elementor till Pro-versionen eftersom återigen Form-widgeten endast är tillgänglig på Elementor Pro.

Läs vår guide om: Hur man installerar Elementor på WordPress

Skapa först en ny sida eller publicera och redigera den med Elementor.

Innan du börjar skapa sidan för att lägga till ditt formulär, ställ först in layouten. Klicka på kugghjulsikonen i det nedre vänstra hörnet på den vänstra panelen. Ange önskad layout i rullgardinsmenyn Layout.

Lägg till ett nytt avsnitt genom att klicka på plusikonen i Elementors redigeringsruta. Du kan välja vilken struktur som helst baserat på designkonceptet du vill skapa. Vi väljer en enda kolumnstruktur i detta exempel.

Lägg till formulärwidgeten genom att dra den från vänster panel till dukområdet.

Hur man skapar ett formulär i Elementor

Som standard har du ett formulär som består av tre fält: Namn, E-post och Meddelande. Ta bort ett fält du inte behöver genom att klicka på x-ikonen i fältet.

I den här artikeln ska vi skapa ett formulär som består av fyra fält: namn, e-post, meddelande och filöverföring. Eftersom formuläret endast har tre fält som standard måste du lägga till ett nytt formulär för fältöverföringsfältet.

Läs också: Så här lägger du till reCAPTCHA i ditt Elementor-formulär

Klicka på knappen LÄGG TILL EN PUNKT för att lägga till ett nytt fält. Definiera typ av fält på Ladda upp fil. Om du vill definiera det som ett obligatoriskt fält, aktivera alternativet Nödvändig. Ställ in den maximala filstorleken från rullgardinsmenyn till Max filstorlek.

För att definiera de tillåtna filtyperna anger du filtilläggen Tillåtna filtyper. Du kan acceptera flera filtyper genom att separera filtilläggen med ett komma. Om du vill tillåta dina besökare att skicka in flera filer aktiverar du alternativet Flera filer och ställ in det maximala antalet filer de kan ladda ner.

Om du vill ändra ordningen på fälten kan du bara dra varje fält uppåt eller nedåt. I det här exemplet placerar vi fältet Filöverföring ovanför meddelandefältet.

Hur man skapar ett filöverföringsformulär i Elementor

Definition av handling

Det skulle vara bra om du kunde ansluta din Elementor -form med bilda backend-tjänster såsom getform ou Formcarry. Tyvärr stöder Elementor inte integration med någon form av backend-tjänst.

Ta reda på hur: Hur man lägger till avdelare för att skapa avsnitt i Elementor

Så i den här artikeln ska vi definiera åtgärden via e-post. Detta innebär att bidrag som skickas in via ditt formulär skickas via det angivna e-postmeddelandet.

Som standard var formuläråtgärden inställd på e-post. Du kan se till från alternativet Åtgärder efter inlämning.

Öppna sedan alternativet E-post och ställ in e-postadressen till vilken formuläret skickas. Definiera även ämnet för e-postmeddelandet.

Hur man skapar ett filöverföringsformulär i Elementor

Alltid under alternativet E-post, ställa in e-postadress till alternativ Meddelande.

För att anpassa brödtexten i e-postmeddelandet kan du klistra in kortkoderna för de fält du vill lägga till i brödtexten. Du hittar dem på fliken AVANCERAD för varje fält.

Du kan också anpassa kroppens metadata för din e-post i avsnittet Metadata. Ta bort alla metadata som du inte vill inkludera.

Hur man skapar ett filöverföringsformulär i Elementor

Själva metadata visas under e-postmeddelandets kropp.

På åkrarna från e-post, Från namn och svar tillkan du lämna dem tomma.

Anpassa formuläret

Hittills är ditt formulär redo att publiceras. Innan du publicerar det kan du anpassa formuläret för att göra det mer attraktivt. Som standard innehåller varje fält i ditt formulär en etikett. Om du vill stänga av det kan du göra det från Alternativ för formulärfält sous fliken Innehåll.

För att skapa mer avancerade stylingsalternativ kan du öppna fliken Stil. Här är några stylingalternativ som du kan ställa in.

  • Definiera utrymmet mellan raderna och typografin på etiketterna

För att definiera utrymmet mellan raderna (fälten) samt typografin för etiketterna kan du öppna alternativet Form.

Ställ in radutrymmet på avsnittet Rader Gap. För att definiera typografin på etiketterna (teckenstorlek, typsnitt och typsnitt) kan du klicka på pennikonen på typografi i avsnittet Märka.

  • Definiera fälttypografi, bakgrundsfärg, kantfärg, kantbredd och kantradie

Du kan öppna alternativet Fält för att definiera kontrollens typografi, kontrollens bakgrundsfärg, kantfärg, kantbredd och kantradie.

Hur man skapar ett filöverföringsformulär i Elementor

  • Anpassa knapp

För att anpassa knappen kan du öppna alternativet Knappar. Därifrån kan du ställa in bakgrundsfärg, textfärg, typografi, kantfärg, kantradie, etc ... Byt till fliken SVÄVA för att anpassa knapppekningen.

Det finns flera andra anpassningsalternativ som du kan ställa in. Du kan leka med den vänstra panelen tills du är nöjd med hur ditt formulär ser ut. När du är klar kan du klicka på knappen PUBLICERA för att publicera ditt formulär.

Potentiellt fel

När du testar ditt formulär kan felmeddelanden visas. Nedan följer ett exempel på ett fel.

Hur man skapar ett filöverföringsformulär i Elementor

Ovanstående fel inträffar vanligtvis om du använder en delad webbhotell. De flesta delade webbhotellleverantörer inaktiverar funktionen php send_mail, som används av WordPress-funktionen wp_mail att skicka e-post.

Skaffa Elementor Pro nu!

Slutsats

Här är ! Det är det för den här artikeln som visar hur du skapar ett filöverföringsformulär i Elementor. Om du har några frågor om hur du kommer dit flåt oss veta i commentaires.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.

Elementor: Hur man lägger till en innehållsförteckning

Elementor: Hur man lägger till en innehållsförteckning

Behöver du skapa eller lägga till en innehållsförteckning i Elementor?

När du skriver en lång artikel, till exempel en lista över verktyg eller platser, kan du lägga till en innehållsförteckning. I WordPress finns det en massa plugins som du kan använda för skapa en innehållsförteckning på din artikel.

Men med Elementor behöver du inte installera ett TOC-plugin om du vill lägga till en TOC. Elementor har en standardwidget som låter dig lägga till en innehållsförteckning i ditt långa inlägg. Vi täcker det här.

INNEHÅLLSFÖRTECKNING är en ny widget nyligen introducerades av Elementor. Med den här widgeten kan du tillhandahålla ytterligare navigering på din långa artikelsida, så att dina besökare enkelt kan hoppa mellan delar av din artikel.

Elementors innehållsförteckning-widget låter dig välja exakta rubriktaggar som ska visas i din innehållsförteckning. Du kan också använda rubriker från en specifik behållare på sidan.

Notera: Innehållsförteckning är en pro-widget. Du måste installera proversionen av Elementor för att kunna använda den.

Hur du använder widgeten Innehållsförteckning i Elementor

Det finns två perfekta sätt att använda widgeten Innehållsförteckning i Elementor. Först och främst kan du använda den på Sidor och inlägg (sidor och inlägg skapade helt med Elementor). Alternativt kan du skapa widgeten Innehållsförteckning ovanpå din WordPress-webbplats unika inläggsmall.

Läs också: Hur man skapar ett filöverföringsformulär i Elementor

Naturligtvis måste den unika postmallen göras med Elementor. Genom att implementera widgeten Innehållsförteckning på mallen för en enda post genereras en innehållsförteckning automatiskt i ditt inlägg så länge inlägget innehåller rubriktaggarna baserat på rubriknivåerna du ställer in. På widgeten Innehållsförteckning.

Lägg till innehållsförteckningswidgeten till en enda postmall

I den här artikeln visar vi dig hur du lägger till widgeten Innehållsförteckning i en enda postmall. Du kan skapa en ny enstaka postmall eller redigera den befintliga mallen. Vi kommer att skapa en ny enskild postmall i det här exemplet.

För att komma igång, logga in på din WordPress-instrumentpanel och navigera till Mallar -> Temabyggare. På sidan Temabyggare navigerar du till Enstaka flik och klicka på knappen LÄGG TILL EN ENKEL för att skapa en mall.

I avsnittet Välj avsnitt typ av modeller, välj Ett inlägg. Ge din modell ett namn och klicka på knappen SKAPA EN MODELL.

Vi kommer att skapa den enskilda inläggsmallen från grunden; stäng mallbiblioteket.

Se även: Så här lägger du till reCAPTCHA i ditt Elementor-formulär

Lägg till ett nytt avsnitt genom att klicka på plusknappen i Elementors redigeringsruta och välja strukturen med tre kolumner.

Ställ in bredden på kolumnerna med en jämförelse av cirka 28%: 61%: 10%.

Så här lägger du till en innehållsförteckning i Elementor

Lägg till vanliga element som inläggstitel, inläggsinformation och inläggsinnehåll i den andra kolumnen och anpassa därefter. När du är klar lägger du till innehållsförteckningen i den första kolumnen.

Definiera titeln på din innehållsförteckning i avsnittet Titel och ställ in rubriknivåerna du vill inkludera i avsnittet Ankare efter taggar.

Om du har kunskap om CSS kan du utesluta CSS-väljare för att förhindra att de visas i innehållsförteckningen.

Läs också: Hur man lägger till avdelare för att skapa avsnitt i Elementor

I avsnittet Markörvy, kan du ställa in markören för innehållsobjekt (kulor eller siffror). Om du väljer kulor kan du ställa in ikonen från ikonbiblioteket.

öppet Ytterligare Tillbehör för att visa andra inställningsalternativ och välja önskade inställningar.

Så här lägger du till en innehållsförteckning i Elementor

Gå nu till fliken Stil för att anpassa din innehållsförteckning. Du kan ställa in bakgrundsfärg, kantfärg, kantbredd och kantradie i avsnittet Box.

Medan du ställer in rubrikfärg, rubriktypografi och rubriktext kan du gå till avsnittet Rubrik.

I avsnittet Lista, Du kan ställa in det aktiva elementets textfärg, elementets textfärg när du håller musen över det och elementens textfärg i normalt läge. Du kan också ställa in markörfärg samt typografi för innehållselementen här.

Se även: Hur man installerar Elementor på WordPress

För att göra din innehållsförteckning mer användbar kan du göra den synlig när dina besökare rullar nedåt. För att göra detta, öppna fliken advanced och öppna alternativet Rörelseeffekt. Definiera den klibbiga överst och ställ in offset till cirka 80. Om du vill kan du också ställa in inmatningsanimationen i avsnittet Entré animation.

Du kan leka med den vänstra panelen tills du är nöjd med innehållsförteckningen. När du är klar klickar du på knappen PUBLICERA och ställ in visningsförhållandet.

Här är ett exempel på en innehållsförteckning som vi skapade.

Så här lägger du till en innehållsförteckning i Elementor

Om du ställer in visningsvillkoren för den enskilda postmallen som du skapade ovan till Alla singular, du kommer automatiskt att ha en innehållsförteckning varje gång du skriver en lång artikel som innehåller rubriktaggarna enligt den rubriknivå du har angett.

I finalen

Att lägga till en innehållsförteckning i en lång artikel ger en bästa användarupplevelse till dina besökare. De kan enkelt hoppa från ett avsnitt till ett annat i din artikel genom att klicka på objekten i innehållsförteckningen. Med Elementors nya widget behöver du inte installera ytterligare ett plugin för att lägga till en innehållsförteckning till en artikel.

Du kan använda widgeten Innehållsförteckning när du skapar en sida eller ett inlägg med Elementor. Alternativt kan du också lägga till widget Innehållsförteckning på din WordPress-webbplats unika inläggsmall så att varje gång du skriver ett långt inlägg som innehåller rubriktaggar genereras innehållsförteckningen automatiskt.

Skaffa Elementor Pro nu!

Slutsats

Här är ! Det är det för den här artikeln som visar hur du lägger till en innehållsförteckning i Elementor. Om du har några frågor om hur du kommer dit flåt oss veta i commentaires.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.

Elementor: Hur man lägger till paginering

Elementor: Hur man lägger till paginering

Behöver du lägga till pagination i Elementor?

Du kan använda Elementor för att bygga nästan alla typer av webbplatser. Inklusive dynamiska webbplatser som e-zines eller bloggar. För webbplatser som e-zines eller bloggar är navigering en av de viktigaste elementen.

Se även: Hur man installerar Elementor på WordPress

Pagination låter dig dela ditt webbplatsinnehåll i flera sidor. Låt oss säga att du har hundratals artiklar som du vill visa på hemsidan. Med pagination kan du dela upp dessa artiklar i flera sidor. Du kan till exempel bara visa 10 artiklar per sida. För att visa de andra artiklarna kan du använda pagination.

Diskussionen om pagination kan vara bredare än vad vi nämnde ovan. Men vi vill fokusera på detta sammanhang.

Läs också: Så här lägger du till en innehållsförteckning i Elementor

Elementor låter dig lägga till pagination på din webbplats. Du hittar sidparametern när du arbetar med widgeten inlägg och widgeten Arkivera inlägg. I den här artikeln visar vi dig hur du lägger till pagination när du arbetar med dessa widgets.

Notera: Widgetarna Posts och Archive Posts är endast tillgängliga på Elementor Pro.

Hur man lägger till paginering i Elementor med widgetar för inlägg och arkivinlägg

För att komma igång kan du skapa en ny sida / ett inlägg och redigera det med Elementor. Du kan också redigera en befintlig sida.

Lägg sedan till widgeten i Elementor-redigeraren inlägg genom att dra den från vänster panel till redigeringsrutan.

Hur man lägger till paginering i Elementor

När widgeten har lagts till, gå till vänster panel och öppna alternativet Paginering under fliken Innehåll. Välj pagineringstyp i rullgardinsmenyn. I det här exemplet använder vi Nummer.

Som standard begränsar dina sidor till sidor till 5. Du kan ändra det här alternativet beroende på antalet artiklar du har. Det är en viktig sak du bör notera här. Sidgränsen är det maximala antalet sidor som din besökare kan komma åt.

Se även: Så här lägger du till reCAPTCHA i ditt Elementor-formulär

Om du har ett stort antal inlägg (säg över 100), bör du ställa in sidgränsen till ett högre antal för att dina besökare ska kunna se inläggen per sida i navigeringen. Om du ställer in sidgränsen till 5 även om du anger inläggen per sida till 10, kommer din besökare bara att kunna se de senaste 50 inläggen på din webbplats.

WordPress (eller Elementor mer exakt) döljer andra äldre inlägg än de senaste 50 inläggen.

Hur man lägger till paginering i Elementor

För att göra din paginering kort och snygg kan du aktivera alternativet Förkorta.

Anpassa paginering

För att anpassa din sida, kan du öppna alternativet Paginering sous på fliken Style på den vänstra panelen.

Du kan ställa in typsnitt, teckenstorlek och typsnitt i avsnittet Typografi. Klicka på pennikonen för att öppna typografiinställningen.

För att ställa in färgen på sidan, kan du klicka på färgväljaren i avsnittet Färger. Det finns tre färger du kan ställa in: NORMAL, HOVER och ACTIVE (den aktiva sidan). Du kan definiera utrymmet mellan sidnumren i avsnittet Mellanslag mellan.

När du är klar kan du klicka på knappen PUBLICERA för att publicera din sida. Eller om du redigerar en sida kan du klicka på knappen UPPDATERING för att tillämpa de nya ändringarna.

Hur man lägger till paginering i Elementor

Slutord

Pagination är avgörande nog på dynamiska webbplatser som ezines eller bloggar. I Elementor kan du använda widgets inlägg för att visa artiklar från din webbplats. Du kan också använda widgeten Arkivera inlägg för att se dina webbplatsarkiv.

Läs också: Hur man skapar ett filöverföringsformulär i Elementor

Dessa widgetar har alternativ för sidinställningar, som låter dig lägga till navigering till vilken del av din webbplats du än använder.

Skaffa Elementor Pro nu!

Slutsats

Här är ! Det är det för den här artikeln som visar hur du lägger till pagination i Elementor. Om du har några frågor om hur du kommer dit flåt oss veta i commentaires.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.

Elementor: Hur man använder färgväljaren

Elementor: Hur man använder färgväljaren

Vill du använda färgväljaren i Elementor?

Elementor precis släppt en ny funktion, Färgväljare. Den här funktionen är ganska praktisk eftersom du nu kan använda samma färg på valfri del av din webbplats med bara ett klick. Det är därför inte längre nödvändigt att manuellt klistra in hexadecimalkoden som tidigare.

Men hur använder du den här funktionen? Läs vidare för att ta reda på det.

Läs också: Hur man använder globala teckensnitt i Elementor

Om du har glömt finns det över 10 miljoner färger i denna värld. I webbvärlden kan en färg representeras med en hexadecimal kod eller en RGB-kod. Elementor själv stöder båda färgkoderna. För att använda samma färg kan du kopiera hexkoden eller RGB-koden för den färg du vill ha och klistra in koden i valfri del där du vill använda färgen.

Det var förut.

Med Elementors Color Picker kan du nu spara en viss färg och använda den om och om igen när du arbetar med Elementor Editor. Med bara ett klick. Den här nya funktionen är ganska cool för att hitta en lämplig färg är en av de knepiga uppgifterna för webbdesign än att välja typsnitt.

Se även: Hur man använder globala färger i Elementor

Hur man använder Elementors färgväljare

För att använda Elementors färgväljare, lägg först till en widget som vanligt. När widgeten har lagts till går du till fliken Stil på vänster panel. Välj valfri inställning (till exempel textfärg eller bakgrundsfärg).

Läs också: Hur man skapar ett filöverföringsformulär i Elementor

Välj din favoritfärg i färgväljaren. När du har hittat en lämplig färg klickar du på plusknappen i färgväljaren.

Du kommer att bli ombedd att bekräfta om du vill skapa en ny global färg. Ange ett nytt namn och klicka på knappen Skapa.

Hur man använder färgväljaren i Elementor

Från och med nu kan du återanvända färgen du just lagt till ovan när du vill ställa in en färg på Elementor. Oavsett om det är bakgrundsfärg, teckensnittsfärg eller andra inställningar som involverar färg.

Läs också: Hur man lägger till paginering i Elementor

För att bevisa det kan du leta efter ett annat element som accepterar färgen, till exempel titeln, du kan återanvända den färgen som du tycker passar.

Hur man använder färgväljaren i Elementor

Om du sedan vill hantera dessa färger rekommenderar vi att du läser vår guide på Hur man använder globala färger i Elementor

Slutord

I webbdesign är att välja färg en av de svåra uppgifterna än att välja typsnitt. När en lämplig färg har hittats kopierar du vanligtvis hexkoden eller RGB-koden för att använda den på andra delar av sidan du arbetar med.

Se även: Så här lägger du till en innehållsförteckning i Elementor

Med Elementors färgväljare gäller inte denna gamla metod. Du kan nu spara en viss färg och återanvända den med ett klick istället för att klistra in hexkoden.

Skaffa Elementor Pro nu!

Slutsats

Här är ! Det är det för den här artikeln som visar hur du använder färgväljaren i Elementor. Om du har några frågor om hur du kommer dit flåt oss veta i commentaires.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.

Elementor: Hur man importerar eller exporterar mallar

Elementor: Hur man importerar eller exporterar mallar

Vill du importera eller exportera Elementor-modeller för att påskynda ditt arbetsflöde?

Exportera sidmallar är en av mina favoritfunktioner på Elementor. Pourquoi?

Eftersom det sparar tid genom att jag måste skapa samma mall på en annan webbplats. Jag måste bara exportera sidmallen och importera den till en annan webbplats.

I den här artikeln kommer jag att visa dig hur du gör detta.

Men vad händer om du stöter på några problem i processen?

Tja, det är enkelt och jag visar det också för dig.

Hur man skapar en mall

Gå bara till Registrerade modeller under modeller Elementor. Klicka på knappen " Add On ".

Ange om du vill ha en sidmall eller en sektionsmall eller någon annan mall. Ge det ett namn. Klicka på knappen " Skapa en mall ".

Välj bara en av de fria mallarna genom att klicka på mappikonen Lägg till en mall.

Välj en modell du gillar och klicka på " infoga ". Den hämtar mallen och lägger den på sidan.

Tryck på " offentliggöra "Och sedan" kom tillbaka till WORDPRESS -REDAKTÖREN ".

Hur man importerar eller exporterar modeller i Elementor

Ta en titt på dina sparade modeller och se att din modell är sparad.

Exportera en mall till Elementor

För att exportera en mall håller du bara muspekaren över din sparade mall och klickar på "Exportera mall".

Hur man importerar eller exporterar modeller i ElementorDen hämtar en JSON-fil till din dator. Du kan byta namn på det om du vill göra det lättare att identifiera.

Importera en mall till Elementor

Gå till den andra webbplatsen och navigera till dina sparade modeller. Klicka på knappen "Importera modeller".

Hur man importerar eller exporterar modeller i Elementor

Välj mallen eller JSON-filen du laddade ner och klicka på "Importera nu".

Du ser i dina sparade mallar att mallen har importerats.

Läs också: Hur man använder Color Sampler i Elementor

Ett annat sätt att göra detta är när du skapar en ny mall eller lägger till en mall, det finns ett alternativ att importera en mall.

Välj mallen eller JSON-filen du laddade ner så läggs den till i ditt bibliotek Mina modeller. Du kan nu infoga mallen på sidan.

Hur man importerar eller exporterar modeller i Elementor

Fel vid import av en modell och hur man fixar den

Tänk nu om du försökte importera en mall och stötte på ett ogiltigt filfel?

Oroa dig inte. Detta är ett vanligt fel och uppstår normalt när modellen du försöker importera skapas från en äldre version av Elementor.

Se även: Hur man använder färgväljaren i Elementor

Finns det en fix för detta? Ja, det finns det verkligen.

Så här är vad du behöver göra. Nedgradera din version av Elementor.

Kommentar? Gå bara till Elementor-pluginlista och i den avancerade vyn hittar du avsnittet Föregående version längst ner.

Hur man importerar eller exporterar modeller i Elementor

Jag föreslår att du väljer och hämtar den senaste stabila versionen av Elementor.

Nu finns det två sätt att nedgradera din pluginversion.

Först och främst måste du gå till plugins. Inaktivera och ta sedan bort Elementor. Du kan sedan ladda ner och aktivera den gamla versionen du laddade ner.

För det andra kan du installera ett plugin som heter Enkla tema- och pluginuppgraderingar. Det är faktiskt en av mina favorit-plugins. Vad det gör är att även om du har ett plugin installerat kan du installera ett plugin på det. Jag tycker det är väldigt bekvämt och använder det på alla mina webbplatser.

Hur man importerar eller exporterar modeller i Elementor

Så med det här pluginet installerat kan du ladda ner den gamla versionen av Elementor och skriva över den aktuella versionen du har. Aktivera plugin.

Du kommer att se att Elementor nedgraderas till den tidigare versionen.

Läs också: Hur man lägger till paginering i Elementor

Gå till ditt Elementor-bibliotek och importera modellen som skapats från den gamla versionen. Du ser att den redan har importerats till ditt bibliotek.

Gå tillbaka till plugins och uppgradera din version av Elementor till den senaste versionen. När du uppdaterar din instrumentpanel kommer du att kunna se det i din Registrerade modeller, modellen finns där och importeras korrekt.

Skaffa Elementor Pro nu!

Slutsats

Här! Det är det för den här artikeln som visar hur du importerar eller exporterar modeller i Elementor. Om du har några frågor om hur du kommer dit flåt oss veta i commentaires.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.

Elementor: Hur man skapar en anpassad sida för WooCommerce

Elementor: Hur man skapar en anpassad sida för WooCommerce

Vill du lära dig hur du skapar en anpassad sida för en WooCommerce-butik med Elementor?

Som du kanske vet kommer Elementor Pro med en WooCommerce-byggfunktion som låter dig bygga en anpassad e-handelswebbplats med WooCommerce utan kodning. Med den här funktionen kan du skapa anpassade WooCommerce-sidor med Elementors visuella redigerare som erbjuder ett intuitivt gränssnitt.

Se även: Hur man installerar Elementor på WordPress

När denna artikel skrivs kan du skapa anpassade sidor för butikssidan, produktsidan och produktarkivsidorna (taggar och kategorier). Snart kommer du också att kunna skapa egna sidor för kassasidan och kundvagnssidan.

I den här artikeln visar vi dig hur du skapar en anpassad WooCommerce-butiksida med Elementor Pro's WooCommerce-byggfunktion.

Själva butiksidan är en av standardsidorna i WooCommerce. Denna sida fungerar som en utställning för att visa dina produkter. Du kan komma åt den här sidan genom att gå till yoursite.com/store. Som standard visar WooCommerce-butiksidan endast WooCommerce-produkter.

Genom att skapa en anpassad butikssida med Elementor Pro kan du lägga till element för att göra din butik mer attraktiv.

Hur man skapar en anpassad sida i en WooCommerce-butik med Elementor

Det finns minst två Elementor-widgets som du kan använda för att skapa en anpassad sida i en WooCommerce-butik: Arkivera produkter och Produkter.

I det här exemplet använder vi det senare.

Funktionen för widgeten Produkter är ganska lik widgetens Inlägg. Skillnaden är att widgeten Produkter används för att visa WooCommerce-produkter medan Posts-widgeten används för att visa blogginlägg.

Läs också: Hur man importerar eller exporterar modeller i Elementor

Observera att du bara kan hitta widgeten Produkter när plugin-programmet WooCommerce är installerat och aktiverat.

För att börja skapa en anpassad WooCommerce-butiksida med Elementor Pro, gå till för det första à Mallar -> Temabyggare på din WordPress-instrumentpanel. Klicka på fliken Produkter arkiv på sidan Temabyggare och klicka sedan på knappen ajouter a PRODUKTARKIV.

Ge din modell ett namn och klicka på knappen SKAPA EN MODELL.

hur man skapar en anpassad sida för en WooCommerce-butik med ElementorDet finns tre anpassade butikssidemallar du kan välja mellan om du vill skapa den anpassade butiksidan från en mall. Om du vill bygga den anpassade butiksidan från grunden kan du bara stänga mallbiblioteket.

Se även: Hur man använder Color Sampler i Elementor

I det här exemplet skapar vi den anpassade butiksidan från grunden. Som nämnts ovan använder vi widgeten Produkter för att visa produkterna.

Innan du lägger till widgeten Produkter i redigeringsrutan kan du definiera layouten genom att lägga till avsnitt och kolumner. När layouten är klar kan du helt enkelt dra widgeten Produkter till redigeringsrutan.

Som du kan se laddar widgeten Produkter automatiskt och visar de senaste WooCommerce-produkterna. Du kan ändra frågan genom att öppna blocket Fråga under fliken Innehåll från inställningspanelen. Det finns fem alternativ att välja mellan:

  • Aktuell fråga - Aktuell fråga
  • Senaste produkterna - Senaste produkterna
  • Försäljning - Försäljning
  • Utvalda - Utvalda
  • Manuellt val - Manuellt val

Du kan också ange i vilken ordning produkterna ska visas eller utesluta vissa

hur man skapar en anpassad sida för en WooCommerce-butik med Elementor

För att ställa in antalet kolumner och rader kan du öppna blocket Innehåll under fliken Innehåll. Från detta block kan du också aktivera paginering.

Du kan leka med inställningspanelen tills du får de bästa inställningarna för widgeten Produkter. När du är klar med widgeten Produkter kan du lägga till fler widgets på din sida.

Läs också: Hur man använder färgväljaren i Elementor

När du är klar med att redigera sidan kan du klicka på knappen PUBLICERA längst ner på inställningspanelen.

Lägg till ett visningsvillkor genom att klicka på knappen lägg till ett villkor. Eftersom du vill skapa en anpassad butikssida, välj alternativet Shoppa Sida. Klicka på knappen SPARA & STÄNG för att spara ändringen.

hur man skapar en anpassad sida för en WooCommerce-butik med Elementor

Hittills har du framgångsrikt skapat den anpassade WooCommerce-butiksidan med Elementor Pro. Du kan gå på din webbplats.com/store för att kontrollera resultatet.

Anpassa produktwidgeten

Innan du publicerar din sida kan du anpassa widgeten Produkter för att göra den mer attraktiv. För att göra det, klicka på widgeten i redigeringsrutan och navigera till fliken Stil från inställningspanelen. Det finns fyra block som du kan öppna enligt följande:

  • Produkter

Du kan öppna detta block för att definiera klyftan mellan kolumner och rader. Från detta block kan du också ställa in typografi (teckensnittsfamilj, teckensnittsstorlek, etc.) samt textfärg för produktelement som produkttitel, produktpris, produktbedömning, produkt, etc.…. Du kan också ställa in gränsen för produktbilden,

  • Box

I detta sammanhang hänvisar Box till behållaren för varje produkt. Du kan öppna blocket Box för att definiera kantens bredd, kantradien, lådans skugga, bakgrundsfärg, kantfärg etc.

  • Paginering

Om du aktiverar alternativet Paginering från blocket Innehåll, du kan öppna blocket Paginering under fliken Stil för att anpassa sidan. Du kan ställa in saker som avstånd, kantfärg, bakgrundsfärg etc.

Du kan också definiera olika parametrar för varje tillstånd (normal, pekande och aktiv).

  • Rea Flash

När du lägger till en ny produkt i WooCommerce kan du ställa in ett försäljningsprisattribut för att visa dina besökare att den tillhörande produkten är rabatterad. För att betona detta kan du visa försäljningsattributet på butikssidan så att rabatterade produkter har ett försäljningsmärke.

Du kan öppna blocket Rea Flash för att anpassa försäljningsmärket. Du kan definiera element som textfärg, bakgrundsfärg, typografi, kantradie, storlek (bredd och höjd), avstånd osv.

I finalen

WooCommerce Builder är en av funktionerna som erbjuds av Elementor Pro. Det låter dig bygga en personlig och unik e-handelswebbplats med WooCommerce och ingen kodning. Inget behov av att installera ett WordPress-tema som påstår sig vara utformat för WooCommerce. Istället kan du skapa egna WooCommerce-sidor själv med Elementors visuella redigerare.

Läs också: Hur man lägger till avdelare för att skapa avsnitt i Elementor

Fram till version 3.2.2 tillåter Elementor Pro dig bara att skapa sidor med anpassad butik, sida med anpassad produkt och anpassade produktarkivsidor. Men Elementor meddelade att i nästa version av Elementor Pro kommer du också att kunna skapa en anpassad kundvagnssida, en anpassad kassasida och en anpassad kundkontosida.

Skaffa Elementor Pro nu!

Slutsats

Här! Det är det för den här artikeln som visar hur du skapar en anpassad sida för en WooCommerce-butik med Elementor. Om du har några frågor om hur du kommer dit flåt oss veta i commentaires.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.