Se siete nuovi qui, potrebbe essere utile per iscriversi al mio feed RSS. Grazie per la visita!
Cassette di Johnson sono una di quelle cose che si riferisce a tutti e si presuppone che tutti sanno tutto di loro e come fare -, ma nella mia esperienza non è così. In seguito l'opzione 'pagina pulita' della scorsa settimana che la maggior parte macchiata come un potenziale di vendita / pagina squeeze sembra logico seguire con un po 'di Scatole Johnson.
Per chi non lo sa, sono quelle colorate scatole con una linea continua o rotti intorno a loro che il testo una certa enfasi, di solito una prestazione del prodotto, o il prezzo di vendita - qualsiasi cosa tu voglia attirare l'attenzione. Si tratta di un metodo collaudato di aumentare le conversioni. Così come si fa a farli?
Prima di tutto è necessario il bit di codice di andare nella tua custom_css.php che specifica lo stile e il tipo di casella, quindi si NED a mettere qualcosa nel testo di una pagina che richiama quella casella.
Una versione semplice è qui di seguito - è possibile elaborare su di essa come ti pare, ma questo vi darà una scatola di base
/*--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*/
Questo vi darà una casella centrato con testo centrato e una linea continua intorno ad esso. La linea solida non vuole essere molto più di 4px e spesso di meno. Se si desidera un bordo rotto basta sostituire 'solidi' con 'dashed'. Se volete un altezza di liquido per la casella, basta perdere la linea di altezza.
Per utilizzare al posto della casella di testo seguente nella vostra pagina (usando l'editor html, e non quello visivo in WP)
<div id="johnson-box">
YOUR TEXT AND IMAGES HERE
</div>
Questo è ciò che ho usato per generare la casella sottostante se il colore più comune per il confine è # cc0000
/*--Johnson-Box--*/
div#johnson-box{
display: block;
background: #f3edfc;
border: 4px dashed #cc99ff;
width: 600px;
height:60px;
text-align: center;
}
/*--End Johnson-Box*/
e questo è ciò che ho messo nella mia pagina: --
<div id="johnson-box">
This is a Johnson Box
</div>
Se si desidera più di uno stile di Johnson Box quindi semplicemente dare ciascuno un nome diverso div.
È inoltre possibile utilizzare uno stile in linea, ma trovo la versione CSS più facile quando io sono la creazione di modelli, ma per amor di completezza: ecco il codice che si usa l'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>
Questo può essere un po 'di base per alcuni di voi, ma io spero che sia utile a qualcuno là fuori.
comment } (1 comment)
