Elementor Cloud: Hur man bygger en webbplats på 3 minuter

Elementor Cloud: Hur man bygger en webbplats på 3 minuter

I den här WordPress-handledningen lär du dig hur du skapar en webbplats med Elementor på bara 3 minuter tack vare Elementor Cloud, en automatiserad lösning för att skapa en WordPress-blogg med Elementor för nybörjare och expertbloggare eller webbansvariga.

Om du hellre vill följa videohandledningen klickar du på knappen ovanför följande video:

Att bygga en egen webbplats utan att lära sig koda eller anlita en utvecklare var nästan omöjligt. Men tack vare plattformar som WordPress och plugins som Elementor, är det som en gång var ett omöjligt uppdrag nu verklighet.

I den här handledningen kommer vi att visa dig hur du använder WordPress och Elementor för att skapa en ny webbplats och gå igenom processen steg för steg.

Men innan vi inbjuder dig att upptäcka Hur man installerar Elementor på WordPress eller Hur man installerar (lägger till) ett plugin på WordPress

Bygg en WordPress-webbplats med Elementor

Wordpress är ett kraftfullt innehållshanteringssystem som kan laddas ner och användas gratis och det låter dig skapa vilken typ av webbplats som helst; från enkla personliga bloggar och småföretagswebbplatser till stora företagswebbplatser och funktionsrika appar. 

Elementor, å andra sidan, är en lättanvänd men ändå robust sidbyggare som gör det enkelt för alla att skapa sin webbplats, oavsett hur komplex den är.

I den här handledningen kommer vi att visa dig hur du skapar en WordPress-webbplats på tre minuter med den nya Elementor Cloud-plattformen. Namnet kan vara biffigt men lösningen är verkligen automatiserad och enkel för alla nybörjare.

det allra första är att gå till Elementor-sidan och gå till botten av sidan och hitta Elementor Cloud-länken.

skapa en webbplats med Elementor Cloud

Du kommer att omdirigeras till en ny sida. Scrolla ner och hitta avsnittet INGA dolda älvor. Högerklicka på knappen Köp nu Som på bilden nedan.

skapa en webbplats med Elementor

Betalningssidan öppnas och du kommer att bli ombedd att ange din e-postadress. Efter att ha angett den klicka på knappen SKAPA KONTO

Skapa ett elementor molnkonto

Ange sedan landet, staten, adressen, postnummer och så vidare på nästa sida, klicka sedan på knappen Fortsätta

Därefter väljer du betalningsmetod. Du kan välja mellan kreditkort eller PayPal. Vi valde metoden PayPal.

Klicka på den gula PayPal-knappen till höger på skärmen.

Un Popup öppnas och du kommer att uppmanas att ange din PayPal-inloggningsinformation och validera.

Om proceduren lyckades omdirigeras du till tacksidan som har två knappar. Den första Gå till Mitt konto tar dig till ditt konto och det andra Börja skapa din webbplats mot automatiskt skapande av din webbplats.

Klicka på den andra knappen. Du kommer att ha rätt till en ny popup som inbjuder dig att ange namnet på din webbplats. Bekräfta genom att klicka på Nästa.

Vänta tills den automatiska proceduren för att skapa din webbplats är slut och klicka sedan på knappen Låt oss gå!

Klicka på Jag fattar som på bilden nedan.

Klicka på Öppna WP Dashboard för att öppna din instrumentpanel.

Klicka på knappen i den nya välkomstpopupen Använd ett webbplatskit

Du kommer att bli ombedd att välja en webbplatsmall från listan som Elementor erbjuder. Du kommer att ha möjlighet att filtrera dem efter kategori genom att klicka på en av dem till vänster.

skapa en WordPress-blogg med Elementor

Om du har hittat modellen som motsvarar dina ambitioner, för muspekaren över den, en ny knapp kommer upp, klicka på Visa demo

skapa en WordPress-blogg med Elementor

Du kommer att kunna se vad denna modell erbjuder. Du kommer att kunna bläddra i alla sidor i denna modell och om du är nöjd med den, klicka på knappen Applicera Kit vem kommer att installera mallen på din webbplats.

Om du inte är det, knappen Tillbaka till biblioteket tar dig tillbaka till listan med mallar och du kan se en annan.

Efter att ha klickat på Applicera Kit, kommer en bekräftelse popup fråga dig om du verkligen vill installera hela denna modell eller bara några sidor. Du kan klicka Tillämpa alla ou skräddarsy för att anpassa dina val.

En sammanfattning av ditt val kommer att presenteras, klicka på Nästa

skapa en WordPress-blogg med Elementor

Klicka äntligen på Tillbaka till instrumentpanelen för att återgå till instrumentpanelen på din webbplats.

Klicka på din instrumentpanel Namn på min webbplats ovanför och till vänster om skärmen och sedan på Visit webbplats för att se hur din webbplats presterar.

Och här har du precis skapat din webbplats på WordPress med Elementor Cloud.

Allt som återstår att göra är att anpassa det som du vill. För detta erbjuder vi en Elementor Tutorial Bundle som vi inbjuder dig att upptäcka.

När du är klar med den här guiden kanske du vill kolla in våra andra guider och tutorials för mer specifika sidor.

Med dessa handledningar kommer du att kunna förbättra din webbplats och få ut det mesta av den.

Skaffa Elementor Pro nu!

Slutsats

Så ! Det var allt för den här artikeln som visar hur du skapar en webbplats med Elementor på 3 minuter. Om du har några funderingar kring hur du tar dig dit låt oss veta inom 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 knappljudeffekt

Elementor: Hur man lägger till en knappljudeffekt

Behöver du ta reda på hur man lägger till en knappljudeffekt på Elementor? Ta reda på det i den här artikeln.

Ser du dessa 2 knappar?

När du klickar på Av katten, kommer det att göra en jamning, och när du klickar på knappen på chien, kommer det att producera ett skällande ljud. I den här artikeln kommer vi att visa dig hur du lägger till Elementor en ljudeffekt till knappen när den klickas.

Hur man lägger till ljudeffekt till knappen i Elementor

Steg 1: Skapa en knapp

Först måste du skapa knappen, du kan anpassa knappen som du vill, eftersom Elementor har många alternativ för att få din knapp att se vacker ut.

När knappen är klar, förbered nu ljudeffekten för knappen och ladda upp den till WordPress mediebibliotek. Du kan använda MP3- eller WAV-filformat för ljudeffekt.

För att ladda upp ljudfilen till WordPress mediebibliotek, navigera till WordPress-instrumentpanelen och klicka Media -> Lägg till. Du kan dra och släppa filerna eller klicka Välj filer för att ladda upp dem.

knappljudeffekt på Elementor

När filerna har laddats ner, gå till mediabiblioteket och klicka på ett av ljuden, kopiera sedan i fönstret som visas filens URL för att få länken till ljudeffekten.

knappljudeffekt på Elementor

Steg 3: Lägg till följande HTML-kod

För att producera ljud från knappen måste vi använda följande HTML-kod.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  //Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends
});
</script>

Lägg till en HTML-widget i arbetsytan och klistra in koden i blocket HTML Code.

Använd din ljudeffektlänk för att ersätta Ljudeffekt-URL i instruktionen

var audio1 = new Audio('Sound-Effect-URL')

Välj CSS-klasserna för knappen och ändra koden för knappens CSS-klass

$(".button-class").mousedown

Efter att ha modifierat koden kommer den att se ut så här.

knappljudeffekt på Elementor

Steg 4: Lägg till en CSS-klass till knappen

För att koppla knappen till koderna behöver vi lägga till CSS-klasser till knappen, så att koden vet vilken knapp som klickas på och utlöser ljudeffekterna.

knappljudeffekt på Elementor

Och det här är för en knapp med ljudeffekt. Du kan nu anpassa din knapp. Och om du vill lägga till fler knappar med ljudeffekter går det att göra genom att kopiera en del av koden och modifiera den lite.

Lade till ytterligare knappar med ljudeffekter

Skapa knappen eller kopiera den befintliga knappen

Du kan kopiera den befintliga knappen genom att högerklicka på den befintliga knappen och välja Kopiera och sedan klistra in den i valfri sektion genom att högerklicka inuti den sektionen.

knappljudeffekt på Elementor

Kopiera en del av koden och justera variablerna och CSS-klassnamnet för den andra knappen

Låt oss kopiera några delar av den tidigare HTML-koden som utlöser ljudeffekten, det är följande kod nedan

//Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends

Efter att ha kopierat koden, klistra in den precis nedanför av Audio 1 slutar. Ändra variabeln audio1 och all kod som använder variabeln audio1 på den nyskapade koden i audio2.

Se även: Elementor: Hur man skapar ett effektkort från en portfölj

Byt sedan ut ljudeffektens url om du använder en ny ljudeffekt för den nya knappen och ändra koden knappklass i dina nyskapade knapp CSS-klasser.

Den slutliga koden kommer att se ut som följande bild.

knappljudeffekt på Elementor

Byt ut knappens CSS-klassnamn

knappljudeffekt på Elementor

Din nyskapade knapp kommer också att ha en ljudeffekt när du klickar på den. Du kan skapa så många du vill.

Ljudelement är bland de stora tilläggen till en webbplats. De ger inte bara ett attraktivt element för webbplatser utan hjälper också till att skapa ett bestående intryck på slutanvändarna.

Läs också: Elementor: Hur man migrerar en WordPress-webbplats

Handlingen eller resultatet bör dock endast åtföljas av ljud om det avsevärt förstärker eller förtydligar ett viktigt budskap till användaren. Att informera användaren om något som behöver deras uppmärksamhet, så att det inte ger en negativ inverkan på din webbplats istället.

Skaffa Elementor Pro nu!

Slutsats

Så ! Det var allt för den här artikeln som visar hur du lägger till knappljudeffekt på Elementor. Om du har några funderingar kring hur du tar dig dit låt oss veta inom 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 flytande knapp med Z-index

Elementor: Hur man skapar en flytande knapp med Z-index

Vill du skapa en flytande knapp med Z-index på Elementor?

Vi är säkra på att du är bekant med knappen som visas framför allt innehåll på skärmen och vanligtvis med en cirkulär form och en ikon i mitten. Tja, det är den flytande åtgärdsknappen.

Den flytande åtgärdsknappen kan utlösa en åtgärd eller skicka dig att segla någonstans. Såsom triggers för e-postmeddelanden, sociala nätverk, dirigera besökare att prenumerera på en kanal och många fler.

I Elementor finns det två metoder för att skapa en flytande åtgärdsknapp, de är följande:

  • Genom att ställa in Z-index
  • Genom att skapa ett popup-fönster -Popup-

I den här handledningen kommer vi bara att visa dig hur du skapar en flytande åtgärdsknapp genom att ställa in Z-indexet. Och vi kommer att använda proversionen för att få det att hända.

Men först ta reda på: Hur man installerar Elementor på WordPress

Hur man skapar den flytande åtgärdsknappen i Elementor

Du kan använda den kostnadsfria versionen av Elementor för att skapa den flytande åtgärdsknappen med den här metoden. Men du måste klistra in knappen du designade på varje sida där du vill att knappen ska visas på din webbplats.

med Elementor Pro, kan du också komma åt funktionen Anpassad CSS, som vi kommer att använda i den här handledningen.

Gå till din Elementor-redigerare; du kan ändra ditt befintliga innehåll (sidor, artiklar, etc...) eller skapa ett nytt. I den här handledningen kommer vi att ändra en sida.

Skapa först ett nytt avsnitt med en enda kolumn. Välj knappwidgeten och dra och släpp den i redigeringsområdet från widgetpanelen. Ändra sedan knappen Texte och länken. 

I den här handledningen kommer vi att använda knappen som en trigger för att få besökare att surfa på Elementors webbplats. Sedan, på alternativet uppriktning, ställ in den på Droite et, Ändra slutligen Taille av På-knappen Väldigt stor.

skapa en flytande knapp med Z-index

Som du kan se i GIF-bilden ovan är den här knappen stationär i avsnittet. Därefter kommer vi att få den att röra sig medan vi rullar medan vi håller den i samma position.

Gå till fliken advanced. I parametern Layout, ställ in bredden på Inline (bil), definiera position på Fast, uppsättning horisontell orientering på Droite och justera det decalage såsom önskas.

skapa en flytande knapp med Z-index

Därefter kommer vi att definiera det väsentliga i denna metod. På fältet Z-index, ange numret 9999 det gör att knappen alltid är framme (svävande).

skapa en flytande knapp med Z-index

Nu är det dags att vrida den flytande åtgärdsknappen. Alltid under fliken advanced, få tillgång till css-klasser från blocket Layout, Skriv sedan rotate inuti.

Se även: Elementor: Introduktion av den bästa WordPress-sidbyggaren

Gå sedan till blocket Anpassad CSS , klistra sedan in följande kod i fältet:

.rotate.rotate
{transform: rotate(90deg);}

Du kan se att vredet precis har vridits, men det finns ett konstigt mellanrum mellan sidan av skärmen. Så låt oss fixa det genom att justera decalage vid -92

skapa en flytande knapp med Z-index

Slutligen ska vi göra en sista liten touch för den här flytande åtgärdsknappen. Gå till blocket Transformator, välj det ÖVERSIKT, komma åt alternativet shift och ställ in varje alternativ till 7.

skapa en flytande knapp med Z-index

Det finns flera alternativ för att uppnå en viss sak i Elementor. När det kommer till den flytande knappen finns det två alternativ du kan använda. Här har vi bara täckt en metod, den andra metoden kommer att vara en annan handledning.

Läs också: Elementor: Hur man migrerar en WordPress-webbplats

Om du vill ha fler stilalternativ kommer att skapa en flytande åtgärdsknapp med Popups byggare vara ett bättre alternativ eftersom du kommer att ha alternativ för att anpassa knappen såväl som beteendet, som knappstängningstid, varaktighet, ingångs- eller utgångsanimering, etc. .

Du har precis slutfört denna uppgift enkelt. Förhandsgranska bara din surfplatta och smartphone och försök ändra marginalerna så att de matchar varje enhet.

Skaffa Elementor Pro nu!

Slutsats

Så ! Det var allt för den här artikeln som visar hur du använder en zoomeffekt på ett profilkort. Om du har några funderingar kring hur du tar dig dit låt oss veta inom 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 manuellt migrerar en WordPress-webbplats

Elementor: Hur man manuellt migrerar en WordPress-webbplats

I handledning: Hur man manuellt migrerar en WordPress-webbplats med Elementor. Vi har redan visat hur du kan migrera en webbplats med WordPress Duplicator-plugin.

Medan detta WordPress-plugin underlättar, kan vissa behöva kontrollera själva processen genom att manipulera koden.

Så om du har en särskilt stor webbplats, eller om du bara vill göra saker manuellt av någon anledning, är det inte så svårt att manuellt migrera din WordPress-webbplats heller.

För den här guiden går vi inte heller djupare eftersom vi bara rekommenderar den här metoden om du redan är bekväm med några av de mer tekniska funktionerna i WordPress.

Steg 0: Några förberedelser att följa

Innan du börjar denna självstudie måste du:

  • Gör en säkerhetskopia av din webbplats
  • Har FTP-referenser för de befintliga webbplatsvärdarna och den du vill migrera din webbplats till

Och om du byter domän måste du också rikta din nya domäns namnservrar till den nya webbplatsens server.

Så här migrerar du WordPress manuellt.

Steg 1: Flytta filer till den nya servern

Det finns flera sätt att flytta filer från din webbplats till den nya servern. Ett sätt skulle vara att ladda upp alla filer med FTP och sedan ladda upp dem till den nya servern.

Men eftersom denna process kan ta timmar och timmar, skulle det mest effektiva sättet vara att skapa en komprimerad arkivfil i cPanel och sedan kolla in den hos den nya värden.

Steg 2: Exportera databasen

Därefter måste du exportera din befintliga webbplatsdatabas.

Även om du kan göra detta manuellt via phpMyAdmin, är en enklare lösning Migrera DB gratis WordPress-plugin.

Förutom att enkelt exportera din databas, hanterar WP Migrate DB också seriell data och låter dig köra sök- och ersättningsadresser för att se till att allt fungerar bra om du ändrar domännamn. .

Installera och aktivera plugin på webbplatsen du vill migrera. Gå sedan till Verktyg → Migrera DB

Välj radioknappen Exportera fil ( det bör väljas som standard).

Om du ändrar domännamn kan du också använda funktionen Hitta / ersätt för att ersätta dina webbadresser för ditt nya domännamn.

klicka sedan på Exportera för att ladda ner en kopia av din databas:

Hur man migrerar webbplatsen wordpress elementor installer 7

Steg 3: Skapa en ny MySQL-databas

Skapa sedan en ny MySQL-databas hos värden som du migrerade din webbplats till, tillsammans med en ny databasanvändare och lösenord.

Håll denna information till hands eftersom du kommer att behöva den.

Steg 4: Importera en databas

Öppna phpMyAdmin hos den nya webbhotellen och:

  • Hitta databasen som du just skapade i steg 3 med hjälp av sidofältet till vänster
  • Klicka på fliken Importera
  • Välj databasfilen som du laddade ned med WP Migrate DB i steg 2
  • Klicka på Go

Hur man migrerar webbplatsen wordpress elementor installer 8

Steg 5: Redigera wp-config.php-filen

Vid denna punkt bör dina webbplatsfiler och databaser vara på sin nya plats.

Nu måste du berätta för din webbplats att använda den nya databasen du skapade i steg 3.

För att göra detta, redigera filen wp-config.php på den migrerade webbplatsen och ange din nya databasinformation:

migrera manuellt en WordPress Elementor-webbplats

Steg 6: Hitta och ersätt webbadresser i Elementor-innehåll (om du ändrar domän)

Om du ändrar domännamn, gå till Elementor → Verktyg. Klicka sedan på fliken Byt ut URL och använd verktyget för att uppdatera URL: erna för ditt Elementor-innehåll:

Steg 7: Regenerera Elementors CSS

När du har uppdaterat webbadresserna för ditt Elementor-innehåll går du till Elementor → Verktyg och klicka på knappen Regenerera filer att tvinga Elementor att regenerera sin CSS:

migrera manuellt en WordPress Elementor-webbplats

Har du fler frågor om hur du migrerar WordPress?

Och det avslutar vår guide om hur du migrerar WordPress, inklusive ditt Elementor-innehåll.

Skaffa Elementor Pro nu!

Slutsats

Om du har frågor om hur du säkert kan flytta webbplatser du skapade med WordPress och Elementor Pro till nya webbhotell och / eller domännamn? Låt oss veta in 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: Introduktion av den bästa WordPress-sidbyggaren

Elementor: Introduktion av den bästa WordPress-sidbyggaren

Vill du upptäcka presentationen av den bästa WordPress Page Builder: Elementor?

WordPress är det mest populära CMS i världen. Men när det kommer till att designa en sida på frontend, faller WordPresss standardverktygslåda långt ifrån andra webbplatsbyggande plattformar som Wix eller Squarespace.

Denna nackdel med WordPress börjar inte längre vara med sin mängd kraftfulla plugins som förenklar arbetet. Det är anledningen till att vi kommer att presentera dig i den här självstudien, ett WordPress-plugin som låter dig skapa fantastiska hemsidor, allt gratis.

Elementor är en sidbyggare som låter dig skapa professionella sidor i rasande hastighet, och allt detta live på din blogg. Insticksprogrammet är gratis och tillgängligt i WordPress-plugin-katalog.

Elementor presenterades nyligen på produkt~~POS=TRUNC Hunt och fångade intresset för många WordPress-användare på Facebook-grupper.

Du kanske undrar hur Elementor lyckas hantera så många Page Builder Det finns redan.

Hastighetsfördelen

När vi måste ta itu med sidkonstruktör », är frågan om hastighet viktig. Elementor är den snabbaste sidbyggaren just nu. Vare sig i " dra och släpp Vilket fungerar utan fördröjning eller de snabba laddningstiderna för sidor som designats av Elementor.

Se även: Hur man skapar ett effektkort från en portfölj med Elementor

Hastighet och prestanda påverkar inte bara webbplatsen utan också användarupplevelsen. Idén om en " sidkonstruktör "Det gör att du kan arbeta live medan du inte tappar fart, är en avgörande faktor för användarupplevelsen.

DragDropDesign-gränssnitt plugin

Fördelen med Open Source

Elementor är öppen källkod. Även om det finns andra " sidkonstruktör "Gratis, inget annat liknande öppen källkodsprojekt, erbjuder dessa breda designfunktioner, med en rad funktioner och widgetar.

En gratisversion kommer snart att finnas tillgänglig, men den gratisversionen tillåter fortfarande användare att skapa professionella sidor.

Se även: Hur man ändrar en bild när man håller muspekaren över text med Elementor 

Efter lanseringen har den utrustats med mer än 6 widgets. Du kan lita på det: spacer, ikonruta, bildruta, rutgalleri, bildgalleri och karusellgalleri.

Gemenskapens nytta

WordPress-communityn har en viktig roll i utvecklingen av Elementor. Projektet finns på GitHub, och utvecklare kan hjälpa till att förbättra det.

Se även vår handledning om Hur man anpassar ett WordPress-tema med Elementor

Det har också översatts till flera språk, inklusive japanska, tyska och hebreiska. Det är en av de enda " sidkonstruktör »Kompatibel med RTL-blöjor (höger till vänster). Gemenskapen växer bara med tiden, vilket är mycket lovande för framtiden för plugin.

Utvecklingen av plugin

Elementor har laddats ner mer än 10.000 gånger. Det har presenterats i produktjakt-nyhetsbrevet och har redan vunnit mer än 700 fördelaktiga röster. Nya funktioner läggs till varje vecka.

första steg

När du har installerat plugin kommer du att märka en ny meny på instrumentpanelen "Elementor".

elementor Wordpress-menyn

Om du klickar på den kommer du till inställningssidan för plugin-program. Men detta steg är egentligen inte nödvändigt, eftersom standardinställningarna kan fungera på de flesta webbplatser.

Men om du till exempel vill definiera anpassade publiceringsformat som kommer att använda plugin, måste du göra några justeringar.

Läs vår guide om Hur man ändrar bild genom att klicka på en knapp med Elementor

För att börja skapa en sida behöver du bara komma åt en sida (eller till gränssnittet för att skapa en personlig publikationstyp). Du kommer att märka på den här sidan en ny knapp med titeln: " Redigera med Elementor".

sidbyggare redaktör WordPress

Du kommer då åt gränssnittet live på din blogg. Därifrån kommer all magi att fungera. Från detta gränssnitt kan du därför lägga till element som är tillgängliga till höger i ditt blogggränssnitt. Du kommer att märka hur snabbt saker blir klara.

handledning Elementor

Du kommer antagligen ha svårt att vänja dig vid det, men du behöver inte oroa dig. Det handlar om allt du behöver veta för nu. Om du har några frågor är du välkommen att skicka kommentarer. 

Skaffa Elementor Pro nu!

Slutsats

Där är det ! Det är allt för den här artikeln som visar hur du ändrar en bild när du håller muspekaren över en text. Om du har några funderingar kring hur du tar dig dit låt oss veta inom 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 anpassar ett WordPress-tema

Elementor: Hur man anpassar ett WordPress-tema

Vill du ta reda på hur man anpassar ett WordPress-tema med Elementor-plugin?

Anpassa ditt WordPress-tema är en av de viktigaste uppgifterna när du bygger WordPress-webbplatser. Eftersom hon kontrollerar utformningen av en webbplats är det här många yrkesverksamma tillbringar större delen av sin tid.

Att skapa ett anpassat WordPress-tema innebär vanligtvis att arbeta med temafilerna och en kodredigerare. Layoutändringar sker i mallfiler, designändringar genom CSS. Du måste också hela tiden uppdatera webbläsarfönstret för att visa dina anpassningar, vilket kan vara lite besvärligt.

Lyckligtvis med Elementor, denna process blir extremt enkel, så du kanske vill kolla in den.

Men innan, låt oss upptäcka tillsammans Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg.

Sedan, tillbaka till varför vi är här.

Vad är ett WordPress-tema

Ett WordPress-tema är i huvudsak en samling mallar som definierar det visuella utseendet på en WordPress-webbplats.

WordPress-temat omfattar allt som påverkar utformningen av en webbplats, från sidhuvud och sidfot till färgschema, layout och mer.

Det finns gott om teman tillgängliga, både gratis och premium, som passar nästan vilken bransch som helst fotograferingswebbplatser, gymklubbwebbplatser, frisörswebbplatser, lag webbplatserOch mer.

Varför anpassa ett WordPress-tema?

En av de främsta anledningarna till att bygga en webbplats är att marknadsföra ditt företag. Vilket bättre sätt att göra detta än att skapa en unik webbplats som främjar företagets stil och design.

Kan du föreställa dig att Amazon, eBay eller Google är vad de är utan deras unika design?

Naturligtvis inte, och det är en av anledningarna till att vi vill anpassa ett WordPress-tema. Vi vill göra det unikt och anpassa oss till vårt företags budskap.

Ibland, eller snarare, ofta, kör du igenom ett WordPress-tema som plågas av dålig design, färger som inte går bra tillsammans, eller ett tema som är för tungt och som bara påverkar webbplatsens prestanda. webb. WordPress-tema kan vara kraftfullt förutom det som stör dig. Anpassa den och ändra den här saken kan lösa alla dina problem och skapa bättre användarupplevelse.

Hur du anpassar ett WordPress-tema

Det finns flera metoder för att anpassa ett WordPress-tema.

  1. Manuellt via WordPress-anpassaren
  2. Med kod
  3. Med Elementor

Hur man anpassar ett WordPress-tema manuellt

Du kan anpassa ditt WordPress-tema du väljer genom den inbyggda WordPress Customizer. Om du gör det utan kod är du ofta begränsad i vad du kan ändra. Vissa premium WordPress-teman ger dig fler anpassningsalternativ, men i själva verket finns det inte många designalternativ för dig.

Innan vi dyker djupare i detta område vill vi påpeka att när du anpassar ett befintligt WordPress-tema är det bäst att du använder ett barntema och inte föräldertema.

WordPress barn tema

Ett barntema är ett WordPress-tema som har exakt samma funktioner och egenskaper som ett annat WordPress-tema, föräldertema. Barnetema används för att säkert anpassa och ändra temat, utan att påverka föräldertema och utan att förlora förmågan att uppdatera det. 

WordPress tematilpassare

Så nu när vi vet att det är bäst att arbeta med ett barntema, låt oss lära oss att anpassa ett tema med WordPress Customizer. Gå till din instrumentbräda genom att klicka på Apparence på vänster sida och välj Personifiera.

De viktigaste funktionerna som du kan modifiera med den här Customizer är följande:

Lägga till en webbplatstitel, logotyp och ikon

För att lägga till eller ändra din titel, logotyp eller ikon kan du helt enkelt gå till webbplatsen Identitet. och välj var och en av dessa element för att ändra dem.

Ändra färgerna på WordPress-temat

Vissa WordPress-teman låter dig ändra deras färgscheman, men inte alla, och de är i allmänhet premium WordPress-teman. Om ditt WordPress-tema låter dig ändra färgschema ser du det här alternativet när du går in i Customizer.

Lade till navigationsmenyer

Med Customizer kan du enkelt lägga till och ändra navigeringsmenyerna på webbplatsen.

Hur du anpassar ett WordPress-tema med kod

Du kommer att märka att under fliken Utseende har du möjlighet att välja temaredigerare. Om du klickar på den möts du av ett fönster med temakoden. Detta alternativ kräver god förståelse för CSS-kodning och rekommenderas inte för nybörjare.

Här har du tillgång till filer som style.css, features.php, och det är exakt för det här scenariot som du behöver ett barntema för att inte bryta din webbplats.

Det andra sättet att anpassa ditt tema genom att koda är att ladda upp filer med en FTP-lösning. Processen innebär att skapa FTP-referenser via din webbhotell, ladda ner och installera en FTP-lösning (som FileZilla), logga in på ditt konto och redigera dina filer, som du sedan laddar upp genom samma. FTP-lösning.

Upptäck vår guide om Hur man installerar WordPress med FileZilla

Om du inte är bekant med kodning rekommenderar vi inte det här alternativet.

Anpassa ett WordPress-tema enkelt med Elementor

Du kan göra detta direkt från användargränssnittet. Det finns inget behov av att ändra en enda rad med kod eller ladda om ett webbläsarfönster, ens en gång.

Elementor låter dig ändra varje element på webbplatsen snabbt och enkelt med bara några musklick och du kan till och med optimera dessa funktioner för mobilplattformen.

Elementor gör denna process mycket lättare genom att använda dynamiskt innehåll och låter dig förhandsgranska dina sidor. På detta sätt kan du omedelbart se hur designändringarna kommer att påverka din faktiska webbplats och innehåll.

Anpassa sidhuvud och sidfot

Elementor ger dig full flexibilitet när det gäller att utforma dina sidhuvuden och sidfot. Vi vet alla hur tråkigt det kan vara att du har ett WordPress-tema och att du inte kan ändra en enda aspekt av sidhuvud- eller sidfotdesignen. Du behöver specialiserade teman, plugins etc.

Med Elementor är det enkelt.

1. Skapa en rubrikmall

Konfigurera först en ny rubrikmall. För att göra detta, gå till Elementor> Mina mallar.

Hur du anpassar wordpress-temaelement eller rubrikmall 1

Här är ett sätt att starta genom att trycka på knappen Lägg till ny längst upp. På nästa skärm använder du rullgardinsmenyn för att välja Header som den typ av mall som ska utformas.

Hur du anpassar wordpress-temaelement eller rubrikmall 2

Du kan också nå den här skärmen genom att klicka på fliken Header från föregående skärm och sedan trycka på den stora gröna knappen som visas.

Hur du anpassar wordpress-temaelement eller rubrikmall 3
Det kommer att förvala rubriken som malltyp. Hursomhelst måste du lägga till ett lämpligt namn för mallen (så att du vet vad det är senare) och fortsätter sedan genom att klicka på Skapa mall.

Det kommer dig hit.

Hur du anpassar wordpress-temaelement eller rubrikmall 4

Med Elementor Pro kan du välja mellan fördesignade rubrikblock. Det här är designmallar som du kan använda som utgångspunkt för din egen design, vilket är vad vi ska göra i det här fallet.

När du håller muspekaren över ett rubrikblock klickar du på Insert låter dig börja designa det omedelbart. I annat fall klickar du först på bilden för att se en större version. Då kan du alltid trycka på Insert ovan.

Hur du anpassar wordpress-temaelement eller rubrikmall 5

Annars, om du vill börja från början, stänger du bara fönstret genom att klicka X i det övre högra hörnet.

2. Ändra den grundläggande rubrikdesignen

Efter att ha angett den nya rubriken är det första du kommer att märka att logotypen och menyn som vi konfigurerade tidigare redan finns där.

Hur du anpassar wordpress-temaelement eller rubrikmall 6

Det är just därför vi sätter dem på plats och vi kommer att prata om hur vi kan anpassa dem. Låt oss dock först se hur du anpassar själva rubrikavsnittet.

För att göra detta, håll bara muspekaren över den och klicka på redigera-knappen längst upp. Detta öppnar en lista med redigeringsalternativ till vänster.

Hur du anpassar wordpress-temaelement eller rubrikmall 7

Här är vad du kan kontrollera i de olika menyerna:

  • Layout - Kontrollera sektionens bredd, storleken på utrymmet mellan kolumner, dess höjd, dess vertikala kolumn och dess innehållspositionering, dess tilldelade HTML-tagg och den allmänna strukturen.
  • Stil - Här kan du ändra bakgrundsfärgen inklusive svävaeffekteräven lägg till bild eller video om du vill, lägg till överläggnings-, kant- och delningseffekter samt ändra typografiska inställningar.
  • Avancerad - Denna del låter dig lägga till CSS-attribut som marginal och z-index, animationer, ID och klasser. Det tillåter dig också att göra avsnittet klibbigt och kontrollera inställningarna responsiva samt lägga till några Anpassad CSS.

Allt ovanstående är ganska självförklarande, och du får snabbt vad du vill.

3. Anpassa huvudelementen

Du kan emellertid inte bara redigera rubrikavsnittet som en helhet, utan också de objekt som ingår i det. Klicka på den för att anpassa webbplatslogotypen. Även detta ger dig redigeringsalternativ på vänster sida.

Hur du anpassar wordpress-temaelement eller rubrikmall 8
När det gäller logotypen ger detta följande alternativ:

  • Innehåll - Ändra bildstorlek, justering och plats till vilken den är länkad.
  • Stil - Kontrollera bredd och höjd, lägg till CSS-effekter och svävaeffekter, inkludera kant och skugga om du vill.
  • Avancerad - Här hittar du väsentligen samma alternativ som för rubrikavsnittet.

Använd inställningarna för att anpassa logotypen som du vill att den ska visas i rubriken. Observera också att varje artikel har sin egen typ av alternativ, så se till att kolla in var och en.

4. Lägg till artiklar

Med Elementor kan du naturligtvis också lägga till element i rubriken. Klicka bara på symbolen längst upp till höger för att se vad som är tillgängligt.

anpassa ett WordPress-tema med Elementor-plugin.
När du redigerar en rubrikmall visar Elementor automatiskt relevanta block högst upp i listan, vilket är mest förnuftigt under omständigheterna. I det här fallet är det saker som webbplatsens logotyp, nav-menyn och webbplatsens titel.

Så till exempel, om du vill lägga till webbplatsens titel bredvid logotypen, dra och släpp den på den. Men den rubrikmall vi har valt gör det möjligt för oss att lägga till den ovanför eller under logotypen. Men det är ett problem som lätt kommer att lösas.

I ett fall som detta, håll muspekaren över rubriken och använd plussymbolen –+-för att lägga till ett avsnitt ovan.

Hur du anpassar wordpress-temaelement eller rubrikmall 10

Klicka här på den lila knappen för att välja en tre-kolonnsdesign.

Hur du anpassar wordpress-temaelement eller rubrikmall 11

Dra sedan elementen från det befintliga rubrikavsnittet till det nya avsnittet och lägg till webbplatsens titel i mitten.

Hur du anpassar wordpress-temaelement eller rubrikmall 12

Men vänta, stilen är helt annorlunda! inga problem. Högerklicka bara på den befintliga rubriken och välj Kopia. Högerklicka sedan på det nya avsnittet och klicka här på Klistra in stil. Elementor tillämpar sedan stilen på det befintliga avsnittet, som du kan stänga senare. 

Hur du anpassar wordpress-temaelement eller rubrikmall 13

Du kan göra samma process med något av de andra sidhuvudelementen och naturligtvis med alla andra element som ingår i Elementor.

Anpassa en unik postmall

I Elementor kan du också anpassa en enda inläggsmall. Här är hur :

1. Skapa en ny modell

Att skapa en mall fungerar på vanligt sätt. Men den här gången väljer Single som modelltyp. Välj sedan den unika mallen du vill redigera nedan. I det här exemplet, det av Inlägg.

Hur du anpassar wordpress-temaelement eller rubrikmall 14

Om du vill skapa en ny siddesign, redigera din 404-sida (mer om det senare) eller redigera en anpassad inläggstyp särskilt skulle du välja något annat. I båda fallen anger du ett namn och fortsätter.

På nästa skärm kan du välja mellan de fördefinierade mallarna som vanligt. Men i det här fallet vill vi skapa en ny modell från början. Så klicka på X längst upp till höger för att stänga det här fönstret.

2. Konfigurera förhandsgranskningen

Ställ sedan in förhandsgranskningsfönstret till ett befintligt inlägg. Du kan göra detta genom att klicka på ögonikonen längst ned i redigeringsalternativen Inställningar.

Hur du anpassar wordpress-temaelement eller rubrikmall 15

I menyn som öppnas under Förhandsvisning dynamiskt innehåll, välj Publicera. Därefter kan du i nästa rad söka och välja ett befintligt inlägg efter namn.

Hur du anpassar wordpress-temaelement eller rubrikmall 16När du har gjort det trycker du på tillämpas & Förhandsvisning. Även om du inte kan se någonting på det här stället (eftersom det inte finns någonting på sidan), kommer det att säga Elementor att använda uppgifterna i det här inlägget från och med nu. Du kommer snart att se vad det här betyder.

3. Låt oss skapa avsnittet ovan 

Först skapar vi avsnittet ovan. Här hittar du vanligtvis saker som inläggstitel och metadata som författare, datum och kategori.

Det första steget är att klicka på skylten + och skapa ett enda kolumnavsnitt.

Hur du anpassar wordpress-temaelement eller rubrikmall 17
När du gör det, i layoutavsnittet, har du möjlighet att kontrollera dess bredd, höjd, positionering och stil. I det här fallet är det inte mycket att göra här. Oroa dig inte heller, du kan alltid gå tillbaka och göra ändringar senare.

Dra sedan posttitelwidgeten till det nya avsnittet.

Hur du anpassar wordpress-temaelement eller rubrikmall 18

När du gör det, se till att använda alla tillgängliga alternativ för att anpassa design och layout till din smak. Här är till exempel mina inställningar för att göra det:

Hur du anpassar wordpress-temaelement eller rubrikmall 19

Det finns också en cool funktion som du bör lära dig. När du klickar på nyckelsymbolen för inläggstiteln kan du lägga till statiskt innehåll före och efter din dynamiska data.

Om du till exempel skapar en mall för en viss inläggskategori, som nyheter eller recept, kan du lägga till den i inläggets titel:

Hur du anpassar wordpress-temaelement eller rubrikmall 20

På så sätt skulle den informationen dyka upp för varje inlägg i den kategorin. Jag tänker inte använda det här just nu, men tyckte att det var en viktig sidoanteckning för dig.

Under titeln på inlägget kommer vi att infoga Inlägg Info widget för att visa inläggets metadata.

Hur du anpassar wordpress-temaelement eller rubrikmall 21

Här är inställningarna jag använder:

Hur du anpassar wordpress-temaelement eller rubrikmall 22

Dessutom använde jag stylingsalternativen för att få designen att passa resten av sidan. Se till att du gör samma sak.

4. Ställ in stolpen

Efter rubriken är det dags att skapa sidan på sidan. Om du vill att den här delen ska ha en annan design än rubriken måste du ställa in ett nytt avsnitt. Men jag håller det enkelt, så jag behöver inte.

Det första vi vill infoga är den presenterade bilden. För detta kan du placera widgeten med samma namn under det som redan finns på sidan.

Hur du anpassar wordpress-temaelement eller rubrikmall 23

Jag ändrade i princip ingen av inställningarna, lämnade bara allt som det var.

Då är det dags för innehållet att publicera. Även här har du ett motsvarande block.

Hur du anpassar wordpress-temaelement eller rubrikmall 24
Du kommer att märka att Elementor automatiskt drar det som redan finns på webbplatsen för visat innehåll och inlägg. Gör eventuella justeringar av utformningen av det nya blocket som du behöver, till exempel att spela med de typografiska inställningarna.

Annat än så är det allt. Inte för mycket arbete att göra här så att vi kan gå vidare till den sista delen.

5. Konfigurera sidfoten

I det här fallet vill vi att sidfoten ska visa författarens profil, delningsalternativ och läsarkommentarer. För att göra detta måste vi först skapa ett nytt avsnitt med två kolumner. För att skapa mer utrymme för författarprofilen kan du ställa in den till en 66.33-layout.

Hur du anpassar wordpress-temaelement eller rubrikmall 25

Efter det placerar widgeten Författare Box i vänster sektion.

Hur du anpassar wordpress-temaelement eller rubrikmall 26

Se till att anpassa stilen efter dina behov. Jag lade till lite bakgrundsfärg och justerade inställningarna för typografi något.

Efter det är det dags att lägga till delningsknapparna på höger sida.

Hur du anpassar wordpress-temaelement eller rubrikmall 27

Du kan se mina inställningar på skärmdumpen ovan.

Efter det är det enda som återstår att skapa en sektion en kolumn till och dra och släppa widgeten Post Kommentarer i den.

Hur du anpassar wordpress-temaelement eller rubrikmall 28

(Förresten, om du någonsin har problem med att hitta några av dessa widgetar, använd bara sökfunktionen).

Hur du anpassar wordpress-temaelement eller rubrikmall 29

Gör eventuella justeringar av kommentarerna som du känner dig nödvändiga (jag lämnade den som den är) och du är redo att posta. Här är den färdiga designen:

Hur du anpassar wordpress-temaelement eller rubrikmall 30

Anpassa arkivmallen

1. Konfigurera din WordPress-arkivmall

Nu vet du redan lösningen på att skapa nya modeller. Den enda skillnaden är att du i detta fall kommer att välja arkiv som modelltyp.

Hur du anpassar wordpress-temaelement eller rubrikmall 31

Efter det får du som vanligt ett antal block att välja mellan eller så kan du också skapa din egen modell från början. Men för arkiv har du ungefär bara två Widgetar Elementor som är viktiga ändå.

2. Definiera titeln på arkivet

Det första blocket jag vill prata om är arkivtiteln Arkiv titel.

Hur du anpassar wordpress-temaelement eller rubrikmall 32

Förutom de vanliga inställningarna under Stil och avancerad, kan du hitta ett viktigt alternativ när du klickar på nyckelsymbolen under Titel.

Hur du anpassar wordpress-temaelement eller rubrikmall 33

Här kan du aktivera och inaktivera om Elementor visar arkivtypen på sidan som den del där det står Author: nedan. Detta sker genom knappen under Inkludera kontext

Förresten, som vanligt kan du förhandsgranska olika arkiv med förhandsgranskningsinställningar (ögonsymbol> inställningar). På så sätt kan du se designen för unika kategorier, taggar, författare och mer. Kom ihåg det.

3. Använd arkivpublikationerna

Den andra viktiga widgeten för arkiv är Archive Posts. Detta ger alla inlägg som tillhör ett arkiv på en sida. När du väljer en mall är de redan där, men du kan också lägga till dem själv med det här blocket.

Hur du anpassar wordpress-temaelement eller rubrikmall 34

Låt oss ta en titt på alternativen det ger dig för att anpassa dina arkivsidor:

  • Hud - Välj att visa dina inlägg i en klassisk eller kort stil design.
  • Kolonner - Bestämma antalet kolumner som dina inlägg visas i.
  • Visa bild - Aktivera visade bilder på arkivsidor
  • Murverk – Visar föremål i murad design eller inte.
  • Bildstorlek - Storleken på bilden Elementor ska använda på arkivsidor.
  • Titel - Vill du visa inläggstitlar eller inte?
  • Titel HTML Tag - Om så är fallet, vilken HTML-tagg ska lindas runt den?
  • Utdrag - Inkludera utdrag från dina inlägg eller visa bara titeln.
  • Utdragslängd - Bestäm längden på extrakten.
  • metadata - Definierar postmetadata som är tillgängliga för besökare.
  • Separator mellan - Separatorsymbol mellan metadatainformation.
  • Läs mer - Inkludera en "läs mer" -länk, ja eller nej?
  • märke - Gör att du kan lägga till mer information till inlägg, till exempel kategorier och taggar.
  • Taxonomi-märke - Här kan du bestämma vilken information som ska inkluderas.
  • Avatar – Med detta kan du ändra profilbilden för artiklarnas författare

Förutom ovanstående har du några fler alternativ. Under personsökning, du kan definiera hur arkivsökning ska hanteras. Till exempel hur du visar det, antalet sidor som ska inkluderas och justeringen av texten.

Hur som helst, Advanced Open water låter dig ställa in meddelandet så att det visas när en besökare landar på ett tomt arkiv. Allt annat borde vara bekant. Observera bara att stilalternativen ändras beroende på vilken hud du har valt.

4. Kontrollera antalet publikationer per arkiv

En snabb anteckning om arkivmallar. För att ändra antalet inlägg som visas i ett arkiv (eller på din bloggsida) måste du göra det i WordPress under Inställningar> Läsning. 

Hur du anpassar wordpress-temaelement eller rubrikmall 35

Här anger du bara antalet inlägg du vill att dina besökare ska se.

personalisering facile WordPress-tema med Elementor

Att anpassa WordPress-teman är brödet för många proffs. Även om detta vanligtvis innebär mycket kodning och redigering av filer, är detta inte längre nödvändigt med Elementor.

Som du såg ovan är plugin-programmet en fullverdig WordPress-temaredigerare. Det låter dig anpassa alla delar av det från sitt användargränssnitt. Du kan redigera webbplatshuvud, sidfot, sid- och inläggsmallar, arkivmallar och mer.

Med möjligheten att använda dynamiskt innehåll och förhandsgranska alla delar av din webbplats kan du implementera alla trendiga anpassningar

Kort sagt, Elementor gör det enkelt att anpassa ditt WordPress-tema. Istället för att noggrant göra ändringar med dussintals filer och hundratals kodrader, kan du snabbt göra allt på ett ställe.

Skaffa Elementor Pro nu!

Slutsats

Där är det ! Det var allt för den här artikeln som visar hur du anpassar ett WordPress-tema med Page Builder Elementor. Om du har några funderingar kring hur du tar dig dit låt oss veta inom 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.

.