Muzică şi mutterings a unui Wanderer Net, online marketing şi Grumpy Old Woman!

Cutii Johnson sunt unul din acele lucruri care se referă la toată lumea şi se presupune că toată lumea ştie totul despre ei şi modul de realizare a ei - dar din experienta mea nu. În urma opţiune pagina "clean ', săptămâna trecută, pe care majoritatea oamenilor cu pete ca un potenţial de vânzări / pagina stoarce se pare logic să o urmeze sus cu un pic despre Cutii Johnson.

Pentru cine nu stie, acestea sunt cele colorate cutii cu o linie de solide sau rupt în jurul lor că accentul un anumit text, de obicei un beneficiu al produsului, sau preţul de vânzare - tot ce vrei să atragă atenţia. Ele sunt o metodă dovedit de creşterea numărului de conversii. Deci, cum a face tu să le facă?

Mai întâi de toate aveţi nevoie de biţi de cod pentru a merge în custom_css.php dumneavoastră, care specifică stilul şi tipul de cutie dvs., apoi atunci tu Ned pentru a pune ceva în textul paginii dvs. pe care apelurile de până această casetă.

O versiune simplă este dat aici - vă pot elabora pe ea ca tu, te rog dar acest lucru vă va oferi o cutie de bază

/*--Johnson-Box--*/
div#johnson-box{
display: center;
background: #YOUR-COLOR-CHOICE-HERE;
border: YOUR-BORDER-WIDTH-HEREpx solid #YOUR-COLOR-CHOICE-HERE;
width: YOUR-WIDTH-HEREpx;
height:YOUR-HEIGHT-HEREpx;
text-align: center;
}
/*--End Johnson-Box*/

Acest lucru vă va oferi o casetă cu text centrat centrat si o linie de solide rotund ea. Linie solidă nu vrea să fie mult mai mult decât 4px şi, adesea, mai puţin. Dacă doriţi o frontieră rupt doar înlocui denumirea de "solide" cu "punctate". Dacă doriţi o înălţime de lichide pentru caseta dvs., doar pierde linia de înălţime.

Pentru a utiliza caseta de locul următoarele în textul pagina dvs. (folosind editor HTML, nu un vizual în WP)

<div id="johnson-box">
YOUR TEXT AND IMAGES HERE
</div>

Aceasta este ceea ce am folosit pentru a genera caseta de mai jos, deşi culoare mai uzuale pentru a frontierei este # cc0000

/*--Johnson-Box--*/
div#johnson-box{
display: block;
background: #f3edfc;
border: 4px dashed #cc99ff;
width: 600px;
height:60px;
text-align: center;
}
/*--End Johnson-Box*/

şi aceasta este ceea ce am pus în pagina mea: --

<div id="johnson-box">
This is a Johnson Box
</div>

Dacă doriţi mai mult de un stil de Johnson Box apoi doar să stabilesc fiecare un nume diferit div.

Puteţi folosi, de asemenea, un stil de linie, dar mi se pare versiunea CSS mai uşor atunci când eu sunt crearea template-uri, dar pentru titlu suplimentar aici este cod, pe care ar trebui să utilizaţi în editor HTML.

<div style="display: center; background: #YOUR-COLOR-CHOICE-HERE; border: 1px solid #YOUR-COLOR-CHOICE-HERE; width: YOUR-WIDTH-HEREpx; height:YOUR-HEIGHT-HEREpx; text-align: center;">
YOUR TEXT AND IMAGES HERE
</div>


Acest lucru poate fi un pic de bază pentru unii dintre voi, dar sper că este util să se pe cineva acolo.

comment } (1 comentariu)