Secțiunea HERO

Această secțiune va avea o singură coloană cu conținut centrat atât pe orizontală cât și pe verticală.

Ea va conține un titlu de tip H1 și un subtitlu H5 sau H6.

Titlu va conține denumirea asociației CARPAT MONTE iar subtitlul va conține motto-ul organizației „Pasiune pentru natură”.

Fundalul va fi o imagine salvată de pe site-ul Pexels.com și avea un overlay aplicat pentru a crește contrastul scrisului.

Înălțimea (height) secțiunii va avea 600 px și lățimea (width) va fi cea de tipul fullwidth.

Pași de implementare

Pasul 1 : adăugăm secțiunea cu o coloană în Elementor

Pasul 2 : activăm în Layout – „Full Width Section” – această opțiune va întinde lățimea secțiunea la maximum și va umple ecranul indiferent de dispozitivul folosit.

Pasul 3: alegem „Min Height” ca și opțiune și introducem 600 de pixeli.

Pasul 4: adăugăm 2 blocuri de Heading pentru a introduce cele 2 titluri conform prototipului nostru. Pentru aceasta trebuie să tragem de blocul „Heading” cu mouse-ul pe coloana din mijlocul secțiunii marcată cu simbolul „+” și linie punctată.

Vom schimba textul blocurilor „Heading” și îl vom alinia pe centrul coloanei.

Pasul următor este să adăugăm imaginea de fundal a secțiunii „Hero.” Pentru aceasta trebui să accesăm setările secțiunii. Pentru aceasta facem click pe eticheta albastră cu cele 6 puncte sau folosim „Navigatorul” din partea dreapta pentru a selecta direct secțiunea.

Accesăm tab-ul „Style” și alegem opțiunea „Background” – background type – image și vom putea selecta imaginea din galeria dedicată din platforma WordPress.

Rezultatul va fi cel de mai jos:

Vom modifica opțiunile fundalului alegând la Size – Cover și la Position – Center Center

Aceste opțiuni vor fixa imaginea pe fundalul secțiunii noastre și o vor poziționa pe centrul ei.

Următorul pas este să adăugăm un Background Overlay pentru a mări contrastul scrisului pe imaginea de fundal aleasă.

Vom alege ca și culoare globală – culoarea Secondary.

Următorul pas este să schimbăm culoarea celor 2 titluri în alb. Le selectăm cu mouse-ul și mergem în tab-ul Style schimbă Text Color în White (alb).

Ca să nu facem același lucru și pentru subtitlul nostru – vom face click dreapta pe titlul principal CARPAT MONTE și vom alege opțiunea Copy și apoi vom merge pe subtitlu, vom face click dreapta și vom alege opțiunea Paste Style.

Această comandă va transfera stilul titlului modificat, respectiv culoarea de text albă către subtitlu.

Ultimul pas este să redenumim această secțiune în Hero în navigotorul din partea dreaptă a ecranului. Pentru aceasta vom face dublu click pe titlul ei „Section” și vom introduce „Hero”.

Nu uitați să actualizați conținutul paginii folosind butonul „UPDATE” din partea stângă jos.

Gata! Felicitări! Prima voastră secțiune în Elementor este finalizată! Site-ul vostru ar trebui să arate la fel ca imaginea de mai jos, în acest moment.