Les taux de conversion sont influencés par de nombreux facteurs, notamment la convivialité et la conception visuelle. Le pied de page du site (footer ou « footer »), bien qu'il se situe en bas de page et soit presque toujours invisible sur le premier écran, est également d'une grande importance.

Lors de la création d'une boutique en ligne, vous ne devez pas y prêter moins d'attention qu'à d'autres éléments et la rendre aussi significative que possible.

Inscription

Le pied de page doit être conçu dans le même style que l’ensemble du site Web de la boutique en ligne. De plus, même si l'ensemble de la boutique en ligne est conçu dans un style minimaliste, vous pouvez ajouter de belles images ou animations au pied de page, car cela ne détournera pas l'attention. Vous pouvez le concevoir de manière originale pour susciter des émotions positives chez les visiteurs.

Navigation sur les sites

Vous pouvez placer une navigation alternative sur le site dans le pied de page. Ceci est particulièrement pratique sur les sites comportant de longues pages. Le visiteur défilera jusqu'au bout et, sans revenir en arrière, pourra accéder aux rubriques nécessaires du catalogue. Vous pouvez le rendre plus détaillé que dans l'en-tête d'une boutique en ligne ; il y a suffisamment d'espace là-bas.

Liens vers des pages

Le pied de page est idéal pour publier des informations utiles mais pas trop importantes. Par exemple, si le menu supérieur contient des liens vers le catalogue ou les catégories d'une boutique en ligne, vous pouvez alors ajouter des liens vers un blog ou des articles utiles dans le pied de page.

Coordonnées

Le plus souvent, des coordonnées, des liens vers des pages sur les réseaux sociaux, et parfois même une carte marquant l'emplacement de la boutique en ligne (ou du point de retrait) sont ajoutés en pied de page. De telles informations augmentent la confiance des visiteurs.

Vous pouvez également ajouter des informations destinées à aider l'acheteur en pied de page du site. S'il fait défiler la page jusqu'en bas et ne trouve pas ce qu'il cherchait, il fermera probablement la page. Dans ce cas, vous pouvez ajouter un bouton « recherche sur site » ou « Demander un appel » dans le pied de page.

Vous ne devez pas ajouter d'informations inutiles au pied de page du site - par exemple, il est préférable de laisser les détails de l'entreprise (TIN, OGRN, etc.) pour les pages « À propos de l'entreprise » ou « Contacts ».

Bonjour, chers amis et invités du blog ! Aujourd'hui, nous allons parler de la création d'un site Web, ou plutôt de l'un de ses composants - Site Footer, scientifiquement Footer HTML ou simplement pied de page. Malgré le fait qu'il s'agisse de la partie la moins visible du site et que peu de gens y prêtent attention, à première vue, cela semble être le cas et beaucoup de gens le pensent. Et pour cette raison, beaucoup négligent souvent la conception du pied de page du site, ce qui est fondamentalement faux et incorrect !

Étant donné que le pied de page d’un site en est une partie aussi importante que l’en-tête et le corps, ou, plus correctement, l’en-tête et le corps. Alors aujourd’hui, passons à la conception des pieds de page de notre site comme il sied à un bon constructeur de site, et je vais essayer de vous aider !

Alors commençons par le début…

Qu'est-ce qu'un pied de page de site Web ou un pied de page HTML ?

Le pied de page d'un site est sa partie la plus basse, là où le webmaster place généralement des liens pour accéder à la page principale, il peut également y avoir un menu de l'ensemble du site, la navigation des pages, sur l'auteur, sur le projet, sur le site, contact les informations, les transitions vers les pages de questions fréquemment posées, les liens vers les réseaux sociaux et leurs boutons, les informateurs et les compteurs, etc. sont placés dans le pied de page du site. Toutes les informations que le webmaster lui-même peut trouver !

Et celui qui pense que peu de visiteurs viennent dans les sous-sols du site se trompe, il a complètement tort !

Et sur cette base, vous ne devez pas accorder moins d'attention au pied de page du site qu'à ses parties, à première vue, plus visibles, telles que le corps et l'en-tête du site. Même si je me répète, je pense que ce n’est pas en vain. C’est ma façon d’essayer de vous expliquer l’importance et l’importance de bien concevoir le pied de page du site !

Comment bien concevoir un pied de page de site Web ?

Il n’y a rien de compliqué là-dedans ! Je vais maintenant vous présenter plusieurs types de sous-sols assez beaux et présentables pour vos sites web. Et vous pouvez choisir celui qui vous convient le mieux, et à la fin de cet article il y aura un lien où vous pourrez télécharger tous les pieds de page de sites Web que j'ai présentés et, bien sûr, les utiliser lors de la création de vos nouveaux sites Web, ou remplacer les pieds de page existants. ceux avec mes plus attrayants pied de page html.

Voici le premier pied de page du site :

Voici le deuxième pied de page du site :

Ceci est le troisième pied de page du site :

Voici le quatrième pied de page du site :

Ceci est le cinquième pied de page du site :

Ceci est le sixième pied de page du site :

Eh bien, que pensez-vous de ces pieds de page HTML ? Avez-vous aimé au moins l'un d'entre eux ? Je l'espère?!

Si vous les avez aimés, je vous suggère de les télécharger gratuitement dès maintenant et de les utiliser à vos propres fins !

Le dossier que vous avez téléchargé contient six fichiers avec Footer HTML. Et il ne vous reste plus qu’à corriger le contenu de votre site dans un éditeur de texte et le tour est joué !

Tu parles d'un éditeur de texte ! Par exemple, j'utilise, et je vous le conseille, uniquement . Parce que c’est le plus pratique et le plus sûr !

C'est tout maintenant. Merci de votre attention !

Bonjour, chers lecteurs du site blog. Nous poursuivons le sujet de la disposition des blocs, qui a été abordé et poursuivi dans les trois articles précédents. En principe, nous avons déjà réussi à créer une mise en page de site à deux et trois colonnes, et nous avons même réussi à prendre en compte les nuances de la création d'une mise en page fluide.

De plus, dans les premiers articles sur la mise en page des sites Web (), certains concepts de base du webmastering ont été abordés, sans comprendre dont il serait assez difficile d'en comprendre les nuances.

Quels problèmes avons-nous rencontrés avec la mise en page de notre site Web ?

Aujourd'hui, nous allons essayer de résoudre un petit problème qui peut survenir avec la mise en page que nous avons créée précédemment. Le plus souvent, cette situation se produit lors de sa visualisation sur de grands moniteurs (à haute résolution) et lors de l'affichage d'une page contenant une petite quantité d'informations.

Dans ce cas, il se peut que le pied de page ne soit pas appuyé contre le bas de l'écran, mais soit situé presque à sa hauteur moyenne, ce qui dans la plupart des cas aura l'air moche et peu esthétique.

Pourtant, à mon avis, il est nécessaire d'appuyer sur le pied de page tout en bas de la mise en page du site, et cela sera particulièrement vrai dans le cas où la hauteur de la page est inférieure à la hauteur de l'écran de l'utilisateur. Cela peut être représenté schématiquement comme ceci :

Ceux. Le comportement correct du pied de page dans le cas d’une petite quantité d’informations sur la page et d’un grand écran utilisateur sera le suivant :

Pour implémenter cela, nous devons effectuer un certain nombre de manipulations avec le code de notre layout. De plus, nous apporterons des modifications non seulement au fichier de style CSS Style.css, mais également à Index.html, qui contient le code HTML et forme les blocs Div. Mais tout d’abord.

À titre d'exemple, nous utiliserons la présentation de site à trois colonnes que nous avons créée précédemment. Dans ce cas, Index.html ressemblera à ceci :

En-tête En-tête Contenu de la page Contenu de la page Contenu de la page Contenu de la page Pied de page

Et les propriétés CSS suivantes ont été écrites dans le fichier Style.css :

Corps, html ( margin:0px; padding:0px; ) #maket ( width:800px; margin:0 auto; ) #header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px ; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer ( couleur d'arrière-plan : #FFC0FF ; clair : les deux ; )

Eh bien, la mise en page elle-même ressemblait à ceci :

Comme vous pouvez le constater, le pied de page n'est pas enfoncé jusqu'en bas et ne répond donc pas à nos exigences (il est toujours situé sous la colonne la plus basse), nous devrons donc apporter des ajustements au code. La même chose peut être faite pour une mise en page à deux colonnes, ainsi que pour une mise en page en caoutchouc. La méthode est universelle.

Comment pousser le pied de page vers le bas de la mise en page du site

Nous devons donc déplacer le conteneur Div avec le pied de page vers le bas de l'écran. Pour ce faire, vous devrez d'abord définir la hauteur de la page entière à cent pour cent (elle occupera tout l'écran). Cela sera nécessaire pour ensuite modifier la taille du bloc principal avec la mise en page à 100 %.

L'intégralité du contenu de la page du site est placée dans les balises Body d'ouverture et de fermeture, et nous devons donc ajouter une autre propriété CSS pour la balise Body dans Style.css, en définissant la hauteur à 100 % :

Corps, html (marge:0px; padding:0px; hauteur: 100%; )

Cela n'affectera pas encore l'apparence, mais le blog principal peut désormais être étiré sur toute la hauteur de l'écran. Ceux. c'était une sorte d'étape préparatoire.

Propriétés CSS de base, si vous le souhaitez, vous pouvez les consulter. Maintenant, définissons le conteneur Div qui contient l'intégralité de notre mise en page à une hauteur minimale de 100 % :

Je veux aussi le mettre en évidence (div avec id="maket"). Pour ce faire, je vais lui donner un cadre en utilisant la propriété Border() correspondante :

La propriété border: solid 3px black permet de définir une bordure solide (solide) de 3 pixels d'épaisseur en noir pour ce conteneur. Cela vous permettra de voir clairement que le conteneur avec la mise en page s'est étendu sur toute la hauteur de l'écran, même avec une petite quantité d'informations sur la page :

Nous devrons maintenant retirer le bloc de pied de page du conteneur général et le placer en dessous, immédiatement après le bloc général. Qu'est-ce que cela va donner ? Et le fait que, finalement, le pied de page de la mise en page daignera descendre, et ne sera pas, comme auparavant, plaqué contre sa colonne la plus longue. Dans ce cas, Index.html ressemblera à ceci :

Titre En-tête Colonne de gauche Menu Menu Menu Menu Colonne de droite Menu Menu Menu Menu Contenu de la page Contenu de la page Contenu Pied de page

Veuillez noter que le bloc avec le pied de page n'est plus situé à l'intérieur du conteneur général (maket), et donc sa largeur n'est plus régulée par les propriétés CSS spécifiées pour maket dans le fichier Style.css. La largeur du pied de page s'étendra sur tout l'écran, mais il sera toujours situé en bas de l'écran, juste en dessous du bloc principal :

Mais encore une fois un problème se pose, car pour voir le pied de page, il faut maintenant faire défiler l'écran dans le navigateur (voir la barre de défilement dans l'image ci-dessus).

Cela se produit parce que le conteneur principal (maket) occupe toute la hauteur de l'écran (cela est déterminé par la propriété min-height : 100 %), et le pied de page est situé immédiatement derrière lui et pour le voir, vous devrez faire défiler, ce qui n'est pas très pratique et fonctionnel.

Vous pouvez résoudre ce problème en définissant un remplissage négatif pour le conteneur Div avec le pied de page afin qu'il se déplace vers le haut d'une distance égale à sa hauteur. Dans ce cas, le conteneur de pied de page chevauchera le conteneur principal et s'adaptera à la hauteur de l'écran du navigateur (c'est-à-dire que vous n'aurez pas besoin de le faire défiler pour l'afficher).

Mais pour définir un décalage négatif par rapport au haut, vous devez connaître cette hauteur même du pied de page, mais nous ne la savons pas encore.

Par conséquent, nous allons d’abord définir la hauteur du conteneur contenant le pied de page en définissant la propriété correspondante dans Style.css :

#footer( couleur d'arrière-plan :#FFC0FF ; clair : les deux ; hauteur : 50 px ; )

Et puis nous lui fixons une marge négative en haut à une hauteur égale à sa hauteur :

Cela permettra au pied de page de s'élever exactement à sa propre hauteur et ainsi de s'adapter à l'écran du navigateur (nous pouvons maintenant supprimer la propriété CSS border : solid 3px black de la règle maket, afin que l'épaisseur de la bordure n'empêche pas l'ensemble de notre disposition, y compris le pied de page, depuis l'ajustement dans la hauteur de l'écran) :

Comme vous pouvez le constater, la barre de défilement n'apparaît désormais plus dans le navigateur et l'intégralité de la mise en page de notre site, basée sur des blocs de trois colonnes, tient sur un seul écran (au cas où il y aurait peu d'informations sur la page) et comporte un pied de page situé tout en bas. . C’est exactement ce que nous devions faire.

Nous insérons l'espaceur et combattons Internet Explorer

Mais un problème surgit qui n'apparaîtra que lorsqu'il y aura plus d'informations sur la page de mise en page et la situation suivante peut se produire :

Il s'avère qu'une situation peut survenir lorsque les informations contenues dans l'une des colonnes de mise en page chevauchent le pied de page, ce qui n'aura pas l'air joli. Cela se produit à cause du rembourrage négatif notoire que nous avons défini et qui a contribué à élever notre sous-sol par rapport au conteneur de mise en page principal.

Ceux. Il s'avère qu'en bas de l'écran, il y a deux blocs qui se chevauchent dans le sous-sol.

La solution à ce problème consiste à ajouter un nouveau conteneur Div vide (appelé espaceur) au conteneur principal de notre mise en page (maket), à l'endroit où se trouvait auparavant le bloc avec le pied de page.

En définissant ce nouveau conteneur à une hauteur égale à la hauteur du pied de page, nous pouvons éviter que les informations du conteneur principal n'entrent en collision avec le bloc avec le pied de page. Attribuons un ID () à ce conteneur appelé Rasporka et par conséquent l'Index.html de notre mise en page à trois colonnes ressemblera à :

En-tête En-tête Colonne de gauche Menu Menu Menu Menu Colonne de droite Menu Menu Menu Menu Contenu de la page Contenu de la page Contenu de la page Pages Pages Pages Pages Pied de page

Et dans Style.css, nous écrirons pour cela ( , qui définit la hauteur de ce conteneur d'espacement égale à la hauteur du sous-sol :

#rasporka ( hauteur : 50px ; )

En conséquence, le pied de page sera pressé par le bas non pas sur les informations contenues dans le conteneur principal (par exemple, le texte de la colonne la plus haute), mais sur une zone égale à la hauteur du pied de page avec un conteneur d'espacement ne contenant aucune information. .

De cette façon, nous évitons les collisions et les distorsions dans notre disposition à trois colonnes. Tout sera clair et beau (délicat et noble) :

Comme je l'ai mentionné plus haut, la largeur du pied de page doit désormais être définie séparément, car... ce conteneur ne fait plus partie du conteneur principal. Pour ce faire, vous devez ajouter des propriétés supplémentaires pour le pied de page au fichier CSS, vous permettant de définir sa largeur et de l'aligner horizontalement au milieu de l'écran.

Il est logique de définir la largeur égale à la largeur de la mise en page entière à l'aide de la propriété Largeur, et l'alignement horizontal peut être effectué de la même manière que nous l'avons fait pour la mise en page entière sur une mise en page en bloc.

Ainsi, nous devrons ajouter des propriétés supplémentaires pour l’ID Footer :

#footer( background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; )

En utilisant la propriété width:800px, la largeur est définie sur 800 pixels, et en utilisant deux propriétés margin-left: auto et margin-right: auto, le paramètre d'indentation à gauche et à droite du pied de page est défini automatiquement, en raison de lesquels ces retraits seront égaux et notre héros sera aligné au milieu :

Eh bien, il semble qu’il n’y ait plus rien à améliorer, mais ce n’était pas le cas. Comme toujours, notre navigateur préféré Internet Explorer 6 ne comprend pas quelque chose aux propriétés CSS que nous utilisons. Dans ce navigateur (et peut-être aussi dans d'autres anciens), malgré tous nos efforts, le pied de page ne sera pas pressé vers le bas, mais restera toujours collé à la colonne la plus haute de la mise en page du site.

Tout cela se produit parce que ( ne comprend pas la propriété min-height: 100%, que nous avons utilisée pour définir la hauteur minimale du bloc principal égale à la hauteur de l'écran.

Par conséquent, pour résoudre ce problème, nous devrons utiliser un soi-disant hack qui nous permet d'expliquer (sur nos doigts) aux navigateurs plus anciens quoi faire. Avant la liste des propriétés CSS pour maket, vous devrez insérer la combinaison suivante :

* html #maket ( hauteur : 100 % ; )

Cette règle ne s'appliquera qu'au navigateur Internet Explorer 6 ; les autres n'en tiendront pas compte et ne l'implémenteront pas.

Ainsi, l'aspect final de Style.css avec le pied de page enfoncé en bas de l'écran sera le suivant :

Corps, html ( marge:0px; padding:0px; hauteur: 100%; ) * html #maket ( hauteur: 100%; ) #maket ( largeur:800px; marge:0 auto; hauteur min: 100%; ) # en-tête( couleur d'arrière-plan :#C0C000; ) #left( couleur d'arrière-plan :#00C0C0; largeur:200px; float:left; ) #right( largeur:200px; couleur d'arrière-plan:#FFFF00; float:right; ) #content ( couleur d'arrière-plan : #8080FF ; marge-gauche : 202 px ; marge-droite : 202 px ; ) #footer ( couleur d'arrière-plan : #FFC0FF ; clair : les deux ; hauteur : 50 px ; marge-haut : -50 px ; largeur : 800 px ; marge-gauche : auto ; marge-droite : auto ) #rasporka ( hauteur : 50px ; )

Eh bien, la forme finale d'Index.html a été donnée juste au-dessus. Ça y est, cette série d’articles consacrée à la mise en page en bloc des mises en page de sites Web fixes et fluides à 2 et 3 colonnes peut être considérée comme complète.

Vous pouvez également regarder la vidéo « Travailler avec la balise div HTML » :

Bonne chance à vous ! A bientôt sur les pages du site blog

Vous pourriez être intéressé

Disposition en blocs - Nous créons des mises en page à deux, trois colonnes et fluides pour le site
Disposition DiV - Créez des blocs pour une mise en page à deux colonnes en HTML, déterminez leurs tailles et définissez leur positionnement en CSS

Si vous travaillez actuellement sur un nouveau design ou même une refonte de votre page de destination, alors un domaine du projet à ne pas ignorer est la section de pied de page.

Le désir d’en développer un presque parfait conduit souvent à une complication de l’ensemble du processus. Travailler sur un design peut devenir si passionnant que vous oubliez rapidement certaines parties importantes mais sous-utilisées de la page.

On vous entend déjà dire : « Qui se soucie d’un pied de page ?! De toute façon, peu de gens vont jusqu’au bout. Mais nous n’en serions pas si sûrs.

Bien entendu, la priorité doit être donnée à la section d’en-tête et au design situé au-dessus de la ligne de pliage (Above The Fold), car c’est là que les visiteurs passent le plus clair de leur temps. Cependant, le bas de la page, notamment le pied de page de votre landing page, mérite également qu’on s’y intéresse.

Dans une étude de cas intéressante, la société d'analyse de contenu de sites Web Chartbeat a découvert que 65 % de l'engagement sur la page se produit juste en dessous de la ligne de flottaison.

Donc les gens continueront à défiler ! Et si vous n'optimisez pas la moitié inférieure de votre page de destination, y compris votre pied de page, vous risquez de passer à côté d'opportunités uniques telles que :

• Fournir des informations importantes supplémentaires sur votre marque et votre produit.
• Expérience utilisateur et navigation améliorées.
• Augmentation des taux de conversion.

Pour les utilisateurs qui souhaitent passer un peu plus de temps sur votre page de destination et faire défiler la page jusqu'en bas pour trouver les informations dont ils ont besoin, une zone de pied de page bien conçue fait toute la différence.

Dans cet article, nous aborderons tous les détails de la création et de l'utilisation des pieds de page, quel que soit le type de site. Commençons par le tout début.

Qu'est-ce qu'un pied de page ?

Le pied de page est la partie la plus basse d’un site Web ou d’une page de destination. Il en existe de toutes formes et de toutes tailles. Certains sites ont de petites zones de pied de page, tandis que d'autres en ont de très grandes, comprenant plusieurs colonnes et pieds de page. Certains sites n'ont aucun pied de page, tandis que d'autres intègrent une fonctionnalité spéciale appelée (Infinite Scrolling). Cela signifie qu’il n’y a pas de pied de page en bas du site, ni de fin de page en tant que telle. Nous n'aborderons pas ce sujet aujourd'hui.

Les pieds de page contiennent généralement des informations de contact, un champ de recherche et des liens de navigation vers des pages importantes et des icônes de profil de réseaux sociaux. Le pied de page peut également être utilisé pour fournir d'autres informations pertinentes sur l'entreprise, telles qu'un énoncé de mission de l'entreprise, des informations sur l'emplacement du bureau (carte), des statistiques sur le site, une preuve sociale, un formulaire d'inscription à la newsletter par courrier électronique, des informations d'inscription ou de connexion au compte, d'autres types. (Call-To-Action, CTA), etc.

Pourquoi vous devez vous lancer dans la conception de pieds de page

Avoir un pied de page n'est pas strictement nécessaire, mais ne pas en avoir peut provoquer de la frustration et de la frustration chez les visiteurs qui tentent de trouver des informations spécifiques sur un produit ou votre entreprise.

La section de pied de page est idéale pour les détails des droits d'auteur et les liens vers les informations de contact, les conditions et commandes, la politique de confidentialité, les avis sur les cookies, etc. La publication ici de liens vers des groupes sur les réseaux sociaux est particulièrement populaire - la plupart des gens s'attendent déjà à les trouver dans le pied de page.

En plus d'améliorer le flux de navigation et l'expérience utilisateur d'un site, il a été démontré que la conception stratégique du pied de page a un impact sur les conversions.

Exemples de beaux pieds de page

Examinons quelques exemples de pieds de page qui pourraient vous inciter à proposer vos propres idées.

La page de destination vendant le purificateur d'air A803 AirEngine de la marque Bork présente un design de pied de page attrayant qui comprend des liens de navigation (et ils sont conçus dans deux styles différents : sous forme d'images cliquables et sous forme de colonnes avec des listes), un formulaire d'abonnement à la newsletter. et les icônes des médias sociaux.

La page de l'illusionniste Igor Zavyalov est également très jolie. La conception comprend des informations de contact, des liens vers des profils sociaux et un formulaire de contact simple et attrayant.

Avant le pied de page de la landing page Bitrix24 se trouve une section « pré-pied de page » destinée à la conversion (le client potentiel est invité à laisser des contacts pour communiquer avec les managers). Vient ensuite la zone de pied de page principale avec une carte, des liens de navigation, un lien de conversion de rappel et un numéro de téléphone.

Le site strip-lenta.com possède un footer original avec une enveloppe contenant les contacts et un formulaire de contact :

Le pied de page est précédé d'une zone de pré-pied de page avec preuve sociale - logos de clients célèbres :

Mais ils ne se sont pas arrêtés là ! Il existe également une zone post-footer, qui consiste à réaliser une action de conversion :

Enfin, regardons la fin inhabituelle de la page d’accueil d’Alfa-Bank, créée pour le recrutement de personnel. Le site lui-même est conçu de telle manière qu'au fur et à mesure que nous le parcourons, nous observons une modification du héros-candidat : ​​il bouge, change de vêtements, devient plus confiant et réussit. À la fin de la page, il y a un panneau sur lequel cliquer vous amène à une page avec les postes vacants actuels. Il n'y a rien d'autre dans le pied de page, mais la fonction principale de la page de destination est remplie - conversion sous forme de transition pour vous familiariser avec les informations puis envoyer votre CV.

Eh bien, nous pensons que c'est assez de matière à inspiration. Jetons maintenant un coup d'œil à 16 éléments à ne pas négliger lors de la conception de votre pied de page.

Éléments de base du pied de page

1. Informations sur les droits d'auteur. Faites comprendre aux visiteurs peu scrupuleux de votre page de destination que le contenu est protégé par le droit d'auteur et qu'il y aura des conséquences en cas de plagiat. Le pied de page est l’endroit idéal pour ce type d’informations.

2. Coordonnées. Comme mentionné, de nombreuses personnes font défiler la page à la recherche de vos contacts (téléphone, adresse, e-mail). Il est essentiel de les ajouter au pied de page, surtout si vous choisissez de ne pas les inclure dans l'en-tête.

Conseil. Lorsque vous placez le numéro de téléphone dans le pied de page, rendez-le cliquable ; cela permettra à l'utilisateur de contacter plus facilement votre entreprise lors du chargement de la page de destination dans les cas où il utilise un smartphone.

3. Politique de confidentialité. Les lois sur la confidentialité en ligne sont de plus en plus strictes, il est donc important d'avoir un lien vers une telle page.

4. Conditions de service. Lorsque vous fournissez des services ou vendez des produits via votre page de destination, vous ne voulez probablement pas que vos clients soient confus quant aux nuances liées aux relations commerciales avec vous. Assurez-vous que le pied de page affiche clairement un lien vers la page des conditions de service.

5. Commentaires/rétroactions. Il s'agit d'une partie facultative, mais si vous disposez d'une page distincte dédiée à cela, il serait utile d'inclure un lien vers celle-ci ici.

6. Carte. Si votre page de destination est une carte de visite pour une entreprise dont l'activité principale est hors ligne (par exemple, vous possédez une maison d'hôtes, un restaurant ou un espace événementiel), pensez à ajouter des données de localisation au pied de page. Il peut s'agir d'un simple texte avec une adresse ou d'une intégration locale avec Yandex Maps, Google Maps ou 2GIS.

Voici comment ajouter une carte à votre page de destination à l'aide du générateur de sections dans :

Éléments de pied de page facultatifs

Examinons maintenant d'autres éléments moins importants de la conception du pied de page.

8. Preuve sociale et icônes pour les profils sur les réseaux sociaux. Si vous souhaitez montrer votre influence sur les réseaux sociaux ou encourager les gens à suivre vos comptes prioritaires, pensez à ajouter des icônes comme celles-ci. Et en affichant le nombre de vos followers pour chaque profil, vous créerez une preuve sociale.

9. Un plan du site (SiteMap) aide les moteurs de recherche à mieux comprendre la structure de votre site et son contenu. De nombreux sites placent un lien vers le plan du site à côté des informations de droits d'auteur dans le pied de page.

11. Un simple formulaire de courrier électronique est un excellent moyen d'augmenter les conversions opt-in. Alternativement, s'il n'y a pas d'espace dans le pied de page pour placer un formulaire d'inscription, nous vous suggérons de placer un bouton CTA ou un lien vers la page principale sur laquelle vous prévoyez de générer des prospects.

12. Formulaire de contact pour vous envoyer des messages. Convient si vous ne souhaitez pas placer vos contacts en pied de page, notamment votre adresse email. L'ajout d'un formulaire comme celui-ci réduit le risque de recevoir du spam et aide également les utilisateurs à vous contacter facilement depuis presque n'importe quelle page de votre site. N'oubliez pas cependant que cet élément peut occuper une quantité importante d'espace en bas.

13. Énoncé de mission. Si vous souhaitez montrer à vos visiteurs ce que représente votre marque, quels sont vos objectifs et vos aspirations, pensez à ajouter une version condensée de votre énoncé de mission au pied de page. S'il est problématique de rédiger un message succinct, incluez un lien vers une page spéciale.

14. Liste des articles de blog récents. Vous souhaiterez peut-être ajouter ici un flux avec vos derniers articles de blog. Une stratégie encore plus efficace consiste à afficher uniquement les articles de blog les meilleurs et les plus populaires. Quatre ou cinq liens suffiront amplement.

15. « À propos de moi » / « Biographie ». Lorsqu'il s'agit d'un site Web ou d'un blog de marque personnelle, vous pouvez également ajouter une courte biographie sur vous-même, y compris une photo - cela ajoutera un élément « humain » vivant au site. L'ajout d'un lien vers votre page À propos de moi (À propos de nous) donnera aux visiteurs la possibilité d'en savoir plus sur vous.

16. Liens de conversion ou appels à l'action. Avez-vous des pages de produits, des sections de best-sellers ou des pages d'affiliation que vous devez promouvoir ? Que diriez-vous d'intégrer des liens vers eux dans le texte d'ancrage du pied de page ?

Ce qu'il ne faut pas ajouter à votre pied de page

Voici ce qu'il faut éviter :

• Compteurs de pages vues et widgets reflétant les statistiques de trafic.
• Liens d'affiliation directs.
• Flux de médias sociaux intégrés.
• Publicité.

Quels outils devez-vous utiliser lorsque vous travaillez sur votre conception ?

Cela dépend de la plateforme sur laquelle votre site fonctionne. Pour les utilisateurs de LPgenerator, par exemple, il existe de nombreuses mises en page prêtes à l'emploi et des modèles de pages de destination gratuits de haute qualité que vous pouvez personnaliser vous-même :

C'est ça!

Nous espérons que cet article vous a été utile. Nous souhaitons également que cela vous encourage à repenser la façon dont vous utilisez la section de pied de page. Quels que soient vos objectifs de conversion, expérimentez beaucoup et vous verrez ce qui fonctionne et ce qui ne fonctionne pas.

Commencez par quelques éléments de base et ce qui, selon vous, améliorera la navigation et l'expérience utilisateur.

Si vous pensez que les gens ne font pas défiler jusqu'au pied de page, configurez des cartes thermiques et faites défiler les cartes pour le savoir avec certitude.

Peu importe ce que vous décidez de faire, ne laissez pas votre pied de page s'affaisser. Il est temps de répondre aux questions suivantes :

• Votre site Web ou votre blog comporte-t-il un pied de page ?
• En profitez-vous au maximum ?
• Qu'y a-t-il dans le pied de page en ce moment ? Comment cela peut-il être amélioré ?

Tout d’abord, je vais vous montrer le résultat du post d’aujourd’hui. Le pied de page sera petit et ne comportera qu'une seule ligne de texte

Problèmes avec la mise en œuvre du pied de page

Si le pied de page se trouve en bas de la page, quel est le problème de sa mise en œuvre ? Après tout, vous pouvez simplement faire une continuation de notre tableau principal et y insérer toutes les informations nécessaires ! Oui, c'est vrai, cette approche est applicable dans 99 % des implémentations de sites Web, mais il y a un petit problème qui survient dans 1 % des cas.

Voici un diagramme schématique du navigateur

Dans ce schéma, le pied de page est lié à la fin du tableau principal, et sera situé là où cela est nécessaire si la zone principale du site est d'une hauteur suffisante pour créer un défilement vertical dans le navigateur.

Mais que se passe-t-il si la hauteur du site n’est pas si élevée qu’elle créerait un défilement vertical ?

Comme vous pouvez le constater, le tableau s’avère triste. Le pied de page dans cette situation n’est pas le bas de la page, mais le centre. Comment résoudre ce problème ?

Il existe deux options :

• Peu importe que le pied de page apparaisse au centre, car dans 99% des cas le site a une hauteur suffisante pour que le pied de page apparaisse là où il est nécessaire.
• Utiliser une manière différente d'implémenter le pied de page

Aujourd'hui, nous allons considérer la deuxième option. Il existe de nombreuses façons de mettre en œuvre un pied de page, mais il y a une chose ! Toutes les méthodes que j'ai essayées ne fonctionnent pas à condition que notre zone principale du site ait le style . Mais ce n'est pas si effrayant

Théorie de la mise en œuvre du pied de page

Qu'est-ce que je propose ? Je suggère d'utiliser jquery. En l'utilisant, nous pouvons connaître la hauteur du navigateur ou de tout autre objet de notre site. A quoi ça sert ? Puisque le pied de page sera un objet positionné de manière absolue (avoir la position:absolute; style), la hauteur de la zone de travail, ou la hauteur de la table principale, nous permettra de savoir de combien déplacer notre zone de pied de page le long du haut ( style haut de gamme) !

Je pense que la manière dont nous allons mettre en œuvre notre sous-sol est claire

Quant au fonctionnement de la fonction Java script. Nous devrons déterminer quelle hauteur (hauteur du navigateur ou hauteur de la table principale) utiliser pour décaler le pied de page. Tout est simple ici, on vérifie si le tableau ou la fenêtre du navigateur est plus haut ; s'il s'agit d'une fenêtre de navigateur, alors on utilise sa hauteur. Si c’est l’inverse, alors nous utilisons la hauteur de la table principale.

Créer un pied de page >Modifier le style du tableau

Tout d’abord, nous devons ajuster le style de notre table principale.

Comme vous pouvez le constater, l'espace entre notre table principale et la fin du navigateur est négligeable. Puisque le pied de page sera positionné de manière absolue, il n’augmentera en aucun cas l’espace entre le tableau principal et la fin de la page ! Nous devrons vous aider en introduisant un nouvel élément CSS dans le style de notre zone principale.

Ouvrez le style.css personnalisé, recherchez la table de classe (.table(...)) et modifiez-la comme ceci

Tableau
{
position : absolue ;
haut :0px ;
gauche : 50 % ;
marge gauche : -390px ;
rembourrage en bas : 50 px ;
indice z : 1 ;
}

J'ai ajouté le style padding-bottom:50px;, c'est-à-dire que j'ai fait en sorte que l'espace entre la fin du tableau et la fin de la fenêtre du navigateur ait une taille de 50 pixels. Pour le footer que j'ai en tête (capture d'écran du résultat en début de post), cet espace sera largement suffisant, si vous avez en tête un footer bien plus grand que le mien, alors mettez autant de pixels qu'il vous faut !

>Modification du modèle principal

Ouvrez le fichier index.html personnalisé et avant

insérez notre pied de page

Propulsé par RS-BLOG v2 | Lorsque vous copiez du matériel de ce blog, n'oubliez pas de publier un lien vers la source - rsblog.ru

Laissez-moi vous expliquer certains des styles utilisés ici.

• affichage : aucun ; - Notre pied de page n'apparaîtra à l'utilisateur qu'après le chargement de la page entière, jusqu'à ce moment le pied de page ne sera pas visible !
• gauche : 50 % ; marge gauche : -390 px ; - Ces deux styles permettent de positionner le pied de page exactement au centre du navigateur.
• texte-align:centre; - permettent de placer le texte contenu dans le bloc au centre.

>Connectez jquery et js.js

Vous devez d’abord le télécharger. Allez sur ce lien et cliquez ici

Le code s'ouvrira, sélectionnez-le tout et copiez-le dans le bloc-notes. Dans le Bloc-notes, cliquez sur Fichier -> Enregistrer sous

Entrez le nom du fichier (jquery.js) avec .js

et enregistrez-le dans le dossier des modèles personnalisés. Nous avons maintenant le fichier dont nous avons besoin dans le dossier contenant le moteur. Cela vaut également la peine de créer un fichier js.js (un fichier vide pour l'instant). Nous y écrirons bientôt une fonction d'affichage de pied de page. Voici à quoi ressemble maintenant le contenu du dossier des modèles :

Si ma mémoire est bonne, j'ai enregistré une leçon vidéo où j'ai connecté jquery d'une manière légèrement différente, si vous êtes intéressé, vous pouvez regarder

Il ne reste plus qu'à connecter les fichiers js à notre blog. Pour ce faire, ouvrez le fichier index.html personnalisé et après la ligne