Aller au contenu
Support de Zwii
Fred

[ASTUCE] Une seule colonne dans le pied de page

Messages recommandés

Selon le thème choisi, on préfèrera parfois disposer d'une seule zone dans le pied de page qui occupera toute la largeur du site.

 

ETAPE 1 :

 

Dans Thème footer, placer le bloc contenu personnalisé dans le bloc central.

 

ETAPE 2 :

 

Ensuite on insère le code html  souhaité après l'avoir minimisé par exemple avec ce site https://www.willpeavy.com/minifier/ ceci afin d'éviter l'insertion de <br /> parasites. Cette opération est indispensable.

 

On le fait précéder des instructions Jquery qui modifieront les classes des divs gérant les trois blocs.

<script>$("#footersiteLeft").addClass("displayNone");$("#footersiteCenter").removeClass("col4");$("#footersiteRight").addClass("displayNone");</script>

 

Explications : on n'affiche pas les blocs de gauche et de droite et on supprime la contrainte sur 4 colonnes du bloc central.

 

Petite précision, si le pied de page est dans le site, les id du jquery deviennent footerbodyLeft etc...

 

Le code complet minimisé avec un exemple donné sur le site.

 

<script>$("#footersiteLeft").addClass("displayNone");$("#footersiteCenter").removeClass("col4");$("#footersiteRight").addClass("displayNone");</script><div class="row" style="background-color: rgba(32,59,82,1);"><div class="col4" style="float: left !important;"><img class="image wp-image-200 attachment-full size-full" style="max-width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;" src="https://www.gite-les-fayettes.com/wp-content/uploads/2019/01/logo-gite-les-fayettes-blanc-2.png" alt="Logo gîte Les Fayettes blanc" width="150" height="60"/><p style="text-align: center;"><span style="color: #ffffff;">Les Fayettes</span></p><p style="text-align: center;"><span style="color: #ffffff;">43290 Montregard</span></p><p style="text-align: center;"><span style="color: #ffffff;">Haute-Loire</span></p><p style="text-align: center;"><span style="color: #ffffff;">Région Auvergne-Rhône-Alpes</span></p></div><div class="col4"><div class="column_inner"><img class="image wp-image-240 attachment-full size-full" style="max-width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;" src="https://www.gite-les-fayettes.com/wp-content/uploads/2019/01/gite-les-fayettes-map.png" alt="Carte du Gîte Les Fayettes" width="158" height="160"/><p> </p><p style="text-align: center;"><a href="https://www.google.com/maps/place/45%C2%B008'47.9%22N+4%C2%B018'46.2%22E/@45.14665,4.3116291,435m/data=!3m2!1e3!4b1!4m5!3m4!1s0x0:0x0!8m2!3d45.14665!4d4.312823" target="_blank" rel="noopener">Latitude : 45.14665 | Longitude : 4.312823</a></p></div></div><div class="col4" style="float: right !important;"><p style="text-align: center;"><a href="https://www.gite-les-fayettes.com/">Accueil</a></p><p style="text-align: center;"><a href="https://www.gite-les-fayettes.com/le-gite/">Le gîte</a></p><p style="text-align: center;"><a href="https://www.gite-les-fayettes.com/activites-autour-du-gite/">Activités autour du gite</a></p><p style="text-align: center;"><a href="https://www.gite-les-fayettes.com/galerie/">Galerie</a></p><p style="text-align: center;"><a lang="fr-FR" href="https://www.gite-les-fayettes.com/" hreflang="fr-FR"><img tabindex="0" src="blob:http://www.desforges-roger.fr/1ef4888d-7263-4dcd-84d1-a228f711a83d" alt="Français"/></a></p><p style="text-align: center;"><a lang="en-GB" href="https://www.gite-les-fayettes.com/en/" hreflang="en-GB"><img tabindex="0" src="blob:http://www.desforges-roger.fr/882c4637-7b90-466b-9945-0ea2e5289254" alt="English"/></a></p></div></div>

 

Le rendu :

 

image.thumb.png.add4c462e6780cf0e3ce09ab59c3fe92.png

 

 

Enjoy !!!

  • Merci 2

Partager ce message


Lien à poster
Partager sur d’autres sites

Merci @Fred pour cette excellente astuce.

Avec ton tuto sur l'insertion d'une bannière en bas de page http://forum.zwiicms.com/files/file/112-comment-afficher-une-image-en-bas-de-toutes-les-pages/ on a de quoi complètement personnaliser le pied de page.

Modifié par augras
  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites

×
×
  • Créer...