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&egrave;me One-Page<br /> Ce th&egrave;me est inspir&eacute; de "Freelancer" <a href="http://startbootstrap.com">Start Bootstrap</a> <br /> <span> <a title="Mentions l&eacute;gales" tabindex="0" data-placement="top" data-toggle="popover" data-trigger="focus" data-content="Ce site est &eacute;dit&eacute; par Hoscar
H&eacute;bergeur
SARL e-monsite
19, rue Lamartine
80000 Amiens
France">Mentions l&eacute;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")

Pour toute demande de personnalisation

Contactez-moi

Forum e-monsite

Commentaires (7)

Maxime
  • 1. Maxime | 02/05/2015
Intéressant comme tuto pour ceux qui en ont besoin.
Dommage qu'il manque un lien pour voir la démo ou quelques captures d'écran pour voir à quoi ça correspond
hoscar
  • hoscar | 10/05/2015
Merci Max. C'est vrai que ça manque de captures d'écran ou de commentaires sur les codes CSS, j'améliorerai tout ça à l'avenir.
cATHY
  • 2. cATHY | 02/07/2015
Bonjour Hoscar,
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
Cathy
  • 3. Cathy | 02/07/2015
J'ai trouvé la solution, j'annule donc ma question :) mais j'en ai une autre ! Vous conseillez de choisir le thème Showroom /Boostrap => il est intégré à ce thème un moteur de recherche dans le header et propose : "Votre recherche"... ce qui n'est pas très utile pour un site "one page", pourriez-vous me dire comment le supprimer ?
Je vous en remercie.
hoscar
  • hoscar | 07/07/2015
Bonjour Cathy, Dans la partie Menu Horizontal du haut dans la personnalisation de l'apparence, vous pouvez décocher la case permettant de mettre ce moteur de recherche qui certes, n'a rien à faire sur une site one page ;)
Manouel
  • 4. Manouel | 18/04/2016
Bonjour

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
hoscar
  • hoscar | 12/12/2016
Bonjour, Désormais, c'est plus simple avec le thème Smart : http://astuces-html-css.e-monsite.com/

Ajouter un commentaire