Dans ce tutoriel, nous allons nous mettre à concevoir une page d’accueil attractive pour réaliser un site pour agence de voyage. Il conviendra également aux blogueurs globe trotteurs qui parcourent le monde pour décrire leur voyage. Si vous voulez déjà voir à quoi cela ressemble, voici la démonstration du site « Travel ».

La mise en place d’une image plein écran, du logo et d’un slogan

Commencez par créer votre page d’accueil, puis à utiliser le générateur Divi pour commencer la conception.

Paramétrage de la section

Ajouter une section en pleine largeur et insérer un module En-tête plein écran. Dans les paramétrages de la section > paramètres généraux, ajoutez votre image de fond.

creer-site-voyage-avec-divi-01

Dans cette même fenêtre, il faudra ensuite activer l’effet de parallaxe et utiliser la méthode parallaxe : parallaxe réelle.

Vous modifierez ensuite les marges internes pour mettre à 0px en haut, en bas, à gauche et à droite.

Vous pouvez enregistrer et quitter.

Paramétrage du module en-tête plein écran

Modifiez les paramétrages du module en-tête plein écran > paramètres généraux en mettant OUI à l’option Passer en mode plein écran.

Pour mettre le logo et le slogan, j’ai ajouté une image au format .SVG. Ce format d’image est un graphique vectoriel basée sur le XML.

creer-site-voyage-avec-divi-02

Attention, vous ne pourrez probablement pas ajouter le graphique au format .svg par l’intermédiaire de la bibliothèque de médias. Il faudra l’envoyer par ftp et indiquer l’url dans le module.

Sauvegardez et quittez pour terminer cette première étape.

Une deuxième section pour ajouter une ligne de 4 images.

Pour illustrer votre site, nous pouvons ajouter une ligne avec 4 images. Pour cela, il suffit d’ajouter une section standard puis 4 colonnes.

Vous ajouterez ensuite un module images dans chacune des 4 colonnes.

Dans les paramétrages de la section > paramètres généraux, ajoutez 0px au niveau des marges internes en haut, à droite, en bas et à gauche.

Dans les paramétrages de la ligne de module vous effectuerez les réglages suivants :

  • Passer cette ligne en mode pleine largeur : OUI
  • Utilisation Personnalisée Largeur De Gouttière : OUI
  • Espacement des colonnes : 0
  • Personnaliser la marge interne : 0px en haut, à droite, en bas et à gauche

Il ne vous reste plus qu’à ajouter les images dans chacun des modules Image. Si vous voulez, vous pouvez activer Ouvrir dans une visionneuse pour permettre l’agrandissement de vos images sur le site.

 

Veillez à mettre des images de même hauteur afin d’éviter des espaces blancs et une mise en page qui ne serait pas homogène.

Ajouter du contenu à votre page d’accueil

Pour présenter votre activité, vous pourrez ajouter du contenu et une belle photo. Pour cela il suffit d’ajouter une nouvelle section standard avec 2 colonnes.

Dans les paramétrages de la section, mettez à 0px les marges internes (en haut, en bas, à gauche et à droite).

Dans les paramétrages de la ligne de module vous effectuerez les réglages suivants :

  • Passer cette ligne en mode pleine largeur : OUI
  • Utilisation Personnalisée Largeur De Gouttière : OUI
  • Espacement des colonnes : 0
  • Personnaliser la marge interne : 0px en haut, à droite, en bas et à gauche

Dans l’onglet paramètres avancés de conception, activez l’option suivante :
Harmoniser les hauteurs des colonnes : OUI

Dans la colonne de gauche, ajoutez un module texte. Dans les paramètres avancés de conception du module texte, mettez des marges à 30px par exemple.

Dans la colonne de droite, ajoutez le module image.

creer-site-voyage-avec-divi-03

Ajoutez une autre section et reproduisez les étape ci-dessus en inversant le module image et texte.

Vous pouvez également cloner votre section pour conserver les réglages, il suffira de changer l’image et le texte.

Ajouter une image parallaxe pour finir cette page d’accueil

Pour finir cette page d’accueil et pour finir en beauté, vous allez en mettre plein la vue aux visiteurs de votre site. En effet, choisissez une belle photo pour donner envie à vos clients de voyager.

Ajoutez une section standard dans laquelle vous mettrez une image de fond dans les paramètres généraux. Utilisez l’effet parallaxe et activez la méthode parallaxe réelle. Personnalisez la marge interne avec 27px par exemple en haut et en bas.

Ajoutez une ligne dans laquelle vous pouvez y mettre un module texte. Adaptez votre texte par rapport à votre image de fond en jouant sur les valeurs de largeur maximale de 50% par exemple ou encore sur les marges internes que vous trouverez dans l’onglet paramètres avancés de conception.

Ajoutez ensuite une deuxième ligne, cette fois vous devrez passer la ligne en pleine largeur, personnaliser la largeur de gouttière, mettre à 0 l’emplacement des colonnes, mettre à 0px les marges internes en haut, bas, gauche et droite.

Ajoutez un module image, dans les paramètres généraux, chargez votre image et activez l’option supprimer l’espace sous l’image.

Vous souhaitez télécharger le thème agence de voyage ?

J’espère que le tutoriel aura été assez explicite. Si vous avez perdu le fil, vous pouvez télécharger le thème enfant pour l’importer dans votre projet.

Pin It on Pinterest

Share This