[ASTUCE] Une seule colonne dans le pied de page

[Fred 1 070]

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 :

 

 

 

Enjoy !!!

[augras 216]

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é 26 mai 2019 par augras

[Fred 1 070]

Avec plaisir @augras

 

[Fred 1 070]

Bonjour @Iron

C'est un bug, je déplace dans un sujet de la bonne catégorie.