Cum să vă personalizați culorile temei WordPress

Publicat: 2023-04-19

Doriți să învățați cum să personalizați culorile temei WordPress? Poate ați găsit o temă care vă place, dar paleta de culori este greșită pentru marca dvs. Există câteva moduri în care puteți ajusta culorile temei pentru a vă satisface nevoile.

În această postare, vom vedea cum vă puteți personaliza culorile temei WordPress cu și fără cod.

Creați-vă formularul WordPress acum

Cum schimb culoarea unui formular de contact în WordPress?

După ce ați personalizat culorile temei, veți dori ca formularele de pe site să se potrivească cu stilul și culorile. Cel mai simplu mod de a face acest lucru este să utilizați WPForms.

Pe lângă examinarea modului în care vă puteți personaliza culorile temei cu și fără cod, vom analiza mai îndeaproape și cum să folosiți WPForms pentru a obține stilul formularelor. Pe scurt, noua funcție de stiluri de formulare face foarte simplă potrivirea formularelor cu site-ul dvs. Vă vom arăta cum.

Cum să vă personalizați culorile temei WordPress

Să intrăm și să începem personalizarea!

WPForms este cel mai bun plugin WordPress Form Builder. Ia-l gratuit!

În acest articol

  • Personalizarea culorilor temei WordPress cu cod
    • Pasul 1: Instalați un plugin pentru temă pentru copii
    • Pasul 2: Configurați tema copilului dvs
    • Pasul 3: Personalizați-vă tema copilului
  • Personalizarea culorilor temei WordPress fără cod
    • Pasul 1: Instalați pluginul și finalizați Expertul site-ului
    • Pasul 2: faceți orice personalizări suplimentare din tabloul de bord
  • Schimbarea culorii formularului de contact în WordPress
    • Pasul 1: Instalați și activați WPForms
    • Pasul 2: Creați un formular în WPForms
    • Pasul 3: Editați stilurile de formular în Editorul de blocuri WordPress

Personalizarea culorilor temei WordPress cu cod

Editing the code in the CSS editor

Dacă sunteți bine versat în CSS și vă simțiți confortabil cu editarea fișierelor și a foii de stil ale site-ului dvs., folosirea codului pentru a vă personaliza tema WordPress este o opțiune.

Cu toate acestea, nu vă recomandăm să editați fișierul existent. În schimb, vă sugerăm să utilizați un alt plugin pentru a crea și personaliza temele pentru copii. Temele copil sunt, în esență, copii ale temei dvs. cu toate aceleași atribute.

Editarea unei teme secundare înseamnă editarea unei copii. Dacă faceți erori, puteți reveni la tema părinte. De asemenea, vă va ajuta să evitați problemele dacă există actualizări ale temei părinte.

Pasul 1: Instalați un plugin pentru temă pentru copii

Iată câteva sugestii de pluginuri pe care le puteți folosi pentru a crea teme secundare:

  • Configurator teme pentru copii
  • Vrăjitorul temei pentru copii
  • Generați tema copilului
  • Generator de teme pentru copii WP

Pentru exemplul nostru, vom folosi Child Theme Configurator.

Pasul 2: Configurați tema copilului dvs

După instalarea și activarea plugin-ului pentru tema copilului dorit, va trebui să îl accesați pentru configurații.

Unde apare pluginul pentru tema copilului în WordPress poate diferi în funcție de pluginul pe care îl utilizați. Am accesat Configuratorul de teme pentru copii făcând clic pe meniul Instrumente din bara laterală din stânga.

Accessing the Child Theme Configurator plugin

Odată ce vă localizați pluginul, ar trebui să vedeți setări sau opțiuni pentru a crea o temă copil.

Am descoperit că Child Theme Configurator vă ghidează prin proces, ceea ce este util și simplifică o sarcină altfel confuză.

Beginning the process of setting up a child theme in Child Theme Configurator

După ce ați făcut clic pe butonul Analizați , au apărut mai mulți pași. Parcurgeți fiecare dintre acești pași și, la sfârșit, veți fi gata să vă creați tema copilului.

Run the Child Theme Configurator to create your child theme

Pasul 3: Personalizați-vă tema copilului

După ce ați creat noua temă copil, faceți clic pe Aspect » Editor de fișiere temă din meniul din bara laterală din stânga.

Accessing the theme file editor

Odată ce vă aflați în Editorul de fișiere de teme, veți vedea un meniu drop-down în partea dreaptă unde puteți selecta tema de editat. Tema copilului dvs. ar trebui să fie pe această listă.

Access and select your child theme file to customize it

După ce ați selectat tema copilului, există 2 moduri prin care puteți modifica fișierele.

Prima modalitate este să editați CSS-ul direct în editorul de fișiere, așa cum am arătat mai sus. A doua modalitate este să utilizați editorul CSS încorporat pentru a previzualiza modificările pe măsură ce le faceți.

Pentru a accesa editorul CSS încorporat, accesați Aspect » Personalizare din meniul din bara laterală din stânga.

Access the CSS editor to customize styles with a live preview

Pe pagina respectivă, veți vedea o previzualizare live a site-ului dvs. WordPress, împreună cu opțiuni pentru a face modificări.

Editing your site style in the built-in editor with live preview

După cum puteți vedea în meniul de opțiuni, există mai multe modificări de stil pe care le puteți face fără niciun cod. Acest lucru poate depinde de tema dvs. și de ceea ce a fost deja configurat.

În aceste opțiuni, veți găsi setări pentru a vă actualiza culorile temei.

De exemplu, puteți alege ce stil de buton doriți să folosească site-ul dvs.

Customize the button shape

Și după ce selectați stilul, puteți selecta opțiuni de culoare personalizate pentru textul butonului, fundal și chenar.

Customize the button color

De asemenea, puteți modifica familiile de fonturi pentru titlu și corp.

Customize the fonts for your site

Rețineți, totuși, că există o opțiune de meniu pentru CSS suplimentar în partea de jos. Este posibil să descoperiți că codul CSS este încă necesar pentru anumite modificări pe care doriți să le faceți culorilor temei site-ului dvs. Dacă da, introduceți codul CSS necesar în meniul derulant și previzualizați modificările în direct pe măsură ce le faceți.

Personalizarea culorilor temei WordPress fără cod

Dacă ești îngrijorat să spargi ceva în timp ce schimbi CSS-ul din tema ta, există o modalitate și mai ușoară de a personaliza culorile temei WordPress. Puteți utiliza un plugin fără cod, cum ar fi Thrive Themes.

The Thrive Themes homepage

Thrive Theme Builder este un personalizator de teme care vă permite să vă creați propria temă fără utilizarea sau cunoașterea vreunui cod. Are o interfață drag-and-drop pentru personalizarea front-end și aveți control asupra tuturor aspectelor de design.

Pasul 1: Instalați pluginul și finalizați Expertul site-ului

După ce vă înregistrați pentru un cont și instalați pluginul, începe expertul site-ului.

The Thrive Themes setup wizard

De asemenea, puteți accesa din nou expertul pentru site în orice moment din tabloul de bord Thrive Themes.

Când porniți expertul site-ului, acesta vă solicită să vă încărcați sigla și vă arată cum va arăta pe un fundal deschis și întunecat. Chiar dacă utilizați un fundal deschis, fundalul întunecat este important, deoarece oamenii folosesc modul întunecat pe dispozitivele lor.

Adding your logo in Thrive Themes' setup wizard

După aceea, puteți selecta culoarea mărcii dvs. Când faceți clic pe caseta de culoare, aveți opțiunea fie de a selecta o culoare cu selectorul de culori, fie folosind un cod de culoare hexadecimal.

How to customize WordPress theme colors

Pe măsură ce parcurgeți fiecare pas al expertului, vă creați propria temă personalizată.

All of the customization steps in the site wizard

Pe măsură ce finalizați restul expertului site-ului, personalizați aspectul site-ului dvs. web fără a fi nevoie să scrieți vreodată o linie de cod. Thrive Theme Builder face foarte ușor să creați o temă de site care este unică a dvs.

Pasul 2: faceți orice personalizări suplimentare din tabloul de bord

După cum am menționat anterior, puteți oricând să reveniți la expert dacă doriți să faceți modificări. De asemenea, puteți accesa aceste funcții prin tabloul de bord. După ce ați finalizat expertul, faceți clic pe celelalte opțiuni pentru a face personalizări suplimentare.

Access other customizable features from the Thrive Themes dashboard

Dacă doriți să faceți o schimbare rapidă a culorilor și siglei site-ului dvs. sau dacă doriți să încărcați o favicon pentru site-ul dvs., o puteți accesa din asistent sau din secțiunea Branding de pe tabloul de bord. De asemenea, puteți actualiza tipografia și aici.

După ce ați personalizat toate aspectele paginii dvs., vă puteți salva tema și începe să o utilizați imediat.

Schimbarea culorii formularului de contact în WordPress

Create rounded fields and buttons in WPForms

După cum am menționat anterior, odată ce ați lucrat la actualizarea culorilor temei, doriți să vă asigurați că totul se potrivește.

Ia-ți formele, de exemplu. Dacă aveți o pagină cu margini rotunjite și culori delicate, o formă cutitură cu butoane dreptunghiulare și un contrast puternic va părea cel puțin puțin deplasată.

Introduceți WPForms. Opțiunile de stilare a formularelor fac să vă personalizați formularele pentru a se potrivi cu tema dvs. o ușoară.

Pasul 1: Instalați și activați WPForms

The WPForms homepage

Poate că suntem părtinitori, dar credem că WPForms este cel mai bun generator de formulare. Interfața sa de tip drag-and-drop ușor de utilizat vă permite să creați și să publicați formulare frumoase și profesionale în câteva minute. În plus, opțiunile de stilare a formularelor vă permit să potriviți cu ușurință stilurile de formular cu tema site-ului dvs. WordPress.

Pentru a începe cu formularele de stil pentru a se potrivi cu culorile temei WordPress, instalați și activați WPForms. Dacă aveți nevoie de îndrumări, consultați acest ghid pentru începători despre cum să instalați pluginuri WordPress.

Pasul 2: Creați un formular în WPForms

După ce ați instalat și activat WPForms, este timpul să vă creați formularul!

Utilizați butonul Adăugați nou pentru a începe.

Adding a new form in WPForms

Generatorul de formulare se va deschide astfel încât să puteți crea formularul perfect pentru nevoile dvs. Creați unul de la zero sau alegeți dintre sute de șabloane personalizabile.

Creating a form in the WPForms drag-and-drop form builder

Când formularul este complet, puteți folosi butonul Încorporare pentru a-l încorpora într-o postare sau într-o pagină de pe site-ul dvs. Puteți alege să încorporați formularul într-o pagină existentă sau să creați o pagină nouă pentru acesta.

Embed your form with the embed button

Pasul 3: Editați stilurile de formular în Editorul de blocuri WordPress

Apoi, deschideți schița de pagină în generatorul de pagini. Pentru acest pas, trebuie să utilizați editorul de blocuri WordPress pentru a accesa opțiunile de personalizare.

Faceți clic pe formularul încorporat. Opțiunile de stil pentru formulare se vor deschide în bara laterală din partea dreaptă a editorului de pagini. Veți vedea că puteți modifica stilurile de câmpuri, etichete și butoane.

Când editați stilurile câmpurilor, puteți ajusta dimensiunea și raza chenarului pentru zona de text. Cu cât raza marginii dvs. este mai mare, cu atât zona textului va fi mai rotunjită. De asemenea, puteți alege culori pentru fundal, chenar și text.

Field styling options

Apoi, puteți schimba stilul etichetei. Decideți ce culoare doriți să fie eticheta, apoi alegeți culorile pentru subetichetă și indiciu, precum și pentru mesajul de eroare.

Label style options

În cele din urmă, puteți face ajustări stilului butonului.

Button style options

Pentru a face și mai ușor, după ce ați făcut selecțiile de stil pentru formular, faceți clic pe Opțiuni avansate. Veți vedea un câmp care conține codul CSS.

Copy your custom CSS in the advanced options, then paste it to other forms to match styles

Acesta este codul personalizat pentru formularul dvs. WPForms îl generează automat pentru tine. Puteți să-l copiați și să lipiți în câmpul Avansat din toate formularele, astfel încât să se potrivească cu stilurile.

Și dacă doriți să începeți de la capăt, faceți clic pe Resetați setările stilului pentru a șterge toată formatarea.

După aceea, sunteți gata să vă publicați formularul complet stilizat.

A form using the easy form styling options in WPForms

Acum formularele tale se potrivesc cu culorile temei tale WordPress și nu a fost nevoie să scrii o singură linie de cod pentru a face acest lucru.

Apoi, creați formularul interactiv perfect

Sunteți gata să vă îmbunătățiți jocul de formă? Acum că știți cum să personalizați culorile temei WordPress și să stilați formularele pentru a se potrivi, este timpul să treceți la nivelul următor. Avem câteva sfaturi pentru a crea formularul interactiv perfect pentru a menține utilizatorii implicați și pentru a stimula conversiile.

Doriți să trimiteți un sondaj irezistibil pentru clienți? Consultați aceste exemple de sondaje pentru clienți pentru a vă inspira!

Creați-vă formularul WordPress acum

Sunteți gata să vă construiți formularul? Începeți astăzi cu cel mai simplu plugin pentru generatorul de formulare WordPress. WPForms Pro include o mulțime de șabloane gratuite și oferă o garanție de rambursare a banilor de 14 zile.

Dacă acest articol v-a ajutat, vă rugăm să ne urmăriți pe Facebook și Twitter pentru mai multe tutoriale și ghiduri WordPress gratuite.