Cum să creezi un separator de formă personalizat în WordPress (2 moduri)

Ați observat vreodată cum unele site-uri web par mai captivante la derulare? Adesea, există un element subtil de design la lucru – separatoare de formă care creează tranziții line, fluide între diferite secțiuni.

Aceste linii curbate, unghiulare sau în zigzag ar putea părea un detaliu minor, dar fac o diferență uriașă în cât de profesionist și modern apare site-ul dvs.

În plus, ele ajută la fragmentarea conținutului în mod natural și ghidează ochii vizitatorilor exact acolo unde doriți să meargă.

După testarea mai multor opțiuni pentru a găsi cele mai fiabile metode, am restrâns opțiunile la două care oferă în mod constant rezultate excelente.

Astăzi, te vom ghida prin aceste două abordări simple: folosind metoda implicită WordPress și SeedProd.

De ce să adăugați separatoare de forme personalizate pe site-ul dvs. WordPress?

Un separator de formă este un tip de separator de secțiune pe care îl adăugați între blocuri de conținut.

Aceste separatoare pot fi simple, cum ar fi o linie orizontală creată cu blocuri WordPress încorporate.

Puteți utiliza aceste separatoare de bază pentru a organiza și separa conținutul, ceea ce este deosebit de util pe paginile care acoperă o mulțime de subiecte diferite.

Puteți crea, de asemenea, separatoare de formă mai avansate folosind plugin-uri de creare de pagini și alte software-uri de design web. Acestea pot evidenția cel mai important conținut al site-ului dvs., astfel încât să iasă în evidență pentru vizitatori și clienți.

Introducerea separatoarelor de formă care arată profesional poate, de asemenea, să vă facă paginile mai interesante și captivante.

De exemplu, le puteți folosi pentru a crea un fundal unic pentru formularul dvs. de înscriere la newsletter.

Acestea fiind spuse, să vedem cum poți crea un separator de formă personalizat în WordPress. Pur și simplu folosește linkurile rapide de mai jos pentru a sări direct la metoda pe care vrei să o folosești:

• Metoda 1: Creați un separator de forme simplu în editorul de blocuri (nu este necesar un plugin)
• Metoda 2: Crearea unui separator de formă personalizat în WordPress folosind un Page Builder (Recomandat)
• Frequently Answered Questions: Custom Shape Dividers

Metoda 1: Creați un separator de forme simplu în editorul de blocuri (nu este necesar un plugin)

Cel mai simplu mod de a adăuga un separator de formă WordPress este prin utilizarea blocului încorporat Separator.

Această metodă vă permite să adăugați un separator de linie orizontală între orice blocuri WordPress și apoi să personalizați culoarea și stilul liniei.

Această metodă nu vă permite să adăugați forme diferite în WordPress și are setări de personalizare limitate. Cu toate acestea, nu va trebui să instalați un plugin WordPress suplimentar, deci aceasta este cea mai ușoară modalitate de a adăuga un separator de forme simplu pe site-ul dvs. web.

Pentru a începe, pur și simplu deschideți postarea sau pagina unde doriți să adăugați un separator orizontal în editorul de conținut Gutenberg. Apoi, faceți clic pe butonul „+” unde doriți să plasați acel separator.

În fereastra pop-up, tastați „Separator”.

Când apare blocul corect, faceți clic pentru a-l adăuga la pagină sau la postare.

Pentru a personaliza blocul implicit Separator, faceți clic pe el și apoi utilizați setările din meniul din dreapta.

Puteți comuta între implicit, linie lată și puncte folosind butoanele din secțiunea „Stiluri”.

Puteți schimba, de asemenea, culoarea liniei, astfel încât să se potrivească cu restul temei sau al mărcii dvs.

Pentru a face acest lucru, faceți clic pe „Background” și apoi alegeți o culoare din fereastra pop-up care apare.

În plus, puteți ajusta marginea separatorului.

Cu cât marginea este mai mare, cu atât va fi mai mult spațiu între blocurile separate.

Când sunteți mulțumit de aspectul separatorului de formă, puteți face clic pe butonul „Publicare” sau „Actualizare” pentru a activa funcția separatorului de formă.

Metoda 2: Crearea unui separator de formă personalizat în WordPress folosind un Page Builder (Recomandat)

Dacă doriți să utilizați o formă diferită și să personalizați fiecare parte a separatoarelor dvs., atunci vă recomandăm să utilizați pluginul SeedProd.

SeedProd este cel mai bun plugin pentru crearea de pagini WordPress de pe piață și vă permite să adăugați un separator de formă personalizat oricărei secțiuni, rând sau coloane, folosind un editor simplu de tip drag-and-drop.

Am testat temeinic acest instrument în mediul nostru de demonstrație și am constatat că este incredibil de ușor de utilizat pentru începători și intuitiv. A făcut crearea paginilor să pară fără efort, în special pentru utilizatorii noi. Puteți afla mai multe despre ceea ce am descoperit în recenzia noastră completă.

SeedProd are, de asemenea, peste 300 de șabloane proiectate profesional și peste 90 de blocuri pe care le puteți utiliza pentru a crea pagini de pornire personalizate frumoase, pagini de destinație și multe altele.

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul SeedProd. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

La activare, trebuie să introduceți cheia de licență.

Puteți găsi aceste informații în contul dvs. de pe site-ul SeedProd. După introducerea cheii de licență, faceți clic pe butonul „Verify key”.

După ce ați terminat, accesați SeedProd » Pages și faceți clic pe butonul „Add New Landing Page”.

După aceea, este timpul să alegeți un șablon de pagină. SeedProd are o mulțime de șabloane profesionale de design de site-uri web pe care le puteți ajusta pentru a se potrivi perfect site-ului dvs. WordPress.

Pentru a selecta un șablon, pur și simplu plasați cursorul mouse-ului peste el și apoi faceți clic pe pictograma „Bifă”.

Apoi, continuați și introduceți un nume pentru pagină. SeedProd va crea automat o adresă URL bazată pe titlul paginii, dar puteți schimba adresa URL cu orice doriți.

Când ești mulțumit de informațiile introduse, apasă pe butonul „Salvează și începe editarea paginii”.

Apoi, veți fi direcționat către constructorul de pagini drag-and-drop, gata să personalizați șablonul.

Editorul SeedProd afișează o previzualizare live a designului dvs. în dreapta și unele setări ale blocurilor în stânga.

Meniul din stânga are, de asemenea, blocuri pe care le puteți trage pe aspectul dvs.

De exemplu, puteți trage și plasa blocuri standard precum butoane și imagini sau puteți utiliza blocuri avansate precum numărătoarea inversă, butoane de partajare pe rețelele sociale și multe altele.

Pentru a personaliza un bloc, pur și simplu faceți clic pentru a-l selecta în aspectul dvs.

Meniul din stânga va afișa apoi toate setările pe care le poți folosi pentru a configura acel bloc. Poți, de asemenea, să schimbi culorile de fundal ale paginii, să adaugi imagini de fundal sau să schimbi schema de culori și fonturile pentru a se potrivi mai bine brandului tău.

SeedProd vine, de asemenea, cu „Secțiuni”, care sunt colecții de blocuri utilizate frecvent împreună. De exemplu, SeedProd are o secțiune de antet, imagine principală, apel la acțiune, testimoniale ale clienților, caracteristici, secțiuni de subsol și multe altele.

Pentru a parcurge diferitele secțiuni, faceți clic pur și simplu pe fila „Secțiuni”.

Puteți muta secțiuni și blocuri în aspectul dvs. folosind drag and drop.

Dacă doriți să ștergeți un bloc, pur și simplu treceți cu mouse-ul peste el și apoi faceți clic pe pictograma coșului de gunoi când apare.

Indiferent dacă alegeți sau nu să utilizați o secțiune SeedProd, acum puteți crea un separator de formă personalizat. Pur și simplu faceți clic pentru a selecta secțiunea, rândul sau coloana unde doriți să adăugați separatorul.

Apoi, faceți clic pe fila „Avansat” din meniul din stânga.

Acum, faceți clic pentru a extinde secțiunea „Separator de formă”.

Pentru a începe, puteți alege unde să afișați separatorul de formă selectând fie butonul „Sus”, fie butonul „Jos”.

Acum puteți deschide meniul „Tip” și puteți alege separatorul de formă pe care doriți să îl utilizați.

Pe măsură ce selectați diferite forme, previzualizarea live se va actualiza automat, astfel încât să puteți încerca diferite stiluri pentru a vedea ce arată cel mai bine.

După ce ați ales un separator de formă, îl puteți stiliza folosind noile setări.

Pentru a începe, puteți face clic pe „Culoare” și apoi alegeți o nouă culoare din fereastra pop-up care apare.

Cu asta făcut, poți face separatorul mai mare sau mai mic trăgând de glisoarele „Lățime” și „Înălțime”.

Dacă aveți deja o dimensiune specifică în minte, atunci puteți introduce acele numere în casete.

Puteți, de asemenea, să încercați să rotiți separatorul făcând clic pentru a activa sau dezactiva comutatorul „Flip”.

În mod implicit, separatorul va apărea în spatele restului conținutului, astfel încât utilizatorii să poată vedea clar orice text, imagini sau alt conținut care se suprapune peste separator.

Cu toate acestea, mutarea formei în față poate crea efecte interesante. Dacă doriți să vedeți cum arată acest lucru, pur și simplu faceți clic pentru a activa comutatorul „Adu în față”.

Pentru a adăuga mai multe separatoare, urmați același proces descris mai sus.

Puteți chiar adăuga un separator de formă în partea de sus și de jos a unei zone, ceea ce creează adesea rezultate impresionante și atrăgătoare.

Puteți continua să lucrați la pagină adăugând mai multe blocuri și personalizând acele blocuri în meniul din stânga.

Când sunteți mulțumit de aspectul paginii, faceți clic pe butonul „Salvare”. Apoi puteți selecta „Publicare” pentru a face pagina respectivă live.

Cum să adăugați separatoare de formă la o temă WordPress

Editorul drag-and-drop de la SeedProd îți oferă libertatea de a adăuga un separator de formă unic pe orice pagină. Cu toate acestea, uneori s-ar putea să vrei să folosești aceiași separatori de formă pe mai multe pagini web sau chiar pe întregul tău blog WordPress sau site web.

Acest lucru vă va ajuta să creați un design consecvent și vă poate economisi, de asemenea, o mulțime de timp. În acest caz, recomandăm adăugarea unui separator de formă la tema dvs. folosind constructorul de teme SeedProd.

Cu SeedProd, puteți crea și personaliza o temă WordPress fără a scrie cod. Acesta creează toate fișierele care alcătuiesc tema dvs., inclusiv bara laterală, antetul, subsolul, postările individuale și multe altele. 

Puteți apoi personaliza aceste fișiere folosind constructorul drag-and-drop familiar. Aceasta include adăugarea de separatoare de forme urmând același proces descris mai sus.

Când activați noua temă folosind SeedProd, aceasta va suprascrie tema WordPress existentă, deci ar trebui să folosiți această metodă doar dacă doriți să înlocuiți tema curentă.

Pentru instrucțiuni detaliate, pas cu pas, vă rugăm să consultați ghidul nostru despre cum să creezi ușor o temă WordPress personalizată.

Întrebări frecvente: Separatoare de forme personalizate

Iată câteva întrebări frecvente adresate de cititorii noștri despre crearea unui separator de formă personalizat:

Vor afecta separatoarele de formă viteza site-ului meu?

În general, separatoarele de formă nu au un impact major asupra performanței, mai ales dacă sunt create folosind CSS pur sau SeedProd. Acestea sunt ușoare și se încarcă rapid în browser.

Cu toate acestea, dacă le folosiți excesiv sau vă bazați pe fișiere imagine, acest lucru ar putea crește ușor timpii de încărcare. Pentru a menține site-ul dvs. rapid:

• Utilizați pluginuri minime.
• Preferă SVG-urile în locul fișierelor mari de imagini.
• Evită stratificarea prea multor efecte într-o singură secțiune.

Echilibrarea designului și a vitezei este esențială pentru o experiență fluidă a utilizatorului.

Cum mă asigur că separatoarele mele de forme arată bine pe mobil?

Designul receptiv este extrem de important. Dacă folosiți un constructor de pagini, majoritatea vă vor permite să ajustați vizibilitatea, înălțimea și orientarea separatorului de forme separat pentru desktop, tabletă și mobil.

Iată câteva sfaturi:

• Testați separatoarele de forme pe diferite dimensiuni de ecran. SeedProd face acest lucru ușor, permițându-vă să previzualizați cum arată designul dvs. pe mobil direct în constructorul drag-and-drop.
• Folosiți forme mai mici sau simplificate pe mobil.
• Evitați formele care fac textul greu de citit sau care suprapun conținut important.

Instrumente precum SeedProd oferă controale responsive care vă permit să ajustați cu ușurință fiecare versiune a site-ului dvs.

Unde pot găsi fișiere SVG gata făcute pentru separatoare de formă?

Există multe resurse gratuite de unde puteți descărca separatoare de forme SVG pre-proiectate. Acestea funcționează excelent dacă doriți ceva personalizat fără a proiecta de la zero.

Iată câteva opțiuni:

• Haikei – Generator SVG gratuit pentru forme unice, personalizabile.
• ShapeDividers.com – Oferă diverse separatoare SVG pe care le puteți copia și lipi.

Odată ce descărcați SVG-ul, îl puteți lipi într-un bloc HTML personalizat sau îl puteți include în fișierele temei dvs., în funcție de configurația dvs.

Descoperiți mai multe sfaturi și trucuri de design WordPress

Doriți să adăugați mai multe elemente de design care să impresioneze vizitatorii site-ului dvs.? Consultați aceste sfaturi și trucuri de design WordPress pentru mai multe informații:

• Cum să adăugați un efect parallax la orice temă WordPress
• Cum să creați o bară de subsol plutitoare „lipicioasă” în WordPress
• Ghidul începătorului pentru crearea unui meniu WordPress receptiv, pregătit pentru mobil
• Cum să adăugați o animație preloader la WordPress (Pas cu Pas)
• Cum să adaugi litere mari la începutul paragrafelor în postările WordPress
• Ghidul începătorului pentru adăugarea modului întunecat pe site-ul dvs. WordPress (Ușor)
• Cum să adăugați un fundal animat în WordPress

Sperăm că acest tutorial v-a ajutat să învățați cum să creați un separator de formă personalizat în WordPress. De asemenea, ați putea dori să învățați cum să adăugați casete de caracteristici cu pictograme în WordPress și sfaturile noastre de expert despre modalități de a crea un site WordPress prietenos cu dispozitivele mobile.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.