Les réflexions et les murmures d'un Wanderer Net, Online Marketer et Grumpy Old Woman!

Boîtes Johnson sont une de ces choses que tout le monde se réfère et suppose que tout le monde sait tout sur eux et sur la façon de les faire - mais, dans mon expérience, ils n'en ont pas. À la suite de l'option 'page propre »la semaine dernière, la plupart des gens repéré comme un potentiel de vente / page squeeze il semble logique de faire suivre d'un peu de boîtes Johnson.

Pour ceux qui ne savent pas, ils sont ceux de couleur des boîtes avec une ligne continue ou brisée autour d'eux que l'accent du texte, habituellement un des avantages du produit, ou le prix de vente - ce que vous voulez attirer l'attention. Ils constituent une méthode éprouvée de conversions augmente. Alors, comment pouvez-vous les faire?

Tout d'abord il vous faut le morceau de code pour entrer dans votre custom_css.php qui spécifie le style et le type de votre machine, alors vous NED mettre quelque chose dans le texte de votre page qui appelle cette case.

Une version simple est donnée ici - vous pouvez élaborer sur ce que vous s'il vous plaît, mais cela vous donnera une boîte 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*/

Cela vous donnera une zone centrée sur le texte centré et une ligne solide autour d'elle. La ligne continue ne veut pas être beaucoup plus que 4px et souvent moins. Si vous voulez une frontière brisée il suffit de remplacer «solide» par «en pointillés». Si vous voulez une hauteur de fluide pour votre boîte, Miss juste hors de la ligne de hauteur.

Pour utiliser la boite placez les éléments suivants dans le texte de votre page (en utilisant l'éditeur HTML, et non le visuel dans WP)

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

C'est ce que j'ai utilisé pour générer la case ci-dessous si la couleur la plus courante pour la frontière est # CC0000

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

et c'est ce que je mets dans ma page: --

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

Si vous souhaitez plus d'un style de Johnson Box puis juste donner à chacun de paramétrer un nom div différentes.

Vous pouvez également utiliser un style en ligne mais je trouve la version CSS plus facile quand je vais mettre en place des modèles mais, par souci d'exhaustivité, voici le code que vous utiliseriez dans l'éditeur 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>


Cette mai-être un peu de base pour certains d'entre vous mais j'espère que cela est utile à quelqu'un là-bas.

comment } (1 commentaire)