Pages

jeudi 21 avril 2011

Pages ventes avec style - Créer de la qualité des pages de ventes avec CSS

pages de vente, pour être efficace, doit immédiatement attirer l'attention de même un internaute occasionnel. Le message de vente figurant dans la page de vente doit être à la fois facile à lire et à comprendre. Si le style de contenu d'affichage est bien conçu, le message de vente peuvent être absorbés avec juste une page balayage rapide. Un lecteur intéressé de relire la page pour les détails.

copie de vente prévoit le contenu qui incite le lecteur à aller plus loin dans la page vers le "Commander maintenant" bouton.

Le travail d'une feuille de style en cascade (CSS), est de

     * Faciliter la navigation entre les pages,
     * Améliorer la lisibilité, et
     attirer l'attention * au contenu important.

Il ya beaucoup d'articles et de livres électroniques disponibles sur le Web sur l'écriture * * rentables copie de ventes. Vous pouvez facilement les trouver avec une recherche rapide. Cet article se concentre sur * style * la page de vente et de son contenu avec CSS.

Il ya plusieurs avantages à utiliser CSS pour le style d'affichage. Une des meilleures raisons est qu'il libère le rédacteur des préoccupations initiales au sujet de la mise en page. Utilisation très simple code HTML, telle que celle autorisée pour les soumissions au EzineArticles, le contenu de la page peut être écrit avec n'importe quel éditeur de texte de base sans se préoccuper de mise en forme du contenu spécial.

Avant toute mise en forme CSS a été appliquée, la page de vente ne serait pas convertir toutes les perspectives. A ce stade, le document HTML contient tous les * * contenu qui sera utilisé. Texte et images sera généralement placé sur la page dans l'ordre dans ces éléments seront utilisés dans la page de vente final. CSS fera tout * * * pop et piquant * quand il est appliqué à la page.

Après la copie de vente est écrit, important des éléments de page (identifiés grâce à des balises HTML) et le contenu (informations entre les balises HTML) peuvent être identifiés et liés à la mise en code CSS échéant, contenues dans un fichier texte CSS séparé, pour l'affichage du navigateur. Un article précédent de la mine, publié au MagazineVideo, explique comment le contenu HTML devient lié au fichier CSS. En bref, le lien HTML-CSS se fait par la balise HTML meta "lien" et le contenu est identifié par des attributs class et id tag et par l'utilisation de la balise HTML span.

style de contenu spécifique comprend le formatage du texte spéciales, telles que le surlignage et les citations, et le placement des articles tels que des images et des formes dans la page.

Je tiens à afficher le contenu à peu près la moitié médiane de l'affichage du moniteur et de l'utilisation d'une longueur de ligne d'environ 60 caractères. J'aime aussi d'utiliser une taille de police suffisamment grande pour faire des blocs de texte facile à lire.

Parce que la mise en page est si important, je utiliser une conception de la table fixe pour le contenu: le contenu est placé dans le centre de l'écran et est encadré par le droit dans l'échelle et les marges de gauche et étroites marges supérieure et inférieure. Si la largeur de la page du navigateur est réduite par le lecteur, les marges droite et gauche, mais tout aussi étroite de la zone de contenu restera la même largeur, et donc la mise en page le contenu demeure la façon dont il a été conçu (c.-à-pas "liquide") .

Essentiellement, ma mise en page de base se compose de 4 imbriqués "boîtes"

     * HTML Box - délimitée par des balises html et contient toutes les autres cases.
     * CORPS Box - délimitées par des balises corps et contient les cases à table et principal contenu.
     * Table Box - délimitées par des balises table et contient la boîte principale du contenu.
     * Main-Contenu de la boîte - délimitée par des balises div et contient le contenu des ventes-page.

La boîte de HTML inclut la totalité du document HTML (à l'exception de la déclaration de document-type). La boîte contient tout ce corps visible pour le lecteur. La boîte contient le tableau de la page de vente. La boîte de Main-Content, comme son nom l'indique, comprend tout le contenu visible de la page de vente.

Une page de vente requiert à la fois style global et spécifique au contenu CSS. style global comprend des considérations telles que le fond de page, police par défaut et les attributs de ligne, et les marges de page. Voici le code mondial-je inclure dans mon fichier texte CSS pour les pages de vente:

     body {

     font-size: 62,5%;

     font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;

     color: black;

     line-height: normal;

     background-image: Indiquez l'URL de l'image ici;

     }

     # {Main_content

     font-size: 1.6em; / * Ceci définit la taille de police par défaut pour la page de vente et d'affichage à 16px * /

     margin: 5%;

     }

     h1 {

     font-size: 2.25em; / * affiche à 36px * /

     }

     h2 {

     font-size: 1.5em; / * affiche à 24px * /

     }

     h3 {

     font-size: 1.25em; / * affiche à 20px * /

     }

     h4 {

     font-size: 1.125em; / * affiche à 18px * /

     }

     table.sales-letter {

     largeur: 60em;

     margin-left: auto;

     margin-right: auto;

     table-layout: fixed;

     background: # ffffff;

     }

Le code du corps ci-dessus définit la valeur par défaut pour la taille des caractères du document à 62,5% de 16px 10px ou (px = pixels). C'est trop petit pour ma page de vente, et je l'ajuster dans la section main_content #. Le code CSS corps définit également la couleur de la police au noir, l'interligne à la normale, la famille de police de sans-serif (avec Verdana comme premier choix), et spécifie une image de fond bleu utilisé pour le fond du corps.

J'utilise le code main_content # pour définir la taille réelle de la police de base-je utiliser pour le texte de la page de vente. Toutes les tailles de police d'autres dans la page de vente sont de taille par rapport à cette base. Sauf indication contraire, tout le texte dans la page de vente sera 1.6em ou 16px. Je utiliser l'attribut de marge pour fournir un espace contenu entre le contenu et les bordures autour du contenu.

Le "Hn" tags définir la taille d'en-tête de base et sont calculés en fonction de la taille de police que je spécifiée pour le main_content #. A titre d'exemple, depuis que je vais utiliser une taille de police par défaut de 16px pour le contenu des ventes-page, la taille de police H1 serait 2.25x16px ou 36px. Le "Hn" balises peuvent ensuite être modifiées avec des attributs supplémentaires, tels que la couleur et de centrage.

Le tableau des attributs CSS j'utilise place la page de vente dans près de la moitié médiane de la page d'affichage pleine grandeur (1024x768 pixels). La largeur de la table, 600px, est juste juste pour la longueur de la ligne que je veux utiliser. Comme l'attribut table-layout est «fixe», la disposition de table dans le navigateur sera conservé en tout temps.

Comme toutes les tailles de police sont par rapport à la taille de la police je me mis dans la section # main_content, toutes les tailles peuvent être faites plus ou moins en changeant juste la valeur un. Pour plus d'informations sur l'utilisation de EMS pour le calibrage, je dirais une visite à un billet de blog de Richard Rutter.

Après la mise en forme globale est appliquée page a maintenant un certain contenu gentil d'apparence structure.the se trouve maintenant entre les frontières attrayant et le contenu se trouve sur une "page" avec des marges adéquates et sur un fond de choix.

Voici 12 conseils supplémentaires, y compris le code CSS, vous pouvez utiliser pour styliser les éléments spécifiques et le texte dans vos pages de vente.

(1) Je veux que mon titre pour être grand, gras, rouge, et centré. Voici le code CSS que j'utilise:

     h1.headline {

     line-height: 1,5;

     color: # CC0000;

     text-align: center;

     }

(2)-je utiliser un plus petit, bleu, gras, centré et sous-titre.

     h2.subheadline {

     line-height: 1,5;

     couleur: # 1b356e;

     text-align: center;

     }

(3)-je utiliser une police de petite taille pour le texte de l'araignée et le droit d'auteur. Je poste le texte araignée au haut de la page au profit des moteurs de recherche.

     # Spidertext, # {copyright

     font-size: 1.2em;

     }

(4)-je utiliser du code CSS à la position de mon image de sorte qu'il «flotte» à droite et à n'importe quel texte sur les flux à gauche autour de la photo.

    . Photo {

     float: right;

     display: inline;

     }

(5) Si vous voulez des titres de section centre et la couleur du texte en rouge ou bleu, voici le code utilisable:

     h3.red {

     line-height: 1,5;

     color: # CC0000;

     text-align: center;

     }

     h4.blue {

     line-height: 1,5;

     couleur: # 1b356e;

     text-align: center;

     }

(6)-je changer le type de police pour les citations. Utilisation Courier New définit les guillemets mis à part le corps du texte normal.

    . Citation {

     font-family: "Courier New", Courier, monospace;

     }

(7)-je utiliser une liste non numérotée pour ma liste de prestations. La liste peut être personnalisée afin d'utiliser une puce personnalisée et de l'espace supplémentaire entre les éléments de la liste. Le code CSS pour accomplir ma mise en liste personnalisée est comme suit:

     li {

     list-style-position: à l'intérieur;

     list-style-image: Indiquez l'URL de l'image ici;

     list-style-type: none;

     margin-bottom: 1em

     }

(8) Vous pouvez souligner le texte important sur un fond jaune.

    . Sélectionner {

     background-color: jaune;

     }

(9) Vous pouvez souligner le texte en le rendant gras.

    . {Gras

     font-weight: bold;

     }

    . Boldred {

     font-weight: bold;

     color: # CC0000;

     }

    . Boldblue {

     font-weight: bold;

     color: # 0000FF;

     }

(10) Je voudrais faire témoignages ventes page spéciale en les encadrant et en utilisant un fond pastel pour le texte.

    . Témoignage {

     display: block;

     margin-left: auto;

     margin-right: auto;

     background: # fffacc;

     padding: 1em;

     frontière: double;

     border-width: épaisseur;

     border-color: # 999999;

     }

(11) Le formulaire d'achat est une composante très importante de la page de vente. Je utiliser une bordure rouge en pointillés-pour la forme.

    . Achat-forme {

     padding: 1.5em;

     frontière: en pointillé;

     border-width: moyen;

     border-color: # FF0000;

     background: # fffac6;

     }

(12) Si vous utilisez une image et lui associer un lien avec elle, vous souhaitez désactiver la frontière ou vous obtiendrez une bordure bleu distrait autour de l'image.

     a img {

     border: 0;

     }

Après tout style CSS a été appliquée, la page de vente a maintenant une certaine pression * * * *. et de la pop Le titre coloré attire immédiatement l'attention de même un internaute occasionnel. Le message de vente figurant dans la page de vente est maintenant facile à lire et plus facile à comprendre. Le contenu bien conçu d'affichage, il est possible pour le message de vente à être absorbés avec juste une page de balayage rapide. Après une analyse préliminaire, un lecteur intéressé plus que probable que de relire la page pour les détails.

Source de l'article: http://EzineArticles.com/1056435

0 commentaires

Enregistrer un commentaire