1. Smily
  2. Votre site internet
  3. Comment gérer votre site internet avec notre application Site Internet ?

Articles dans cette section

Afficher plus

Site Internet - Modèles

Avatar
Yannick Léger
  • Mise à jour
S’abonner

Documentation Technique

BookingSync a créé spécialement pour vous un site internet basé sur un thème. Cependant, vous avez aussi accès à tous les fichiers qui définissent celui-ci afin d’effectuer les changements souhaités :

  • Fichiers liquid
  • Fichiers javascripts
  • Fichiers style

Nous vous recommandons de ne pas effectuer de changements sauf si vous avez les connaissances techniques ou si vous contactez quelqu’un qui a les capacités requises.

En effet, dès que vous faites des changements (en dehors de ceux expliqués dans la section ci-dessous) nous ne pouvons plus fournir aucun support technique gratuit.

Vous trouverez les informations techniques détaillées à cette page : Website documentation

Pour les concepteurs, nous avons mis à votre disposition cette vidéo, en anglais, afin de vous apporter quelques informations supplémentaires et intéressantes.

Conseils

Pour ajouter un logo à votre site internet BookingSync, vous devez suivre les étapes suivantes:

  • Ajoutez le logo en format jpg ou png dans la section image, cliquez sur le + et renommez votre image logo.png
  • Cliquez sur Publier le modifications

models.png

  • Allez dans le fichier _menu.liquid
  • Enlevez le commentaire de la ligne 26 (<!-- et -->)
  • Supprimez la ligne 27.
  • Cliquez sur Enregistrer
  • Cliquez sur Publier les modifications

Vous pouvez aussi modifier la taille de votre logo pour qu’il soit ajusté à votre page:

  • Aller dans le fichier _variables.scss à la ligne 119
  • Par exemple si vous souhaitez avoir votre logo d’une hauteur de 100px vous devez écrire: $navbar-height: 100px;
  • Cliquez sur Enregistrer
  • Cliquez sur Publier les modifications

Comment ajouter un favicon

Pour ajouter votre favicon à votre site internet BookingSync, vous devez suivre les étapes suivantes:

  • Chargez le favicon en format png dans le dossier Images en cliquant sur le bouton vert + et nommez le favicon.png
  • Cliquez sur Publier les modifications
  • Allez dans le fichier Modèles > Layouts > layout.liquid
    • Allez à la ligne 63 <head>
    • Ajoutez le tag : <link rel="shortcut icon" href="{{ 'favicon.png' | image_url }}">
    • Cliquez sur Enregistrer
    • Cliquez sur Publier les modifications

Important

Votre favicon doit être au moins de 16px*16px. Le taille optimale est de 64px*64px. Il existe de nombreuses ressources gratuites en ligne où vous pouvez transformer l'image de votre logo en favicon.

Comment ajouter un slogan dans la page d’accueil au dessus du slider

Ex. http://www.locationvacancesquebec.com/

  • Allez dans la section Traductions, créez une nouvelle clé home.slogan et indiquez un contenu pour chaque langue utilisée par le site.
  • Dans Modèles > Snippets, ajoutez un nouveau snippet appelé home_slogan.liquid avec le contenu suivant :

<section id="home-slogan" class="home-slogan">
<h1 style="text-align:center;">{% t 'home.slogan' %}</h1>
</section>

  • In _home.scss file, add the style (can be adjusted)

/// addition for the slogan
.home-slogan {
position: absolute;
bottom: 60vh;
left: 0;
width: 100%;
z-index: 1000;
h1{
color: #fff;
text-shadow: 0 3px 3px rgba(0,0,0,1);
font-weight: 500;
font-size: 48px;
}
}
@media (max-width: $screen-xs-max) {
.home-slogan {
h1 {
font-size: 18px;
}
top: 20vh;
}
}

  • In index.liquid, add {% include 'snippets/home_slogan' %}

Comment utiliser des images personnalisées dans le slider de la page d’accueil

  • Préparez les images, préférablement utilisez la même résolution pour toutes les images ainsi nommez les avec un nom consistent comme: slide_1.jpg, slide_2.jpg, etc...
  • [Optionnel mais recommandé] Optimisez vos images en taille réduite mais sans perdre en qualité. Nou svous recommandons cette application en ligne: https://kraken.io/web-interface
  • Chargez les images dans le dossier Images en cliquant sur le bouton vert +
  • Editez le fichier Snippets/home_slider.liquid:
  • Remplacez le texte existant par celui le code ci-dessous:

<section id="rentals" class="home-slider royalSlider rsDefault fwImage hidden-print">
<div class="rsContent">
<img src="{{ 'slider_1.jpg' | image_url }}" class="rsImg">
</div>
<div class="rsContent">
<span data-src="{{ 'slider_2.jpg' | image_url }}" class="rsImg"></span>
</div>
<div class="rsContent">
<span data-src="{{ 'slider_3.jpg' | image_url }}" class="rsImg"></span>
</div>
</section>

Chaque <div class="rsContent">...</div> représente un slide.

Veuillez noter que le code de la première image diffère du second et ainsi de suite. Veuillez utiliser les noms de fichiers comme indiqué à la 1ère étape.

Où dois-je insérer les codes du site pour les opt-ins ou boîtes de discussions, etc...

Ces codes doivent être insérés dans Modèles > Layouts > Layout.liquid

et dans la section <head> ou suivre les instructions reçues.

Comment changer la couleur d’arrière plan du menu

Selon votre logo ou couleur utilisée pour le menu, il pourrait être bien aussi de changer la couleur de l’arrière plan.

  • Allez à Modèles > Stylesheets > _variables.scss
    • ligne 131 $navbar-landing-bg: transparent;
  • Changez transparent par la couleur que vous désirez:
    • rgba(0, 0, 0, 0.5) pour le noir transparent
    • rgba(255, 255, 255, 0.5) pour le blanc transparent
    • #fff pour le blanc
    • $brand-primary pour la couleur principale
    • etc...

Comment changer le bouton du formulaire Réserver Maintenant

Si vous changez la couleur principale de votre site internet, Cela peut être bien aussi de changer la couleur du formulaire de réservations qui est par défaut en vert ou bleu.

 

  • Allez à Modèles > Stylesheets > application.scss
  • à la fin du fichier, ajoutez le code pour styliser le formulaire comme décrit dans cet article.
  • Changez la couleur du code comme cela vous convient.

Comment cacher la table de prix dans la page des locations

Pour cacher la table de prix dans la page de vos locations, suivez ces étapes:

  • Ouvrir le fichier rental.liquid, dans la section Modèles
  • Supprimer de la ligne 21 à 25 (incluse):

l21.png

  • Supprimez de la ligne 209 à 222 (incluse):

l209.png

Articles associés

Commentaires

0 commentaire

Vous devez vous connecter pour laisser un commentaire.