Realizzare Footer accattivante

[PieroG]

Buongiorno,
qualcuno sa indicarmi come realizzare un footer carino, dove mettere mappa, dati, e altre cose?

[Limma]

Le vie possibili sono parecchie, ma giusto per capirci, tu intendi qualcosa tipo questo?
"Bellezza" a parte, naturalmente... 

[PieroG]

Voi metterci:
indirizzo, contatti, mappa della sede, icone social network. Le informazioni base quindi

[Limma]

Puoi metterci tutto ciò che vuoi, la cosa da capire è come strutturarlo.
L'esempio che ho linkato, fatto in tre minuti circa, è organizzato per colonne, ed è, naturalmente, perfettamente responsive.
Con un po' di css poi si può renderlo più "carino" da vedere, ma il problema di base resta la struttura

[PieroG]

Scusa non avevo visto il link.
Così per me sarebbe perfetto.

[Limma]

Così per me sarebbe perfetto.

Se è così, non è affatto difficile da realizzare. Ho creato un modulo personalizzato, un po' di html per inserire i contenuti, l'ho pubblicato nella posizione "footer" del template, ed il gioco è fatto...

[PieroG]

Hai un esempio? per esempio quello del sito che mi hai indicato?

[Limma]

L'esempio che ti ho linkato è realizzato con questo codice:

Codice: [Seleziona]

<div class="row">
<div class="col-md-3">
<p style="text-align: center;">&copy; 2017 Disegnare il Web. <br />Tutti i diritti riservati.</p>
<p style="text-align: center;">disegnareilweb.it non &egrave; collegato con joomla.org - tutti i marchi riportati appartengono ai legittimi proprietari</p>
</div>
<div class="col-md-3">
<p><a href="https://nibirumail.com/cookies/policy/?url=www.disegnareilweb.it" target="_blank" rel="noopener noreferrer">Cookie Policy</a></p>
<p><a href="//www.iubenda.com/privacy-policy/8067753" class="iubenda-white iubenda-embed" title="Privacy Policy">Privacy Policy</a>
<script type="text/javascript">(function (w,d) {var loader = function () {var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src = "//cdn.iubenda.com/iubenda.js"; tag.parentNode.insertBefore(s,tag);}; if(w.addEventListener){w.addEventListener("load", loader, false);}else if(w.attachEvent){w.attachEvent("onload", loader);}else{w.onload = loader;}})(window, document);</script>
</p>
</div>
<div class="col-md-3"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.991440608206!2d2.292292615793431!3d48.85837360866162!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e2964e34e2d%3A0x8ddca9ee380ef7e0!2sTorre+Eiffel!5e0!3m2!1sit!2sit!4v1500468529501" width="600" height="450" frameborder="0" style="border: 0;" allowfullscreen="allowfullscreen"></iframe></div>
<div class="col-md-3">
<div style="padding: 10px; background: lightgray;"><img src="images/ImagoTest/Orizzontale6.jpg" alt="Orizzontale6" /></div>
</div>
</div>Come ho scritto prima l'ho fatto al volo in tre minuti, per cui è alquanto grezzo, ma era giusto per dare un'idea...

P.S. Il codice qui sopra lo puoi vedere anche visualizzando il sorgente pagina.
P.S. Dimenticavo...L'esempio è stato realizzato su un template, Helix 3, che utilizza Bootstrap 3