Si eres nuevo aquí, puede que quiera suscribirse a mi RSS feed. Gracias por su visita!
Cajas de Johnson es una de esas cosas que se refiere a todo el mundo y asume que todo el mundo sabe de ellos y cómo hacerlo - pero en mi experiencia no lo hacen. A raíz de la opción "página en blanco 'la semana pasada que la mayoría de la gente vio como un potencial de ventas / página compresión parece lógico seguir con un poco de Cajas de Johnson.
Para quien no lo sabe, que son los cuadros de color con una línea sólida o rota alrededor de ellos que algún texto énfasis, por lo general un beneficio del producto, o el precio de venta - todo lo que quieras llamar la atención. Se trata de un método probado para el aumento de conversiones. Entonces, ¿cómo hacen?
En primer lugar se necesita el trozo de código que ir en su custom_css.php que especifica el estilo y el tipo de caja, a continuación, la NED para poner algo en el texto de su página en la que llama a ese cuadro.
Una versión sencilla se da aquí - se puede elaborar en ella lo que quieras, pero esto le dará un cuadro básico
/*--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*/
Esto le dará una caja centrada con el texto centrado y una línea sólida alrededor de él. La línea continua no quiere ser mucho más que 4px y con frecuencia menos. Si desea una frontera rota, justo sustituir "sólido" con "guiones". Si desea una altura de líquido para su cuadro, simplemente te pierdas la línea de altura.
Para utilizar el lugar siguiente en el cuadro de texto de su página (usando el editor de HTML, no el visual en WP)
<div id="johnson-box">
YOUR TEXT AND IMAGES HERE
</div>
Esto es lo que utiliza para generar el cuadro de abajo aunque el color más habitual de la frontera es # cc0000
/*--Johnson-Box--*/
div#johnson-box{
display: block;
background: #f3edfc;
border: 4px dashed #cc99ff;
width: 600px;
height:60px;
text-align: center;
}
/*--End Johnson-Box*/
y esto es lo que puse en mi página: --
<div id="johnson-box">
This is a Johnson Box
</div>
Si desea más de un estilo de Johnson Caja entonces sólo dar a cada uno configurar un nombre diferente div.
También puede utilizar un estilo en línea, pero me parece la versión de CSS más fácil cuando me la creación de plantillas, pero en aras de la exhaustividad, aquí está el código, que se usaría en el 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>
Esto puede ser un poco básico para que algunos de ustedes, pero espero que sea útil a alguien por ahí.
comment } (1 comentario)
