Tutoriels pour créer ton site et le faire grandir
Toutes étapes expliquées simplement pour construire un site attractif et sécurisé.
La mise en page sur WordPress est rapide à assimiler. Tu retrouveras des similitudes avec un traitement de texte classique.
D’autres notions sont propres à la publication sur internet. L‘éditeur de texte Gutenberg offre de nouvelles possibilités de mise en page.
Ce que tu vas apprendre :
Tu vas créer une version allégée de ton site spécifique pour les mobiles.
Ton site va se charger en un clin d’œil pour le plus grand bonheur de tes lecteurs.
Pour visualiser le rendu, voici la version AMP de cet article.
Ce que tu vas apprendre :
Continuer la lecture de « Installe l’AMP sur ton site WordPress pour séduire les mobinautes »
Tu fais fuir tes visiteurs si ton site se charge lentement. C’est rédhibitoire sur mobile.
Je te rassure les actions que je te présente sont concrètes sans aucun aspect technique.
Accélère, dès aujourd’hui, ton site avec ces 4 extensions spécialisées dans l’optimisation des sites WordPress.
Ce que tu vas apprendre :
Les mockups sous photoshop apporteraient une touche pro à ton site ou tes réseaux sociaux.
Cependant, quand tu as découvert le tarif de 36 € par mois pour utiliser Photoshop, tu as trouvé (à juste titre) que cela revenait très cher le visuel.
Les visuels réalisés sont impressionnants.
Je suis toujours admiratif de la qualité du travail effectué par les graphistes pour te simplifier la vie.
Il en existe pour de nombreuses utilisations : ordinateurs, livres, objets, affiches…
Avec Photopea, tu vas modifier gratuitement les mockups photoshop en toute légalité.
Je te communique également des visuels testés et des sites qui fournissent des mockups gratuits de qualité.
Limite : Photopea gère parfaitement les fichiers Photoshop comme tu vas le constater avec cependant une contrainte sur la taille du fichier.
Je te recommande de n’utiliser que les fichiers de moins de 80 mo. Au delà, tu risques de te retrouver avec un navigateur figé.
Ce que tu vas apprendre :
Continuer la lecture de « Utilise un mockup PSD gratuitement sans Photoshop [Tuto] »
Tu souhaites créer ton site ou opérer des changements majeurs ?
Pour ne pas travailler directement sur la version en ligne de ton site, tu peux installer une version virtuelle et locale de WordPress qui te laissera le champ libre pour expérimenter.
Local by Flywhell est un logiciel gratuit et puissant.
Il rend de fiers services mais je te préviens il est franchement fastidieux à installer.
Ce que tu vas apprendre :
Continuer la lecture de « Développe ton site WordPress en local pour expérimenter »
Tu prépares ton site et tu n’as aucune envie que tes visiteurs te surprennent en plein travaux avec le tas de gravats au milieu du salon ?
Tu vas créer ta page de lancement qui annoncera l’arrivée prochaine de ton site.
Personnaliser ton site et préparer une belle page d’accueil prend du temps. Tu t’assures que tout est parfait avant de lancer ton site.
L’extension Minimal Coming Soon & Maintenance Mode possède un nom trompeur. Elle est complète et possède, en version gratuite, de nombreuses possibilités de personnalisation.
De plus, tu peux collecter des e-mails et t’assurer des lecteurs dès la publication de ton premier article.
Les avantages de l’extension :
Les inconvénients
Ce que tu vas apprendre :
Continuer la lecture de « Crée ta page de lancement et collecte des e-mails [tuto] »
Tout site commence par la page d’accueil.
Elle requière toute ton attention car c’est la page qui, en général, récolte le plus de vues.
Par où commencer ?
Je te présente les éléments incontournables accompagnés de nombreux exemples pour t’aider à trouver l’inspiration.
Ce que tu vas apprendre :
Tu as supprimé une page ou modifié l’URL. Tes visiteurs arrivent désormais sur une page d’erreur.
Tes lecteurs et Google sont d’accords sur ce point : les pages d’erreurs 404 sont une catastrophe pour ton site.
La solution : tu rediriges tes visiteurs vers une nouvelle page.
Avec 1 million d’utilisateurs, l’extension Redirection corrige ce problème en moins de 5 minutes. Continuer la lecture de « Redirige facilement tes pages supprimées en 5 minutes [Tuto] »
Tu as une idée précise de ce que tu voudrais réaliser sur les pages de ton site mais l’éditeur de WordPress est plus que limité pour la mise en forme.
Comme 900 000 personnes, tu vas bâtir ta page exactement comme tu le souhaites avec Elementor.
En effet, tu construis ta page à l’aide de blocs que tu associes à ta convenance : colonnes, slider, vidéo, carte, image, animation, compteur, widget…
Je n’aborderai dans cet article que les fonctionnalités de la version gratuite.
Ce que tu vas apprendre :
Débutant
Les principales fonctionnalités d’Elementor en vidéo
Rechercher Elementor Page Builder dans les extensions WordPress, l’installer et l’activer.
Avant de te lancer, tu dois bien comprendre que chaque page construite avec Elementor intègre une mise en page propre. Il ne sera plus possible de travailler sur ces pages dans l’éditeur standard de WordPress.
Elementor est parfait pour construire des pages riches et attractives. Cependant, je déconseille fortement son usage pour les articles.
Désormais, tu peux lancer la mise en page avec Elementor.
L’interface spécifique de l’outil diffère fortement de celle de WordPress.
Sur la colonne de gauche, se situent tous les éléments que tu peux intégrer ainsi que leurs réglages. A droite, tu visualises ta page et les modifications apportées en direct.
Pour construire ta page, tu as deux options :
Pour utiliser un modèle, tu sélectionnes Ajouter un modèle dans la colonne de droite.
Tu accèdes à la bibliothèque (ceux marqués PRO sont réservés à la version payante).
Voici trois exemples de modèles gratuits pour te donner une idée.
Clique sur les miniatures pour découvrir la page complète.
Pour l’ajouter à ta page :
Tu peux ensuite modifier tous les éléments en cliquant dessus. Les paramètres sont disponibles dans la colonne de gauche.
Les modèles sont attractifs et personnalisables aux couleurs de ta marque. Cependant, je préfère réaliser ma page comme je l’entends et partir d’une page blanche.
Ces modèles sont comparables à des thèmes. Tu peux les personnaliser mais si tu souhaites t’éloigner de la trame le résultat deviens vite improbable.
Les styles définis s’appliquent à toute ta page pour t’éviter de refaire l’opération à chaque section.
Cette étape est inutile si tu as réalisé un thème enfant avec tes couleurs et tes polices personnalisées.
Tu vas définir 4 couleurs pour ta page :
Tu vas définir 4 polices et leurs tailles :
Nous allons voir comment utiliser Elementor.
La construction de ta page va se réaliser par un empilement d’éléments. Chaque bloc sera géré indépendamment et pourra être déplacé.
Pour être efficace, il est préférable d’établir un plan d’ensemble avant de se lancer pour obtenir un résultat homogène sans perdre de temps. Nous verrons cela dans le dernier chapitre.
L’élément de base est la section qui rythme horizontalement ta page.
Les options de section apparaissent quand tu la sélectionnes.
Avec de gauche à droite :
Pour chaque élément sélectionné, tu retrouveras toutes les options disponibles dans la colonne de gauche.
Les réglages diffèrent pour chacun mais les principes de bases sont identiques.
Onglet Contenu
Tu trouveras les caractéristiques de l’élément ainsi pour une image : chargement de l’image, taille, alignement, légende, lien…
Onglet Style
Tu vas définir l’apparence : taille, opacité, l’animation quand la souris passe au dessus, les bordures, les ombres…
Onglet Avancé
Tu vas affiner avec les marges internes et externes du bloc, l’ordre de superposition (Index-Z), les animations d’apparition, l’arrière plan (coloré ou une image), masquer l’élément sur certains appareil…
En bas de colonne
Les réglages reprennent les éléments présent dans la colonne de gauche dans l’éditeur de WordPress.
Responsive bascule entre les affichages Ordinateur, Tablette et Mobile.
Historique te permet de visualiser les dernières modifications apportées à ta page et de revenir en arrière.
Prévisualiser les modifications ouvre l’aperçu de ta page dans une autre fenêtre
La flèche à droite de publier te permet d’accéder à la sauvegarde de ta page.
Le menu pour revenir à l’éditeur WordPress est caché en haut.
Je l’ai cherché un moment celui-ci.
Concrètement, nous allons voir quels éléments vas-tu pouvoir ajouter à ton site.
Colonne 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Colonne 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ajoute un espace (difficile de montrer du vide)
texte explicatif.
texte explicatif.
Texte 1.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Texte 1.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Texte 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Pour insérer un shortcode qui affichera ton formulaire par exemple
Pour intégrer du HTML
Intègre un repère que tu pourras indiquer dans ton menu (personnellement je suis resté à la méthode basique avec name)
Reprend exactement la barre latérale de tes articles ou ton pied de page
Tu peux également intégrer les Widgets WordPress. Je ne vais pas tous les tester mais je t’en présente un échantillon de ceux qui peuvent être facilement utilisés dans une page d’accueil.
Pour que cela soit plus concret, j’ai créé en direct la page de présentation de ma newsletter. Tu retrouves toutes les étapes pas à pas.
Tu gagnes un temps précieux en rédigeant l’intégralité du texte avant de définir ta mise en page. Ton plan structure ta page et tu visualises rapidement les sections faibles où tu manques d’arguments.
Il est très tentant de commencer par expérimenter les nombreuses animations et éléments visuels d’Elementor avant de te concentrer sur ton texte. L’impression d’avancer très vite au démarrage est vite contrebalancée par un résultat final décousu. Tu risques fort de devoir tout reprendre de zéro.
Le plus simple est d’écrire ton texte dans un éditeur simple. Tu copies-colles ensuite dans chaque bloc.
Je te renvoie à l’article sur les éléments de la page d’accueil pour t’aider à définir ton plan et rédiger ton texte.
Tu définis l’organisation générale de ta page. Le plus simple est de réaliser un croquis.
Comme tu le vois, le but n’est pas d’être exposé dans un musée.
J’ai par exemple choisi de diviser ma page d’accueil en trois colonnes.
Mon titre occupe deux colonnes à gauche et mon contenu deux colonnes à droite. Les visuels sont disposés sur toute la largeur des trois colonnes.
Tu intègres tes visuels quand tout le texte est en place. Leur réalisation s’avère chronophage. Il est préférable d’incorporer directement le premier visuel d’une série pour valider le rendu.
Pour la taille de tes visuels, tu pars de la largeur disponible sur ta page (740 px sur Twenty Seventeen) puis par la % de la largeur occupé par ta colonne.
Une page doit respirer. Il ne faut pas hésiter à réaliser des sauts de ligne, intégrer des visuels et subdiviser avec des titres. Les espaceurs permettent également d’équilibrer facilement les espaces.
Certains éléments peuvent écraser les autres par leur poids. Tu révises certains textes pour améliorer l’aspect visuel de la page.
Pour casser l’effet statique de ta page, tu peux intégrer quelques animations visuelles. Un peu de patience, je te les présente dans le paragraphe suivant.
Mieux vaut se restreindre dans l’envie d’en parsemer son site et utiliser les plus sobres.
Le risque est de se retrouver avec l’effet sapin de noël. Cela clignote de partout. Tes yeux ne savent plus où se poser.
Quand tu lances la visualisation de ta page en version mobile, tu peux avoir de belles surprises.
Voici comment mes titres de ma page d’accueil ressortaient.
Comme tu le remarque dans l’image ci-dessous, tu as dans les menus de tous tes éléments une icône de mobile en bleu clair. Toutes les modifications que tu réaliseras seront uniquement appliquées à la version mobile quand l’icône sera présente.
Il est souvent judicieux de diminuer la taille de certains visuels et de centrer les titres.
Si tu n’as pas de page en place, tu cliques simplement sur publier.
Quand tu as déjà une page, tu travailles sur une page vierge puis tu importes ta page au dernier moment.
Les animations permettent d’ajouter de la vie à ta page. Comme toutes les bonnes choses, elles sont à utiliser avec parcimonie sinon tu arrives très rapidement à saturation.
Tu les trouveras dans Avancé.
Les animations s’appliquent à un bloc et se déclenchent quand le lecteur arrive à la section.
Je te présente les grandes familles. Attention : cela “piquouille” un peu les yeux.
Fading : affichage progressif
Zoom : zoom grossissant
Bouncing : effet rebond
Slide : glissement
Rotate : effet de rotation pas forcement simple à placer
Attention seeker : pour attirer l’attention sur un point comme ici avec Pulse
Light speed : effet de vitesse
Special : difficile à décrire (arrivée en arc de cercle ??)
J’ai bloqué sur ce seul point dans la réalisation de ma page d’accueil. Ce n’est pas aussi intuitif que pour les autres options.
Les réglages à effectuer :
Tu vas remarquer que ton image ne s’affiche pas en entier. C’est normal.
Pour ajouter un fond de couleur sous ton titre :
Voici le résultat :
Les marges internes positionnent ton texte au bon emplacement.
Les marges externes haut et bas ajustent la taille de l’image (s’arrêter quand ton visuel commence à zoomer). Gauche et droite réduisent la taille de l’encadré de couleur.
N’oublie pas de désélectionner la proportionnalité (à droite de la ligne) pour ajuster tes marges comme tu le souhaites.
Tu vas devoir un peu tâtonner avant d’obtenir le résultat souhaité.
Si le résultat est fantaisiste, mettre toutes les marges à zéro.
Les effets s’enchainent naturellement et fonctionnent particulièrement bien en blanc sur un fond de couleur.
Pour accéder à cet outil :
Tu peux installer ta forme en haut ou en bas du bloc.
Les 15 propositions en image :
Montagnes
Gouttes
Nuages
Zigzag
Pyramides
Triangle
Triangle asymétrique
Oscillation
Opacité d’inclinaison
Les réglages des transitions sont globalement identiques :
Elementor s’avère un excellent outil pour construire une page d’accueil ou de vente. La version gratuite offre de nombreuses possibilités.
Les éléments sont responsive et tu peux optimiser la vue sur mobile.
Les fonctionnalités d’Elementor se maîtrisent rapidement et ne nécessitent que quelques essais avant d’obtenir le résultat souhaité.
Vitesse de chargement : Je n’ai pas remarqué de ralentissement de la page. Tu disposes d’une page attractive sans faire fuir tes visiteurs par un temps de chargement interminable.
Il est temps de te lancer pour avoir une page d’accueil ou de vente qui soit conforme à tes envies. Sur quelle page vas-tu te lancer : page d’accueil ou page de vente ?
Si tu souhaites aller plus loin, tu peux personnaliser le thème Twenty Seventeen.
Les autres articles qui peuvent t’intéresser
Retrouve tous les articles pour Créer seul ton site
Les images constituent le facteur de séduction incontournable de ton site. Il ne faut surtout pas les négliger.
Tu vas découvrir comment créer de belles images pour ton site même si tu es un parfait débutant.
Ce que tu vas apprendre :
Continuer la lecture de « 4 sites incontournables de Photos et Vidéos splendides et gratuites »
Les mockups sont des visuels photoréalistes de mise en scène de produits ou de sites.
Tu vas les utiliser pour illustrer ton site, tes articles et tes publications sur les réseaux sociaux.
Voici trois exemples de ce que tu vas réaliser en 3 minutes :
Je trouve le résultat attractif et toi ?
Les outils en ligne que je te présente sont entièrement gratuits ou possèdent de nombreux modèles offerts. De plus, ce sont des services en ligne qui ne nécessitent aucune installation de logiciel.
J’ai réalisé pour toi une sélection des générateurs les plus performants et te présente les modèles les plus souvent utilisés ou ceux qui sortent du lot.
Les tutoriels détaillent toutes les étapes pour produire tes visuels.
Ce que tu vas apprendre :
Continuer la lecture de « Réalise ton mockup gratuitement en 3 minutes »
Nous allons créer un formulaire de contact simple mais qui fait parfaitement son travail avec Contact Form 7.
Cela ne prends que quelques minutes.
Contact Form 7 une valeur sûre avec plus de 5 millions de sites qui utilisent cette extension.
Le résultat obtenu sur pour pas un rond
Pourquoi ne pas faciliter la tâche des lecteurs qui brulent d’impatience de partager tes articles sur les réseaux sociaux ?
Sumo te permet d’ajouter automatiquement des boutons de partage sur tout ton site.
L’outil est gratuit et ne prend qu’une poignée de minutes à installer.
Continuer la lecture de « Ajoute des boutons de partage sur ton site »
Tu vas ajouter un portrait en face de tes commentaires avec Gravatar. Ce service gratuit personnalise ton site et surtout procure un aspect plus professionnel.
Il faut donner un peu de vie à cette silhouette grise franchement déprimante.
C’est mieux comme cela, non ? (soit, le choix de la photo est discutable)
Cela ne prend qu’une poignée de minutes et, cerise sur le gâteau, cela fonctionne également quand tu commentes sur d’autres sites.
Continuer la lecture de « Gravatar : Personnalise ton portrait en face de tes commentaires »
Tu es prêt à te lancer dans la rédaction de ton premier article mais tu te poses milles questions.
Je te rassure nous sommes tous passés par là.
J’ai cherché à être le plus concret pour te permettre d’avancer le plus rapidement possible et de trouver l’inspiration.
Le meilleur conseil que je puisse te donner se résume en deux mots : lance toi.
Ce que tu vas apprendre :
Continuer la lecture de « Un tutoriel concret pour rédiger facilement ton premier article »
SiteOrigin CSS est une extension gratuite pour personnaliser ton site en effectuant facilement des modifications sur les CSS.
Tu visualises en direct l’impact des changements. Tu peux à tout moment supprimer les ajustements sans conséquence pour ton site.
Les extensions te permettent d’intégrer facilement de nouvelles fonctionnalités à ton site WordPress.
Ton site peut ainsi évoluer en fil de tes besoins.
Tu vas voir c’est un jeu d’enfant.
Continuer la lecture de « Ajoute une extension sur WordPress »
Un thème enfant est nécessaire lorsque tu souhaites personnaliser un thème WordPress.
Sans cela, tu vas perdre tout ton travail à la prochaine mise à jour de ton site. Cela serait un drame de voir des heures passées à améliorer ton site parties en fumée.
L’extension que je te présente simplifie énormément le travail. Désormais, disposer d’un thème enfant est accessible à tous.
C’est le moment où nous allons nous poser une question en apparence simple mais qui mérite d’y consacrer quelques minutes :
Je mets quoi exactement dans mon site ?
avec la question subsidiaire : Et je le range comment ?
Un site bien structuré est un point crucial pour le référencement dans les moteurs de recherche.
C’est exactement comme à la maison. Si tu ranges tes chaussettes dans le frigo, personne d’autre que toi n’ira les chercher à cet emplacement.
Ce que tu vas apprendre :
Continuer la lecture de « Organise ton site pour favoriser son référencement [Tuto] »
Nous allons aborder un point crucial de ton site : sa sécurité.
Assurer la sécurité de son site est accessible à tous à l’aide de seulement 4 extensions performantes.
Pour le paramétrage, il suffit de suivre les instructions détaillées comme une recette de cuisine.
Ce que tu vas apprendre :
Continuer la lecture de « [Sécurité] 4 extensions incontournables pour ton site | Tuto »
Tu veux lancer ton site mais tu ne possèdes aucune connaissance technique ?
Je te guide de A à Z dans l’hébergement de ton site et la réservation de ton nom de domaine chez O2Switch mon hébergeur. J’en suis très satisfait.
Il cumule l’avantage d’être abordable (72 € par an) et d’être en France avec un service client réactif et attentif.
L’hébergeur stocke ton site sur un serveur et permet son accès à l’ensemble de tes visiteurs.
Ce que tu vas apprendre :
Continuer la lecture de « Héberge ton site et installe WordPress »
Avec plus d’un million de sites utilisant Twenty Seventeen, ce thème s’est imposé pour ceux qui veulent créer un site site simple et efficace.
Il est parfait pour présenter son entreprise et s’affiche sur tous les écrans quelles que soient leurs tailles.
Nous allons le relooker pour qu’il reflète parfaitement ta marque.
Ce que tu vas apprendre :
Continuer la lecture de « Personnalise le thème Twenty Seventeen »
Tu vas découvrir les principales fonctionnalités de l’interface de WordPress.
Nous allons également en profiter pour faire quelques réglages et un peu de nettoyage.
Ce que tu vas apprendre :
Continuer la lecture de « Premiers paramétrages de WordPress »
L’ouverture d’un compte Gmail ne prend que quelques minutes et conditionne l’accès aux nombreux services offerts par Google pour la gestion d’un site.
Il est possible de n’utiliser aucun de ces services par idéologie mais sinon ils se révèlent indispensables pour donner toutes les chances de réussite à ton site. Pour ne citer que les plus courants : Google Analytics, Google Search Console, Google Agenda, Google Drive, Google My Business, Google+... Continuer la lecture de « Ouvre un compte Gmail »
Dashlane ne prend que quelques minutes à installer et te fais gagner un temps précieux tous les jours.
Plus besoin de taper ton identifiant et ton mot de passe, Dashlane le fait pour toi.
Le point important pour la sécurité de tes comptes, c’est que tes identifiants ne sont pas enregistrés sur ton navigateur et facilement piratables.
Le logiciel est gratuit pour l’utilisation sur un poste. Continuer la lecture de « Installe Dashlane et ne perd plus de temps avec les mots de passe [Tuto] »
