Comment créer un site pro en 35 minutes

Abonnez vous à la chaine Youtube:

Pensez à partager cette page:

Webp.net-resizeimage (6)

Prérequis pour créer un site pro

le but de cette vidéo:

Alors le but de cette vidéo est de montrer qu'il est possible de créer soi-même son site internet sans connaissances en html, css, php.

Faire du design tout simplement, montrer qu'il n'est pas nécessaire de passer des semaines sur le design pour avoir un site fonctionnel attractif, lorsqu'on utilise des bons outils.

En revanche si votre budget le permet il est conseillé de passer par un webdesigner confirmé qui vous fournira un design impeccable et sans erreur.

Les outils de cette vidéo pour créer son site internet:

- Un nom de domaines, GoDaddy

- Un hébergeur web, A2hosting

- Un CMS, wordpress (nous avons une autre vidéo qui explique comment installer wordpress)

- Et enfin un thème wordpress que l'on va utiliser dans cette vidéo qui s'appelle DIVI.

Pensez donc à regarder nos précédentes vidéos (et articles), qui expliquent notamment comment choisir un nom de domaine, quel hébergeur est le plus conseillé et comment pointer son nom de domaine vers son hébergeur.

Outils pour créer un site internet rapidement

À tout de suite pour le site internet en moins de 35 minutes !

Installation du thème wordpress

Donc nous voici donc devant wordpress de base que nous venons d'installer dans une vidéo précédente.

Nous allons nous rendre donc sur la page du tableau de bord, cliquez sur apparence puis sur thème.

Nous allons mettre un thème en ligne alors cliquez sur choisir le fichier et cliquez sur le thème moi j'ai le thème DIVI 3.0. 

Mise en ligne du thème wordpress DIVI

Cliquez sur installer, le format du thème doit être en "zip". Donc vous cliquez sur installer, vous attendez en général moins d'une minute et vous voyez apparaître normalement ces quelques phrases qui expliquent que la décompression, l'installation et enfin le thème ont bien été installés.

Une fois cela fait cliquez sur activer, aller seul onglet DIVI , puis allez dans options du thème, nous allons dans cette étape ajouter un logo à notre site internet.

Il y à également une autre méthode pour ajouter un thème ou une extension sur wordpress.

Identité du site

Alors, j'ai créé déjà un logo que j'ai déjà mis en ligne, mais vous pouvez l'ajouter tout simplement s'il est sur votre ordinateur. Vous n'avez qu'à aller dans les dossiers et ajouter l'image.

Comme vous pouvez le voir, je vais dans la palette de sélectionneur des couleurs par défaut et je rajoute la couleur de base, ce qui me permettra lors de la sélection de couleurs quand je modifierai le site d'avoir un accès rapide à ces couleurs. C'est donc pour gagner du temps et c'est très pratique, vous n'avez plus à rechercher le code html de chaque couleur. Il suffit d'avoir le code html, vous l'ajoutez sur la palette et vous êtes tranquille pour toute la période où vous allez créer votre site internet.

Options prédéfinis de son site internet

Pensez à cliquez sur sauvegarder les changements et vous verrez une petite icône vers apparaître quand les changements sont enregistrés en dessous.

Dans options du thème, cliquez sur personnaliser.

Vous voyez votre blog qui apparaît, votre blog de base. On remarque que mon logo a bien été pris en compte alors on va commencer par modifier l'identité du site.

Comme titre du site je vais mettre "climeasy" et le slogan je marque "vente installation et maintenance de climatisation".

Cette étape modifie ce qui apparaît dans l'onglet de votre navigateur, vous voyez pour l'instant il y a écrit "my blog" et "wordpress blog".

Changer le nom et le slogan du site internet

Cliquez sur enregistrer et publier.

Maintenant on va modifier la taille du logo qui est trop petit pour le moment; rendez-vous sur en tête puis sur barre de menu primaire, vous pouvez modifier la hauteur maximum de cette barre, la hauteur maximum du logo. Vous pouvez modifier, bien sûr, aussi la taille du texte du menu l'espacement des lettres de ce même menu.

Donc j'ai agrandi un petit peu tout. Vous pouvez déjà changer la police que avez choisi, celle qui vous semble appropriée que vous avez utilisé sur tout le site internet.

Moi j'ai choisi la police "Crimson text" je la modifier directement dans cette partie. Nous avons aussi la possibilité de modifier la couleur du texte du menu. Comme dans l'étape précédente j'ajoute mon code html que j'ai déjà prédéfini. Si vous voulez, vous pouvez modifier la couleur de l'arrière-plan et modifier tout un tas de choses dans cette barre supérieure.

Dans l'en-tête on va modifier aussi, tant qu'à faire, le pied de page "le footer". Cliquez sur barre inférieure. Dans le Footer aller à "edit footer credit" et modifier ce qui va apparaître dans le pied de page de toutes les pages de votre site internet.

Modification du pied de page du site internet

Ici j'ajoute "tous droits réservés" à mon site internet, ici "climeasy.com" je rajoute un petit code html avec un a href vous pouvez utiliser vous aussi ce code: <a href="http://www.climeasy.com">climeasy.com</a>

Toutes les personnes qui cliqueront sur ce lien arriveront sur la page d'accueil de votre site internet. N'oubliez pas de cliquer sur enregistrer et publier.

Rendez-vous maintenant dans les paramètres généraux puis typographie nous allons donc pouvoir modifier toutes les polices d'un seul coup. Alors je modifie les polices d'en-tête, les police de corps de texte. Pareil, je veux la même police à peu près de partout donc je change la police à "Crimson text".

Vous pouvez modifier dans cet onglet la taille du texte dans le corps, la taille du texte des en-têtes, vous pouvez donc un peu modifier tout ce que vous voulez. Par exemple modifier les espacements entre les lettres ou entre les lignes pour obtenir l'effet que vous désirez.

Pensez à cliquer toujours sur enregistrer et publier et nous allons quitter le modificateur de thème pour le moment.

Nous allons maintenant créer la page d'accueil de notre site internet.

Création des pages importantes

Nous allons dans "pages", "toutes les pages". Nous allons commencer par supprimer la page de base de wordpress. Cliquez ensuite sur "ajouter" et mettez le titre de votre page. Ici je marque "homepage" donc dans cette vidéo je vais m'attarder principalement sur la création de la page d'accueil, mais dans la formation nous nous occuperons des autres pages. 

Création des pages du site internet

Je rajoute la page "à propos", "politique de confidentialité", je pourrais rajouter une page "contact" aussi. Voilà ce sont donc les pages principales à ajouter dans un site internet.

Une fois qu'on a qu'on a créé toutes ces pages, on va aller dans le menu.

Création du menu

Cliquez sur "créer un menu". On va lui donner un nom, moi je vais l'appeler "menu principal". On clique sur "créer le menu" et on obtient cette page. On voit que toutes les pages que l'on vient de créer sont placées sur le côté gauche. Il suffit de sélectionner chacune des pages et de cliquer sur ajouter au menu.

création du menu principal du site internet

Vous voyez donc que toutes les pages glissent vers la partie structure du menu et il est possible à ce moment-là de les placer dans l'ordre que l'on souhaite. Je veux que la page "home" soit le plus à gauche, donc je la mets en premier ensuite je veux qu'il y ait "nos services", donc je la mets en dessous de l'autre. Je veux qu'il y ait "à propos" complètement à droite, donc je mets en dessous de "nos services".

Enfin, je veux que "politique de confidentialité" soit dans un menu déroulant en dessous de "à propos", donc je le décale un tout petit peu vers la droite.

Placement des éléments du menu du site internet

Il faut ensuite cliquer sur "enregistrer le menu" sans oublier de cocher "menu principal" et nous allons désormais regarder à quoi ressemble notre site pour l'instant.

Donc on voit que mon logo est à une taille correcte, on voit que mon menu et de la couleur que j'ai souhaité, que la typographie que j'ai souhaité est présente. Aussi, on voit que l'ordre du menu est bien comme je lé souhaitait, avec "home", "nos services", "à propos" et "politique de confidentialité" qui se trouve en dessous de "à propos".

Pour l'instant on est pas mal. Notre pied de page correspond à ce qu'on souhaite aussi donc on va retourner sur le tableau de bord.

Définir la page d'accueil

Donc, rendez-vous maintenant dans la partie réglages, nous allons attribuer la page "home" à la page d'accueil de notre site internet. Donc nous allons nous rendre dans "lecture" un sous l'onglet de "réglages". Nous allons cliquer sur "une page statique" pour que la page d'accueil affiche une page statique. Sélectionnez la page que vous désirez voir apparaître comme page d'accueil de votre site, internet dans mon cas "home"

Choisir quelle sera la page d'accueil du site

Cliquez sur "enregistrer les modifications", nous allons donc maintenant modifier cette page d'accueil. Rendez-vous dans "page", "toutes les pages" et nous voyons que "home" à était ajoutée à page d'accueil.

Le design de la page d'accueil

Cliquez donc sur la page que vous avez définie comme page d'accueil, on va utiliser le "constructeur de pages" de notre thème DIVI.

Après avoir cliqué sur "modifier la page" cliquez sur "utiliser le générateur DIVI" et enfin "utiliser le visual bulder". Nous allons pouvoir créer un site internet le tout de façon visuelle.

utilisation du constructeur de page

Nous voici donc sur notre page d'accueil à modifier, vous voyez il n'y a rien sur cette page.

Nous avons une partie bleue qui représente les rangées et un petit bouton vert qui représentent les éléments que nous pouvons ajouter dans ses rangées. Alors, allons-y !

Comment ajouter des modules sur le constructeur de pages

Le haut de page

Ajoutons une nouvelle rangée en mode plein écran, vous voyez, vous avez plusieurs options de ranger qui sont prédéfinis . Nous allons choisir un en tête en plein écran, vous voyez qu'une petite fenêtre s'ouvre on va lui donner donc un titre qui sera le nom de notre société.

On va placer donc le titre au centre, vous voyez qu'on peut déplacer cette petite fenêtre pour la faire apparaître à un endroit où elle ne nous gênera pas.

Cliquez sur "repasser en mode plein écran" pour que la rangée soit donc dans tout l'écran. Nous allons ajouter donc deux boutons, le premier "nous contacter" et nous ajoutons donc l'url de la page de contact.

Puis un deuxième bouton avec écrit: "voir nos services" avec, cette fois ci, climeasy.com/nos-services.

Je clique sur "ajouter une image en fond d'écran",  donc cette image qui sera tout en haut de mon site internet en dessous du logo et du menu.

Si vous descendez vous pouvez voir que vous avez un petit espace où vous pouvez rajouter du texte, je vais donc ajouter une petite ligne de texte pour montrer: "votre fournisseur et installateur de climatisation à domicile".

Une fois que vous êtes satisfait de ce que vous avez créé, vous cliquez sur "confirmer et enregistrer" et nous allons donc supprimer la première rangée vide qui ne nous sert à rien.

Je retourne donc dans les options de l'en tête que je viens de créer. Je vous montre aussi qu'il est possible de modifier directement le texte sur la page sans avoir à passer par la partie option, il suffit de double-cliquer sur un élément, comme ici, je clique à la fin de "domicile" pour ajouter un point. Vous pouvez ajouter autant de lignes de texte que vous désirez. 

 Nous allons retourner dans les options pour modifier un petit peu la taille et la couleur de notre titre qui me semble un peu léger. Donc on va dans "design", "police du titre" et on choisit la couleur que j'avais ajoutée dans ma palette, vous vous souvenez au tout début dans les options du thème divi? Je vais garder la police de défaut puisque c'est donc la police qui est présente sur tout le site internet et je vais ajouter le titre en gras et en italique.

Je vais en même temps augmenter la taille de la police pour qu'il soit un peu plus percutant.

Bon comme vous pouvez le voir, le titre se trouve au niveau du climatiseur ce qui fait que ce n'est pas très beau, il faudrait modifier un peu cela... mais pour l'instant on va laisser comme ça on augmenter un petit peu la taille de la police du contenu.

J'augmente la taille du texte à 23 pixels sur le bouton 1 on va modifier aussi donc la couleur, puisque ce n’était pas la bonne couleur de base. De la même façon, on utilise la couleur qui est déjà présente sur la palette.

Vous voyez, on n'a pas besoin de perdre de temps à chercher la couleur qu'il nous faut: elle est déjà présente !

On va encore modifier un petit peu le bouton en lui ajoutant un "icon". On va donc placer cet "icon" à gauche du texte. Cette petite option permet d'afficher l'icône en survol avec la souris.

Je vais donc modifier aussi de la même façon le bouton numéro 2 donc pareil je le remets à 23 pixels, je change la couleur du bouton, je supprime la bordure le pixel de différence de la bordure et j'ajoute un "icon" avec le même design et un petit effet "hover". Vous pouvez vous amuser à modifier chacun des éléments que vous utilisez, c'est très intuitif et très rapide.

Design de la première partie du site internet

Deuxième rangée

Nous allons donc insérer une nouvelle rangée puis cliquer sur la partie verte où il est possible d'ajouter des modules, donc des éléments, que ce soit du texte des photos ou autre.

On va commencer par ajouter du texte, une fois que vous avez cliqué sur l'élément que vous souhaitez ajouter, une petite fenêtre s'ouvre et vous pouvez donc ajouter le texte que vous désirez.

J'ajoute un premier sous titre "nos métiers" et je modifie la taille de la police du texte pour qu'il apparaisse comme un sous-titre. vous pouvez comme dans la plupart des options tout modifier, aussi bien l'espacement des lettres que la hauteur entre chaque ligne, la couleur de l'arrière-plan, etc... Vous avez un grand nombre de possibilités.

Nous allons insérer un nouveau module, cette fois-ci en trois parties. Et le module que l'on va choisir s'appelle "résumé" donc vous pouvez taper dans la petite zone de recherche et ça va apparaître directement.

Une nouvelle petite fenêtre apparaît, dans le titre je choisis d'écrire "Nos métiers". Le premier de nos métiers sera le conseil. Vous voyez que vous pouvez ajouter une icône comme ceci ou bien il est possible de rajouter une image et c'est ce que l'on va faire.

Donc décochez la case "utiliser les icônes" puis cliquez sur le bouton mettre en ligne.

Choisissez donc la photo qui vous convient n'oubliez pas que vous pouvez choisir une photo qui est sur votre ordinateur en cliquant sur le petit bouton "envoyer des fichiers".

Il suffit enfin de cliquer sur valider.

Vous pouvez ajouter un alt tags à chaque image, nous verrons par la suite à quoi sert cet alt tag et en quoi il est important.

Enfin dans la partie "paragraphes", vous pouvez ajouter le texte que vous voulez. Pensez à le placer sur la gauche pour qu'ils soient justifiés. Dans la partie design, il est possible comme d'habitude de modifier chacun des éléments. Je modifie un petit peu la taille de notre paragraphe pour qu'il soit un peu plus percutant.

Nous allons ajouter maintenant une bordure à cette partie. Cliquez sur "ajouter une bordure" et choisissez une couleur. Ici, on veut mettre une couleur noir foncé, on va jouer sur les marges et les marges internes pour que la bordure soit bien positionnée, et non trop près de texte.

J'ai ajouté 10 pixels de chaque côté et on voit que la bordure n'est plus collée directement au texte.

Voilà on a notre premier onglet avec "conseille", il est possible d'ajouter un bouton ou un lien à l'image par exemple.

Maintenant, ce qu'on va faire, c'est qu'on va créer deux autres onglets, mais au lieu de recommencer à faire toutes les modifications on va simplement cliquer sur la petite image juste à côté de l'image "configuration". Vous voyez qu'il apparaît le texte "copier le module" donc vous cliquez là dessus et le module est ainsi dupliqué.

Copier un module

On a absolument tout dupliqué, aussi bien le texte que les images que les modifications au niveau du design. Il nous reste plus qu'à modifier l'image, le texte et le titre pour obtenir notre deuxième est notre troisième onglet comme on le souhaite.

Le deuxième on va le nommer "vente" parce que le second métier fictif de notre entreprise est la vente directe de climatiseurs.

Je vais simplement changer la couleur de la bordure de l'onglet vente pour que ça fasse un peu plus harmonieux.

Pour troisième onglet, je laisserai la bordure noire je vais simplement changer l'image, le titre est un petit peu le contenu. Le troisième métier est donc "l'installation".

Je vais mettre la troisième image et cette fois-ci on ne va rien modifié dans la partie design, on va laisser comme ça et on clique sur le bouton "valider". 

Nous avons ainsi fini cette seconde partie qui présente nos métiers.

Formulaire de contact

On va créer une nouvelle rangée et cette fois-ci on va chercher un module qui se nomme "contact". Puisque nous allons ajouter un moyen de nous contacter via un formulaire de contact directement sur la page d'accueil de notre site internet.

Comme à chaque fois qu'un nouveau module s'ouvre, une petite fenêtre apparaît. On va descendre un petit peu dans le formulaire de contact dans les options et je vais m'arrêter donc à la partie "message de succès".

C'est dès qu'une personne aura complété le formulaire et envoyé un message, elle aura ce petit message qui apparaît. Moi j'ai noté "merci de votre message" tout simplement.

On va se rendre dans la partie design du formulaire de contact, descendre un petit peu et on va commencer par augmenter la taille de la police parce qu'elle paraît vraiment petite là. Je la monte à 10,7 pixels et je vais cliquez ensuite sur utiliser "thèmes personnalisés" pour le bouton pour pouvoir modifier le bouton d'envoi de mon formulaire.

Puis on va retourner dans les options pour améliorer un peu ce formulaire qui me paraît bien fade, alors on va tout d'abord commencer par lui ajouter un titre. Je vais le nommer tout simplement "nous contacter" et on va valider pour regarder à quoi ça ressemble.

Nous allons donc maintenant ajouter un fonds à notre formulaire de contact. Pour ce faire, nous n'allons pas aller dans les options du module, mais bien dans les options de la rangée. Dans la partie en bleu vous avez une zone avec écrit "images de fond", vous cliquez sur ajouter une image et vous ajoutez l'image que vous désirez. 

Je vais prendre cette image de camions, imaginons que ce soit le camion de mon entreprise. Je clique enfin sur valider.

Nous ajoutons une bordure autour des différents cadres, une fois cliqué sur "utiliser la bordure" nous allons lui donner la couleur que nous utilisons depuis le début. Nous allons modifier un tout petit peu la largeur de la bordure. Vous voyez que si vous la mettez à six pixels elle devient assez grosse on va la placer à deux pixels simplement qu'on la voit et on va modifier le style de la bordure.

Vous voyez qu'il est possible de la mettre en pointillés, en tirer en double, en rainure... voilà vous avez plein de styles de bordure différents pour faire ce qui vous plaît le plus. Moi j'aime bien en tirer je trouve que ça va vraiment bien avec les formulaires de contact ça fait un effet un petit peu poste.

Ajout d'un formulaire de contact sur le site internet

Modifions  maintenant le bouton d'envoi, on va commencer par mettre le contour du bouton d'envoi en blanc, l'arrière-plan on va donc utiliser notre bleu favori et on va modifier la couleur qui apparaîtra lorsque l'on passe le curseur sur le bouton envoi.

Pour créer ce petit effet bien sympathique, il faut pour cela activer la fonction bouton "hover" puis "couleurs d'arrière-plan" et de sélectionner la couleur que l'on souhaite.

Le titre "nous contacter" me paraît un petit peu faible et on va donc l'augmenter à 36 pixels pour qu'il soit un peu plus marquant, plus visible.

Adresse et carte Google MAP

Troisième partie donc nous attarder sur la dernière partie de cette vidéo avec nos informations pour savoir comment nous contacter directement sans passer par le formulaire et une petite carte pour que les clients nous situent.

Nous allons ajouter une nouvelle rangée, une seule partie encore une fois et nous allons commencer par ajouter un séparateur. Comme d'habitude, soit vous recherchez le nom dans la liste, soit vous tapez dans la petite barre prévue à cet effet le nom de l'élément.

Donc là je tape "séparateur" et je double clique dessus pour ouvrir à la nouvelle petite fenêtre. Je clique sur "afficher le séparateur" pour qu'il soit visible en fait pour ce soit une ligne de démarcation.

Vous pouvez ensuite régler la largeur de l'élément si vous souhaitez que la ligne soit très épaisse ou peu épaisse. Pour la couleur, nous allons choisir une couleur assez foncée, celle que l'on a prévu depuis le départ que ça serait notre couleur de base.

Puis j'ajoute une seconde rangée et un second module. Cette fois-ci nous allons ajouter un module "résumé" encore. Le même que l'on a utilisé tout à l'heure pour nos différents métiers. dans

Au lieu d'utiliser des images, on va utiliser des icônes. On va commencer par l'icône du téléphone puisque ça va être les coordonnées téléphoniques et dans la partie où l'on peut rajouter du texte je vais mettre un numéro de téléphone, bien sûr au hasard.

Dans la partie "design" on voit que l'icône apparaît très grande par rapport au texte, donc on va un peu modifier tout ça: je descends un peu la taille de police de l'icône et je vais un petit peu augmenter la taille de police de mon texte.

Donc je la passe de 14 à environ 35 pixels, je clique sur valider et de la même façon que tout à l'heure nous allons dupliquer cet élément deux fois ce qui nous permet de garder les modifications que nous avons apportées dans le design.

Modifions le deuxième onglet, l'icône tout d'abord cette fois-ci nous allons mettre une icône qui représente une petite ville. Dans la partie texte, je vais mettre l'adresse fictive de l'entreprise.

Le téléphone dans la première icône, notre adresse dans la seconde et nous allons ajouter une troisième icône qui représente une lettre et nous allons ajouter notre adresse email.

Ajout d'une carte Google MAP sur le site web

Donc [email protected] et on valide.

Nous allons maintenant dupliquer le séparateur et en déplacer un en bas de nos trois éléments.

j'avais envie de mettre une petite phrase en plus qui dit: "envie de venir nous voir ? N'hésitez pas, nous sommes situés au coeur de Paris"

j'ai ajouté juste un simple module de texte.

On va maintenant insérer un dernier module qui s'appelle "carte", comme d'habitude vous cherchez le nom ou vous cliquez directement dessus. Cette petite fenêtre s'ouvre alors comme vous pouvez le voir il y a marqué API google.

Pour obtenir l'API de Google et ajouter une carte sur votre site web, il suffit de cliquer sur le lien explicatif dans les options du thème.

Ensuite dans la partie adresse principale de la carte, il faut fournir votre adresse. Dans notre exemple j'ai mis une adresse très générale dans le centre de Paris parce que là c'est toujours une entreprise fictive. 

Je clique sur "trouver là" il va vous affiche une carte du quartier de l'adresse que vous avez rentrée. Je
vous conseille de dé sectionné tout de suite l'onglet "zoom roulettes souris" car cette option est très désagréable lorsque l'on est sur ordinateur, avec la souris lorsque l'on arrive sur la carte ça commence à faire un zoom infini et c'est très désagréable pour les utilisateurs.

Valider pour enregistrer les modifications.

Nous allons encadrer la phrase que nous avons placée au-dessus de nos contacts pour ce faire je clique sur dupliquer. Ca va me dupliquer la phrase et la barre de séparation, je n'ai plus qu'à supprimer la phrase et je suis donc avec deux barres de séparation une au-dessus et une en dessous.

C'est l'occasion aussi de voir que le thème DIVI permet des choses vraiment incroyables en mode visuel donc je vais vous montrer comment modifier les marges. Il suffit de vous placer à la limite où est située la marge et vous allez voir une petite icône différente de votre souris habituelle qui apparaît. En fait, vous pouvez donc moduler les marges à votre guise !

C'est vraiment une très bonne idée puisque c'est quelque chose qui est assez difficile pour un novice de modifier les marges il faut aller dans le css et modifier tout ça c'est donc une très bonne idée qui a eu DIVI sur ce coup-là.

Les résultats de la création d'un site en moins de 35 minutes

Je vais me déconnecter pour vous montrer à quoi ressemble la page en mode visiteurs, donc vous cliquez sur se déconnecter puis cliquez sur sauvegarder et quittez. Vous allez être donc déconnecté de votre zone administrateurs il suffit de rentrer l'adresse de votre page d'accueil.

On voit le site en quatre parties avec une en tête et une grosse image ainsi que le nom de mon entreprise, une catégorie avec marqué nos métiers pour quelques précisions sur les services que nous offrons à nos clients. Une partie formulaire de contact qui permet aux clients de faire une demande directement de devis ou autre, et enfin une partie adresse avec donc toutes les informations sur comment nous contacter ou venir nous voir ainsi qu'une carte.

Cette vidéo est maintenant terminée, merci de l'avoir suivi je vous invite suivre la formation SEO digital growing pour apprendre plus sur le référencement.

Merci et à très bientôt !

Leave a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *