Consells per accelerar el procés de disseny amb Elementor

Consells per accelerar el procés de disseny amb Elementor

No és cap secret que Elementor sigui un dels millors creadors de pàgines de la comunitat de WordPress actualment. I ja no és només un creador de pàgines. Elementor ha evolucionat tant que podeu dissenyar llocs web amb funcionament complet, fins i tot amb un tema de WordPress gratuït i bàsic sense escriure ni una sola línia de codi.!


Tot i que Elementor ofereix moltes opcions i funcions de personalització, sovint ens trobem a faltar els detalls i les parts més petites del complement que poden tenir un gran impacte en el procés de disseny d’un lloc web..

El disseny de pàgines web amb Elementor ja és ràpid i fàcil, però si voleu accelerar el procés de disseny, esteu al lloc adequat. En aquest article, aprendreu com podeu accelerar el procés de disseny amb Elementor aprofitant al màxim l’editor amb eines de tercers.

Comenceu amb les plantilles premade

Les plantilles premade poden accelerar el desenvolupament del vostre projecte. Dissenyar pàgines noves des de zero es necessita temps i, sovint, es perd aquest temps mentre s’ajusta constantment la disposició i els estils de la pàgina. Aquí és exactament on les plantilles són útils. La biblioteca de plantilles de Elementor és un gran recurs per accelerar el procés de disseny. Tot i que no utilitzeu una plantilla premade, sempre podeu utilitzar la biblioteca de plantilles com a inspiració. Les plantilles es poden importar fàcilment directament a la pàgina amb un sol clic.

Les plantilles de l’elementor es poden dividir en dues parts. Primer, quan voleu importar una pàgina premade de dalt a baix, per exemple, podeu importar una pàgina completa (com una pàgina Sobre o de contacte) amb tot el contingut. La segona opció és si només voleu importar una secció o bloc del disseny. Podeu fer-ho si, per exemple, us agrada una de les seccions dels serveis, heroi, contacteu amb nosaltres o subscriviu-vos.

Es poden consultar fàcilment al web meravelloses col·leccions gratuïtes i premium de plantilles.

Mercat Envato

Mercat Envato

El mercat Envato és probablement el mercat més popular, no només per a les plantilles d’Elementor, sinó per als temes i complements de WordPress.

TemplateMonster

TemplateMonster

TemplateMonster és un altre proveïdor d’actius de plantilla de bona qualitat, també tenen algunes plantilles gratuïtes.

Biblioteca de plantilles elementor

Biblioteca de plantilles elementor

Biblioteca de plantilles de Elementor: el magatzem de plantilles natiu per a Elementor, apareixen molt sovint noves plantilles gratuïtes i Premium.

Utilitzeu les tecles de control de tecla

Si només treballeu amb el ratolí amb Elementor, atureu-vos. Dediqueu 10 minuts a aprendre codis breus, que us estalviareu un munt de temps i accelereu el procés de disseny del vostre lloc web. A més dels senzills, com ara copiar i enganxar, també podeu utilitzar dreceres personalitzades més avançades. Poden ser extremadament útils, sobretot si voleu navegar entre el mode del panell i la vista prèvia o bé canviar a l’edició mòbil.

Aquí teniu una llista de dreceres que poden augmentar greument la velocitat de disseny del vostre lloc web:

Accions

DesferCtrl / Cmd + ZDesfer qualsevol canvi que es faci a la pàgina
RehabilitaCtrl / Cmd + Maj + ZTorneu a fer qualsevol canvi que es faci a la pàgina
CòpiaCtrl / Cmd + CCopieu una secció, columna o giny
EnganxarCtrl / Cmd + VEnganxeu una secció, columna o giny
Enganxa l’estilCtrl / Cmd + Maj + VEnganxeu l’estil d’una secció, columna o giny
SuprimeixSuprimeixSuprimeix una secció / columna / giny que s’edita
DuplicarCtrl / Cmd + DDupliqueu una secció / columna / widget editada
DesaCtrl / Cmd + SDesa la pàgina a l’historial de revisions

Anar a

Tauler / Vista prèviaCtrl / Cmd + PCanvia entre la vista del panell i la vista prèvia
Edició mòbilCtrl / Cmd + Maj + MCanvia entre les visualitzacions d’escriptori, tauleta i mòbil
HistòriaCtrl / Cmd + Maj + HVés al tauler de la història
NavegadorCtrl / Cmd + IObre el navegador
Biblioteca de plantillesCtrl / Cmd + Maj + LObre la modalitat de biblioteca de plantilles
Dreceres de teclatCtrl / Cmd + ?Obre la finestra d’Ajuda de les dreceres de teclat
DeixarESCObre Configuració i salta a Sortida al Tauler de control

CSS personalitzat per a pàgines

Sabíeu que podeu tenir CSS personalitzat per a cada pàgina? Sí, però tingueu en compte que aquesta característica només s’inclou a la versió Pro de Elementor. Com a solució de tot això, us mostraré com incloure CSS personalitzats per a cada pàgina. Aquest truc us estalviarà diners si voleu la versió Pro només per afegir petites personalitzacions a nivell de pàgina.

Per fer-ho, només cal que utilitzeu el giny HTML i aquest tros de codi dins:

Mireu aquest exemple:

Codi personalitzat

Barra de cerca del cercador d’elements Elementor

Molt sovint quan treballes en el disseny de pàgines, voleu saltar a altres pàgines, configuracions, una pàgina de vendes o a qualsevol altre lloc, i podeu consumir molt de temps si: desar la pàgina> tornar al vostre tauler> obrir pàgines > cerqueu la pàgina que voleu obrir. Això pot perdre molt temps i energia si ho haguéssiu fet una i altra vegada.

Afortunadament, Elementor té una solució integrada per racionalitzar i agilitzar el procés de disseny. En comptes de passar tots els problemes, només podeu utilitzar el Cercador de elements. Podeu saltar directament a qualsevol configuració, plantilla, pàgina o part del tema cercant a la barra de cerca. Es pot accedir al cercador fent clic a les tecles Cmd / Ctrl + E a qualsevol part del tauler de control de WordPress. Fes una ullada a aquest vídeo per veure tot el que pots fer amb el Finder.

Utilitza Navigator

Navigator és una finestra d’arbre de navegació que permet accedir fàcilment a tots els elements del creador de pàgines. Aquesta petita finestra permet navegar pels elements i arrossegar i deixar anar els ginys fàcilment.

El navegador és especialment útil per a pàgines llargues o pàgines amb un disseny complex de diverses capes i per a elements que combinen l’Índex Z, menys un marge, una posició absoluta, etc. Permet accedir a les nanses d’elements que es poden situar darrere d’altres elements..

Podeu accedir a Navigator d’una de les tres maneres senzilles:

  1. Feu clic amb el botó dret a qualsevol element i després feu clic a Navegador. Això us redirigirà automàticament a l’element específic de l’arbre de navegació.
  2. Feu clic al botó Elements del peu de pàgina del tauler.
  3. Utilitzeu la drecera de teclat Cmd / Ctrl + I.

Mireu aquest vídeo per veure-ho en acció:

El navegador també té algunes altres funcions, com ara els widgets de nom, reduir i ampliar widgets, flotar o ancorar el tauler i mostrar o ocultar widgets. Podeu veure una ressenya completa a la seva documentació.

Definiu la vostra paleta de colors

Normalment, quan dissenyem un lloc web, seguim un patró de disseny creat pel dissenyador. Aquest patró normalment conté una combinació dels colors repetits a tot el lloc. Es tracta de colors de marca que han de romandre inalterats. Això vol dir que cada vegada que afegim un nou giny a la pàgina, hem de copiar i enganxar el codi de color o hem de recordar quin és el codi de color per aplicar-lo en la configuració de widget. Fer això pot costar molt de temps. Afortunadament, Elementor té una solució per a nosaltres.

Podeu definir els colors de la vostra marca a la configuració del Selector de colors i reutilitzar-los cada vegada que accediu a les opcions de color per al disseny de ginys. Només heu de triar una paleta predefinida o definir els vostres colors personalitzats per estalviar temps a l’hora de dissenyar.

Mireu aquest vídeo:

Estils i plantilles de widget reutilitzables i premissables

Elementor és un dels millors creadors de pàgines, però heu pensat en els botons per defecte i lleig? Pestanyes? Menús? O algun altre giny? Aquests widgets predeterminats semblen haver estat dissenyats fa diversos anys, o potser vau voler reutilitzar el giny que heu dissenyat al projecte A del projecte B?

Actualment, no podeu desar i reutilitzar estils de ginys per a futurs projectes amb Elementor. Per sort, el gratuït WunderWP El plugin ofereix algunes maneres de resoldre aquest problema.

En primer lloc, WunderWP inclou diversos estils de widgets preestablerts a la vostra disposició. Estils disponibles per a encapçalaments, galeries, botons, divisors, carrusels, formularis, taules de preus i molt més estan disponibles amb un clic. Simplement, arrossegueu un giny Elementor a la vostra pàgina, seleccioneu un estil de widget preparat per a WunderWP i comenceu a afegir contingut.

Presets de WunderWP

Amb WunderWP, també podeu desar i reutilitzar fàcilment els vostres propis estils de widget a Elementor. És senzill: estilitzar un giny, guardar-lo al núvol de WunderWP (gratuït!) I utilitzar-lo més tard per a ginys similars. Això funciona tant per a widgets senzills com complicats. Per exemple, podeu utilitzar-ho per desar un widget d’encapçalament que conté valors tipogràfics diferents o per a un widget d’imatge amb ombres desplegables personalitzades.

Estils personalitzats de WunderWP

El mateix passa amb les plantilles: podeu desar les plantilles completes o parcials que creeu al núvol de WunderWP. La plantilla hi serà, de manera que quan estiguis llest, pots inserir-lo fàcilment en una pàgina o lloc web. D’aquesta manera només hauràs de crear-lo una vegada, estalviant-te molt de temps.

Plantilla personalitzada de WunderWP

O podeu aprofitar les plantilles de contingut confeccionat de WunderWP Ara mateix, hi ha més de 50 plantilles de seccions preparades (com ara contacte, trucades a l’acció, capçalera, peu de pàgina, serveis, sobre, equip, serveis, compte enrere i molt més) per a una varietat de finalitats.

Plantilla de premade WunderWP

Embalatge

Fins a aquest moment, sense cap mena de dubtes, Elementor és un dels millors constructors de pàgines de WordPress que hi ha. Gairebé cada dia s’afegeixen noves eines i funcions per racionalitzar i agilitzar el procés de disseny i accelerar el termini d’entrega del projecte.

Quin consell creieu que és el més útil i quin abans no coneixíeu? Potser també sabeu alguna cosa no mencionada aquí? Si us plau, compartiu-la amb altres persones.

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