Cum să creezi un website #8: Personalizări avansate

În WordPress lucrezi cu teme și module. Atât acestea cât și platforma, au un ciclu de actualizare. Unele actualizări pot modifica cum funcționează anumite setări, alteori pot modifica cum este interpretat design-ul sau pur și simplu pot să aducă probleme ce așteaptă să fie rezolvate la următoarea actualizare. Indiferent de situațiile enumerate, ai nevoie să rezolvi repede problema de design și atunci apelezi la codul CSS.

Nu este obligatoriu să ai întotdeauna o problemă, uneori poate doar vrei să obții un anumit design și nici o opțiune sau modul nu te ajută. Cum am observat în articolele anterioare. Am făcut această introducere pentru a evidenția că deși WordPress nu necesită cunoștințe de programare, ajungi în timp să apelezi la acestea. Oricât ai fugi de ele, este mult mai ușor să inserezi 2-3 linii de cod CSS decât să cauți module sau teme care să permită editări avansate în situații punctuale.

A venit momentul să adresăm neajunsurile temei și ale editorului Gutenberg. Nu intenționez să predau întreaga teorie a limbajului. Găsești tot ce ai nevoie pe W3Schools. În schimb îți voi arăta unde să inserezi codul și cum să identifici de ce clase ai nevoie. Este absolut în regulă să nu înțelegi anumiți pași. Îți voi oferi codul de care ai nevoie iar în timp, lucrurile vor fi mai clare.

Stiluri Globale

Noțiunea de global face referire la faptul că se aplică pentru întregul website. Deschide website-ul, derulează către secțiunea Footer, pune cursorul pe logo și apasă click dreapta. Din noua fereastră apasă Inspect / Inspect Element (după caz).

Se va deschide o fereastră în care vom vedea codul sursă al paginii. Plimbând cursorul prin liniile de cod vei putea vedea ce element reprezintă. Apasă pe linia care începe cu img (chenarul roșu). Apasă pe plusul din dreapta mijloc pentru a adăuga o nouă clasă. Se va crea un nou rând numit img.wp-image-41 în fereastra de jos. Tastează margin-top: 40px și observă cum logo-ul alb s-a deplasat la mijlocul vertical al celorlalte coloane. Astfel afli ce clase trebuie să editezi pentru a obține un design anume, și vei putea vedea rezultatul în timp real. Dacă reîncarci pagina, totul va reveni la forma inițială. 

Pentru a salva aceste modificări, mergi la Theme Options, secțiunea Custom Codes. Copiază exact codul introdus mai devreme și inserează-l în câmpul Custom CSS. Evident, apasă Save Changes. Astfel, am salvat modificarea poziției logo-ului în mod global. Primul pas este să identifici clasa / id-ul CSS care va modifica elementul după cum dorești. Al doilea pas este să testezi codul care va face modificarea, iar ultimul pas este să inserezi codul rezultat în opțiunea Custom CSS a temei. Orice temă trebuie să ofere o astfel de funcționalitate.

Discuția este mult mai lungă, dar nu o vom aprofunda mai multe pentru a nu începe un întreg curs CSS. Vreau doar să știi că ai posibilitatea de a modifica orice după pofta inimii. Este timpul să corectăm următoarea coloană, lista de sub LEGĂTURI UTILE. Codul este:
.widget ul, .widget ul li {
list-style: disc;
color: #fff !important;
padding-left: 20px;
}

Folosim clasa .widget pentru a modifica doar elementele de tip widget, listele din restul paginii nu vor fi afectate. Folosim !important pentru a forța modificarea acolo unde tema totuși refuză. Pentru a modifica culoarea link-urilor în Footer codul este:

.widget a {
color: #fff !important;
}

.widget p {
margin-bottom: 5px;
}

Astfel devin vizibile numărul de telefon și adresa de email de sub ORAR ȘI CONTACT. .widget p modifică distanța dintre paragrafe, textul fiind mai aranjat. Mai avem doar coloana DESPRE AUTO FOCUS. În mod normal, am folosi tot .widget p  pentru a efectua modificări asupra acestuia. Neavând un identificator unic. Dar asta va modifica fiecare paragraf de tip widget, pe când noi vrem să îl modificăm doar pe acesta.

Mergi la editorul de Piese, secțiunea Footer Section 4, apasă pe paragraf, în partea dreaptă, apasă pe Avansat iar în câmpul Clasă CSS inserează textul ajustare. Salvează modificările.

Astfel acest paragraf va avea o clasă unică. Introdu codul următor în Custom CSS din Theme Options:

.ajustare {
text-align: justify;
}

Va alinia doar acel paragraf la marginile exterioare. Uneori este mai ușor să adaugi o clasa cu care să modifici un element sau bloc decât să îi cauți identificatorii și să îi suprascrii. La final, Footer-ul ar trebuii să arate ca în poza de mai jos. Mult mai ordonat și cu toate doleanțele din articolul precedent rezolvate.

Stiluri Locale

A rămas o singură restanță de rezolvat, textul din prima pagină din secțiunea Despre. Cum spuneam în articolul precedent, în versiunea curentă tema nu ține cont de limita container-ului iar conținutul se întinde pe tot ecranul. Vom defini o clasă specială cu care vom seta limita. Adaugă în Custom CSS următorul cod:

.cont{
max-width: 1300px;
margin-left: auto;
margin-right: auto;
}

Folosim max-width în loc de width pentru a seta lățimea doar maximă, altfel va avea 1300px indiferent de dispozitiv ceea ce nu este ok. Margin auto va centra pe mijloc containerul. Mergi la pagina Acasă și editează blocul de text de sub Despre. În câmpul Extra class name, introdu numele clasei, cont.

Acum secțiunea Despre are un aspect mai ordonat.

De multe ori, vei avea nevoie să definești stiluri doar în cadrul unei pagini. Spre exemplu, clasa cont o avem definită la o lățime de 1300px, dar putem ca într-o pagină individuală să suprascriem această valoare. Uneori temele oferă această opțiune, alteori nu. Este un alt plus al modului WPBakery Page Builder, oferă opțiunea Custom CSS în orice pagină sau articol indiferent de temă.

Apasă pe rotița din dreapta sus. Se va deschide o fereastră unde vei putea introduce codul. Va afecta doar pagina curentă.

Atât despre personalizarea prin CSS. Nu este ceva complicat odată ce înțelegi cum să identifici clasele sau cum funcționează codul CSS. Nu intenționam să abordez acest subiect, dar în timp ce pregăteam materialul pentru articole, m-am lovit peste aceste probleme ce nu erau prezente cu câteva update-uri în urmă. Widget-urile aveau altă metodă de editare în versiunea WordPress precedentă. Nu era bazată pe Gutenberg ceea ce o făcea un pic mai versatilă. De asemenea tema nu prezenta probleme când am testat-o inițial. Ceea ce m-a dus cu gândul că și ție ți se poate întâmpla asta și ai nevoie să știi cum se rezolvă.

Ca și până acum, dacă ai întrebări sau nevoie de ajutor, te aștept pe grupul de Facebook Comunitatea SenDesign! 

Pentru a afla cum sa-ti optimizezi site-ul click aici: optimizare SEO Bucuresti.

Daca doresti sa realizezi un site de prezentare cick aici: creare site de prezentare.