casetă blockquote

Acum câteva luni am modificat codul meu WordPress pentru blockquote pentru a crea o mică cutie verde. Nu este nimic extraordinar, dar de atunci am folosit-o în diverse locuri cu destul de mult succes.

Mi-a crescut rata de click-uri către unii afiliați cu 2-3%.

A atras atenția asupra unor articole vechi pe care vreau să le subliniez.

Cel mai bun dintre toate, însă, a crescut dramatic numărul meu de înscrieri la email atunci când l-am folosit într-o postare pentru a-mi promova lista de corespondență.

În acest articol vă voi arăta cum să faceți una în doar cinci minute și apoi voi discuta cum să profitați la maximum de ea pe blogul dvs.

Chestii practice, yo!

Cum arată această cutie mică?

Bun, deci așa este configurată cutia mică să arate pe acest site.

Iată un exemplu. Este o modalitate drăguță de a atrage atenția asupra unui link sau pur și simplu de a face o anunțare despre ceva ce se întâmplă pe blogul dvs. Sunt sigur că există multe moduri în care poate fi folosită.

Acum, lucrul grozav la asta este că putem folosi fișierul Stylesheet din WordPress pentru a schimba o mulțime de elemente precum:

  • culoarea de fundal
  • bordura (linie punctată, linie întreruptă, linie continuă)
  • culoarea liniei
  • lățimea și spațierea
  • etc.

Deci, cum faci una? Ajungem și acolo!

Cum să faci o cutie alternativă pentru blockquote

Bun, așa cum am menționat la începutul articolului, această mică minunăție este un blockquote alternativ creat folosind fișierul Stylesheet al WordPress-ului dvs.

Implică o mică modificare de cod, dar este, de fapt, doar o chestiune de copiere și lipire, deci nu ar trebui să vă cauzeze prea multe probleme.

Dacă cineva știe o metodă mai bună, vă rog să-mi spuneți. Sunt mereu dornic să învăț.

1. Fă o copie de rezervă a fișierului Stylesheet original.

Înainte de a face orice modificări la foaia dvs. de stil, ar trebui întotdeauna să o copiați pe cea originală și să o salvați într-un loc sigur. Uneori faceți greșeli și dacă nu aveți multă experiență cu codarea, vă va fi greu să o reparați corect.

Pur și simplu conectați-vă la WordPress și accesați Aspect > Editor > Foaie de stil, apoi copiați codul într-un document Notepad sau ceva similar.

2. Găsiți codul dvs. pentru blockquote

Următorul pas este să găsiți codul dvs. curent pentru blockquote. Rămâneți în Foaia de stil și apăsați Control F (Command F pentru Mac) și tastați „blockquote”. Acesta va găsi codul, astfel încât să nu fie nevoie să derulați.

Iată cum arată al meu:

blockquote

Acesta este blockquote-ul obișnuit care apare pe blogul meu atunci când vreau să citez pe cineva. Are ghilimelele mici și nu seamănă deloc cu caseta verde de mai sus. Deci, următorul pas este să ajustați acel cod pentru a-l face să arate așa cum doriți.

3. Copiați codul și lipiți-l mai jos pentru a crea unul secundar

Următorul pas este să copiați codul blocului de citare și să lipiți noul cod direct sub cel vechi. Apoi redenumiți partea titlului cu ceva nou. Uitați-vă mai jos unde l-am redenumit eu „blockquote.new”.

al doilea blockquote

Acum codul dvs. are două blocuri de citare din care puteți alege.

4. Schimbați designul celui nou

Acum trebuie să faceți niște codări și să schimbați designul noului dvs. bloc de citare. Acest lucru este mult mai ușor decât pare. Practic, aveți un număr fix de elemente pe care le puteți schimba atunci când vine vorba de codarea CSS. Cele principale sunt marginea, spațierea interioară, culoarea de fundal și fontul.

Iată câteva pe care le puteți încerca mai jos:

modificări blockquote

Posibilitățile sunt nesfârșite aici, așa că folosește un site precum W3 Schools pentru a vedea ce va funcționa și ce nu. De asemenea, o diagramă de culori HTML precum aceasta este foarte utilă.

5. Folosiți blocul de citare într-o postare

Acum că ați codat noua dvs. creație, o puteți folosi în postările și paginile dvs. pur și simplu folosind aceleași etichete de bloc de citare, dar referindu-vă la micul nume nou pe care i l-ați dat. În acest exemplu, ați face:

<blockquote class=”new”> Your text goes in here. </blockquote>

Cum să profitați la maximum de caseta de bloc de citare

Iată câteva mici lucruri de luat în considerare atunci când folosiți acest mic „băiat rău” pe blogul dvs.

1. Nu exagerați

Vă rugăm să nu folosiți această mică casetă la fiecare postare și tot timpul. O parte din motivul pentru care este atât de eficientă este că cititorii dvs. nu o văd des și iese în evidență față de restul conținutului dvs. Dacă o folosiți în mod regulat, oamenii vor dezvolta „orbire” față de ea.

2. Nu o copiați pe a mea

Acum, vrem să facem ca acest lucru să iasă în evidență, dar nu vrem să îl facem atât de diferit încât să arate ca o reclamă sau ceva care nu face parte din site-ul dvs. Păstrați aceleași fonturi și asigurați-vă că culorile se potrivesc bine, chiar dacă sunt diferite de restul mărcii dvs. Nu o copiați pur și simplu pe a mea – nu se va potrivi cu site-ul dvs.

3. Testați-o

Ca întotdeauna, nu presupune doar că primul lucru pe care îl faci funcționează. Încearcă diferite culori și măsoară nu doar câte clicuri obții, ci și câte dintre acele clicuri se convertesc în înscrieri și vânzări.

4. Amintește-ți de textul publicitar

Nu presupune doar că vei obține clicuri doar pentru că ai o căsuță colorată drăguță. Asigură-te că creezi un text convingător care include elemente precum dovada socială, raritatea și așa mai departe. Testează și asta!

5. Renunță dacă nu funcționează

Acest tip de trucuri mici sunt minunat de entuziasmante atunci când descoperi altele noi. Mă entuziasmează cu adevărat implementarea unor astfel de lucruri pe blogurile mele. Dar, de asemenea, trebuie să fii pregătit să renunți la ele dacă nu funcționează sau dacă primești multe reclamații.

Vei încerca?

Mi-ar plăcea să știu dacă găsești acest gen de lucruri interesante. Mă joc mereu cu idei de genul acesta și m-am gândit că poate aș putea împărtăși mai multe – poate în fiecare weekend – dacă este ceva ce te interesează.

Vei încerca? Te rog să-mi spui în comentariile de mai jos.

44 Comentarii

Înscrieți-vă. Comentariile sunt închise după 30 de zile.

Adaugă un comentariu

Suntem bucuroși că ai ales să lași un comentariu. Te rugăm să ții cont că toate comentariile sunt moderate conform politicii noastre de confidențialitate, iar toate linkurile sunt nofollow. NU folosi cuvinte cheie în câmpul nume. Să avem o conversație personală și semnificativă.

Acest site folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariului tău.

  1. Michael Gorman on February 22, 2014

    Salut Ramsay,
    Nu mi-am dat seama că ești în Australia, eu sunt în Tasmania… Launceston. Această cutie verde a ta este grozavă, este uimitor cum variația aspectului unei pagini poate obține rezultate. Am folosit un plugin numit J-shortcodes pentru a adăuga o varietate de caracteristici precum aceasta, chiar și coloane pentru a obține acel efect de aspect „de revistă”. Dar cutiile colorate sunt foarte utile http://www.jshortcodes.com/ merită aruncat o privire. Salutări

    1. Ah, nu am auzit de asta. Sună grozav. Voi verifica.

      Toată lumea pe care o cunosc iubește Tasmania. Încă nu am ajuns acolo, dar este pe listă!

      Mulțumesc că ai trecut duminică!

  2. Australia este trează! Eu, un canadian, sunt gata să mă culc. Sună grozav. Voi încerca pe noul site web pe care tocmai l-am creat datorită ție, Ramsay. mphocus.com. Mulțumesc pentru inspirație! Trebuie, vreau să spun că trebuie să vizitezi Tasmania! Am fost acolo acum aproximativ un an și este fabulos. Cea mai bună prietenă a mea locuiește în suburbia Hobart. Aceasta este https://www.pjpaintings.com/ Anunță-mă dacă vizitezi

    1. Mulțumesc Averil.

  3. Ramsay, asta seamănă cu funcția casetei ET din multe teme (folosesc Personal Press pe blogul meu și editorul meu are această funcție). Este ușor de utilizat – pur și simplu fac clic pe casetă, aleg culoarea preferată și introduc text sau cod HTML și sunt gata de plecare.

    Trebuie să testez totuși culoarea verde 😀

    Mulțumesc pentru acest sfat.

    1. Mult succes!

  4. Îmi place mica ta casetă și îmi place noul antet albastru și bara laterală albastră. Este mult mai puțin deranjant decât portocaliul. Știai că folosesc portocaliu în restaurantele fast-food pentru a-i împiedica pe oameni să zăbovească? Sunt sigur că există un test A/B undeva.

    De asemenea, ai găsit informații despre blogul în blog?

    1. Bara laterală albastră?

      1. Cred că Rachelle se referă la bara ta Hello, Ramsay – testezi culorile portocaliu și albastru, corect?

        1. Caseta din bara laterală „Alătură-te celor 10.000 de utilizatori de jurnal”.

          1. Asta e gri. Decât dacă arată foarte diferit pe monitorul tău…?

  5. Cod Eek. Nu mulțumesc, pe curând 🙂

    1. Greg, Greg, Greg.

  6. Programare minunată. Cred că nu ar trebui să ne bazăm pe plugin-uri pentru nevoi mici de inovație. Această mică cutie poate face o treabă atât de mare dacă este exploatată bine. Important nu este cum o faci, ci cum o folosești.
    Mulțumesc Ramsay pentru că ai împărtășit o idee atât de grozavă.

    1. Michael Gorman on February 23, 2014

      Punctul tău despre a fi „dependent de plugin-uri” este una dintre acele atitudini pioase pe care oamenii pedanți le iubesc să le exprime în tonuri de mustrare – totuși plugin-ul în cauză este deosebit de versatil – ceea ce nu diminuează în niciun fel soluția codificată oferită de Ramsay, cred că este elegantă și foarte utilă.

      1. Sunt de acord cu amândoi.

        Singurul motiv pentru a nu folosi plugin-ul este dacă soluția de codificare este simplă și plugin-ul ar cauza doar supraîncărcare sau încetinire.

        În afară de asta, nu există cu adevărat niciun motiv pentru a nu folosi plugin-ul dacă este actualizat.

        Acum, fiți cuminți. 🙂

        1. Și cu condiția să vă evaluați în mod regulat toate plugin-urile pentru a vă asigura că sunt încă actualizate.

  7. Sfat bun Ramsey, adaugă un pic în plus la postare. Nu sunt un fan al prea multor plugin-uri pe site-ul meu și îmi place codul. Totuși, pe cel mai recent blog al meu folosesc Optimize Press, care are multe opțiuni de coduri scurte personalizate făcute pentru tine, așa că trișez :)

    1. Da, se pare că mulți oameni folosesc asta… Bună treabă.

  8. liz@lifedreaming on February 23, 2014

    Bună dimineața din Dublin, Ramsay

    Sfat minunat.

    Ceva ce am folosit în postările mele pentru a sparge textul dacă este Citatul. Este grozav pentru a sublinia un punct sau o listă de lucruri.

    Îmi place ideea unei alte casete colorate care apare din când în când pentru a promova ceva.

    Excelent ca de obicei.

    Liz

    1. Comentariu excelent ca de obicei. 🙂

  9. Folosesc cutii de genul acesta și pe blog, de exemplu pe pagina mea de pornire. Nu am atins codul original, totuși. Am folosit CSS personalizat.
    Tema mea are un „loc” pentru CSS personalizat unde pot, de exemplu, să creez noi div-uri și apoi să definesc cum arată.
    De exemplu, cutia albastră pe care o vedeți pe pagina mea de pornire este creată ca .my-featurebox.
    Așa că în locul meu pentru CSS personalizat am pus
    .my-featurebox {float:none; border-radius:7px;background:#dde9fd;color:#3366bb;font-size: 120%;padding: 30px 70px 20px 70px;}

    și apoi pe pagina mea principală pun tot ce vreau să fie în casetă

    Oamenii de pe forumul de suport pentru tema mea m-au învățat asta. În acest fel nu trebuie să te încurci în codul original.

    1. PS Cu siguranță sunt interesat de mai multe sfaturi de acest gen

      1. Nici nu e o idee rea, de fapt. Bine făcut, Sofie.

        1. Mulțumesc!

  10. Truc fain – ai crescut CTR-ul cu 2-3%, zici? Plec să încerc asta chiar acum!

    1. Susan O'Dea on February 23, 2014

      Sunt de acord cu tine! Am multe site-uri de afiliați care au nevoie de o mică trezire. Orbirea s-a instalat, așa că asta ar trebui să facă lucrurile să sară în ochi.

      Încă un sfat grozav de la un coleg australian. 😉

      1. Sper să ajute. Anunță-mă.

  11. Avinit Kumar on February 23, 2014

    Mulțumesc pentru ideea ta grozavă, voi încerca acest truc pentru pagina mea

    1. Sper să ajute.

  12. Salut Ramsay,

    Ce coincidență! Tocmai am început să implementez asta pe blogul meu săptămâna trecută.

    Obișnuiam să am un formular generic de înscriere la sfârșitul fiecărui post, dar l-am eliminat, deoarece nu a performat bine și, în schimb, adaug un formular de înscriere în mijlocul anumitor postări, oferind un cadou gratuit legat de subiectul acelei postări specifice.

    În cel mai recent post al meu despre cum am obținut peste 140 de +1-uri pe un singur post de blog pe Google+, am spus că crearea unei imagini captivante pentru postarea mea a făcut toată diferența. Apoi am folosit strategia „cutiei verzi” și am oferit un webinar gratuit pentru a ajuta oamenii să-și creeze propriile imagini grozave.

    Mulțumesc pentru distribuire! Cred că acesta este un sfat grozav pe care sper că mulți oameni îl vor folosi, în ciuda codului înfricoșător 😉

    Galen

    1. Ups! Am greșit linkul în ultimul meu comentariu, așa că, în cazul în care cineva vrea să vadă exemplul despre care vorbeam pe blogul meu, îl poate vedea la

      SuccessMeasured.com

      1. Grozav! Foarte frumos lucrat, într-adevăr. Mulțumesc pentru distribuire.

  13. Colleen Conger on February 23, 2014

    Salut, Ramsay!

    Acesta este primul meu comentariu pe blogul tău. Încă îmi dau palme că nu am trecut mai devreme. **face palm**

    Așa că mă întreb dacă recomanzi schimbarea codului într-un fișier stylesheet (sau pe un child theme) în loc să folosești un plugin precum Shortcodes Ultimate pentru a crea cutiile coolio, așa cum le-ai descris.

    Știu, pluginurile au tendința de a încetini site-urile WP, dar la naiba, sunt atât de la îndemână și ușor de folosit și nu trebuie să atingi codul.

    Părerile tale?

    Colleen Conger @ DigiPD.com

    1. Da, nu văzusem acest plugin, dar arată foarte bine. Mulți oameni de aici l-au recomandat, așa că cred că îl voi verifica.

  14. Rulez multi-site împreună cu cel puțin 40 de pluginuri pentru unul dintre proiectele mele, așa că încerc să codez funcționalități de genul acesta pentru a evita conflictele și problemele de performanță.

    Mulțumesc pentru tutorial!

    1. 40 de pluginuri!!!! Pentru ce, la naiba?

  15. Atât de simplu, totuși nu cred că am văzut asta folosit atât de des. Va trebui să încerc asta cândva. Sfat excelent!

    1. Mulțumesc Brian.

  16. Nica Mandigma on February 24, 2014

    Folosesc ceva asemănător la sfârșitul postărilor mele folosind un plugin numit „What Would Seth Godin Do”. Voi face niște modificări – o voi face verde – și vă voi anunța cum merge 🙂

    1. Plugin clasic.

    2. Wess Stewart on February 24, 2014

      Folosesc și eu WWSGD. Nu m-am gândit niciodată să schimb codul CSS pentru el, totuși. Idee grozavă, Ramsay!

  17. Brian Jones on February 25, 2014

    Salut, mulțumesc pentru acest sfat grozav, voi încerca, mulțumesc pentru împărtășire

  18. 8 Ways To Effectively Promote Your Services Through Blogging | Tweak Your Biz on March 24, 2014

    […] pe care îl primește. Dacă promoția ta nu se potrivește bine în contextul articolului, poți folosi un „callout” pentru a o separa de textul postării, marcând-o clar ca promoție sau reclamă. Poți menționa pe scurt […]

BlogTyrant pe tabletă și mobil
Ghid Ebook Gratuit
Trusa de Blogging Supremă + Bonusuri

Alătură-te celor peste 30.000 de abonați la e-mail pentru actualizări ale blogului și obține acces instantaneu la un ghid de 10.000 de cuvinte despre cum să începi un blog și să construiești o afacere sustenabilă folosind cercetarea cuvintelor cheie, traficul Google și o mulțime de strategii testate. Lasă-ne să te ajutăm să construiești un blog care să-ți susțină venitul familiei și să ajuți comunitatea în timp ce ești la asta!