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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.


×
×
  • Créer...