Designer

Mări dimensiunea textului Reducerea textului

Lay-out design Designerul vă oferă instrumentele și funcțiile necesare pentru a personaliza șablonul sau tema aleasă. Acesta nu oferă elemente drag and drop sau cadre JavaScript / CSS. De obicei, aceste tehnici duc la site-uri web lente și de calitate scăzută, care abundă deja pe web. În schimb, se alege calea codului curat și structurat, ceea ce vă permite să creați un site web de înaltă calitate, ușor, super rapid și frumos.

Cunoștințe tehnice necesare

Am păstrat designerul cât mai ușor de utilizat posibil, dar cu o mulțime de caracteristici vine o curbă de învățare mai abruptă. Este recomandat să învățați noțiunile de bază de HTML și CSS Dacă nu vreți să investiți timpul și energia necesare, este sigur să săriți peste această pagină.

Acestea sunt celelalte opțiuni pentru un design care nu necesită cunoștințe tehnice:

Navigați la Setări > Layout și faceți clic pe fila Designer. Apoi faceți clic pe Start. Designerul în sine nu este potrivit pentru utilizarea pe un telefon mobil. Vă recomandăm să folosiți un ecran mare (cel puțin 1920x900 pixeli) pentru a lucra confortabil cu designerul.

Layout designer

Designerul este format din previzualizarea din fundal, o fereastră cu vizualizarea mobilă a site-ului dvs. web și fereastra designerului.

Visualizare mobilă

Majoritatea oamenilor vă vor vizita site-ul web cu un smartphone. Vizualizarea mobilă vă oferă un exemplu de cum va arăta site-ul dvs. pe un ecran mic.

Asigurați-vă că site-ul dvs. web nu devine prea lat pentru a împiedica apariția unei bare de defilare orizontală. Toate șabloanele și temele sunt prietenoase cu mobilul (responsive) în mod implicit, dar designerul oferă multă libertate, astfel încât acest lucru poate fi perturbat.

Pictogramele din partea de sus vă permit să vizualizați la diferite rezoluții.

Designer versiune mobilă

Pictograma Refresh vă permite să reîmprospătați scriptul din site pentru a vedea cea mai recentă versiune.

Fereastra de proiectare

Mai jos sunt explicate toate pictogramele din bara de instrumente. În mod implicit, sunt afișate doar pictogramele pentru funcțiile de bază. Faceți clic pe pictograma Preferences și activați Advanced mode pentru a vedea toate pictogramele.

Bara de instrumente Designer

Desenele mele

Adaugați un design: Cu acest buton puteți adăuga un nou design sau puteți copia un design de la un alt magazin online.
Publicare: După publicare, designul va fi live și va fi vizibil pentru vizitatorii dumneavoastră.
Editați: Aceasta vă va permite să editați numele, comentariile și drepturile de copiere ale desenului.
: Această acțiune vă permite să ștergeți desenul sau modelul. Această acțiune nu poate fi anulată.

Va trebui să confirmați dacă doriți să ștergeți un desen sau model. Ștergerea unui desen sau model nu poate fi anulată. Va trebui să creați în schimb un nou desen sau model.

Elemente

Elementele formează structura HTML a site-ului dumneavoastră. După ce alegeți un element, vi se va prezenta un formular web care vă permite să modificați proprietățile elementului respectiv.

Există multe elemente și proprietăți care pot fi personalizate cu ajutorul formularului web. Elementul principal este tag-ul body al paginilor web. Acest formular va modifica automat selectorul CSS de bază.

Proprietățile care au fost deja personalizate sunt indicate printr-un fundal verde în câmpul formularului. Dacă lăsați valoarea unei proprietăți în alb, proprietatea respectivă va fi eliminată.

Subelemente

Unele elemente conțin subelemente. Făcând clic pe link-uri, se va afișa un nou formular care poate fi utilizat pentru a modifica proprietățile subelementului.

Media

Proprietățile elementelor se pot aplica numai pentru anumite dimensiuni de ecran sau în versiunea tipărită. Făcând clic pe linkuri se ajustează proprietățile elementului pentru un anumit suport.

Salvare

Utilizați această pictogramă pentru a salva desenul. Acest lucru nu va publica desenul sau modelul.

Culoare, imagini și tip de font

Aceste pictograme sunt o copie a caracteristicilor din gestionarea de bază a aspectului Ele sunt afișate și aici pentru un acces ușor.

Structura

Pictograma de structură vă permite să modificați structura HTML a site-ului web. Puteți adăuga, muta și șterge obiecte.

Există obiecte vizibile (funcția de căutare, coșul de cumpărături, selectarea limbii, navigația) și containere invizibile care sunt utilizate pentru a structura site-ul web. Containerele sunt utilizate de obicei pentru a grupa elemente sau pentru a adăuga fundaluri.

Puteți face ajustări ale structurii prin tragerea elementelor sau prin utilizarea săgeților Sus și Jos. Puteți adăuga un element nou făcând clic pe butonul Adaugare din partea de jos. Pentru a elimina un element, faceți clic pe pictograma Delete.

Browserul dvs. web va actualiza automat exemplul de design. Dacă actualizarea nu se face automat, faceți clic pe Salvare în fereastra de proiectare și apoi pe Reload în vizualizarea mobilă.

Personalizarea CSS

Actualizarea CSS vă permite să modificați codurile de aspect (Codul CSS) ale site-ului web și este cea mai importantă caracteristică a designerului.

CSS - Cascading Style Sheets nu este un limbaj de programare, ci un limbaj de stil care poate fi folosit pentru a defini formatarea elementelor unui site web.

Personalizarea CSS, este ceva pentru un profan?

CSS poate fi ușor de învățat. Recomandăm această metodă pentru utilizatorii care doresc să își personalizeze propriul site și investesc timp pentru a învăța despre CSS.

Link-uri utile cu informații despre CSS:

W3Schools - tutoriale pentru a învăța CSS
CSS-Tricks - preferatul nostru cu multe informații despre CSS

Ajutor privind personalizarea CSS

Pentru modificările de cod CSS, biroul nostru de asistență nu poate oferi asistență. Adăugarea suportului CSS ar însemna să facem design web personalizat și asta ar face ca EasyWebshop să fie mult mai scump. Avem la dispoziție Vara de design web pentru asistență în crearea unui design personalizat.

Nu vă recomandăm să lăsați designerii web să se conecteze la magazinul dvs. web direct sau cu un cont de administrator. Acest lucru duce uneori la discuții despre modificări care nu au fost dorite. Lăsați să se logheze în magazinul dvs. doar persoanele în care aveți încredere! În schimb, designerul web poate crea un magazin web de bază și poate crea designul în acest magazin web. Puteți apoi să copiați designul în magazinul dvs. web cu ajutorul funcției de copiere.

În timpul editării CSS, apar pictograme suplimentare pentru anularea și refacerea modificărilor, text mai mic și mai mare și o funcție de căutare. Introduceți un text în bara de căutare pentru a găsi textul respectiv în codul CSS. Apăsați Enter pentru a evidenția textul dacă este găsit și pentru a trece la următoarea instanță, dacă există.

Preferințe

Aici puteți activa și dezactiva modul întunecat, ecranul complet și evidențierea sintaxei codului CSS. Există, de asemenea, o opțiune pentru a face transparentă fereastra de proiectare. Preferințele se referă la fereastra de proiectare; prin urmare, nu la site-ul web.

Preferințele designerului

Cum se modifică proprietatea X?

Schimbarea fundalului

Alegeți elementul pe care îl doriți, de exemplu Webpage. La Imagine fundal, faceți clic pe pictograma Edit Image. Alegeți o imagine din listă sau Încărcați o imagine nouă.

De asemenea, puteți achiziționa o imagine folosind Galerie. Dacă doriți să folosiți imaginea pe o pagină, vă recomandăm Formatul web. Pentru fundaluri, vă recomandăm formatul Large.

Faceți clic pe Insert pentru a seta imaginea ca fundal. După ce imaginea de fundal este setată, apare și o pictogramă Delete image.

Schimbarea butoanelor

Alegeți elementul Webpage și subelementul Buttons. În formular, pot fi ajustate proprietăți precum culoarea, dimensiunea, stilul de margine etc.

Subelementul Buttons mouse-over vă permite să modificați stilul butoanelor atunci când mouse-ul este trecut peste ele. De exemplu, butonul poate primi o culoare mai deschisă.

Personalizarea culorilor

Cel mai simplu mod de a schimba culorile este în codul CSS. Codurile de culoare arată ca #ffffff sau rgba(255, 255, 255, 255, 0.5). În cazul celei din urmă notații, ultimul parametru (0,5 în exemplu) reprezintă transparența.

Link-uri utile pentru a compune culori:

Color Designer - generează cu ușurință palete de culori
Color Combos - asamblează combinații de culori

Personalizarea fonturilor

Puteți schimba fontul selectând un element și ajustând Font în formular.

În mod implicit, toate șabloanele noastre au un singur font setat pentru elementul principal Pagină web. Este posibil să setați fonturi diferite pentru elemente diferite. Vă recomandăm să folosiți un singur font pentru a păstra lucrurile neîngrădite.

Întrebări frecvente despre designer

Încă văd versiunea veche a site-ului web: Acest lucru se întâmplă, de obicei, deoarece imaginile vechi sunt încă în memoria cache a browserului web. Un browser web (Firefox, Google Chrome...) salvează paginile web și imaginile pe hard disk. În acest fel, la următoarea vizită, pagina se va încărca mai repede. Atunci când vizitați pagina, veți vedea versiunea veche a fotografiei pe hard disk și nu versiunea live de pe site-ul dvs. web.

Pentru a rezolva această problemă: ștergeți memoria cache a browserului. Modul de a face acest lucru depinde și este diferit pentru fiecare browser web.

Verificați, de asemenea, dacă designul dvs. este Publicat.

Pagina urmatoare: Editarea textelor și a paginilor web

Starter wiki

Întrebări frecvente Contact