Tips för att påskynda designprocessen med Elementor

Tips för att påskynda designprocessen med Elementor

Det är ingen hemlighet att Elementor är en av de bästa sidbyggarna i WordPress community idag. Och det är inte längre bara en sidbyggare. Elementor har utvecklats så mycket att du kan designa fullt fungerande webbplatser även med ett gratis, grundläggande WordPress-tema utan att skriva en enda kodrad!


Medan Elementor erbjuder många alternativ och anpassningsmöjligheter, missar vi ofta plugins mindre detaljer och delar som kan ha stor inverkan på designprocessen på en webbplats.

Att designa webbsidor med Elementor är redan snabbt och enkelt, men om du vill påskynda designprocessen är du på rätt plats. I den här artikeln lär du dig hur du kan påskynda designprocessen med Elementor genom att använda redigeraren till fullo med tredjepartsverktyg.

Börja med Premade Mallar

Premade mallar kan påskynda utvecklingen av ditt projekt. Att designa nya sidor från början tar tid, och oftare förlorar du den tiden medan du ständigt justerar sidens layout och stilar. Det är precis där mallarna är praktiska. Elementors mallbibliotek är en bra resurs för att påskynda designprocessen. Även om du inte använder en premade mall kan du alltid använda mallbiblioteket som inspiration. Mallar kan enkelt importeras direkt på sidan med bara ett enda klick.

Elementormallar kan delas in i två delar. Först, när du till exempel vill importera en premade-sida från topp till botten, kan du importera en hel sida (som en Om- eller Kontaktsida) med allt dess innehåll. Det andra alternativet är om du bara vill importera ett avsnitt eller block av designen. Du kan göra detta om du till exempel gillar en av avsnitten från tjänster, hjälte, kontakta oss eller prenumerera avsnitt.

Underbara gratis och premium samlingar av mallar är lätt tillgängliga på webben.

Envato Market

Envato Market

Envato-marknaden är förmodligen den mest populära marknaden inte bara för Elementor-mallar utan för WordPress-teman och plugins.

Template

Template

TemplateMonster är en annan leverantör av mallar av god kvalitet, de har också några gratis mallar.

Elementor Mall Library

Elementor Mall Library

Elementor mallbibliotek – Är ursprungliga malllager för Elementor, nya gratis- och premiummallar visas mycket ofta.

Använd snabbtangenter

Om du arbetar med Elementor med bara din mus, vänligen sluta! Spendera 10 minuter på att lära dig kortkoder, vilket sparar massor av tid och påskyndar designprocessen på din webbplats. Förutom de enkla som kopiera och klistra in, kan du också använda mer avancerade genvägar. De kan vara extremt användbara, särskilt om du vill navigera mellan panelen och förhandsgranskningsläget eller byta till mobilredigering.

Här är en lista med genvägar som på allvar kan öka hastigheten på att designa din webbplats:

Åtgärder

ÅngraCtrl / Cmd + ZÅngra alla ändringar som gjorts på sidan
Göra omCtrl / Cmd + Skift + ZGör om alla ändringar som gjorts på sidan
KopiaCtrl / Cmd + CKopiera ett avsnitt, kolumn eller widget
KlistraCtrl / Cmd + VKlistra in ett avsnitt, kolumn eller widget
Klistra in stilCtrl / Cmd + Skift + VKlistra in en sektions, kolumn eller widget’s Style
RaderaRaderaRadera en sektion / kolumn / widget som är redigerad
DupliceraCtrl / Cmd + DDuplicera en sektion / kolumn / widget som är redigerad
SparaCtrl / Cmd + SSpara din sida i revisionshistoriken

Gå till

Panel / FörhandsgranskaCtrl / Cmd + PVäxla mellan panelen och förhandsvisningsvyn
MobilredigeringCtrl / Cmd + Skift + MVäxla mellan skrivbords-, surfplatta- och mobilvyer
HistoriaCtrl / Cmd + Skift + HGå till historikpanelen
NavigatörCtrl / Cmd + IÖppnar navigatorn
MallbibliotekCtrl / Cmd + Skift + LÖppnar vårt mallbiblioteksmodal
TangentbordsgenvägarCtrl / Cmd + ?Öppnar fönstret Hjälpfönster för kortkommandon
Sluta medESCÖppnar Inställningar och hoppar till Avsluta till instrumentpanelen

Anpassad CSS för sidor

Visste du att du kan ha anpassad CSS för varje sida? Ja, men observera att den här funktionen endast ingår i Pro-versionen av Elementor. Som en lösning på detta visar jag dig hur du inkluderar anpassad CSS för varje sida. Detta trick kommer att spara pengar om du ville ha Pro-versionen bara för att lägga till små anpassningar på sidnivå.

För att göra detta behöver du bara använda HTML-widgeten och denna kodbit inuti:

Titta på detta exempel:

Anpassad kod

Elementor Finder-sökfält

Mycket ofta när du arbetar med siddesign vill du hoppa till andra sidor, inställningar, en försäljningssida eller någon annanstans, och det kan vara tidskrävande om du: spara sidan> gå tillbaka till din instrumentbräda> öppna sidor > sök efter sidan du vill öppna. Detta kan slösa bort mycket tid och energi om du måste göra det gång på gång.

Lyckligtvis har Elementor en inbyggd lösning för att effektivisera och påskynda designprocessen. Istället för att gå igenom allt detta problem kan du helt enkelt använda Elementor Finder. Du kan direkt hoppa till valfri inställning, mall, sida eller temadel genom att söka i sökfältet. Du hittar Finder genom att klicka på Cmd / Ctrl + E-tangenterna var som helst i WordPress-instrumentpanelen. Kolla in den här videon för att se allt du kan göra med Finder.

Använd Navigator

Navigator är ett fönster för navigeringsträd som ger enkel åtkomst till alla element i sidbyggaren. Det här lilla fönstret låter dig navigera genom elementen och dra och släppa widgetarna enkelt.

Navigator är särskilt användbar för långa sidor eller sidor med komplex flerskiktsdesign och för element som kombinerar Z-index minus en marginal, absolut position etc. Den ger dig tillgång till elementhandtag som kan placeras bakom andra element.

Du kan komma åt Navigator på ett av tre enkla sätt:

  1. Högerklicka på valfritt element och klicka sedan på Navigator. Detta kommer automatiskt att omdirigera dig till det specifika elementet i navigeringsträdet.
  2. Klicka på elementknappen i panelens sidfot.
  3. Använd kortkommandot Cmd / Ctrl + I.

Titta på den här videon för att se den i aktion:

Navigator har vissa andra funktioner också, såsom namnge widgetar, kollapsa och utöka widgetar, flyta eller docka panelen och visa eller dölja widgetar. Du kan se en fullständig recension i deras dokumentation.

Definiera din färgpalett

När vi designar en webbplats följer vi vanligtvis ett designmönster som skapats av designern. Detta mönster innehåller vanligtvis en kombination av färger som upprepas på hela webbplatsen. Dessa är märkesfärger som borde förbli oförändrade. Det betyder att varje gång vi lägger till en ny widget på sidan måste vi kopiera och klistra in färgkoden eller så måste vi komma ihåg vad färgkoden är för att tillämpa den i widgetinställningen. Att göra detta kan vara tidskrävande. Lyckligtvis har Elementor en lösning för oss.

Du kan definiera dina märkesfärger i inställningarna för färgväljare och återanvända dem varje gång du öppnar färgalternativ för widgetstyling. Välj bara en förinställd palett eller definiera dina egna färger för att spara tid vid design.

Titta på den här videon:

Premade och återanvändbara widgetstilar & mallar

Elementor är en av de bästa sidbyggarna, men har du funderat på standard och fula knappar? Flikar? Menyer? Eller någon annan widget? Dessa standardwidgets ser ut som om de har utformats för flera år sedan, eller kanske du ville återanvända widgeten du utformade i projekt A i projekt B?

För närvarande kan du inte spara och återanvända widgetformat för framtida projekt med Elementor. Lyckligtvis är det fria WunderWP plugin erbjuder några sätt att lösa detta problem.

Först och främst innehåller WunderWP ett antal förinställda widgetstilar till ditt förfogande. Klarstil för rubriker, gallerier, knappar, avdelare, karuseller, formulär, prissättningstabeller och mer finns med ett klick. Dra helt enkelt en Elementor-widget på din sida, välj en omformad WunderWP-widgetstil och börja lägga till innehåll.

WunderWP-förinställningar

Med WunderWP kan du också enkelt spara och återanvända dina egna widgetstilar i Elementor. Det är enkelt: stilisera en widget, spara den i WunderWP Cloud (som är gratis!) Och använd den senare för liknande widgets. Detta fungerar för både enkla och komplicerade widgetar. Du kan till exempel använda detta för att spara en rubrikwidget som innehåller olika typografiska värden eller för en bildwidget med anpassade droppskuggor.

WunderWP anpassade stilar

Detsamma gäller mallar – du kan spara helt eller delvis mallar du skapar i WunderWP Cloud. Mallen kommer att finnas där, så när du är redo kan du enkelt infoga den på en sida eller webbplats. På det här sättet behöver du bara bygga det en gång, vilket sparar mycket tid.

WunderWP anpassad mall

Eller så kan du dra nytta av WunderWPs mallar för nyinmatad innehåll Just nu finns det över 50 färdiglagda sektionsmallar – som kontakt, call to action, sidhuvud, sidfot, tjänster, om, team, tjänster, nedräkning och mycket mer – för en mängd olika syften.

WunderWP Premade Mall

Avslutar

Fram till just nu är Elementor en av de bästa WordPress-sidbyggarna där ute. Nästan varje dag läggs nya verktyg och funktioner till för att effektivisera och påskynda designprocessen och påskynda leverans av projekt.

Vilket tips tycker du är det mest användbara och vilket du inte kände förut? Kanske vet du också något som inte nämns här? Vänligen dela det med andra.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map