Edition des zones

Zones du thème


Rouge gorge
Papillon
Gipsy summer

Edition des zones du thème


Cette fois, je vais me lancer sérieusement dans l'édition des zones de ce thème. Il est possible, et je le verrai biens que l'édition des zones d'en-tête et des zones de pied de page soient réalisables pour l'ensemble des pages du site ou, uniquement, sur les pages choisies.

Le fait d'avoir la même vision des éléments sur toutes les pages d'un site web, est un gage de fiabilité pour le visiteur.

Cependant, il pourrait être judicieux de ne pas éditer les zones d'en-tête de la même manière pour toutes les pages. Pour le Footer ou pied de page, il vaut mieux sans doute conserver le même schéma.


La zone Header


J'ai ajouté une image dans la zone : "Header image vide". La photo d'un rouge gorge. On s'aperçoit que l'image se place automatiquement à gauche. Pour l'instant, je n'ai pas trouvé comment la centrer car à sa droite, il n'y a rien. La zone a pris une taille en rapport avec l'image même si la dimension de l'image peut être réglée.

En fait, j'ai ajouté 3 images de tailles différentes. À moins de s'y connaître en style car, il y a les moyens de paramétrer les styles, je ne parviens toujours pas à mettre les 3 images, au même niveau, dans un même cadrage.

Tous les paramètres sont en px pour le padding et pour le margin. À moins de maîtriser le px, il faut tâtonner pendant des heures pour aligner les 3 images ainsi que leur donner des marges identiques.


J'ai ajouté une ligtbox dans la zone : "Header image Full vide". Dans cette lightbox, j'ai choisi une collection d'images déjà prédéfinie. On se rend compte qu'il y 4 vignettes images qui ne remplissent pas la totalité de la zone et qui, elles aussi, sont automatiquement centrées à gauche.


La zone centrale

Dans cette zone, qui est la zone : "Content", il n'y a pas de difficultés particulières, c'est la zone principale de la page dans laquelle on écrit généralement des textes. Nous avons à notre disposition un éditeur relativement complet.

Voir l'image ci-dessous


L'éditeur

La colonne de droite

Dans cette colonne de droite, on peut ajouter ce qu'on veut, c'est à dire, différents blocs, différents boutons. J'en parle sur cette page.

A noter que c'est la disposition que j'ai choisi dès le départ. On peut choisir d'avoir une page pleine largeur sans colonne ou d'avoir une colonne à gauche. C'est le choix de l'administrateur du site web.

De même, dans l'édition d'une page, dans sa zone : "Content" on peut choisir de diviser en plusieurs colonnes.

Pour l'instant, je n'ai quasiment rien mis dans ma colonne de droite. J'en ai mis plus, sur d'autres pages du site.

La zone Footer

Il y a au moins 4 zones de pied de page si je ne me trompe pas. J'ai donc la possibilité de remplir ces 4 zones. On distingue une zone : " Footer Top Full vide" et une zone : " Footer Full vide". Ces 2 zones sont en pleines largeurs mais sans doute divisibles en autant de colonnes souhaitées. (Il faudra que je tente le coup de le faire par la suite)

Pour l'instant, je ne touche pas à l'agencement natif de ces zones.

Que faut-il mettre dans un pied de page proposant plusieurs zones ?

Là est la question.

J'ai envie de répondre que l'on peut mettre ce que l'on veut. Je vous ai montré dans d'autres pages de tutoriels à quoi servent les boutons, les blocs. On doit pouvoir y mettre les liens qu'on veut, des images, des lightbox.

Tout ça, c'est au choix de l'administrateur de son site web. Mais j'ai envie de vous dire, qu'on peut regarder les pieds de page des autres sites web qui nous plaisent, et, s'en inspirer.

Pour le moment, j'ai cru bon d'utiliser les 2 zones en bas pour mettre en lien ma page de contact et ma page de mentions légales. Je sèche un peu pour les 2 autres zones de pied de page parce que je ne sais pas encore ce qui serait le mieux pour mon site. Quoi que dans la zone Footer Full vide j'ai pu aligné à gauche les icônes des réseaux sociaux.

À noter

Dans la zone de pied de page, c'est vrai que ça fait un peu foutoir et que c'est juste une page d'exemple. Je ne l'ai pas adopté pour le reste du site. Le pied de page de toutes mes autres pages est beaucoup plus sobre.

Remarque

Je tiens à ajouter encore quelque chose avant de conclure.

On ne peut pas, diviser les blocs dans les zones. Dans le bloc image en haut, je disais qu'avec le rouge gorge aligné à gauche, je ne peux pas mettre une deuxième image à droite. Tout, comme mes icônes de lien social, elles se retrouvent à gauche et elles condamnent sa propre zone. C'est à dire qu'au centre ou à leur droite, il reste de la place mais on ne peut plus rien y mettre à moins d'avoir réalisé un agencement de la zone en amont.

Rien n'empêche de diviser une pleine zone en 3 parties distinctes. Avec 3 mini-zones on à le droit d'intégrer 3 blocs.

Bien entendu, je mets un bloc de commentaires en bas de page au cas où certains lecteurs veulent rajouter quelque chose ou m'apprendre plus que je ne sais.

N'oublions pas, je débute avec concrete5 et j'explique à ma manière, en débutant, pour les débutants et en langue Française.


Une dernière chose

Ce qu'il y a de bien avec ce thème, c'est que si on ne remplie pas toutes les zones, elles ne sont pas visibles pour le visiteurs.


Finalement, j'ai divisé le Header en 3 parties égales et mis 3 images qui ne font pas la même taille. et j'ai pu diviser une zone de pied de page en 4 parties égales dans lesquelles j'ai ajouté des boutons spécifiques avec des liens.

Ce ne sera pas la version définitive, adoptée pour ce site web. C'est, pour le moment, une page d'exemple voir même, un site de test.



Chargement de la conversation