Recent, unul dintre cititorii noștri care nu a avut versiunea Pro a Elementor ne-a provocat cum ar putea adăuga CSS personalizat pe site-ul său.

Deoarece problema este puțin mai complexă, ne-am gândit că mai mulți utilizatori s-ar putea confrunta cu această problemă. Așa că am decis să oferim un articol detaliat despre cum să ajungem acolo.

În acest articol, vă vom arăta cum să adăugați cu ușurință CSS personalizat la o pagină sau un site web Elementor.

Cele trei modalități de a adăuga CSS personalizat la o pagină sau un site Web Elementor sunt următoarele:

  • Adăugați cod CSS prin elementul HTML.
  • Prin intermediul pluginului Cod de fragment.
  • Folosind Elementor Theme Customizer

Metoda 1: Adăugați cod CSS din elementul HTML al Elementor

Utilizați această metodă dacă doriți să adăugați CSS doar la o singură pagină.

Pasul 1: glisați și fixați elementul Elementor HTML

Puteți plasa acest element HTML oriunde pe pagină și va funcționa foarte bine.

Pasul 2: Faceți clic pe pictograma Editați HTML

Faceți clic pe pictogramă Editați html în dreapta elementului Elementor HTML. Dacă faceți clic pe acesta, va apărea o casetă de instrumente de editare HTML în partea stângă a ecranului.

Pasul 3: Adăugați codul CSS

  1. Faceți clic pe filă Conținut și deschideți lista derulantă Cod HTML.
  2. Plasați codul CSS în balize.

Metoda 2: CSS personalizat pentru Elementor prin pluginul Fragmente de cod

Avantajele utilizării pluginului Fragmente de cod:

  • Dacă doriți să modificați sau să vă actualizați tema WordPress, CSS va fi întotdeauna aplicat.
  • Acesta este cel mai convenabil și eficient mod de a adăuga cod CSS, deoarece puteți activa sau dezactiva codul CSS, cum ar fi pluginurile.

Pasul 1: deschideți meniul extensiilor de pe tabloul de bord

Pasul 2: Adăugați un nou plugin

Faceți clic pe buton Add-On »Pentru a accesa pagina pentru adăugarea de pluginuri noi.

  1. Căutați pluginul " Fragmente de cod ".
  2. Instalați-l făcând clic pe buton instalați acum odată ce rezultatele cercetării sunt pozitive.

Pasul 3: Activați pluginul

CSS personalizat la Elementor

Faceți clic pe buton activa »Odată ce instalarea este finalizată pentru a activa pluginul Fragmente de cod.

Pasul 4: Deschideți pagina pluginului și adăugați un fragment de cod

  1. Deschideți meniul extracte din tabloul de bord
  2. Faceți clic pe butonul Nouveau pentru a adăuga un nou fragment de cod

Pasul 5: creați un fragment și activați-l

  1. Dați un nume fragmentului de cod.
  2. În interiorul etichetei, scrieți codul. Acest cod este disponibil mai jos pentru copiere.
  3. Faceți clic pe buton Salvaţi Modificările Pentru a salva fragmentul de cod.
  4. După salvarea CSS, faceți clic pe „ activa Pentru a activa codul CSS.

Copiați codul

add_action( 'wp_head', function () { ?>
<style>
//VOTRE CODE ICI
</style>
<?php } );

Metoda 3: utilizați Elementor Theme Customizer

Notă: Aveți grijă înainte de a utiliza această metodă, deoarece dacă schimbați tema, veți pierde acest CSS personalizat.

Pasul 1: Deschideți tema de personalizare

CSS personalizat la Elementor

Accesați site-ul dvs. web și faceți clic pe opțiunea de personalizare din bara de navigare de sus. Aceasta va deschide o fereastră de personalizare a temei.

Pasul 2: Faceți clic pe fila CSS suplimentară


Aceasta va deschide pagina de intrare CSS.

Pasul 3: Adăugați codul CSS

CSS personalizat la Elementor

Bun ! Acum știți cum să adăugați cu ușurință CSS personalizat la o pagină sau un site web Elementor. Acest lucru va face mai flexibil designul paginilor web unice în Elementor Free.

Obțineți Elementor Pro acum!

Descoperiți și câteva plugin-uri premium WordPress  

Puteți folosi altele WordPress plugin-uri pentru a oferi un aspect modern și pentru a optimiza gestionarea blogului sau site-ului dvs.

Vă oferim aici câteva plugin-uri WordPress premium care vă vor ajuta să faceți asta.

1. FileBird

Filebird

Te-ai chinuit vreodată să gestionezi mii de fișiere de imagini, video sau documente pe care le-ai încărcat pe FTP-ul tău WordPress? da sau nu, nu contează, important este să știi că WordPress plug-in FileBird vă va ajuta să vă gestionați fișierele media cu ușurință și să aduceți mai multă putere bibliotecii dvs.

Interfața sa fără probleme de utilizator și meniul contextual permit utilizatorilor să tragă și să arunce fișiere în foldere sau să aibă drepturile necesare pentru a crea, redenumi sau șterge rapid folderele în același mod ca și în computer.

Cu acest plugin în mână, fișierele dvs. media vor fi organizate în mod sistematic și puteți selecta cu ușurință o imagine pentru a o insera într-o pagină sau a o publica. În plus, acest plugin este pe deplin compatibil cu cele mai populare pluginuri, în special cu WooCommerceși, de asemenea, acceptă un număr mare de limbi.

Pentru a afla mai multe, descoperiți Cum de a gestiona fișiere și foldere WordPress

Deci, dacă doriți să dați un impuls gestionarea bibliotecii media, WordPress plug-in FileBird ar putea fi arma ta secretă.

DescarcaDemo | web hosting

2. Ultimate WooCommerce Categorii Extinse

Categorii extinse de woocommerce

Ce WordPress plug-in vă permite să modificați cu ușurință listele lungi de categorii plictisitoare WooCommerce și să le înlocuiți cu diferite niveluri de sub-articole într-un meniu acordeon.

Principalele sale funcționalități sunt: ​​posibilitatea activării acestuia și, în cele din urmă, funcționarea automată (nu sunt necesari parametri!), Suportul pentru mai multe niveluri de categorii (categorii, subcategorii, etc ...), evidențierea categorie activă, deschiderea tuturor categoriilor părinte dacă categoria curentă se află în interior, compatibilitate cu oricare Tema WooCommerce, sensibil la dorință, actualizări gratuite și o asistență clienți foarte activă.

Descarca | Demo | web hosting

3. WavePlayer

După cum ați putea ghici din nume, WavePlayer este un plugin de redare audio care preia forma de undă a fișierului audio redat. Cu acest plugin, puteți găzdui piese sau pur și simplu îl puteți integra cu alte servicii de streaming.găzduire în cloud, cum ar fi SoundCloud.

Pluginurile wordpress premium Waveplayer adaugă player audio

Poate fi folosit și în scopuri de podcasting și oferă alte caracteristici precum: suport HTML5, aspect receptiv, integrare WooCommerce etc.

De asemenea, veți putea crea vizual o listă de redare înainte de ao publica. O altă caracteristică esențială este viteza și eficiența sa.

Descarca | Demo | web hosting

Resurse recomandate

Aflați despre alte resurse recomandate pentru a vă ajuta să construiți și să gestionați site-ul dvs. web.

Concluzie

Aici ! Gata pentru acest tutorial, sperăm că vă va ajuta să adăugați gratuit CSS personalizat la Elementor. Nu ezita sa împărtășiți cu prietenii de pe rețelele de socializare preferate

Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress.

Dacă aveți sugestii sau observații, lăsați-le în secțiunea noastră comentarii.

...