17 sfaturi CSS care economisesc timp pentru utilizatorii WordPress

Publicat: 2023-03-13

WordPress oferă posibilități infinite de proiectare și personalizare a site-ului dvs. web. În acest articol, vom împărtăși câteva sfaturi practice CSS special pentru utilizatorii WordPress, de la stilarea antetului până la modificarea fonturilor.

În timp ce WordPress oferă o mulțime de teme și șabloane prefabricate, uneori trebuie să iei lucrurile în propriile mâini și să faci personalizări cu CSS.

Dacă ați pus vreodată una dintre aceste întrebări în timp ce lucrați pe site-ul dvs. WordPress:

  • „Cum elimin butonul „citește mai mult”?”
  • „Cum pot schimba culoarea acestui link?”
  • „Cum fac acest link neclimat, dar păstrez textul pe pagină?”

… apoi citiți mai departe pentru a afla câteva trucuri CSS valoroase pentru site-ul dvs.

În acest tutorial, vom acoperi:

  • Sfaturi CSS pentru WordPress
    1. Centrați un element orizontal și vertical
    2. Schimbați culoarea linkului
    3. Eliminați un link
    4. Dezactivați un link (linkul rămâne vizibil, dar utilizatorii nu pot face clic pe el)
    5. Schimbați culoarea linkurilor la trecerea cursorului
    6. Link-uri de stil
    7. Stilează un buton
    8. Schimbați fontul unei secțiuni
    9. Creați un antet lipicios
    10. Creați un antet lipicios cu efect de umbră
    11. Adăugați o culoare de fundal unei secțiuni
    12. Schimbați culoarea de fundal a corpului
    13. Schimbați culoarea unui anumit cuvânt sau expresie
    14. Creați o chenar în jurul unei imagini
    15. Creați un efect de hover pe o imagine
    16. Stilați o formă
    17. Creați un aspect receptiv
  • Du-ți abilitățile CSS la următorul nivel

Sfaturi CSS pentru WordPress

Singurele două lucruri pe care trebuie să le știți pentru a implementa aceste sfaturi sunt:

  • Cum funcționează CSS
  • Cum să adăugați CSS la WordPress

Notă: CSS nu este riscant, așa că dacă faci o greșeală, poți doar să ștergi codul sau să-l modifici... nu va rupe nimic :)

Cu asta în afara drumului, haideți să trecem direct la câteva sfaturi practice CSS cu exemple, astfel încât să puteți încerca pe propriul site WordPress:

Centrați un element orizontal și vertical

Pentru a centra un element (cum ar fi o imagine, un text sau un div) atât pe orizontală, cât și pe verticală, utilizați următorul cod CSS:

.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

În acest cod, proprietatea position: relative este utilizată pentru a poziționa elementul în raport cu strămoșul său poziționat cel mai apropiat. top: 50% și left: 50% proprietăți mută elementul în centrul containerului său. În cele din urmă, proprietatea transform: translate(-50%, -50%) centrează elementul atât pe orizontală, cât și pe verticală, deplasându-l înapoi cu 50% din propria lățime și înălțime.

Schimbați culoarea linkului

.item-class{
color : blue;
}

Puteți folosi culori precum alb, negru, albastru, roșu... dar este posibil să doriți să utilizați anumite culori.

În acest caz, puteți proceda astfel:

.item-class{
color : #F7F7F7;
}

Dacă doriți să creați o paletă de culori pentru designul site-ului dvs. web, încercați să utilizați instrumentul Paletton. Este foarte util!

Notă: Dacă doriți să combinați elemente, este destul de ușor.

De exemplu, să presupunem că doriți să dezactivați clicul și să puneți linkul înapoi în negru.

Puteți folosi acest cod:

.item-class{
pointer-events : none;
color : black;
}

Eliminați un link

.item-class{
display : none;
}

Notă: uneori, poate fi necesar să puneți un a după clasă pentru ca aceasta să funcționeze, astfel:

.item-class a{
display : none;
}

Încercați să adăugați a sau să experimentați fără el pentru a vedea dacă codul dvs. funcționează sau nu. Doar adăugați CSS-ul, salvați și verificați interfața.

Dezactivați un link (linkul rămâne vizibil, dar utilizatorii nu pot face clic pe el)

Notă: este întotdeauna mai bine să modificați HTML pentru a face acest lucru, dar dacă CSS ar putea fi mai ușor sau singura soluție posibilă, utilizați acest cod:

.item-class{
pointer-events: none;
}

Schimbați culoarea linkurilor la trecerea cursorului

Puteți face ca linkurile să își schimbe culoarea atunci când un utilizator trece cu mouse-ul peste ele utilizând următorul cod CSS:


a:hover {
color: red;
}

În acest cod, selectorul a:hover vizează toate linkurile de pe pagina pe care utilizatorul trece cu mouse-ul în prezent. Proprietatea color: red schimbă culoarea textului în roșu.

Link-uri de stil

Pentru a stila link-urile de pe site-ul dvs., utilizați următorul cod CSS:


a {
color: #0077cc;
text-decoration: none;
border-bottom: 1px solid #0077cc;
transition: all 0.2s ease-in-out;
}

a:hover {
color: #005299;
border-bottom: 1px solid #005299;
}

În acest cod, a a este folosit pentru a stila toate linkurile de pe pagină. Proprietatea color setează culoarea legăturilor, iar proprietatea text-decoration elimină sublinierea implicită. Proprietatea border-bottom adaugă un efect subtil de subliniere. Proprietatea transition creează un efect de tranziție lină atunci când utilizatorul trece cu mouse-ul peste link. Selectorul a:hover este folosit pentru a stila linkul atunci când utilizatorul trece cu mouse-ul peste el.

Stilează un buton

Utilizați următorul cod pentru a stila un buton:


.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

În acest cod, diferitele proprietăți sunt folosite pentru a stila un buton, inclusiv background-color și proprietățile color pentru aspectul butonului, proprietatea padding pentru dimensiunea butonului și proprietatea cursor pentru a schimba cursorul mouse-ului când treceți cu mouse-ul peste buton.

Schimbați fontul unei secțiuni

Schimbați fontul unei secțiuni a site-ului dvs. web utilizând următorul cod CSS:


.section {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}

În acest cod, proprietatea font-family setează fontul la Arial sau un font similar sans-serif, proprietatea font-size setează dimensiunea fontului la 16 pixeli, iar proprietatea line-height stabilește distanța dintre liniile de text la 1,5. ori mărimea fontului.

Creați un antet lipicios

Dacă doriți să creați un antet care să rămână fix în partea de sus a paginii pe măsură ce utilizatorul derulează, puteți utiliza următorul cod CSS:


.header {
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 9999;
}

În acest cod, proprietatea position: fixed fixează antetul în partea de sus a ferestrei de vizualizare, iar proprietatea top: 0 îl poziționează chiar în partea de sus a paginii. width: 100% asigură că antetul se întinde pe întreaga lățime a ferestrei de vizualizare. background-color , color sunt folosite pentru a stila antetul, iar proprietatea z-index: 9999 asigură că antetul apare deasupra tuturor celorlalte elemente de pe pagină.

Creați un antet lipicios cu efect de umbră

Pentru a crea un antet lipicios cu un efect de umbră care rămâne fix în partea de sus a paginii pe măsură ce utilizatorul derulează, utilizați acest cod CSS:


header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.content {
padding-top: 100px;
}

În acest cod, proprietatea position: fixed ​​este utilizată pentru a fixa antetul în partea de sus a paginii. top: 0 și left: 0 proprietăți poziționează antetul în colțul din stânga sus al paginii. Proprietatea width: 100% setează lățimea antetului să fie lățimea completă a paginii. Proprietatea background-color setează culoarea de fundal a antetului, iar proprietatea z-index asigură că antetul apare deasupra altor elemente de pe pagină. În cele din urmă, proprietatea box-shadow adaugă un efect de umbră subtil la antet. Selectorul .content este folosit pentru a adăuga padding în partea de sus a paginii, astfel încât conținutul să nu fie acoperit de antetul fix.

EBOOK GRATUIT
Foaia ta de parcurs pas cu pas către o afacere profitabilă de dezvoltare web. De la obținerea mai multor clienți la scalarea ca un nebun.

Prin descărcarea acestei cărți electronice sunt de acord să primesc ocazional e-mailuri de la WPMU DEV.
Vă păstrăm e-mailul 100% privat și nu trimitem spam.

EBOOK GRATUIT
Planificați, construiți și lansați următorul dvs. site WP fără probleme. Lista noastră de verificare face procesul ușor și repetabil.

Prin descărcarea acestei cărți electronice sunt de acord să primesc ocazional e-mailuri de la WPMU DEV.
Vă păstrăm e-mailul 100% privat și nu trimitem spam.

Adăugați o culoare de fundal unei secțiuni

Doriți să adăugați o culoare de fundal unei secțiuni a site-ului dvs. web? Apoi utilizați următorul cod CSS:


.section {
background-color: #f2f2f2;
padding: 20px;
}

În acest cod, proprietatea background-color: #f2f2f2 setează culoarea de fundal la un gri deschis, iar proprietatea padding: 20px adaugă 20 de pixeli de spațiu în jurul conținutului din secțiune.

Schimbați culoarea de fundal a corpului

Adăugați acest cod pentru a schimba culoarea de fundal a corpului site-ului dvs.:


body {
background-color: #f5f5f5;
}

În acest cod, proprietatea background-color setează culoarea de fundal la un gri deschis.

Schimbați culoarea unui anumit cuvânt sau expresie

Pentru a schimba culoarea unui anumit cuvânt sau expresie dintr-un bloc de text, puteți utiliza următorul cod CSS:


p span {
color: red;
}

În acest cod, selectorul p span vizează orice element span care apare într-un element p . Apoi, puteți include cuvântul sau expresia pe care doriți să o vizați cu un element span în HTML, astfel:

<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Acest lucru ar face să apară în roșu sintagma „consectetur adipiscing elit”.

Creați o chenar în jurul unei imagini

Iată cum să adăugați un chenar în jurul unei imagini:


img {
border: 2px solid #ccc;
}

În acest cod, proprietatea border setează lățimea, stilul și culoarea chenarului. Valoarea 2px setează lățimea chenarului la 2 pixeli, solid setează stilul la o linie continuă și #ccc setează culoarea la un gri deschis.

Creați un efect de hover pe o imagine

Utilizați acest fragment de cod pentru a crea un efect de hover pe o imagine:


img:hover {
opacity: 0.8;
}

În acest cod, selectorul img:hover vizează imaginea atunci când utilizatorul trece cu mouse-ul peste ea. Proprietatea opacity stabilește transparența imaginii. În acest caz, valoarea este setată la 0,8, făcând imaginea ușor transparentă atunci când utilizatorul trece cu mouse-ul peste ea.

Stilați o formă

Stilați un formular pe site-ul dvs. cu următorul cod CSS:


form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}

form label {
display: block;
margin-bottom: 10px;
}

form input[type="text"], form input[type="email"], form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}

form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}

În acest cod, diferitele proprietăți sunt folosite pentru a stila un formular, inclusiv proprietățile background-color , padding și border-radius pentru aspectul general al formularului. Selectorul form label este utilizat pentru a stila etichetele asociate fiecărui câmp de formular. form input[type="text"], form input[type="email"], form textarea este folosit pentru a stila diferitele câmpuri de introducere din formular. Selectorul form input[type="submit"] este folosit pentru a stila butonul de trimitere.

Creați un aspect receptiv

Dacă doriți să creați un aspect receptiv care se adaptează la diferite dimensiuni de ecran, utilizați următorul cod CSS:


@media (max-width: 768px) {
/* Styles for screens smaller than 768px */
.container {
width: 100%;
}

.menu {
display: none;
}

.mobile-menu {
display: block;
}
}

@media (min-width: 769px) {
/* Styles for screens larger than 768px */
.container {
width: 768px;
margin: 0 auto;
}

.menu {
display: block;
}

.mobile-menu {
display: none;
}
}

În acest cod, regula @media este utilizată pentru a specifica diferite stiluri pentru diferite dimensiuni de ecran. Prima regulă @media vizează ecrane cu o lățime maximă de 768 px, iar a doua regulă @media vizează ecrane cu o lățime minimă de 769 px. Diferiții selectori din fiecare regulă @media sunt utilizați pentru a ajusta aspectul și aspectul paginii în funcție de dimensiunea ecranului.

Încă un sfat CSS...

Este posibil să găsiți că codul nu funcționează, deși ați făcut totul corect. Acest lucru se poate datora faptului că există deja un cod CSS care spune ceva diferit de codul dvs.

Pentru a înlocui acest lucru, trebuie doar să adăugați !important ca acesta:

.item-class{
pointer-events: none !important;
}

Acestea sunt doar câteva exemple de modalități practice în care puteți folosi CSS pentru a vă îmbunătăți site-ul WordPress.

Cu CSS, posibilitățile de personalizare a aspectului site-ului dvs. sunt practic nelimitate. Învățând și aplicând aceste sfaturi, puteți crea un site web care nu este doar atrăgător din punct de vedere vizual, ci și optimizat pentru o experiență mai bună a utilizatorului.

Du-ți abilitățile CSS la următorul nivel

Indiferent dacă sunteți un începător sau un dezvoltator web profesionist sau un designer web experimentat, dacă doriți să vă aprofundați în utilizarea CSS cu WordPress, aceste tutoriale suplimentare CSS vă vor ajuta să vă extindeți cunoștințele și abilitățile:

  • 10 Sfaturi simple pentru a învăța CSS pentru WordPress – Sfaturi practice pentru începătorii care doresc să învețe CSS special pentru utilizare cu WordPress. Acesta acoperă totul, de la înțelegerea sintaxei CSS la utilizarea cadrelor CSS.
  • Învățare și referire CSS pentru WordPress – Un ghid cuprinzător pentru învățarea și referirea CSS special pentru utilizarea cu WordPress. Acesta acoperă subiecte precum utilizarea Personalizatorului WordPress, înțelegerea selectoarelor CSS și lucrul cu teme secundare.
  • 7 cele mai bune site-uri pentru a găsi fragmente CSS și inspirație – Căutați ceva inspirație pentru codul dvs. CSS? Acest articol enumeră șapte site-uri web care oferă fragmente CSS și exemple pe care le puteți folosi în propriul site WordPress.
  • Cum să stilați imaginile pe site-ul dvs. WordPress cu CSS - Imaginile sunt o parte importantă a oricărui site web, iar acest articol oferă sfaturi despre cum să le stilați folosind CSS. Veți învăța cum să adăugați chenare, să schimbați dimensiunea și alinierea imaginii și multe altele.
  • Cum să adăugați CSS personalizat pe site-ul dvs. WordPress - Acest articol vă îndrumă prin procesul de adăugare a CSS personalizat pe site-ul dvs. WordPress, folosind atât Personalizatorul încorporat, cât și pluginurile.
  • Pluginuri CSS gratuite pentru editarea live a site-ului dvs. WordPress - Acest articol listează câteva plugin-uri CSS gratuite care vă permit să editați site-ul dvs. WordPress în direct, făcând mai ușor să vedeți efectele modificărilor dvs. CSS în timp real.
  • 14 Instrumente interesante de animație CSS pentru WordPress – Dacă doriți să adăugați câteva animații pe site-ul dvs. WordPress folosind CSS, acest articol listează câteva instrumente interesante pe care le puteți folosi pentru a face acest lucru.
  • Adăugați machete de zidărie și grilă pe site-ul dvs. WordPress folosind CSS - Acest articol explică cum să utilizați CSS pentru a adăuga machete de zidărie și grilă pe site-ul dvs. WordPress, creând un design mai atrăgător din punct de vedere vizual.
  • 25 de sfaturi de experți pentru o codificare CSS mai curată pentru WordPress – Dacă doriți să îmbunătățiți curățarea și lizibilitatea codului dvs. CSS, acest articol oferă 25 de sfaturi de experți pentru a face exact asta.
  • 25 Sfaturi profesioniste pentru îmbunătățirea fluxului de lucru CSS – Sfaturi pentru îmbunătățirea fluxului de lucru CSS, de la utilizarea preprocesoarelor CSS la utilizarea instrumentelor de dezvoltare a browserului pentru a vă depana codul.

Faceți clic pe linkuri pentru a afla mai multe și pentru a începe să vă îmbunătățiți site-ul WordPress astăzi.

Colaboratori

Tămâie Mulțumim lui Antoine , membru WPMU DEV, de la Incensy pentru contribuția cu ideea pentru această postare și cu câteva dintre exemplele CSS folosite mai sus. Consultați profilul de partener al agenției Incensy pentru mai multe detalii.

Am ratat vreun truc CSS ingenios pe care le-ați înțeles pe parcurs? Ne-ar plăcea să aflăm despre ele în comentarii!