Se você é novo aqui, você pode querer assinar o meu feed RSS. Obrigado por visitar!
Johnson caixas são uma daquelas coisas que se refere a todos e supõe que todo mundo sabe tudo sobre eles e como fazê-las -, mas na minha experiência, eles não. Seguindo a opção 'Página limpo "na semana passada que a maioria das pessoas manchado como um potencial de vendas / squeeze página parece lógico para segui-lo até com um pouco sobre Johnson Boxes.
Para quem não sabe, são aquelas caixas coloridas com uma linha contínua ou interrompida em torno deles que a ênfase de algum texto, geralmente um benefício do produto, ou o preço de venda - o que você quiser chamar a atenção. Eles são um método comprovado de aumentar as conversões. Assim como você fazê-las?
Primeiro de tudo você precisa de um pedaço de código para ir em seu custom_css.php que especifica o estilo e tipo de sua caixa, então você ned para colocar algo no seu texto de página que chama até que a caixa.
Uma versão simples é dado aqui - você pode elaborar sobre ele como quiser, mas isso vai lhe dar uma caixa de 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*/
Isso lhe dará uma caixa com o texto centrado centrado e uma linha sólida em volta dela. A linha sólida não quero ser muito mais do que 4px e muitas vezes menos. Se você quiser uma borda quebrada apenas substituir 'solid' com 'dashed'. Se você quer uma altura de fluido para sua caixa, apenas perder a linha de altura.
Para usar a caixa de colocar o seguinte texto na sua página (usando o editor de HTML, não um visual em WP)
<div id="johnson-box">
YOUR TEXT AND IMAGES HERE
</div>
Isto é o que eu usei para gerar o quadro abaixo que a cor mais usual para a fronteira é # 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 é isso que eu coloquei na minha página: --
<div id="johnson-box">
This is a Johnson Box
</div>
Se você quer mais do que um estilo de Johnson Box seguida, basta dar a cada um criar um nome diferente div.
Você também pode usar um estilo inline, mas eu acho a versão do CSS mais fácil quando estou a criação de modelos, mas para o supletivo aqui é o código que você usaria no editor de 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>
Este pode ser um pouco de base para alguns de vocês, mas eu espero que seja útil a alguém lá fora.
comment } (1 comentário)
