Tips for å fremskynde designprosessen med Elementor

Tips for å fremskynde designprosessen med Elementor

Det er ingen hemmelighet at Elementor er en av de beste sidebyggerne i WordPress-samfunnet i dag. Og det er ikke lenger bare en sidebygger. Elementor har utviklet seg så mye at du kan designe fullt fungerende nettsteder selv med et gratis, grunnleggende WordPress-tema uten å skrive en eneste kodelinje!


Selv om Elementor tilbyr mange alternativer og tilpasningsmuligheter, går vi ofte glipp av pluginens mindre detaljer og deler som kan ha stor innvirkning på designprosessen til et nettsted.

Å designe websider med Elementor er allerede raskt og enkelt, men hvis du vil øke hastigheten på prosjekteringsprosessen, er du på rett sted. I denne artikkelen lærer du hvordan du kan fremskynde designprosessen med Elementor ved å gjøre full bruk av redaktøren med tredjepartsverktøy.

Start med Premade Maler

Premade maler kan fremskynde utviklingen av prosjektet ditt. Det tar tid å designe nye sider fra bunnen av, og oftere mister du ikke den tiden mens du konstant justerer oppsettet og stilene på siden. Det er akkurat her maler er nyttige. Elementors malbibliotek er en flott ressurs for å fremskynde designprosessen. Selv om du ikke bruker en forhåndsinnlagt mal, kan du alltid bruke malbiblioteket som inspirasjon. Maler kan enkelt importeres direkte på siden bare med ett enkelt klikk.

Elementormaler kan deles i to deler. Først når du for eksempel vil importere en forhåndsinnsatt side fra topp til bunn, kan du importere en hel side (som en Om- eller Kontaktside) med alt innholdet. Det andre alternativet er hvis du bare vil importere en del eller blokk av designen. Du kan gjøre dette hvis du for eksempel liker en av seksjonene fra tjenester, helt, kontakt oss eller abonnerer på seksjoner.

Fantastiske gratis og premium samlinger av maler er lett tilgjengelig på nettet.

Envato marked

Envato marked

Envato-markedet er sannsynligvis den mest populære markedsplassen, ikke bare for Elementor-maler, men for WordPress-temaer og plugins.

Temp

Temp

TemplateMonster er en annen leverandør av malverdiene av god kvalitet, de har også noen gratis maler.

Elementor Template Library

Elementor Template Library

Elementor malbibliotek – Er eget mallager for Elementor, nye gratis og premium maler vises veldig ofte.

Bruk hurtigtaster

Hvis du jobber med Elementor med bare musen din, så stopp! Bruk 10 minutter på å lære deg snarveier, noe som vil spare deg for mye tid og øke hastigheten på designprosessen til nettstedet ditt. Bortsett fra de enkle som kopiere og lime, kan du også bruke mer avanserte tilpassede snarveier. De kan være ekstremt nyttige, spesielt hvis du vil navigere mellom panelet og forhåndsvisningsmodus, eller bytte til mobilredigering.

Her er en liste over snarveier som seriøst kan øke hastigheten på å designe nettstedet ditt:

handlinger

AngreCtrl / Cmd + ZAngre endringer som er gjort på siden
Gjøre omCtrl / Cmd + Shift + ZGjør om alle endringer som er gjort på siden
KopiereCtrl / Cmd + CKopier en seksjon, kolonne eller widget
Lim innCtrl / Cmd + VLim inn en seksjon, kolonne eller widget
Lim inn stilCtrl / Cmd + Shift + VLim inn en seksjon, kolonne eller widget-stil
SlettSlettSlett en seksjon / kolonne / widget som er redigert
DuplisereCtrl / Cmd + DDupliser en seksjon / kolonne / widget som er redigert
LagreCtrl / Cmd + SLagre siden din i versjonshistorikken

Gå til

Panel / forhåndsvisningCtrl / Cmd + PVeksle mellom panelet og forhåndsvisningsvisningen
MobilredigeringCtrl / Cmd + Shift + MBytt mellom visning av skrivebord, nettbrett og mobil
HistorieCtrl / Cmd + Shift + HGå til historikkpanelet
NavigatorCtrl / Cmd + IÅpner navigatoren
MalbibliotekCtrl / Cmd + Shift + LÅpner opp modalbiblioteket vårt
TastatursnarveierCtrl / Cmd + ?Åpner Hjelp-vinduet for tastatursnarveier
SlutteESCÅpner Innstillinger og hopper til Avslutt til dashbord

Tilpasset CSS for sider

Visste du at du kan ha tilpasset CSS for hver side? Ja, men merk at denne funksjonen bare er inkludert i Pro-versjonen av Elementor. Som en løsning på dette, viser jeg deg hvordan du kan inkludere tilpasset CSS for hver side. Dette trikset vil spare deg for penger hvis du ønsket Pro-versjonen bare for å legge til små tilpasninger på sidenivå.

For å gjøre dette, trenger du bare å bruke HTML-widgeten og dette kodestykket inne:

Ta en titt på dette eksemplet:

Tilpasset kode

Elementor Finder-søkefeltet

Veldig ofte når du jobber med sidedesign, vil du hoppe til andre sider, innstillinger, en salgsside eller hvor som helst ellers, og det kan være tidkrevende hvis du: lagrer siden> går tilbake til dashbordet ditt> åpne sider > søk etter side du vil åpne. Dette kan kaste bort mye tid og energi hvis du måtte gjøre det gang på gang.

Heldigvis har Elementor en innebygd løsning for å effektivisere og fremskynde designprosessen. I stedet for å gå gjennom alt det problemet, kan du ganske enkelt bruke Elementor Finder. Du kan direkte hoppe til alle innstillinger, maler, side eller temadeler ved å søke i søkefeltet. Du finner tilgang til Finder ved å klikke på Cmd / Ctrl + E-tastene hvor som helst i WordPress-dashbordet. Sjekk ut denne videoen for å se alt du kan gjøre med Finder.

Bruk Navigator

Navigator er et vindu for navigasjons tre som gir enkel tilgang til alle elementer i sidebyggeren. Dette lille vinduet lar deg navigere gjennom elementene og dra og slippe widgetene enkelt.

Navigator er spesielt nyttig for lange sider eller sider med kompleks flerlagsdesign, og for elementer som kombinerer Z-indeksen minus en margin, absolutt posisjon osv. Den lar deg få tilgang til elementhåndtak som kan plasseres bak andre elementer.

Du får tilgang til Navigator på en av tre enkle måter:

  1. Høyreklikk på hvilket som helst element og klikk deretter på Navigator. Dette vil automatisk omdirigere deg til det spesifikke elementet i navigasjonstreet.
  2. Klikk på elementknappen i bunnteksten på panelet.
  3. Bruk snarveien Cmd / Ctrl + I.

Se på denne videoen for å se den i aksjon:

Navigator har også noen andre funksjoner, for eksempel navngivende widgeter, kollaps og utvidelse av widgeter, flyt eller dokking av panelet og visning eller skjuling av widgeter. Du kan se en fullstendig anmeldelse i deres dokumentasjon.

Definer fargepaletten

Når vi designer et nettsted, følger vi vanligvis et designmønster laget av designeren. Dette mønsteret inneholder vanligvis en kombinasjon av fargene gjentatt på hele nettstedet. Dette er merkefarger som skal forbli uendret. Dette betyr at hver gang vi legger til en ny widget på siden, må vi kopiere og lime inn fargekoden, eller vi må huske hva fargekoden er for å bruke den i widgetinnstillingen. Å gjøre dette kan være tidkrevende. Heldigvis har Elementor en løsning for oss.

Du kan definere merkefargene dine i Color Picker-innstillingene og bruke dem på nytt hver gang du får tilgang til fargealternativer for widget-styling. Bare velg en forhåndsinnstilt palett eller definer dine egne tilpassede farger for å spare tid når du designer.

Ta en titt på denne videoen:

Premade og gjenbrukbare widget-stiler og maler

Elementor er en av de beste sidebyggerne, men har du tenkt på standard og stygge knapper? Tabs? Menyer? Eller noen annen widget? Disse standardwidgetsene ser ut som de er designet for flere år siden, eller kanskje du ønsket å gjenbruke widgeten du stylet i prosjekt A i prosjekt B?

For øyeblikket kan du ikke lagre og gjenbruke widget-stiler for fremtidige prosjekter med Elementor. Heldigvis, gratis WunderWP plugin tilbyr noen måter å løse dette problemet på.

For det første inkluderer WunderWP et antall forhåndsinnstilte widget-stiler til din disposisjon. Klarstilstiler for overskrifter, gallerier, knapper, avdelere, karuseller, skjemaer, prisbord og mer er tilgjengelige med et klikk. Bare dra en Elementor-widget på siden din, velg en tilpasset WunderWP-widget-stil og begynn å legge til innhold.

WunderWP forhåndsinnstillinger

Med WunderWP kan du også enkelt lagre og gjenbruke dine egne widget-stiler i Elementor. Det er enkelt: stiliser en widget, lagre den i WunderWP Cloud (som er gratis!) Og bruk den senere til lignende widgets. Dette fungerer for både enkle og kompliserte widgeter. Du kan for eksempel bruke dette til å lagre en overskriftswidget som inneholder forskjellige typografiske verdier eller for en bildevidget med tilpassede slippskygger.

WunderWP tilpassede stiler

Det samme gjelder maler – du kan lagre hele eller delvis maler du oppretter i WunderWP Cloud. Malen vil være der, så når du er klar, kan du enkelt sette den inn på en side eller et nettsted. På denne måten trenger du bare å bygge den en gang, slik at du sparer mye tid.

WunderWP tilpasset mal

Eller du kan dra nytte av WunderWPs beredskapsinnholdsmaler akkurat nå, det er over 50 ferdige seksjonsmaler – for eksempel kontakt, oppfordring til handling, topptekst, bunntekst, tjenester, om, team, tjenester, nedtelling og mye mer – for en rekke forskjellige formål.

WunderWP Premade Mal

Innpakking

Inntil dette øyeblikket, uten en liten tvil, er Elementor en av de beste WordPress-sidebyggerne der ute. Nesten hver dag blir nye verktøy og funksjoner lagt til for å effektivisere og fremskynde designprosessen og fremskynde leveringstid for prosjektet.

Hvilket tips synes du er det mest nyttige, og hvilket du ikke kjente før? Kanskje du også vet noe som ikke er nevnt her? Del det gjerne med andre.

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