Cum se creează bare de subsol mobile fixe cu Divi

Știm cât de important este să ne asigurăm că totul este personalizat pentru a se potrivi experienței mobile. Pentru a vă ajuta să aduceți experiența mobilă la un alt nivel, vă vom arăta cum să creați bare de subsol mobile fixe cu Divi în această postare pas cu pas.

Acest tutorial face parte din inițiativa noastră continuă de proiectare Divi, în care încercăm să punem ceva suplimentar în cutia de instrumente de proiectare în fiecare săptămână. De data aceasta, vom folosi pachetul de aspect pentru clinica de sănătate și vom face ca barele de subsol mobile fixe să se potrivească cu stilul pachetului de aspect. Cu toate acestea, veți putea folosi această abordare pentru orice tip de design la care lucrați și puteți crea propriile alternative fixe pentru bara de subsol mobilă.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra celor trei exemple pe care le vom recrea pas cu pas. Aceste exemple vor apărea numai pe mobil (și pe tabletă, dacă preferați).

Recreați exemplul nr. 1

Adăugați o secțiune nouă în partea de jos a paginii

Să începem să recreăm prima bară fixă ​​de subsol mobil! Vă recomandăm să creați o pagină pentru trei dintre aspectele care sunt incluse în pachetul de aspect al clinicii de sănătate. Unul pentru fiecare exemplu. Deschideți orice pagină doriți să adăugați prima bară de subsol. Derulați în jos până la sfârșitul paginii și adăugați o nouă secțiune imediat după ultima.

Spațiere

Deschideți setările rândurilor și eliminați toate umpluturile personalizate de sus și de jos din setările de spațiere.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Vizibilitate

Ascundem această secțiune și pe desktop. Dacă doriți ca bara de subsol mobil să apară numai pe mobil, mergeți mai departe și ascundeți și secțiunea de pe tabletă.

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da

Spațiere

Eliminați toate umpluturile implicite de sus și de jos ale rândului următor.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

CSS personalizat

În cele din urmă, adăugăm câteva rânduri CSS personalizate la rând. Aceste linii vor ajuta la transformarea rândului într-o bară de subsol fixă.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

Adăugați un modul de text în coloana 1

Adauga continut

E timpul să începeți să adăugați module! Primul modul de care avem nevoie este un modul de text din coloana 1. Adăugați un conținut la alegere.

Culoare de fundal

Accesați setările de fundal ale modulului și schimbați culoarea de fundal.

• Culoare fundal: # 5e89fb

Setări text

Modificați și setările de text.

• Font text: Work Sans
• Greutatea fontului textului: ușoară
• Culoarea textului: #ffffff
• Dimensiune text: 16 px
• Spațiere scrisoare text: -1 px

Spațiere

Adăugați câteva valori de umplere personalizate în continuare.

• Căptușeală superioară: 16 px
• Căptușeală inferioară: 16 px
• Garnitura stânga: 15 px
• Căptușeală dreaptă: 15 px

Frontieră

Și câteva colțuri rotunjite.

• În stânga sus: 10 px
• În dreapta sus: 10 px

Box Shadow

Completați setările modulului adăugând o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 80 px

Adăugați Blurb Module în coloana 2

Adauga continut

Adăugați un modul Blurb la a doua coloană și adăugați un titlu la alegere.

Selectați pictograma

Continuați selectând o pictogramă pentru Blurb Module.

Culoare de fundal

Adăugați și o culoare de fundal la modul.

• Culoare fundal: # 62de9d

Setări pictograme

Treceți la fila de proiectare și modificați setările pictogramei.

• Culoare pictogramă: #ffffff
• Plasarea pictogramelor: stânga
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 19 px

Setări text titlu

Continuați modificând setările pentru textul titlului.

• Titlu Font: Work Sans
• Culoarea textului titlului: #ffffff
• Dimensiune text titlu: 16 px
• Spațierea literelor de titlu: -1 px

Spațiere

Adăugați și o umplutură personalizată la modul.

• Căptușeală superioară: 20 px
• Căptușeală inferioară: 10 px
• Căptușeală stângă: 30 px
• Căptușeală dreaptă: 30 px

Frontieră

Și adăugați „10 px” în colțurile din stânga sus și din dreapta sus.

• În stânga sus: 10 px
• În dreapta sus: 10 px

Box Shadow

Nu în ultimul rând, adăugați o umbră de casetă subtilă la modul.

• Puterea neclarității umbrei cutiei: 80 px

Recreați exemplul nr. 2

Adăugați o secțiune nouă în partea de jos a paginii

Trecem la al doilea exemplu! Din nou, deschideți o pagină la alegere, derulați în jos până la sfârșitul paginii și adăugați o nouă secțiune.

Spațiere

Deschideți setările secțiunii și eliminați umplutura implicită de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Vizibilitate

Ascundeți secțiunea de pe desktop (și tabletă, dacă preferați).

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Dimensionare

Fără a adăuga module, deschideți setările rândului și modificați setările de dimensionare.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Eliminați și umplutura implicită de sus și de jos a rândului.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

CSS personalizat

Adăugați câteva linii CSS personalizate la rândul următor. Aceste linii de cod CSS vă vor ajuta să creați bara de subsol mobilă fixă.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

Adăugați Blurb Module la coloana 1

Adauga continut

Continuați adăugând un modul Blurb la prima coloană. Adăugați un titlu la alegere.

Selectați pictograma

Apoi, selectați o pictogramă.

Culoare de fundal

Adăugați o culoare de fundal la modulul următor.

• Culoare fundal: # 62de9d

Setări pictograme

Treceți la fila de proiectare și modificați setările pictogramei modulului.

• Culoare pictogramă: #ffffff
• Plasarea pictogramelor: sus
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 25 px

Setări text titlu

Modificați și setările textului titlului.

• Titlu Font: Work Sans
• Alinierea textului titlului: centru
• Culoarea textului titlului: #ffffff
• Spațierea literelor de titlu: -1 px

Spațiere

Și adăugați niște căptușeală de sus și de jos pentru a da modulului spațiu pentru a respira.

• Căptușeală superioară: 30 px
• Căptușeală inferioară: 30 px

Frontieră

De asemenea, adăugăm „15px” la marginea din stânga sus a modulului.

• În stânga sus: 15 px

Box Shadow

Și vom completa modulul cu o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 80 px

Clonați modulul Blurb de două ori și plasați duplicatele în coloanele rămase

După ce ați terminat modificarea primului modul Blurb, puteți continua și clona modulul de două ori și plasați duplicatele în cele două coloane rămase.

Schimbați culoarea de fundal a duplicatului nr. 1

Schimbați culoarea de fundal a primului duplicat.

• Culoare fundal: # 3d3d3d

Schimbați setările de spațiu pentru duplicatul nr. 1

Împreună cu setările de spațiere.

• Marja superioară: -20 px
• Căptușeală superioară: 50 px
• Căptușeală inferioară: 30 px

Schimbați marginea duplicatului nr. 1

Și colțurile rotunjite, de asemenea.

Schimbați culoarea de fundal a duplicatului nr. 2

Modificați și culoarea de fundal a celui de-al doilea duplicat din a treia coloană.

• Culoare fundal: # 000000

Schimbați marginea duplicatului # 2

Împreună cu colțurile rotunjite.

• În dreapta sus: 15 px

Recreați exemplul nr. 3

Adăugați o secțiune nouă în partea de jos a paginii

Trecem la următorul și ultimul exemplu! Deschideți una dintre pagini, derulați în jos și adăugați o nouă secțiune.

Divizor de top

Deschideți setările secțiunii și adăugați un separator superior.

• Culoare divizor: # 62de9d
• Înălțimea împărțitorului: 110 px

Spațiere

Eliminați, de asemenea, toate umpluturile implicite de sus și de jos ale secțiunii.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Box Shadow

Adăugați o umbră de casetă subtilă la secțiunea următoare.

• Puterea neclarității umbrei cutiei: 80 px

CSS personalizat

Și includeți câteva linii CSS personalizate în fila avansată. Acest lucru va ajuta la transformarea secțiunii într-o bară fixă ​​de subsol mobil.

position:fixed;
bottom:0px;
width: 100%;
z-index: 99;

Vizibilitate

În cele din urmă, dezactivați secțiunea de pe desktop (și tabletă, dacă preferați).

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Adăugați câteva căptușeli personalizate în partea de sus și de jos.

• Căptușeală superioară: 30 px
• Căptușeală inferioară: 20 px

CSS personalizat

Pentru a ne asigura că toate cele trei coloane rămân la aceeași înălțime, vom adăuga și o linie de cod CSS în fila avansată a rândului.

display: flex;

Adăugați Blurb Module la coloana 1

Adauga continut

Acum putem începe să adăugăm module! Adăugați un modul Blurb în prima coloană și dați-i un titlu.

Selectați pictograma

Selectați o pictogramă în continuare.

Setări pictograme

Treceți la fila de proiectare și modificați setările pictogramei.

• Culoare pictogramă: #ffffff
• Plasarea pictogramelor: sus
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 25 px

Setări text titlu

Modificați și setările pentru textul titlului.

• Titlu Font: Work Sans
• Orientare text titlu: centru
• Spațierea literelor de titlu: -1 px

Clone Blurb Module De două ori și loc

După ce ați terminat de modificat modulul Blurb din coloana 1, puteți continua și clona modulul de două ori. Plasați duplicatele în cele două coloane rămase.

Schimbați culoarea pictogramei duplicatului nr. 1

Nu uitați să modificați culoarea pictogramei duplicatului situat în a doua coloană.

• Culoare pictogramă: # 000000

previzualizare

Acum că am parcurs toți pașii diferiți, să aruncăm o privire finală asupra rezultatului tuturor celor trei exemple pe care le-am tratat mai sus.

Gânduri finale

În această postare, am tratat trei modele diferite de bare de subsol mobile fixe pe care le puteți recrea pas cu pas urmând tutorialul. Barele de subsol mobile vor urmări vizitatorii pe parcursul experienței de derulare pe pagină. Acest tutorial face parte din inițiativa în curs de proiectare Divi, în care încercăm să introducem ceva suplimentar în setul de instrumente de proiectare în fiecare săptămână. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!