Présentation de site One-page (tutoriel)
Dans certains cas, une présentation de site One-Page peut être utilisée. Si vous n'avez pas beaucoup de contenus à placer sur votre site, que vous ne voulez pas tenir à jour un blog, que vous n'avez pas d'album photos, une seule page peut être suffisant pour présenter votre activité. Le site Présentation One-Page réalisé avec e-monsite et un thème Bootstrap (compatible avec les équipements mobiles) propose cet affichage des contenus sur une unique page.
Comment créer une présentation de site One-Page
Pour créer le site Présentation One-page sur l'outil de création de site e-monsite.com, voici comment procéder.
Choisir le thème Bootstrap Showroom (e-monsite.com)
D'autres thèmes sont possibles (responsive Bootstrap de préférence) mais le thème Showroom peut être utilisé pour son entête avec carrousel d'images ou image fixe affichée en très large. Showroom quoi !! Attention : certaines indications CSS de ce tutoriel ne sont valables que pour ce thème.
Supprimer les contenus "exemple" de ce site One page
Ne conservez que deux modules : Pages et Contact. Dans ces modules, supprimez dès la création les contenus d'exemple (éventuelles pages coordonnées, qui sommes-nous et ne conservez qu'un formulaire de contact).
Il ne vous reste donc au final que les contenus suivant : dans Pages et Gérer les pages : la page d'accueil. Dans Contact : un seul formulaire de contact.
Ajouter des contenus sur la page d'accueil de votre site One-Page
La page d'accueil sera la seule page de votre site. Pensez à ajouter vos contenus en SEO friendly - pour optimiser les recherches sur les moteurs de recherche. Le titre de la page (h1) sera particulièrement important. Evitez les "Accueil", "Mon site", etc. Si vous faites un site pour une boulangerie par exemple placez un titre de page du style :
"Boulangerie Exemple - 1 rue de l'exemple - Ville"
Utilisez ensuite l'ajout de lignes pour créer automatiquement les h2. Les titres de ligne seront aussi important au niveau des mots choisis. Pour avoir différentes couleurs de section de contenus, des class CSS pourront être ajoutées. Un bon tutoriel d'e-monsite existe pour cela : Utiliser l'option CSS pour créer des pages.
Les class CSS utilisées sur le site Présentation One-page
Pour les différentes sections, les "class de ligne" utilisées sur le site de Présentation One-page Bootstap sont :
- bg-blanc (fond blanc)
- bg-blue (fond bleu-turquoise)
La class .bg-blanc a une propriété "margin-bottom: none !important;" car le fond du site est turquoise (#18bc9b;) - comme le bg-blue. Sans cette propriété, le fond turquoise est présent sur le bas de chaque section blanche.
Les couleurs sont bien évidemment modifiables à souhait en récupérant leur code couleur et en les indiquant en RGBA ou en Hexadécimal.
Aide : Comment trouver le code couleur ?
.bg-blanc{ background-color: #ffffff; margin-bottom: none !important; padding: 10px; }
.bg-blue{ background-color: #18bc9b; padding: 10px; }
Le code CSS complet à utiliser pour le site présentation One-page
Voici le code complet ajouté dans Configuration, Apparence et dans le formulaire en bas de page - Ajouter/modifier du code CSS au thème.
Attention, les deux premières règles ne sont applicables que si vous ne mettez pas d'image ou carrousel d'entête sur le thème :
html body#welcome_index.default div#header-bg.header-img.fullscreen div.item{ display: none; } div#main-area.main.without-sidebar{ width: 100%; margin-top: 30px; }
html body#welcome_index.default div#header-bg.header-img.fullscreen div.item{ display: none; } div#main-area.main.without-sidebar{ width: 100%; margin-top: 30px; } .main { max-width: 100%; } .row { margin-left: 1px; margin-right: 10px; } .footer-main footer { width: 100%; max-width: 100%; } body#welcome_index.default.footer-main nav.navbar.navbar-fixed-top{ height: 6em; } .navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner { border-width: 0; box-shadow: none; margin: 0.5em; } .bg-blue{ background-color: #18bc9b; padding: 10px; } .bg-blanc{ background-color: #ffffff; margin-bottom: none !important; padding: 10px; } .row-container { margin-bottom: 0px; } h1{ color: #ffffff; text-align: center; } form { margin: 0 0 20px; width: 90%; } div.navbar-fixed-top ul.nav li.active a#link1.nav-section1{ background-color: #18bc9b; } .pieddep{ margin:10px auto; width:100%; display: inline-block; } html body#welcome_index.default footer#footer div#brandcopyright ul{ text-align: center; }
Les autres codes CSS et JavaScript utilisé sur le site de présentation One page
Deux autres codes sont utilisé sur ce site de présentation One page pour la mise en forme de l'infobulle permettant l'intégration des mentions légales dans un popover Bootstrap.
Le premier code est pour le CSS de cette infobulle, le second, le JS pour que l'infobulle apparaisse sur le site.
Le premier est à placer dans le CSS supplémentaire et le second dans les scripts supplémentaires dans Configuration, Réglages, Zones éditables.
/* popover-content est à modifier pour le contenu de la popover */ .popover-content { background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-radius: 5px 5px 0 0; color: #000000; font-size: 14px; font-weight: normal; line-height: 18px; margin: 0; padding: 8px 14px; }
$(function () { $('[data-toggle="popover"]').popover() }) $(function () { $('[data-toggle="tooltip"]').tooltip() })
Le pied de page du site One page
Voici le code HTML insérer dans la zone éditable du bas (pied de page). Le code est à ajouter depuis l'outil HTML de l'éditeur visuel de cette partie des zones éditables.
En affichant l'éditeur visuel (en enregistrant le contenu dans l'outil HTML), vous pourrez modifier les contenus simplement.
<div class="pieddep">
<table style="margin-left: auto; margin-right: auto;" cellpadding="5" cellspacing="10">
<tbody>
<tr>
<td style="width: 33.34%;">
<p><img alt="inconefreelancer" src="http://one-page.red-fish-web-syndrome.fr/medias/images/profile-blue.png" style="display: block; margin-left: auto; margin-right: auto;" height="68" width="245" /></p>
</td>
<td style="width: 33.33%;">
<p style="text-align: center;"><span style="font-size: medium;">Exemple de thème One-Page<br /> Ce thème est inspiré de "Freelancer" <a href="http://startbootstrap.com">Start Bootstrap</a> <br /> <span> <a title="Mentions légales" tabindex="0" data-placement="top" data-toggle="popover" data-trigger="focus" data-content="Ce site est édité par Hoscar
Hébergeur
SARL e-monsite
19, rue Lamartine
80000 Amiens
France">Mentions légales</a></span> <br /> </span></p>
</td>
<td style="width: 33.33%;">
<p style="text-align: center;"><span style="font-size: medium;">Retrouvez-moi sur Twitter</span><br /><a href="https://twitter.com/HoscarRFWS"><img src="http://one-page.red-fish-web-syndrome.fr/medias/images/twitter-blue.png" alt="Twitter blue" class="img-center" height="64" width="64" /></a></p>
</td>
</tr>
</tbody>
</table>
</div>
Le menu horizontal du site de présentation One-page Bootstrap
Le menu horizontal est à éditer en HTML pour y placer les liens vers les ancres insérées dans la page.
Le code HTML du site de présentation One-page est présent à droite. Les ancres sont à placer dans le contenus. Voici le lien du tutoriel e-monsite :
Placer une ancre dans une page.
Les contenus et ancres de ce menus sont à modifier selon les ancres et liens que vous souhaitez proposer.
<div class="navbar-fixed-top"> <ul class="nav"> <li class="scroll"><a href="#section-1">One-Page</a></li> <li class="scroll"><a href="#section-2">A Propos</a></li> <li class="scroll"><a href="#section-3">Contact</a></li> </ul> </div>
Les balises meta pour le site one-page
Les balises meta pour le site one-page sont à ajouter dans la partie Pages, Options. Optimiser les balises META de votre site One-page !
Des améliorations sont en prévision sur le site one page. Elles seront ajoutées au fur et à mesure sur cette page. Sont prévu notamment :
- Animation CSS
- Défilement d'images de fond
- Smooth scroll (accès aux ancres avec défilement "doux")
Commentaires (7)
- 1. | 02/05/2015
- | 10/05/2015
- 2. | 02/07/2015
Je ne comprends pas comment "éditer en HTLM" le menu horizontal... Je peux le modifier dans Configuration/apparence/*Menu horizontal du haut mais je n'ai pas accès au code htlm à cet endroit.
En tout cas merci pour votre partage
- 3. | 02/07/2015
Je vous en remercie.
- | 07/07/2015
- 4. | 18/04/2016
je cherche également a faire un site en one page, j'utilise déja la plate forme e monsite avec un theme showroom
je voudrais simplement pouvoir avoir mon contenu qui prenne toute la largeur de la fenêtre, comment faire?
Merci par avance de votre réponse
- | 12/12/2016
Dommage qu'il manque un lien pour voir la démo ou quelques captures d'écran pour voir à quoi ça correspond