pour pas un rond https://www.pourpasunrond.fr Tutoriels pour créer ton site et le faire grandir Thu, 14 Nov 2019 21:05:56 +0100 fr-FR hourly 1 https://www.pourpasunrond.fr/wp-content/uploads/2017/03/cropped-logo-aileron-favicon-32x32.png pour pas un rond https://www.pourpasunrond.fr 32 32 Comment faire tes cartes de visite ? https://www.pourpasunrond.fr/cartes-visite/ https://www.pourpasunrond.fr/cartes-visite/#respond Thu, 14 Nov 2019 20:20:51 +0000 https://www.pourpasunrond.fr/?p=13510 pour pas un rond
Comment faire tes cartes de visite ?

Découvre les étapes détaillées pour créer ta carte de visite sous Canva et l'imprimer chez MOO. Tu auras une carte qui te mettra en valeur.

Cet article Comment faire tes cartes de visite ? de Jean est apparu en premier sur pour pas un rond.

]]>
pour pas un rond
Comment faire tes cartes de visite ?

J Je t’explique comment j’ai créé le design de ma carte de visite et le service que j’ai retenu pour l’imprimer.

Le résultat pour 36 € investis avec un délai de 15 jours à compter de la commande.

cartes de visite imprimées
La photo ne rend pas justice au travail effectué.

Je suis passé à l’action pour ne plus perdre bêtement une opportunité. J’ai décidé de faire les choses proprement pour véhiculer une bonne image de mon entreprise.

La dernière fois, je suis passé pour une quiche quand une personne m’a demandé ma carte de visite.

Si tu n’as pas quelques euros à investir dans ton entreprise, le signal amateur s’allume direct dans les yeux de ton interlocuteur. L’excuse classique “je les ai oubliées dans ma veste” ne te sauve guère.

Découvre toutes les étapes pas à pas pour créer et imprimer ta carte de visite.

Cet article prend environ 13 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

cartes visite visuel pinterest
picto articles débutants
Débutant

Je me suis éloigné de mon approche minimaliste habituelle.

Pourquoi je n’ai pas utilisé la version DIY ?

Je prône toujours la solution la moins coûteuse. Comme tu vas le voir, il est possible de diviser les coûts par 10 mais le résultat n’est pas satisfaisant à mon avis.

La carte de visite représente un investissement raisonnable et véhicule l’image de ton entreprise. C’est contreproductif de faire fuir un client potentiel ou un partenaire en réalisant des économies de bouts de chandelles.

Microsoft n’est clairement pas ton meilleur allié au niveau création.

Word ou PowerPoint comme outil de création

Le rendu vintage n’était déjà pas au top dans les années 90. Aujourd’hui Canva (et d’autres sites grand public) mettent clairement en lumière les défauts de ces outils.

exemple cartes visites sombres

Les éditeurs de certains imprimeurs se révèlent intéressants mais d’autres font amèrement regretter Word.

carte de visite moche
J’ai modifié le logo d’origine pour masquer la source.

Avec du temps, un graphiste s’en sort la tête haute mais pour le commun des mortels c’est juste visuellement agressif.

Word ou PowerPoint ne sont pas adapté pour fournir un fichier qualitatif à un imprimeur. Tu te retrouves avec des visuels pixelisés.

Le seul intérêt des outils Microsoft est de réaliser la mise en page de planches que tu imprimes. J’ai également écarté cette option.

Imprimer à la maison

Je laisse au repos mon imprimante rutilante. Le rendu de l’impression est tout à fait acceptable pour la grande majorité des imprimantes.

Le bas blesse au moment de la découpe. L’œil humain perçoit immédiatement une découpe pas parfaitement droite. Cela crie amateur et laisse présager des produits et des services bancals.

De plus, si tu n’as pas remanié les modèles avec un fond perdu, tu te retrouves avec des micros bandes blanches sur les côtés du plus mauvais effet.

Le calcul économique est certes clairement en faveur de l’impression au bureau ou à la maison (ou au bureau/maison comme moi).

Tu t’en tires pour environ 3 € pour une centaine de cartes si tu ne gâches pas trop :

  • 1 € de papier (9 € les 125 feuilles cartonnées en 300 g)
  • 2 € d’encre pour 100 cartes imprimées

Les 33 € d’économies n’ont pas suffi à contrebalancer la perte en qualité.

Je ferais une exception pour les artisans qui défendent le fait main. Quelques exemples qui prennent du temps mais permettent de se démarquer :

  • Un caviste crée des cercles colorés avec du vin et un fond de bouteille
  • Une créatrice de bijoux personnalise avec des touches de couleur à l’aquarelle
  • Un menuisier tamponne avec son adresse sur des chutes de bois
  • Un formateur de yoga inscrit ses coordonnées sur des galets

Pour éviter de tout reprendre à zéro du fait d’un oubli, voici quelques questions que je te suggère avant de te lancer.

Quelles informations sur ta carte de visite ?

La première question à te poser concerne le but de ta démarche. Tu n’auras pas la même approche si tu souhaites démarcher des prospects ou joindre ta carte à tes commandes.

Tu limites au maximum les informations pertinentes pour inciter à l’action. Tu cherches à répondre le plus efficacement aux questions les plus communes lors des premiers échanges :

  • Qui es-tu ?
  • Que fais-tu ?
  • En quoi cela me concerne ?
  • Comment je te contacte ?

Si ta carte ne comportait qu’un seul élément en plus de ton logo, lequel choisirais-tu ?

carte visite minimaliste
  • Ton e-mail,
  • ton téléphone,
  • ton nom,
  • ton adresse,
  • ton poste ?

Quel élément se démarquera au premier regard ? Je traite le logo à part car il s’agit du moyen le plus direct pour identifier ton entreprise.

En dehors de ces classiques, tu peux envisager :

  • tes réseaux sociaux
  • ton site
  • ta photo
  • ton accroche
  • un plan d’accès
  • les heures d’ouvertures
  • une carte de réduction
  • un QR code (cela me semble un peu daté)

Les éléments que tu souhaites indiquer vont t’imposer une mise en page. Un plan ou une carte de réduction à tamponner occupera tout le dos de la carte pour être utilisable.

Les mentions obligatoires pour tous les documents publicitaires (RCS, imprimeur…) ne s’appliquent pas pour la carte de visite. Cependant pour les professions du droit ou de la banque, c’est perçu comme une réassurance.

Tu listes toutes les informations et les classes par ordre de priorité en supprimant toutes celles qui ne sont pas indispensables à ton activité.

Je te recommande de respecter un maximum les standards pour faciliter la vie de ton interlocuteur. La surcharge d’informations tue l’action.

Choisis tes options

Ce choix est proposé par la quasi-totalité des imprimeurs.

Une seule face ou recto verso ?

En fonction du prestataire retenu, cette option est incluse ou est facturée une dizaine d’euros.

C’est un réflexe acquis lors de mes années de marketing. Tu ne laisses jamais une surface vierge sur laquelle tu peux t’exprimer.

Cela évite un document encombré. Tu as une face attractive pour ta marque et le verso avec tes coordonnées et la possibilité d’annoter.

Tu remarqueras que la majorité des personnes à qui tu donnes une carte la retourne automatiquement.

Quel format choisir ?

Le plus commun est le format carte de crédit (8,4 X 5,5 cm). Il est simple à stocker et est généralement moins cher à imprimer.

La version à l’horizontal permet de subdiviser en deux espaces et de disposer de toute la largeur pour les éléments à mettre en valeur.

La version verticale ou carré permettent de sortir du lot mais sont plus complexes à mettre en forme.

Le papier influe fortement sur le rendu final.

Quel type de papier ?

Tu prends minimum du 300 g pour assurer la rigidité de ton document.

Le papier blanc standard fonctionne parfaitement. Le mat sera à privilégier pour laisser l’opportunité d’écrire sur la carte. La version brillante sera une excellente option si le visuel est ton meilleur argument de vente.

Pour les papiers à effet ou kraft, tu demandes un échantillon de précédentes réalisations avant d’opérer ton choix.

Les imprimeurs multiplient les options dans l’espoir de faire grimper la note.

Quelles finitions choisir ?

Tu rencontres des finitions sans fin : les coins arrondis, les tranches colorées, les cartes plastifiées transparentes, un vernis sélectif, des dorures à l’or fin…

Le résultat est tentant pour se démarquer. Cependant, si tu n’es pas une agence de communication, je doute qu’une carte hyper-sophistiquée t’aidera à convaincre un client de travailler avec toi.

Pour toutes les finitions qui ne s’appliquent que sur une partie du document (vernis, découpe…), il est recommandé de passer par un graphiste pour livrer des fichiers qui soient exploitables.

Ce qui fera une différence c’est la capacité à assurer la continuité de ton image avec les actions déjà en place.

Assure la cohérence avec l’existant

Tu reprends les éléments de ta charte graphique : couleurs, polices de caractères, style… pour t’assurer que ta marque soit immédiatement identifiable.

Pour approfondir, tu envisages la prochaine action de ton interlocuteur. Si la majorité consultent ton site internet, tu dois retrouver les éléments de ta page d’accueil. Si c’est une visite en boutique, c’est l’univers de ton point de vente qui doivent être présents ainsi qu’un plan et les heures d’ouvertures.

Tes polices de caractères vont orienter l’outil que tu vas utiliser. Si tu as les polices web type Google Fonts, tu privilégies Canva. Si tu as des polices print comme Din ou Helvetica, tu t’orienteras vers les outils des imprimeurs.

Passons à la pratique.

Crée le design de ta carte avec Canva

Tu choisis ton imprimeur avant de concevoir ton design.

Les formats utilisés ne sont pas identiques. Je te donne tous les éléments pour MOO. Si tu choisis un autre imprimeur, tu recherches les templates avec les dimensions des différentes zones sur le site.

Le format du visuel à livrer

Pour obtenir des bords sans bordure blanche, tu as une zone externe, le fond perdu, sur laquelle tu prolonges uniquement tes visuels. Cette zone est supprimée à la découpe.

Une marge de sécurité supplémentaire est instauré. Aucun élément important ne doit figurer dans cette zone. Il arrive que la lame de découpe dévie légèrement et empiète cette partie.

explications des différentes zones d'impression

Le format idéal du fichier pour un excellent résultat est le PDF de qualité impression.

Je te propose de procéder en deux temps. La partie recherche graphique pendant laquelle tu manipules les modèles puis la mise en page définitive avec les ajustements nécessaires.

L’utilisation d’un modèle pour s’inspirer

Si tu veux, je te montre les étapes de création en vidéo.

Pour gagner du temps, tu peux rassembler tous les éléments dans un fichier texte.

bloc notes

Tu t’inscris sur Canva si cela n’est pas déjà réalisé.

Tu cliques sur Carte de visite dans Créer un design.

canva menu carte visite

Tu visualises les modèles dans la colonne de gauche. Ils sont classés par thématiques. Au survol, l’autre face défile.

modèles de cartes de visites

Quand tu cliques sur un modèle, tu disposes des 2 faces l’une à côté de l’autre.

présentation recto et verso

Les couleurs et les visuels se changent en quelques secondes. Tu choisis un modèle qui comprend tous les éléments dont tu vas avoir besoin et qui correspond à tes souhaits en termes de mise en page.

Tu sélectionnes le premier qui s’installe dans la zone de travail.

sélection recto

Tu ajoutes une nouvelle page et sélectionnes le verso.

nouvelle page

Tu modifies les visuels en glissant ta photo directement sur l’emplacement.

ajout image

Tu modifies les couleurs des encadrés.

réglages couleurs
sélection couleur

Tu personnalises tes polices et les couleurs.

options police

Tu peux définir le niveau de l’élément avec position et son degré de transparence.

caractéristiques

Tu as deux options à ce moment.

Tu peux commander tes cartes directement dans Canva. Je n’ai aucune idée de la qualité du travail effectué. Je te recommande toutefois de regarder la suite pour découvrir comment améliorer le rendu.

Sinon, tu télécharges tes visuels en JPG.

télécharger jpg
télécharger 2 pages

Canva propose une mise en situation.

mise en scène cartes de visites Canva

Tu disposes d’une excellente base de travail.

exemple cartes visites canva

Les modifications que tu vas effectuer apportent une touche pro.

Tu ne fermes pas ta fenêtre. Tu pourrais avoir besoin de reprendre des éléments.

Finalise la mise en page pour l’impression

Tu vas partir d’une version vierge au format final. Les dimensions de cet exemple correspondent au format utilisé par MOO.

Tu ouvres une nouvelle fenêtre sur la page d’accueil de Canva.

Tu crées un design aux dimensions personnalisées.

canva dimensions personnalisees

Tu complètes les dimensions 88 X 59 mm.

format carte visite

Pour te simplifier le travail, je te propose un gabarit avec les différentes zones. J’ai ajouté 2 lignes pour matérialiser le centre du document.

Tu le récupères sur mon Google Drive.

callage moo

Tu commences par charger le gabarit dans les deux emplacements. Tu l’ajustes pour qu’il occupe tout l’espace disponible.

Tu glisses ensuite les visuels que tu viens de réaliser. Tu ajustes la taille pour toucher le bleu foncé.

Ton visuel est centré quand tu vois apparaître deux lignes roses pleines.

ajuster visuel

Tu ajoutes de la transparence.

transparence
préparation calage

Tu commences par placer tes textes les plus importants : Texte > Ajouter un titre.

ajout titre

Tu indiques ta police et ajuste la taille pour retrouver la hauteur approximative du visuel en fond.

Tu te sers d’une hauteur de lettre pour créer un bloc carré qui te servira à placer tes éléments. Ici le H majuscule.

ajout carré

Tu utilises ces carrés que tu copies-colles pour espacer les éléments. Tu obtiens ainsi des distances homogènes.

callage texte

Voici les éléments placés.

callage verso

Tu cales tes éléments proches du bord sur la bordure bleu foncé en veillant à ce qu’aucun n’apparaisse dans la zone verte.

calage près du bord

Tu joues avec les hauteurs de lignes sans passer en dessous de 1 pour tes textes sur plusieurs lignes.

hauteur de ligne

Si tu as des lignes avec des longueurs proches, tu peux les aligner en augmentant l’espaces entre les lettres.

interlettrage

Tu sélectionnes des groupes d’éléments en maintenant la touche majuscule appuyée. C’est utile pour déplacer et centrer tout ton texte.

sélection multiple

Pour tous les éléments qui touchent le bord de ta carte comme le fond, tu couvres toute la zone bleu foncé.

fond

3 points de vigilance à prendre en compte avant de valider

  • les bords en bas à gauche et à droite ne contiennent pas d’information importante (cette zone sera couverte par le pouce de ton interlocuteur)
  • un espace vide est pratique pour annoter
  • les informations présentes sont vérifiées 10 fois

Tu supprimes tous les éléments qui ne servent plus à rien et dézoome pour une dernière validation.

version finalisée

Dans cet exemple, je n’ai pas laissé assez de blanc pour écrire sur la carte.

Quand tu es satisfait, tu télécharges les pages une par une au format PDF POUR IMPRESSION.

pdf impression

Avec MOO, tu disposes gratuitement de plusieurs versions de ton verso. Ce serait dommage de t’en priver.

Le capitaine souhaite pouvoir présenter ses deux activités en fonction des interlocuteurs.

Tu as ainsi trois PDF.

pdf séparés

J’ai pris le parti opposé pour ma carte avec un seul recto mais trois variantes de versos.

multiples versos

Tu as réalisé le plus long du travail. Commander ton impression ne demande que quelques minutes.

Imprime ta carte chez un professionnel

Pour déterminer le prestataire, j’ai recherché les principaux acteurs sur Truspilot.

MOO est clairement au-dessus du lot.

moo note trustpilot

J’ai envisagé Vistaprint mais je n’ai pas du tout aimé le fait qu’ils changent leurs tarifs en permanence. La facturation pour 10 € de l’impression du verso rend l’opération bien moins attractive.

MOO a emporté la partie car tu personnalises tous les rectos que tu souhaites pour le même prix. J’ai ainsi pu tester deux approches avec des quantités minimes.

Tu te rends sur le site de MOO.

Attention : ce lien est un lien affilié. Je touche une commission si tu achètes sur le site. Cela n’influence en rien le tarif de ton point de vue.

moo cartes visites

Tu choisis classique,

horizontal ( 84 X 55 mm) et coins carrés.

format carte horizontal

Tu prends l’option de téléchargement.

design

Ton visuel unique va en recto et les multiples au verso.

Tu importes tes fichiers.

import fichier

Tu vérifies que tous les éléments sont bien en place. La zone de coupe s’affiche en transparence. La marge de sécurité apparaît en pointillés.

Tu importes ensuite tes versos.

passe à l'import des versos

Tu charges le premier et ajoutes les suivants avec le +.

verso supplémentaire

Le logiciel répartit les quantités à part égales entre les versions. Je souhaitais une plus grande proportion de cartes neutres. J’ai ajouté trois fois le même modèle.

Tu passes à la prochaine étape avec le bouton en haut dans la barre.

valider l'étape

Le classique en 350 g est parfait.

classique

L’option la moins chère et la finition matte pour faciliter l’écriture sur la carte.

finition

J’ai hésité entre 50 et 100. J’ai fini sur 100 pour amortir les frais de port. Je ne suis pas commercial. Je ne pense pas distribuer mes cartes à la volée. Au pire, si cela m’apporte des clients, ce sera enfin un problème que j’apprécierais de rencontrer.

Tu as un récapitulatif des versions.

versions

Tu choisis ton délai de livraison. Mieux vaut ne pas être pressé.

options livraison

Le tarif est annoncé à 36 €.

Un point m’a perturbé quand j’ai reçu mon relevé de compte.

Si tu possèdes une entreprise, tu renseignes ton numéro de TVA à l’étape suivante. Celle-ci n’est pas facturée.

La question essentielle :

Cela donne quoi finalement ?

J’ai commandé mes cartes le 22 octobre et les ai reçues le 6 novembre (pour un date de livraison estimée au 8).

Elle sont livrées par 50 dans des boites cartonnées.

emballage
unboxing

Le résultat est tout à fait conforme à mes attentes. Le papier est superbe avec une prise en main agréable. Le rendu des couleurs est parfait.

rendu des cartes de visite MOO.jpg

Je retrouve mes trois versions avec des dos identiques.

cartes de visite imprimées recto et verso

L’impression est excellente mais pas parfaite. J’ai 4 cartes sur les 100 qui présentent de petits défauts. Une tâche bleue en haut pour une et 2 lettres du logo apparaissent partiellement en bleu clair sur trois autres.

Conclusion

Les cartes MOO donnent envie d’être distribuées à tous tes interlocuteurs. Elles transmettent une excellente image haut de gamme.

Pour avoir travaillé dans mes précédentes expériences avec de nombreux imprimeurs, MOO mérite l’excellente notation des acheteurs.

Canva m’a bien aidé à créer des cartes attractives qui permettent de se démarquer.


Crée ta carte de visite avec un résultat pro
Click To Tweet


Prochaine étape : rencontrer de futurs clients.

signature de Jean du site pour pas un rond

Les articles qui peuvent t’intéresser

Retrouve tous les tutoriels et ressources pour ton entreprise

bannière pour l'inscription à la newsletter
portrait jean pourpasunrond

Jean

Fondateur, auteur et homme à tout faire


J’ai créé pour pas un rond pour que tu puisses réaliser seul ton site et le faire grandir avec des tutoriels pas à pas.

Cet article Comment faire tes cartes de visite ? de Jean est apparu en premier sur pour pas un rond.

]]>
https://www.pourpasunrond.fr/cartes-visite/feed/ 0
Fantaisies Buissonnières : l’aventure au coin de la rue [Interview] https://www.pourpasunrond.fr/fantaisies-buissonnieres/ https://www.pourpasunrond.fr/fantaisies-buissonnieres/#respond Thu, 14 Nov 2019 19:48:53 +0000 https://www.pourpasunrond.fr/?p=14123 pour pas un rond
Fantaisies Buissonnières : l’aventure au coin de la rue [Interview]

Découvre dans cette interview comment Patrick du blog Fantaisies Buissonnières transforme ses randonnées en aventures extraordinaires.

Cet article Fantaisies Buissonnières : l’aventure au coin de la rue [Interview] de Jean est apparu en premier sur pour pas un rond.

]]>
pour pas un rond
Fantaisies Buissonnières : l’aventure au coin de la rue [Interview]

Patrick a partagé avec moi les coulisses de Fantaisies Buissonnières.

portrait de Patrick l'auteur du blog Fantaisies Buissonnières

Son blog rassemble les récits de ses voyages à pied, à vélo, en canoé et en scaphandre. Il transmet également des conseils avisés pour une préparation optimale dans la rubrique Bazar.

Sa photo de couverture illustre parfaitement les parenthèses de liberté qui surgissent au milieu de notre quotidien.

Page accueil de Fantaisies Buissonnières

Sa passion est communicative. Ses récits inspirants et illustrés de splendides photos vont t’inciter à chausser ton sac à dos.

Il apporte la preuve que tu peux vivre des aventures extraordinaires en France avec un peu d’audace et d’imagination.

Tu retrouves l’intégralité de l’entretien en vidéo. Nous évoquons les débuts de son blog, sa motivation, les aspects techniques, son process d’écriture, comment promouvoir son blog, le nom du site…

bannière youtube de l'interview de Patrick du blog fantaisies buissonnieres

Je l’envisage comme un podcast qui laisse le temps à l’invité de s’exprimer et de nous faire découvrir son univers.

Je te livre un extrait de notre conversation centré sur ses marches en France.

Les origines du blog Fantaisies Buissonnières

premiers articles de Fantaisies Buissonnières
Photo de l’article La Route de Saint Lu

Patrick débute le blogging en 2018 pour partager son périple solitaire de Fontainebleau à Nantes avec ses filles, sa femme et quelques amis. Il expérimente la publication quotidienne sous la forme d’une série.

Ça a beaucoup plu et fait marrer. J’ai rencontré quelques déboires car j’avais prévu des étapes trop longues. En revenant, je me suis dit que l’expérience était intéressante.

Le blogging combine sa passion de l’écrit et de la photo. Il publie uniquement pendant ses congés du fait de son activité professionnelle très prenante.

J’ai trouvé marrant l’idée de pouvoir poster de petites actualités. Je voyage souvent seul. Le blog pallie le manque de conversations que l’on peut avoir à l’étape. C’est une forme de compagnie.

Comment trouver l’aventure près de chez soi

Photo de
Photo extraite de l’article La Grande Quête Hivernale de la saucisse de Morteau.

Patrick transforme ses randonnées en récit d’aventure avec des idées surprenantes. Celui qui m’a le plus marqué est sa descente en Kayak gonflable du Loing pour rejoindre la Seine.

Si tu as le temps de faire une parenthèse dans ton quotidien, tu peux aller dans quelque chose de totalement inconnu.

On trouve l’aventure à côté de chez nous, vraiment à quelques pas.
J’étais à 35 kilomètres de la maison en région Parisienne sur une micro-ile envahie de ronces. Personne ne peut savoir je suis là. Un mec qui campe là c’est inconcevable. Je trouve ça jouissif.

Il privilégie les grands espaces en dehors des zones touristiques classiques.

Je recommande d’aller explorer la France et notamment ce que les géographes appellent la diagonale du vide qui part en gros de la Lorraine et descend jusque dans l’Ariège.
Les paysages sont absolument extraordinaires. Il y a une sensation de solitude et d’isolement qui est très forte mais poignante.

Son approche est abordable par tous. Sa capacité à donner de sens à son aventure apporte un point de vue original qui donne envie de découvrir la suite de ses aventures.

photo de l'article L’Odet, l’hiver.
Photo extraite de l’article L’Odet, l’hiver.

Il n’y a pas forcément besoin d’un budget pharaonique, pour sortir un peu des sentiers battus.

Pour moi, il est ludique d’aller prendre son sac à dos et de partir comme ça à l’aventure. Il y a une dimension très enfantine : quand tu vois un bois par la fenêtre et que tu as envie de l’explorer.

Je fonctionne avec des images mentales. Pour la traversée du Jura, j’avais vu une photo dans un magazine d’un type avec son sac à dos et ses raquettes dans un champ couvert de neige. Quand j’ai vu cette image, je me suis dit : ouais je veux aller là-bas.

Il envisage sa restitution tout au long de sa journée pour disposer de photos qui illustrent les étapes.

Pendant la journée, quand tu marches, tu prends des photos et tu penses déjà à la manière dont tu vas l’intégrer dans ton récit. Il y a des moments qui peuvent être soit des moments de galère soit très agréables.
Je trouve qu’il y a quelque chose d’assez extraordinaire dans le fait de pouvoir partager tout en étant seul. Tu retrouves le soir les réactions des copains et des lecteurs.

Découvre Fantaisies Buissonnières et accompagne Patrick dans ses périples.

Un immense merci à Patrick d’avoir partagé son expérience.

Tu retrouves l’intégralité de l’entretien en vidéo.

banniere youtube fantaisies buissonnieres interview

Découvre comment Patrick du blog Fantaisies Buissonnières trouve l'aventure au coin de la rue.
Click To Tweet


Les 3 précédents articles de la rubrique Coulisses

Retrouve tous les articles Coulisses

Cet article Fantaisies Buissonnières : l’aventure au coin de la rue [Interview] de Jean est apparu en premier sur pour pas un rond.

]]>
https://www.pourpasunrond.fr/fantaisies-buissonnieres/feed/ 0
Développe ton site WordPress en local pour expérimenter https://www.pourpasunrond.fr/site-local/ https://www.pourpasunrond.fr/site-local/#comments Mon, 11 Nov 2019 21:05:35 +0000 https://www.pourpasunrond.fr/?p=7755 pour pas un rond
Développe ton site WordPress en local pour expérimenter

Découvre le tutoriel pas à pas pour installer une version locale de Wordpress et copier ton site. Bonus : un Wordpress disponible en 10 secondes.

Cet article Développe ton site WordPress en local pour expérimenter de Jean est apparu en premier sur pour pas un rond.

]]>
pour pas un rond
Développe ton site WordPress en local pour expérimenter

Tu souhaites créer ton site sous WordPress ou opérer des changements majeurs ?

Pour ne pas travailler directement sur la version en ligne de ton site, tu vas installer une version virtuelle et locale de WordPress qui te laissera le champ libre pour expérimenter.

DesktopServer est un logiciel gratuit et puissant pour créer ton site WordPress en local.

Duplicator va réaliser une copie fidèle pour tester les changements avant de les réaliser sur ton site.

Tu n’as pas forcement besoin d’installer une version locale complexe de ton site pour expérimenter. Tu vas découvrir comment disposer d’un WordPress de test en 5 minutes.

Cet article prend environ 5 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

image pinterest de l'article Développe ton site WordPress en local pour expérimenter
picto articles intermediaires
Intermédiaire

Si tu lances ton site, tu peux également installer une page de lancement et collecter des adresses e-mails pendant que tu travailles en coulisses.

Je débute par une solution ultra rapide si tu veux juste découvrir WordPress, tester une extension ou visualiser un thème.

Dispose de ton site de test WordPress en moins de 5 minutes

Tu te rends sur InstantWP et télécharges la dernière version (environ 280 mo).

télécharger instant wp

Tu extrais le fichier ZIP.

Tu démarres sur Start-InstantWP. Cela prend 1 minute à se mettre en place.

démarrer instant wp

Tu accèdes à l’administration du site sur WordPress Admin.

accès administration WordPress

Les codes sont admin et password.

ouvrir admin

Tu passes en français dans Site Language situé dans le menu Settings > Général puis valides.

passer WordPress en français

Tu disposes d’une installation WordPress où tu peux tout expérimenter. Si tu as besoin de repartir à zéro, tu effaces simplement le dossier et recommences à nouveau.

Petit détail : quand tu quittes le logiciel, il met 30 secondes à se fermer.

Pour tous ceux qui veulent réaliser un travail de fond ou tester les impacts d’un nouveau thème sur leur site, nous allons passer à l’installation d’une version locale pérenne.


Le site le plus moche du monde que tu vas adorer pour disposer en 10 secondes d'un site WordPress temporaire pour des tests. #wordpress
Click To Tweet


bannière pour l'inscription à la newsletter

Installe une version locale de WordPress

Tu télécharges le logiciel sur le site de DesktopServer.

télécharger DesktopServer.

Tu accèdes à la version gratuite sur le lien en gris sous le bouton sans compléter ton adresse e-mail.
Le fichier fait 450 mo.

choix version gratuite

Tu dézippes et lances le programme d’installation.

programme installation de Desktop Server

Tu l’autorises à accéder au statut administrateur.

lance desktopserver

Tu conserves la configuration par défaut avec Apache et MySQL.

installation apache

Tu sélectionnes Création d’un nouveau site de développement.

création d'un nouveau site local

L’installation est assez longue (entre 5 et 20 minutes).

installation finalisée
lien configuration

Tu sélectionnes la langue.

choix langue

Tu complètes le nom du site ainsi que l’identifiant et le mot de passe de l’administration.

mot de passe

Tu nommes ton site et sauvegardes précieusement l’URL et le dossier d’installation.

sauv-local

Tu peux désormais te connecter.

L’aventure se termine ici pour les nouveaux utilisateurs de WordPress.

Désormais, quand tu voudras accéder à ton site, tu lanceras DesktopServer. Tu pourras utiliser ton site via ton navigateur préféré ensuite.


Le logiciel gratuit pour installer une version locale de WordPress sans prise de tête #wordpress
Click To Tweet


Pour ceux qui veulent une version locale de leur site existant, quelques efforts supplémentaires sont encore à fournir.

bannière newsletter

Effectue une copie locale de ton site

Tu te connectes sur ton site et désactives si besoin les extensions de Sécurité comme Secupress qui délocalisent l’accès à l’administration.

désactiver secupress

Tu installes et actives l’extension Duplicator.

extension Duplicator

Tu sélectionnes Paquets.

menu de duplicator

Tu cliques sur Créer un paquet.

Dans Archives, tu actives les filtres de fichiers et cliques sur Cache pour éviter de le migrer.

Tu passes à l’étape suivante.

création du paquet

J’ai bloqué sur cette étape. J’ai été grandement aidé par cet article de WP Formation : Migrer son site WordPress facilement avec Duplicator et cette vidéo de WPMarmite : Comment migrer un site WordPress de local en ligne avec Duplicator.

Tu reçois un avertissement quand tes fichiers dépassent 150 mo. Cela n’a pas d’influence pour Duplicator. La vérification des noms n’a eu aucune incidence.

Tu coches Continuer le processus d’assemblage et cliques sur Création.

Les hébergeurs peuvent limiter les exports. Sur O2Switch par exemple c’est 500 mo.

taille paquet

Si c’est ton cas, tu reviens à l’étape précédente et filtre les médias téléchargés (Uploads).

filtre uploads

La taille diminue fortement.

relance la création des paquets

Tu télécharges les deux fichiers.

télécharger le paquet

Tu supprimes Duplicator

et réactives ton extension de sécurité.

activer secupress

Tu trouves le dossier où se situes l’installation de WordPress sur ton ordinateur. Tu supprimes tous les fichiers présents et copies les deux fichiers de Duplicator.

Tu lances la migration de ton site sur ton navigateur en ajoutant /installer.php à la suite de l’adresse locale de ton site.

Tu coches et passes à l’étape suivante.

notifications installation

Tu sélectionnes Create New Database, indiques successivement :

  • localhost
  • duplicator
  • root

puis testes la base de données.

test de la base de données

Tu passes ensuite à l’étape suivante

et confirmes les informations.

Tu vérifies le titre de ton site de test.

nom site de test

Tu viens de finaliser la migration.

finaliser la migration

Tu te connectes à ton site local désormais avec l’identifiant et le mot de passe de ton site classique.

identifiants classiques

Une extension WordPress qui facilite la migration d'un site #wordpress
Click To Tweet


Si pour des contraintes de tailles, tu n’as pas pu migrer tes médias, tu peux les récupérer à l’aide de ta dernière sauvegarde.

Attention : tu ne charges que les images (uploads) pas la base de donnée, les thèmes…

Voici comment j’ai procédé avec Updraft Plus.

Tu cliques sur restaurer

updraftplus restaurer

puis sélectionnes Téléversements

téléversements

Pour une raison que j’ignore, j’ai été obligé de passer par le chargement de mon fichier.

télécharger les images

Conclusion

C’est maintenant que débutes le vrai travail sur ton site.

Tu retrouves toutes les fonctionnalités de WordPress avec seulement un très léger ralentissement.

Le travail sur DesktopServer reste fluide et agréable.

Duplicator facilite franchement le travail de migration.

Celui que j’utilise le plus au quotidien est sans conteste Poopy qui me convient parfaitement dans la grande majorité des cas.


Des outils gratuits pour développer un site WordPress en local ou effectuer des tests. #wordpress
Click To Tweet


D’autres articles qui peuvent t’intéresser :

Retrouve tous les articles pour Créer seul ton site

bannière newsletter

Cet article Développe ton site WordPress en local pour expérimenter de Jean est apparu en premier sur pour pas un rond.

]]>
https://www.pourpasunrond.fr/site-local/feed/ 2
8 outils gratuits pour un audit de ton référencement naturel https://www.pourpasunrond.fr/audit-seo-gratuit/ https://www.pourpasunrond.fr/audit-seo-gratuit/#respond Fri, 08 Nov 2019 10:27:26 +0000 https://www.pourpasunrond.fr/?p=13211 pour pas un rond
8 outils gratuits pour un audit de ton référencement naturel

8 outils pour un audit complet de ton référencement naturel : technique, contenus et liens. Découvre toutes les étapes détaillées dans ce tutoriel.

Cet article 8 outils gratuits pour un audit de ton référencement naturel de Jean est apparu en premier sur pour pas un rond.

]]>
pour pas un rond
8 outils gratuits pour un audit de ton référencement naturel

L Le référencement de ton site dans Google est le résultat de multiples critères.

Avec cet audit SEO gratuit, tu vas déterminer tes forces et rectifier les points bloquants.

Tu vas tester et analyser ton site sur les aspects techniques, le contenu et la création de liens entrants.

J’ai privilégié les outils et logiciels en français pour une mise en œuvre simplifiée.

picto articles intermediaires
Intermédiaire

Cet article prend environ 11 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

Pour commencer, nous allons voir ensemble l’intérêt d’auditer ton site et ce que tu vas en retirer.

Pourquoi analyser le référencement naturel de ton site ?

Le SEO devrait être naturel et sans effort.

L’analyse des moteurs se perfectionne jour après jour mais reste éloignée de la logique humaine.

Kyle Roof a démontré qu’il était possible de faire remonter en première position un site dont le texte n’a aucun sens pour les humains si les éléments techniques sont parfaitement optimisés.

Dans les faits, Google est un idiot savant. Il a mis en œuvre des fonctionnalités d’évaluation et de classement du contenu (algorithmes) perfectionnés mais qui sont loin de la perfection.

illustration robot

Si ton site diffère des critères attendus, tu n’obtiens pas de résultats.

Aucun site n’est parfait. Il est normal de découvrir des points d’amélioration.

Le SEO n’est pas une science exacte. Les règles utilisées par Google dans son évaluation ne sont pas divulguées. C’est pourquoi tu trouves des conseils qui se contredisent.

Tu débutes par la performance de ton site.

Audit technique

Le plus naturel est d’utiliser Google pour démarrer ton investigation.

Tu complètes site:nomdetonsite.fr dans le moteur.

recherche indexation site

Si tu n’obtiens pas de résultat, ton site n’est pas indexé par Google. La cause la plus probable est que tu as bloqué l’indexation au moment de la construction et tu n’as pas retiré l’instruction.

Les résultats doivent correspondre à la somme de tes articles et de tes pages.

résultat indexation site

Un écart n’est pas souhaitable :

  • pas assez de résultats : certaines pages sont retirées des résultats de recherche => il faut creuser dans Google Search Console (nous abordons ce sujet juste après)
  • trop de résultats : ton contenu est dupliqué ce qui occasionne une confusion des moteurs et pénalise ton site

Le meilleur outil pour s’assurer d’un bon référencement est celui que procure gratuitement Google.

Google Search Console pour un état des lieux factuel

Dans le rapport Performances, tu sélectionnes la période la plus longue possible de résultats (dans l’idéal 16 mois) et Impressions.

Tu observes la tendance générale.

google search console tendances impressions

Une croissance continue indique que ton site gagne en visibilité. Tu es sur la bonne voie.

Dans le cas contraire, tu opères des ajustements pour regagner l’exposition perdue et retrouver le chemin de la croissance.

Quelques pistes :

  • Des contenus de meilleure qualité (ou mieux optimisé) ont été publiés
  • Tes articles commencent à vieillir et nécessitent une refonte
  • L’algorithme prend en compte de nouveaux critères qui te défavorisent

Tu regardes ensuite ton CTR moyen. Il s’agit de l’attractivité de tes titres et descriptions. L’analyse est plus pertinente au niveau des articles en prenant en compte la position qui influe fortement sur le taux de clic.

ctr moyen

La position t’informe sur l’emplacement de tes pages dans les recherches. Tu vises à l’améliorer. Pour un petit site, chaque nouvel article publié tire ta moyenne vers le bas.

position moyenne

Tu vérifies que tout ton contenu est indexé dans Couverture.

Tes pages sont normalement toutes valides. Tu retrouves ici les écarts entre tes pages + articles et ceux référencés par le moteur.

couverture

Tu t’intéresses aux pages exclues

detail couverture

avec en priorité :

  • Explorée, actuellement non indexée qui révèle que ton contenu n’est pas jugé suffisamment qualitatif pour être répertorié (tu peux demander un nouvel examen)
  • Introuvable (404) : si tu as un contenu pertinent à proposer en remplacement de ton ancienne page, tu opères une redirection par exemple avec cette extension

Tu vérifies que tu n’as pas de virus ni de pénalité manuelle dans Sécurité et actions manuelles.

sécurité pénalité

La rubrique Améliorations offre des conseils d’optimisation avancés, je te renvoie à l’article consacré à Google Search Console pour approfondir.

De nombreux sites proposent d’améliorer ton référencement. Ils sont créés par des agences SEO comme produit d’appel pour leurs services. Ubersuggest est plus neutre.

Ubersuggest pour un audit rapide

Tu te connectes sur la page de test, indiques l’adresse de ton site et sélectionnes français.

interface ubersuggest

Tu découvres une note globale de ton SEO.

score seo

Tu cliques sur état de santé pour découvrir les suggestions.

état de santé
problèmes seo

Tu cliques sur chaque ligne pour visualiser le problème et les pages concernées.

détail problème

Tu peux filtrer sur les Erreurs critiques pour te concentrer sur les actions qui rencontreront le plus d’impact.

Tu auras probablement des suggestions sur la longueur de tes titres. Je te propose de voir ce point en détail dans la section contenu.

L’outil n’est pas infaillible. Il détecte sans fondement 3 articles sans meta-descriptions.

Tu retrouves ensuite un aperçu de la vitesse de ton site sur ordinateur

vitesse ordinateur

et sur mobile.

vitesse mobile

Si ton site est trop lent, découvre 7 extensions gratuites qui vont accélérer ton site.

Google évalue ton site en prenant comme référence la version mobile.

Teste la version mobile

Google a conçu un test spécifique pour l’optimisation de la version mobile.

test optimisation mobile
résultat test mobile

Tu dois envisager un nouveau thème si ton site n’est pas parfaitement adapté aux mobiles.

Si tu le souhaites, tu retrouveras un test plus avancé dans Google Search Console avec le détail de chaque page. Le détail des améliorations est complexe à exploiter car tu ne retrouves pas ce qui pose réellement problème.

Le maillage interne aident les moteurs de recherche à définir les thématiques abordées dans tes contenus.

Visualise la structure de ton site

Tu installes le logiciel Website Auditor.

Tu indiques l’adresse de ton site.

site à analyser

Le scan de toutes les pages prend quelques minutes. Tu cliques sur Visualization ensuite.

menu visualisation

Voici le premier aperçu.

première visualisation brute

Le graphique synthétise les liens internes entre les contenus de ton site. Les articles liés sont considérés comme abordant la même thématique. Ils assurent également une redistribution de l’autorité issue des liens externes.

Tu vérifies que le volume de page affiché est cohérent.

volume de pages analysées

Dans mon cas, je filtre les versions AMP de mes pages.

filtre du graphique

Le résultat :

graphique visualisation de la structure du site

Tu visualises des grappes qui correspondent à mes 3 grands thèmes. Cependant, j’ai de nombreux articles qui sont rattachés directement à la page d’accueil et non à la page colonne vertébrale de la thématique.

interprétation du graphique

Pour rectifier le tir, j’ai enlevé les articles récents de la barre latérale et la fonctionnalité article suivant / précédent qui brouillent la compréhension sans procurer un réel service aux lecteurs.

Les points bleus correspondent à des pages qui n’existent plus et sont redirigées. J’ai rétabli les liens directs vers la ressource pour les pages importantes.

pages supprimées

Tu recherches les articles isolés pour créer des liens entrants et sortants vers tes autres contenus semblables.

page isolée

Je te propose de découvrir comment organiser tes contenus en silos pour renforcer ton autorité.

3 éléments complémentaires pour accroître ta crédibilité

  • Une version sécurisée (https) n’est pas réservée aux sites d’e-commerce. Elle renforce la confiance des utilisateurs et protège des pirates.
  • Les mentions légales établissent la légitimité de ton site aux yeux de Google.
  • Si tu exerces une activité locale, l’inscription gratuite sur Google My Business est un incontournable pour t’assurer une visibilité dans ta région.

Passons la vitesse supérieure avec un scan complet des contenus de ton site.

Audit du contenu

Je n’aborde pas la partie rédaction qui sera l’objet d’un autre article.

Site Analyzer pour une analyse approfondie

J’utilisais Screaming Frog qui est un excellent logiciel mais la version gratuite a été sérieusement bridée. Je suis passé sur un logiciel gratuit (l’équipe programme de passer en payant) qui fait 90 % du travail.

Tu télécharges Site Analyzer. Pour l’instant, seule la version PC existe.

site analyzer interface

Tu décompresses le fichier puis tu passes un antivirus (peu de risques mais la prudence est reine).

Tu exécutes le programme directement sans installation.

programme

Tu passes la sécurité Windows avec Informations Complémentaires puis exécutes.

protection windows
exécuter site analyzer

Tu changes la langue.

change langue

Tu indiques l’adresse de ton site et lances l’analyse. Le crawl est rapide : j’ai attendu 3 minutes 30 pour mon site.

lancer analyse

Le logiciel détecte les éléments à rectifier sur ton site.

Rectifie les erreurs SEO

Tu consultes les erreurs SEO dans la fenêtre de droite sur l’onglet Rapports > Stats SEO. Tu t’occupes en priorité des problèmes graves symbolisés par une croix rouge.

erreurs seo

Tu découvres les éléments qui posent problème au centre et les pages concernées en bas pour chaque élément sélectionné.

trouver page concernée

Tu peux double cliquer sur une adresse pour l’ouvrir et vérifier qu’elle pose effectivement problème.

images brisées

C’est long et fastidieux de revenir dans chaque article pour rectifier les images ou les liens en 404 mais cela améliore considérablement l’expérience utilisateur.

pages concernées

Le texte de référence facilite la recherche rapide sur la page.

Tout ton contenu doit être accessible en maximum 3 clics depuis ta page d’accueil. Cela t’assure une meilleure exploration par les robots.

Accessibilité du contenu

Tu retrouves l’information dans la fenêtre de droite > Les rapports > Analyses statistiques > Niveau

menu niveaux

Le schéma est plus facile à lire.

graphique niveaux

Pour remédier à cela, tu peux créer des pages thématiques qui recensent tous les contenus sur un même sujet avec un accès direct depuis l’accueil.

Les titres et descriptions dans les moteurs sont les seuls éléments qui incitent à consulter ton site. Tu vérifies qu’ils s’affichent correctement.

Adapte la longueur de tes titres et descriptions

Si tu as un petit site, le plus efficace est de te rendre directement dans Google avec l’instruction site:monsite.fr. Tu valides qu’aucune information indispensable n’est coupée.

titre coupé
méta description coupée

Tu t’apercevras que Google n’utilise pas forcément la description que tu as rédigée.

Pour te faciliter le travail, tu classes tes articles par longueur de titre dans l’onglet Titre dans Site Analyzer.

longueur titres

Pour avoir un ordre d’idée, le titre est souvent coupé à partir de 65 caractères.

Les titres courts représentent une opportunité pour ajouter des mots clés supplémentaires et inciter au clic.

titres courts

Tu recommences la même opération pour les descriptions (entre 120 sur mobile et 158 caractères).

Un simulateur pour faciliter la rédaction des titres et méta descriptions

Tu testes tes titres et descriptions avec ce simulateur de SERP en prenant la limite de 600 px pour le titre et 920 pixels pour la description en concentrant l’information essentielle dans les premiers 680 pixels.

simulateur serp

Quand tu modifies les titres et descriptions, tu subis souvent un nouvel examen qui fait temporairement chuter tes positions.

Les pages avec peu de contenu augmentent le risque que tout ton site soit déclassé.

Détecte tes pages faibles

Données de base (dans le panneau central) > Internes

liens internes

Tu filtres le contenu sur text/html.

filtre

Tu ajoutes une condition ET sur le code de réponse 200 pour ne disposer que des pages actives.

compléter le filtre

Tu peux également exclure des pages : AMP, uploads WordPress…

filtre complet

Tu tries sur le nombre de mots pour faire apparaître les pages qui contiennent peu de contenu.

nombre mots

Le minimum se situerait autour de 300 mots. Nous serions plutôt au-delà de 500 mots pour apparaître dans les moteurs de recherche aujourd’hui sur des mots-clés avec une faible compétition.

Pour enrichir ton analyse, tu vérifies les articles qui ne rencontrent pas de succès auprès de Google dans la Search Console.

Si ton site est récent (moins d’un an et demi) ou comporte moins de 30 articles, tu passes cette étape.

Tu sélectionnes Clics et Impressions dans le rapport des performances sur une période d’un an.

recherche des pages zombies dans Google Search Console

Tu classes par impressions croissantes dans l’onglet pages.

classement par impressions

Tu retrouves les articles auxquels Google n’accorde pas ou peu de crédit.

exemples de pages zombies

Tu ne tires aucune conclusion pour les articles publiés il y a moins de 6 mois.

Pour rectifier, tu peux enrichir tes articles de nouvelles sections mais également les fusionner par thème.

Si ces articles fonctionnent bien sur les réseaux sociaux ou présentent un intérêt pour tes lecteurs mais pas pour Google, tu les désindexes.

Sur WordPress : tu refuses l’affichage dans les moteurs de recherche dans les paramètres avancés de Yoast.

désindexer des articles dans Yoast

Je retrouvais systématiquement les articles Coulisses en bas de classement. Dans les faits, ils ne correspondent pas à une recherche effectuée dans les moteurs. J’ai désindexé l’ensemble des articles de cette catégorie et laissé uniquement la page thématique qui les présente.

Ces pages qui sous-performent en SEO (aussi qualifiées de pages zombies) envoient des signaux négatifs et dégradent la réputation globale de ton site.

Les liens externes des autres sites qui traitent des mêmes sujets restent un critère central pour te faire remonter dans les recherches.

Audit des liens entrants

Nous allons utiliser 3 outils pour disposer d’une vue exhaustive.

Les liens validés par Google

Search Console recense les liens entrants. C’est la référence pour connaître les liens que Google reconnait.

liens

Tu retrouves tes articles classés par le volume de liens reçus

liens externes

ainsi que les sites qui créent les liens.

sites origine

Les liens multiples depuis un domaine unique ne possèdent quasiment aucune valeur. Seul le premier compte réellement.

Ahrefs fournit un liste avec le meilleur lien par site plus facilement exploitable.

Quantifie tes liens entrants

L’outil gratuit Backlink checker fournit la liste la plus exhaustive des liens vers ton site.

Il livre uniquement les 100 premiers résultats sans pouvoir réaliser un tri.

vérificateur liens entrants

Tu découvres les volumes et le % en dofollow (qui transmettent de l’autorité).

volume liens

La notion primordiale est le degré d’autorité du site matérialisé par le score du domaine (DR).

liste domaines

Consulte tes liens retours

Pour accéder à un plus grand nombre de liens, tu peux regarder dans l’analyseur SEO de liens entrants de Neil Patel

ubersuggest liens retours

La base de donnée est moins exhaustive

liens identifiés

mais tous les liens sont accessibles et triés par score de domaine.

liste complète liens

Tu peux évidemment analyser les liens de tes concurrents et contacter les sites pour obtenir une référence.

Conclusion

Cet audit SEO a mis en avant les principaux points à regarder pour améliorer ton référencement naturel.

Tu te concentres en priorité sur les points les plus faciles à rectifier et qui apportent des résultats rapides :

  • titres et méta-descriptions
  • vitesse
  • maillage interne

Réalise gratuitement ton audit SEO avec des outils gratuits et performants #seo #referencement
Click To Tweet


Les résultats en SEO ne s’obtiennent pas du jour au lendemain mais chaque amélioration porte ses fruits.

La meilleure action en référencement est la plus compliquée à évaluer : procurer de la valeur à tes lecteurs pour leur donner envie de revenir.

signature de Jean du site pour pas un rond
portrait jean pourpasunrond

Jean

Fondateur, auteur et homme à tout faire


J’ai créé pour pas un rond pour que tu puisses réaliser seul ton site et le faire grandir avec des tutoriels pas à pas.

Les articles qui peuvent t’intéresser :

Retrouve tous les tutoriels pour Attirer des visiteurs sur ton site

bannière pour l'inscription à la newsletter

Cet article 8 outils gratuits pour un audit de ton référencement naturel de Jean est apparu en premier sur pour pas un rond.

]]>
https://www.pourpasunrond.fr/audit-seo-gratuit/feed/ 0
WordPress : Accélère ton site avec 8 extensions gratuites https://www.pourpasunrond.fr/accelere-site/ https://www.pourpasunrond.fr/accelere-site/#comments Wed, 06 Nov 2019 10:10:03 +0000 https://www.pourpasunrond.fr/?p=7311 pour pas un rond
WordPress : Accélère ton site avec 8 extensions gratuites

Retrouve toutes les explications détaillées pour gagner de précieuses secondes sur le chargement de ton site WordPress.

Cet article WordPress : Accélère ton site avec 8 extensions gratuites de Jean est apparu en premier sur pour pas un rond.

]]>
pour pas un rond
WordPress : Accélère ton site avec 8 extensions gratuites

T Ton site s’affiche lentement. Je te montre concrètement comment j’ai réduit mon temps de chargement.

Google se base désormais sur la version mobile pour évaluer un site. Celle-ci est beaucoup plus exigeante techniquement.

Tu vas accélérer ton site, économiser de précieuses secondes et rendre le sourire à tes visiteurs et à Google.

Si tu es allergique à la technique, je te présente 7 extensions faciles à utiliser qui vont travailler à ta place.

Cet article prend environ 12 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

visuel pinterest de l'article 7 extensions pour accélérer WordPress
picto articles débutants
Débutant

Tu débutes par le diagnostic de l’existant.

Teste la vitesse de ton site

Tu mesureras ainsi l’amélioration après optimisation.

Tu ouvres l’outil PageSpeed Insights de Google et complètes ton URL.

interface pagespeed insights

Tu débutes par l’onglet ordinateur. Tu découvres ta note globale

pagespeed insights note ordinateur

et les statistiques détaillées.

pagespeed insights résultats ordinateur

Les deux principales à retenir :

  • First Contentful Paint : l’attente avant que le premier contenu soit visible pour l’internaute. Ton visiteur est rassuré car il visualise qu’il se passe quelque chose.
  • Délai avant interactivité : Le temps d’attente avant que ton site soit complétement opérationnel.

Le but est de passer sous les 3 secondes même si cela est beaucoup plus facile à dire qu’à faire sur mobile.

Google se base désormais sur l’expérience mobile pour évaluer ton site.

pagespeed insights note mobile

Le résultat est catastrophique pour mon site. Les visiteurs prêts à patienter 17 longues secondes sont rarissimes.

pagespeed insights résultats mobile

Les explications fournies par Google pour améliorer les performances donnent des pistes mais sont souvent difficiles à appliquer.

recommandations google

Tu complètes ce test à l’aide de Pingdom. Tu indiques l’url de ton site et tu modifies le lieu du test pour Frankfurt.

Tu attends quelques secondes et découvres les résultats.

pingdom interface

Tu disposes d’une note sur 100 pour ta version ordinateur et le temps de chargement complet.

pingdom résultats

Tu retrouves une synthèse des axes d’amélioration.

pingdom améliorations

Tu débutes par une cure d’amincissement de ton code.

Compresse ton site avec Autoptimize

Avant de te lancer, tu réalises une sauvegarde complète de ton site. Une extension peut modifier l’apparence de certains thèmes. Dans ce cas, tu la supprimes.

Autoptimize optimise et centralise les codes de ton site : HTML, CSS et JavaScripts.

Tu installes l’extension.

extension autoptimize

Dans le menu de gauche Réglages > Autoptimize

Onglet JS, CSS & HTML

Tu coches :

  • Optimiser le code HTML
  • Optimiser le Javascript
  • Optimiser les CSS
autoptimize options

Tu affines en activant les Réglages avancés.

réglages avancés

Dans Options JavaScript, tu coches Concaténer les fichiers JS

options javascript

et les 3 options suivantes dans CSS :

  • Concaténer les fichiers CSS
  • Agréger aussi les CSS inline
  • Génération de données : URI pour les images
options css

Onglet Extra

Tu coches Combiner et précharger dans l’entête (les polices se chargent plus tard mais ne bloquent pas le rendu de la page) si tu utilises les Google Fonts sinon tu les supprimes.

Tu peux également retirer le code qui gère les emojis.

autoptimize onglet extra

Tu vas voir le prochain plugin a plus d’un tour dans son sac.

Optimise tes bases et tes images avec WP-Optimize

WP-Optimize s’est enrichi et remplace désormais de nombreuses extensions.

Tu la retrouves dans le répertoire des extensions.

extension wp-optimise dans le répertoire de WordPress

Tu commences par nettoyer les données inutiles conservées dans WordPress.

Base de données

Avant de réaliser une optimisation, tu sauvegardes ton site comme conseillé. Je n’ai jamais rencontré le moindre problème.

Si tu as installé UpdraftPlus, tu coches “Faites une sauvegarde” pour une exécution automatique.

Tu coches toutes les cases et lances l’optimisation.

Je réalise cette opération une fois par mois. Autoptimize propose un automatisation mais je préfère l’exécuter manuellement après une sauvegarde intégrale du site.

optimisation de la base de données

Pense à regarder dans les commentaires en indésirable avant de lancer l’optimisation (accessibles directement par lien dans la liste). De plus, les sauvegardes intermédiaires des articles seront éliminées.

Images

Tu actives Automatiquement compresser les images nouvellement ajoutées et Show compression meta-box on an image’s dashboard media page.

Tu as trois options de compression :

  • maximale qui ne sera pas perceptible dans la majorité des cas mais qui peut dégrader certains visuels
  • conserver les détails où l’image sera identique à l’original
  • personnaliser permet de trouver un juste milieu

Dans les options avancées, tu peux conserver les images originales. Tu auras ainsi la possibilité d’annuler la compression.

Le poids de ton site sera plus important chez ton hébergeur. Cela peut être une bonne idée dans un premier temps si tu choisis la compression maximale.

Les données EXIF ne sont d’aucune utilité.

options pour compresser les images

Le cache génère une version figée de ton site. Cela économise le temps de calcul de la page.

Cache

Tu actives la fonctionnalité de cache. Le bouton Purge cache te sera utile quand tu auras réalisé une modification et que tu souhaites qu’elle soit directement visible.

Si tu as une version AMP, tu coches Generate separate files for mobile devices.

cache séparé version mobile

Onglet Preload

Tu cliques sur Preload now pour remplir ton cache et coches Activate scheduled cache pour que le cache se reconstruise automatiquement à chaque renouvellement.

Réglages

Tu désactives les rétroliens qui peuvent être une source de piratage.

désactiver les retroliens

Pourquoi charger toutes tes images avant que tes lecteurs n’aient débuté leur lecture ?

Charge tes images au dernier moment avec le Lazy Load

Avec A3 Lazy load, tes images s’affichent au fur et à mesure de l’avancement dans la page.

Cela n’aura pas d’impact sur la qualité de lecture mais ta page sera disponible plus rapidement en particulier si tu rédiges des articles longs et abondamment illustrés.

Tu installes A3 Lazy load dans les extensions du répertoire de WordPress.

extension a3 lazyload

Tu modifies l’apparence des images qui se chargent dans Réglages > A3 Lazy Load.

Dans la section Effect & Style, tu choisis ton affichage entre une apparition progressive (Fade in) et une animation avec une roue de chargement animée (Spinner) ainsi que la couleur de fond de l’image en cours de chargement.

apparence d'a3 lazy load

Pour éviter que les visiteurs qui reviennent sur ton site chargent à nouveau les mêmes ressources, il est possible de définir des durées de conservation des fichiers dans leurs ordinateurs.

Active le cache navigateur

Tu installes Leverage Browser Caching.

plugin wordpress leverage browser caching

Pour les utilisateurs avertis :

Il est possible de réaliser la même opération en modifiant le fichier .htaccess de ton site. Tu trouveras la démarche pour Activer la mise en cache avec le fichier .htaccess sur WP Marmite.

How to Leverage Browser Caching in WordPress de CollectiveRay complète ce code avec les instructions pour un CDN comme CloudFlare.

Si tu utilises un constructeur de page ou un formulaire de contact uniquement sur ta page d’accueil, tu as la possibilité de le désactiver sur tes articles.

Plugin organizer pour gérer tes extensions

Tu installes l’extension Plugin Organizer.

plugin organizer

Dans le menu Settings,

plugin organizer menu

tu actives Selective Plugin Loading.

plugin organizer activer sélection extensions

Dans Post Type Plugings, tu choisis dans les grandes masses les extensions qui seront présentes dans les articles (post) ou les pages. Tu cliques sur une extension pour la désactiver. Elle passe en rouge.

Si l’extension n’est utilisée que dans un nombre très limité de pages ou articles, tu la désactives au niveau général et l’actives au niveau de chaque page dans WordPress.

Tu disposes d’une nouvelle boîte de dialogue en bas de Gutenberg pour appliquer une exception.

Tu coches Override Post Type settings.

plugin organizer réglages individuels articles

Tu réalises une sélection spécifique pour cette page et enregistres la publication.

réglages article

Dans le doute, mieux vaut laisser une extension inutile que couper une fonctionnalité indispensable.

Tu visualises les articles avec une exception dans la liste. Ils apparaissent avec ON dans Post Type Override.

résumé des exceptions des articles

Les polices fournies gratuitement par Google sont une vraie opportunité pour personnaliser ton site mais bloquent le chargement.

Précharge les Google Fonts

Host Google Fonts Locally charge les polices en amont pour qu’elles soient disponibles sans délais.

extension host google fonts locally

Réglages > Optimize Webfonts

Tu cherches tes polices en les séparant par une virgule.

recherche polices

Tu sélectionnes les versions Latines et supprimes les tailles non utilisées puis charges les polices.

chargement polices

Tu génères la feuille de style.

génère feuille style

Un Done apparaît pendant quelques secondes pour t’indiquer la réussite.

import effectué

Tu peux réaliser cette opération directement dans le code de ton site. Les instructions sont dans la partie avancée.

Tu supprimes le chargement des Google Fonts dans l’onglet extra d’Autoptimize.

supprimer google fonts autoptimize

Tu peux encore accélérer ton site pour la consultation des pages suivantes.

Une meilleure réactivité une fois sur ton site

Cette extension ne changera pas la vitesse lors des mesures mais aura un réel impact pour tes visiteurs.

Une fois que la page courante est chargée et stable, le serveur commence à précharger les pages dont le lien est visible sur la page. La page apparaît quasi-instantanément quand le visiteur clique sur le lien.

L’extension vérifie la vitesse de connexion du visiteur et la charge du serveur avant de lancer l’opération.

Il suffit d’installer Flying Pages. Les réglages par défaut conviennent à la majorité des cas.

Il est fortement recommandé d’avoir une extension de cache installée.

extension flying pages

De nombreux autres facteurs ralentissent ton site.

Les autres éléments qui influent sur la vitesse de chargement de ton site

Certaines extensions induisent des temps de chargement long comme Sumo pour les pop-ups par exemple. Le compromis entre la vitesse du site et son efficacité marketing est complexe.

Il existe également des plugins premiums comme WP Rocket qui sont réputés pour accélérer les sites.

L’optimisation des images au format Webp avec WebP Express permet de gagner sur le poids des visuels. Celui-ci n’est pas compatible avec Cloudflare qui propose ce service dans les abonnements payants.

Trois thèmes sont systématiquement cités pour leur rapidité de chargement :

  • OceanWP
  • Astra
  • GeneratePress

Je n’ai pas trouvé une différence flagrante au passage sous OceanWP.

Il existe des hébergeurs premium comme Kinsta spécialisés dans WordPress qui garantissent des performances optimales. Cependant, le prix est à l’avenant. À relativiser avec le chiffre d’affaires généré.

Les vidéos intégrées favorisent les ralentissements. J’ai remplacé celle de ma page d’accueil par une image fixe qui renvoie sur YouTube.

Une version AMP de ton site n’influera pas sur ta note. Pour tes lecteurs sur mobiles la différence est flagrante : ton site se charge en une seconde environ.

La contrepartie : cette version allégée limite fortement l’aspect visuel et les fonctionnalités.

Retrouve les explications pour installer l’AMP sur ton site.

La prochaine section monte fortement en difficulté. Si tu débutes, je te conseille de sauter à la conclusion et d’y revenir plus tard. C’est excellent, tu as fait 95 % du boulot.

picto articles avancés
Avancés

Tes visiteurs accèdent à ton site dans les meilleures conditions sur toute la planète.

J’ai eu la chance de bénéficier de l’aide du support de mon hébergeur.

Cloudflare pour diffuser mondialement

Cloudflare met gratuitement à ta disposition des data centers repartis au 4 coins du globe.

Tu ne constateras pas une amélioration notable si ton hébergeur est en France mais tes lecteurs Canadiens percevront la différence.

Tu t’inscris sur Cloudflare.

cloudflare inscription

Tu complètes l’URL de ton site sans https://www.

déclare ton site

Tu sélectionnes le plan gratuit.

plan gratuit

Tu dois retrouver ton site avec le nuage orange à côté.

reconnaissance de ton site

Tu changes les adresses de tes serveurs chez ton gestionnaire de nom de domaine ou chez ton hébergeur (si c’est lui qui le gère) vers celles de Cloudflare.

modifier noms serveurs

Je suis hébergé chez o2switch et c’est le support technique qui réalise cette opération.
Tu retrouves les instructions pour les principaux gestionnaires de nom de domaine.

instructions principaux gestionnaires domaines

Tu reçois un e-mail de Cloudflare dans les 24 heures pour indiquer la bonne prise en compte. Mon activation a été réalisée en 2 heures.

email activation

Dans Cloudflare, tu cliques sur ton site.

Tu vas explorer les options qui s’offrent à toi à l’aide du menu principal.

Speed

Tu actives Rocket Loader.

Onglet optimization

onglet optimization

Tu valides :

  • JavaScript
  • CSS
  • HTML
minimization

Tu peux supprimer les adresses spécifiques de l’AMP. Toutes les visites seront unifiées dans tes rapports d’analyse.

amp

Scrape Shield

Tu déclenches Activer Hotlink Protection.

hotlink protection

DNS

Dans DNS, tu vérifies que tu n’aies pas de message d’alerte.

J’avais le message suivant : Add an MX record… Ce message précise que le serveur e-mail n’est pas correctement raccordé.

Dans ce cas précis, tu ajoutes un enregistrement.

ajout e-mail

Tu indiques :

  • Type : MX
  • Name : @
  • Mail server : le serveur e-mail indiqué par l’hébergeur
  • Priority : 1
configuration DNS MX pour serveur e-mail

Applications

Tu peux remplacer certaines de tes extensions par des équivalents directement hébergés sur Cloudlare et non sur WordPress.

Cookiless se substitue avantageusement à la barre d’avertissement de Cookie Notice.

Tu sélectionnes ton application

cookiless

et lances la prévisualisation.

Tu effectues les réglages, visualises le résultat sur ton site et installes si cela te convient.

  • texte du bandeau
  • texte du bouton
  • opacité
utilisation app

Pendant la phase de déploiement sur tous les serveurs (maximum 24 heures), les applications ne seront pas forcément visibles partout.

J’ai également installé le bouton de partage développé par Pinterest.

bouton pinterest

Je pensais remplacer Sumo qui consomme énormément de ressources par Privy mais la version gratuite est trop limitée.

L’extension WordPress de CloudFlare

Ce plugin n’est pas obligatoire mais recommandé.

extension cloudflare

Réglages > Cloudflare

menu cloudflare

Tu connectes ton compte.

connexion cloudflare

Tu suis le lien pour récupérer la clé d’activation.

clé api

Tu cliques sur Global API Key.

clé api global

Tu saisis ton mot de passe Cloudflare et certifies ton humanité.

mot passe

Tu copies la clé dans WordPress puis lances l’optimisation.

optimisation cloudflare wordpress

Les polices ralentissent le chargement de ton site. Voici comment y remédier directement dans le code de ton thème.

Précharge tes polices dans l’en-tête de ton site

Apparence > Editeur de thème

editeur de theme WordPress

Tu sélectionnes ton thème enfant puis thème functions.

modifier le fichier fonctions.php

Tu passes une ligne et colles le code ci-dessous sous le code existant puis enregistres.

/* precharge font dans header */
add_action( 'wp_head', 'charge_gf' ); 
function themeprefix_load_fonts() { 
    ?> 
<link rel="preload" as="font" href="/fonts/custom-font.woff" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://fonts.googleapis.com/css?family=raleway=swap" as="fetch" crossorigin="anonymous">;
<!-- fin precharge --> 
    <?php 
}

Tu remplaces ta police après family.

changer police

Le plus simple est de reprendre l’intitulé des polices directement dans Google Fonts. Tu sélectionnes les polices que tu utilises et cliques sur sélection.

google fonts

Tu désactives le chargement des autres polices inutilisées dans Autoptimize > Extra.

supprimer google fonts dans autoptimize

J’ai ajouté une ligne supplémentaire car Google m’indiquait une fonte bloquante.

demandes clés bloquantes
<link rel="preload" as="font" href="/fonts/simple-line-icons/Simple-Line-Icons.woff2" type="font/woff2" crossorigin="anonymous">
texte à recopier pour polices personnalisées

J’ai repris le code depuis /fonts jusqu’au ?.

Le résultat

Mes performances sont meilleures.

vitesse ordinateur

Je descends sous les deux secondes sur ordinateur avec un affichage en 1 seconde.

détail vitesse ordinateur

La différence est flagrante sur mobile.

vitesse mobile

C’est améliorable mais le site se charge sous les 5 secondes et s’affiche en moins de trois.

détail vitesse mobile

Pingdom indique un site qui se charge en moins d’une minute sur ordinateur.

vitesse pingdom finalisée

J’ai également réalisé le test sur une page standard du site avec de bons résultats

article optimisé
article optimisé détail

mais la version mobile reste en retrait.

mobile article
détail vitesse mobile article

Conclusion

J’ai cherché les outils les plus simples à utiliser pour améliorer concrètement la vitesse de chargement de ton site WordPress.

Tous ces outils sont gratuits. Il existe des solutions payantes pour passer au niveau supérieur. Elles sont à envisager en fonction du chiffre d’affaires généré par ton site.


Accélère facilement ton site WordPress à l'aide de 7 extensions gratuites.
Click To Tweet


La mise en cache diffère un peu les résultats. Tu peux refaire un test 24 heures plus tard pour mesurer les résultats finaux.

Partage tes résultats avant/après dans les commentaires.

signature de Jean du site pour pas un rond
portrait jean pourpasunrond

Jean

Fondateur, auteur et homme à tout faire


J’ai créé pour pas un rond pour que tu puisses réaliser seul ton site et le faire grandir avec des tutoriels pas à pas.

Des articles qui peuvent te plaire

Retrouve tous les articles pour Créer seul ton site

bannière newsletter

Cet article WordPress : Accélère ton site avec 8 extensions gratuites de Jean est apparu en premier sur pour pas un rond.

]]>
https://www.pourpasunrond.fr/accelere-site/feed/ 4
Coulisses d’octobre 2019 – Un cap franchi https://www.pourpasunrond.fr/coulisses-octobre-2019/ https://www.pourpasunrond.fr/coulisses-octobre-2019/#respond Sun, 03 Nov 2019 12:32:34 +0000 https://www.pourpasunrond.fr/?p=13017 pour pas un rond
Coulisses d’octobre 2019 – Un cap franchi

p pour pas un rond a dépassé le cap des 10 000 visiteurs en octobre. Je te remercie ainsi que tous les lecteurs en particulier Sylvie, Florence, Marjorie, Daniel, Michel, Christophe et Anthony qui ont gentiment accepté que je publie leurs témoignages. 4 nouvelles pages enrichissent le site et apportent une meilleure cohérence visuelle. Cet […]

Cet article Coulisses d’octobre 2019 – Un cap franchi de Jean est apparu en premier sur pour pas un rond.

]]>
pour pas un rond
Coulisses d’octobre 2019 – Un cap franchi

p pour pas un rond a dépassé le cap des 10 000 visiteurs en octobre.

Je te remercie ainsi que tous les lecteurs en particulier Sylvie, Florence, Marjorie, Daniel, Michel, Christophe et Anthony qui ont gentiment accepté que je publie leurs témoignages.

4 nouvelles pages enrichissent le site et apportent une meilleure cohérence visuelle.

Cet article prend environ 7 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

visuel Pinterest article Coulisses d'octobre 2019

La vie du site

J’ai consacré les derniers jours d’octobre à revoir les pages d’accueil et de la newsletter et à rédiger deux nouvelles pages.

Je me suis remis à écrire des articles originaux dont le premier déjà paru est consacré au dépôt de marques. Tu découvriras les autres en novembre.

Le contenu

Le dépôt de marque n’a pas rencontré le succès escompté auprès des abonnés de la newsletter. L’accueil reçu sur les réseaux sociaux me conforte.

J’ai réalisé un nettoyage des inactifs de ma newsletter et ai expérimenté une méthode plus rapide que je te partage.

Les nouvelles fonctionnalités de Secupress méritaient de refondre l’article sur la sécurité.

Je propose plusieurs méthodes pour la création d’un thème enfant qui facilitent la tâche.

J’ai également ajouté la procédure pour connecter Contact Form 7 et un compte Mailchimp.

INPI : dépose et protège ta marque

article dépôt de marque inpi

L’enregistrement à l’INPI protège ta marque des contrefaçons ou des petits malins qui voudraient utiliser ton nom (ou un très proche qui porte à confusion) pour commercialiser leurs produits ou services.

Sécurité WordPress : 4 extensions pour protéger ton site

article assure la sécurité de ton site WordPress

Ces extensions assurent gratuitement la sécurité de ton site. Trois sont accessibles aux débutants et se configurent rapidement. La 4e protège des attaques en masse.

Crée ton thème enfant sur WordPress

article créer un thème enfant WordPress

Un thème enfant permet de personnaliser les CSS de ton site sans devoir tout refaire lors de la prochaine mis à jour. Je te présente trois méthodes simples et rapides pour le générer et la procédure pour t’en servir.

Mailchimp : Nettoie tes inactifs

article sur la suppression des inactifs de Mailchimp

Les inactifs empêchent les lecteurs légitimes de recevoir ta newsletter. Supprime-les en quelques minutes.

Contact form 7 : Crée gratuitement un beau formulaire de contact

article Contact Form 7

Deux minutes suffisent pour connecter Mailchimp et Contact Form 7. Tu disposes d’une raison supplémentaire de découvrir ce tutoriel.

Les améliorations apportées

La page d’accueil a été entièrement revue pour présenter plus synthétiquement l’organisation du site mais surtout pour détailler aux débutants la méthode que je suivrais si je repartais de zéro. Je ne l’avais pas refaite au moment du passage sur OceanWP. Elle faisait le boulot mais la présentation laissait à désirer.

nouvelle page d'accueil

La page d’inscription à la newsletter ne ressemblait plus à rien. Les nouvelles CSS avait endommagé le design.

J’ai créé une page À propos qui dévoile les débuts du site et une courte bio. Je présente également mes services.

J’ai intégré la thématique Entreprise. La page est en construction. Je reverrais toutes les pages colonnes vertébrales mais j’hésite encore sur la présentation. Elles seront probablement sur le format de ce que je viens de rédiger pour la page d’accueil.

J’ai adapté et simplifié le menu. Il s’approche plus de ce que tu retrouves sur les autres blogs.

Les lectures et écoutes du mois

Pourquoi votre Marketing de Contenu ne fonctionne pas et comment inverser rapidement la tendance ?

logo captain marketing

Stéphane Truphème de Captain Marketing fait la chasse aux articles prétextes qui n’apportent aucune valeur ajoutée.

Son argumentaire est convaincant et bien illustré.

Il conclut avec trois méthodes pour rédiger des articles qui convertissent.

Aligner notre activité et nos valeurs [Podcast]

thomas-burbidge-podcast

Maxime de Beauchesne explique comment il gère sa vie de freelance en harmonie avec ses valeurs. J’ai été particulièrement intéressé par sa pratique originale du prix libre.

Le prix à payer quand on veut scaler son activité

podcast oussama ammar

Oussama Ammar donne de nombreux exemples pour faciliter la gestion de son activité avec l’automatisation.

Il explique pourquoi passer à la vitesse supérieure oblige à transiger.

HTML5 et CSS3 [Livre]

HTML5 et CSS3 Maîtrisez les standards de la création de sites web

Christophe AUBRY fournit des explications claires sur le HTML et les CSS dans ce beau pavé.

Ce n’est clairement pas un ouvrage à lire pour de détendre mais la lecture est agréable. Les différents éléments sont détaillés et illustrés.

Monétiser son blog [Livre]

couverture du livre Monétiser son blog

Nessa Buonomo partage ses conseils blogging. Le sujet du livre est plutôt pourquoi et comment lancer un blog de filles.

L’ouvrage est facile et rapide à lire avec une mise en page et un design soignés.

J’ai aimé les témoignages de blogueuses qui multiplient les points de vue. J’aurais aimé que la partie monétisation soit plus développée et technique.

En anglais

The Detail Principle For Writing Good Blog Posts

article de Grow & Convert

Devesh Khanal de Grow & Convert prouve que le bon contenu n’est qu’une affaire de détails. Il explique concrètement comment enrichir tes articles.

bannière e-book 2 ans

Les réseaux sociaux (8 % des sessions)

Le trafic en provenance des réseaux sociaux est stable à – 2 %. Seuls Facebook et YouTube sont en progression.

Trafic des réseaux sociaux

YouTube (30 abonnés – 10 sessions)

J’ai tourné une vidéo après de longs mois sans pratiquer. J’ai vraiment eu du mal à m’y remettre. Le résultat est beaucoup trop long mais mieux vaut fait que parfait. Je la publierai en novembre. Cela changera des bandes-annonces.

Les vues chutent de 12 %

youtube vues

avec une durée de vue moyenne en hausse.

durée visionnage

Les sources externes devancent les recherches sur internes sur YouTube

sources trafic

avec une provenance des recherches dans Google.

sources trafic externe

Pinterest (7 449 abonnés – 649 sessions)

Les impressions du comptes tendent vers la hausse.

pinterest impressions

Mes épingles, au contraire, accusent une baisse.

impressions mes épingles

Les enregistrements sont très irréguliers.

enregistrements

Les clics se stabilisent.

clics

Twitter (5 588 abonnés – 65 sessions)

J’ai été plus actif

tweets

mais les vues du profil ont chuté

visites profils

ainsi que la visibilité.

twitter impressions

Il manque trois jours de statistiques ce qui explique en partie ce résultat.

détail impressions

Cela se retrouve sur les autres indicateurs.

trou stats

Facebook (452 abonnés – 31 sessions)

La vidéo sur le dépôt de marque à l’INPI a intrigué alors que les abonnés de la newsletter n’ont pas accroché.

facebook interactions

LinkedIn (5 279 relations – 32 sessions)

RAS

La newsletter (551 abonnés – 83 sessions)

La baisse soudaine des abonnés est le résultat d’un nettoyage des inactifs de la liste.

abonnés newsletter

Le résultat du nettoyage sur le taux de clic n’est pas flagrant. Les sujets publiés n’ont pas passionné les abonnés en particulier le dépôt de marque à l’INPI qui totalise 2 % de clics.

Newsletter _ tx Ouverture, tx Clic et vol Abonnés
bannière newsletter

Les notifications (1 000 abonnés – 21 sessions)

RAS

Les statistiques du site

Les visites ont bondi de 40 % en octobre pour dépasser les 10 000 visiteurs. Ce cap symbolique représente pour moi la validation du travail effectué.

Visiteurs sur 12 mois

Je ne vais pas pouvoir m’endormir sur mes lauriers car la tendance fût à la baisse légère pendant le mois.

trafic octobre

Les visites et les pages vues sont un peu en retrait.

Visiteurs, Visites et Pages Vues

Les canaux d’acquisition

Sans surprise le référencement naturel dépasse les 80 % du trafic et explique intégralement la croissance.

Canaux d'acquisition du trafic

Fidélisation

Le taux de lecteurs qui reviennent sur le site progresse.

Nouveaux et Retours

AMP

L’AMP représente un accélérateur de croissance.

Sessions avec et sans AMP

Mobile

Contrairement à ce que laissent supposer les chiffres de l’AMP, ce sont les visites sur ordinateur qui ont enregistré la meilleure progression.

Trafic par matériels

Profondeur de lecture

Les nouveaux lecteurs approfondissent moins les articles sans que cela soit problématique.

Profondeur de lecture en proportion des sessions

L’évolution des articles

Globalement tous les articles progressent mais ma dépendance à mon meilleur contenu devient problématique.

articles

Bilan du changement de thème

Le changement de thème apporte une meilleure lisibilité. J’imaginais une influence positive sur le temps passé sur le site et le taux de rebond. Cette hypothèse n’est pas vérifiée en particulier pour le taux de rebond.

sessions

Google Search Console

Les impressions baissent légèrement.

gsc impressions

Les clics diminuent plus rapidement.

gsc clics

Le CTR baisse continuellement

ctr

en relation avec le recul dans les positions.

position

Conclusion

J’alterne entre écriture et chantiers de fond. Les améliorations se cumulent et apportent des résultats sur le long terme.

La montagne de projets est toujours aussi intimidante mais le trafic me conforte dans la direction choisie.

Je travaille mieux en me consacrant pleinement à une tâche pendant quelques jours. Cette organisation se traduit en contrepartie par des pans entiers du site qui font fuir les visiteurs.


Les coulisses de pour pas un rond dévoilent chaque mois les statistiques et expérimentations du site.
Click To Tweet


Je programme de consacrer du temps en novembre à des apprentissages de long terme.

Nous verrons si j’arrive à maintenir le trafic après l’incroyable progression d’octobre.

signature de Jean du site pour pas un rond
portrait jean pourpasunrond

Jean

Fondateur, auteur et homme à tout faire


J’ai créé pour pas un rond pour que tu puisses réaliser seul ton site et le faire grandir avec des tutoriels pas à pas.

Les 3 précédents articles de la rubrique Coulisses

Retrouve tous les articles Coulisses depuis le lancement

Cet article Coulisses d’octobre 2019 – Un cap franchi de Jean est apparu en premier sur pour pas un rond.

]]>
https://www.pourpasunrond.fr/coulisses-octobre-2019/feed/ 0
Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] https://www.pourpasunrond.fr/creer-un-formulaire-de-contact/ https://www.pourpasunrond.fr/creer-un-formulaire-de-contact/#comments Tue, 29 Oct 2019 16:29:38 +0000 https://www.pourpasunrond.fr/?p=5075 pour pas un rond
Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel]

Un tutoriel pas à pas pour créer un formulaire esthétique sur WordPress. Retrouve un modèle prêt à l'emploi et des astuces contre le spam.

Cet article Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] de Jean est apparu en premier sur pour pas un rond.

]]>
pour pas un rond
Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel]

Utilisé par plus de 5 millions de sites, Contact Form 7 est l’extension gratuite de WordPress idéale pour créer ton formulaire de contact.

Je t’accompagne pas à pas dans ce tutoriel. Chaque étape est illustrée.

Tu intègres facilement ton formulaire où tu le souhaites :

  • ta page de contact
  • ta page d’accueil
  • ton pied de page…

Cela ne prends que quelques minutes pour un formulaire simple. Tu n’auras qu’à réaliser un copier-coller.

Honnêtement, la version standard est moche et encombrante. Je te dévoile comment disposer d’une version esthétique avec des astuces de personnalisation.

Je suis passé de ce formulaire qui faisait le travail

formulaire d'origine

à celui-ci que je te propose d’intégrer sur ton site.

formulaire Contact Form 7 attractif

Nous verrons également comment le protéger du spam qui sinon représente une vraie plaie.

Si tu es client Mailchimp, je te montre comment connecter facilement ton formulaire.

Cet article prend environ 13 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

visuel Pinterest de l'article Comment créer gratuitement un beau formulaire de contact avec Contact Form 7
picto articles débutants

Débutant

Avant de nous lancer dans l’installation de l’extension sous WordPress, je te présente synthétiquement des astuces pour un formulaire performant.

7 conseils pour un formulaire efficace

  • Limite au maximum le nombre de champs à ceux dont tu as besoin à court terme. Il sera toujours le temps de demander le numéro de TVA intracommunautaire plus tard dans la relation.
  • Précise clairement les champs facultatifs. Le mieux est de les éliminer.
  • Les menus déroulants sont à limiter au maximum. L’expérience utilisateurs est désastreuse sur mobile. Les cases à cocher sont à privilégier.
  • Le texte du bouton d’action doit être clair. Un texte d’action à la première personne est plus parlant :
    • J’envoie mon message
    • Je communique mon CV
    • Je reçois les prochains articles
  • Si la demande est particulière, un exemple aide à visualiser le résultat attendu : Votre numéro de facture est situé en haut à droite du devis sous la forme F2019.328.
  • Si une question est personnelle ou sort de l’ordinaire, une explication est la bienvenue. Je précise que le calcul 5+2 est destiné à lutter contre le spam.
  • Toute information personnelle comme l’e-mail doit faire l’objet d’un consentement actif sur sa destination dans le RGPD.

Rentrons, si tu le veux bien, dans le vif du sujet.

Crée ton formulaire avec Contact Form 7

Installe l’extension

Tu te rends dans Extensions puis Ajouter.

wordpress menu ajout d'une extension

Tu recherches Contact form 7.

rechercher contact form 7

Tu l’installes

installer contact form 7

et actives l’extension.

activer contact form 7

Pour gagner du temps, tu recommences la même opération avec Material Design for Contact Form 7.

extension Material Design for Contact Form 7

Tu disposes désormais d’un menu Contact.

menu contact

Tu peux supprimer le formulaire de démonstration.

supprimer le formulaire de démonstration

Crée ton premier formulaire

Tu cliques sur créer un formulaire.

créer un formulaire

Tu nommes ton formulaire.

Un nom descriptif qui indique où tu vas l’insérer te permettra de le retrouver plus facilement par la suite (par exemple : Formulaire page d’accueil).

nom formulaire

Voici le formulaire standard.

formulaire standard

En dehors de ne pas être super attractif, il lui manque surtout la case RGPD obligatoire en Europe.

Je te propose le formulaire suivant.

formulaire attractif

Si celui-ci te convient, tu copies le code ci-dessous

		
<div id="responsive-form" class="clearfix"> <div class="form-row"> <div class="column-half">
[text* Prenom]
</div> <div class="column-half">
[text* your-name akismet:author]
</div> </div> <div class="form-row"> <div class="column-half">
[email* your-email akismet:author_email]
</div> <div class="column-half">
[tel Tel]
</div> </div> <div class="form-row"> <div class="column-full">
[text* your-subject]
</div> </div> <div class="form-row"> <div class="column-full">
[textarea* your-message]
</div> <div class="form-row"> <div class="column-half">
[quiz quiz-1234 "Que font 7+2 ?|9" "Que font 4+2 ?|6" "Que font 3+5 ?|8"]

Cette question protège du spam

</div> <div class="column-half">
[acceptance optional] J'accepte que mon adresse e-mail soit stockée pour apporter une réponse [/acceptance]
</div> <div class="form-row"> <div class="column-full">
[submit "J'envoie le message"]
</div> </div><!--fin des instructions pour deux colonnes-->

et remplaces le code présent à cet emplacement puis enregistres.

remplacer le code standard

Ajoute le code pour l’affichage sur deux colonnes

J’ai utilisé comme base de travail cet excellent article : Creating a responsive two column form using Contact form 7. Il crée deux colonnes pour certains champs qui passent sur une colonne en version mobile.

Tu vas ajouter du code à ton thème pour lui indiquer que tu souhaites modifier la mise en page du formulaire. Tu vas voir rien de sorcier.

Dans le menu de gauche : Apparence > Personnaliser

menu personnaliser le thème

Tu sélectionnes le menu de l’extension Material Design for Contact Form 7

menu extension material design for contact form 7

Tu copies le code ci-dessous,

#responsive-form{
	max-width:600px /* Tu peux modifier la largeur du formulaire ici*/;
	margin:0 auto;
  width:100%;
}
.form-row{
	width: 100%;
}
.column-half, .column-full{
	float: left;
	position: relative;
	padding: 0.3em;
	width:100%;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

/*Instructions pour le responsive*/
@media only screen and (min-width: 48em) { 
	.column-half{
		width: 50%;
	}
}

tu le colles en bas dans CSS Personnalisé puis tu publies.

intégrer css pour le formulaire

Si tu as des besoins plus précis, je te détaille les différents champs de personnalisation dans la prochaine section.

Sinon, tu passes directement à l’étape de configuration de l’e-mail.

Modifie et ajoute des champs à ton formulaire

Tu vas ajouter ou modifier des éléments du formulaire réalisé au chapitre précédent.

Ajoute de nouvelles lignes

Si tu souhaites disposer de plus de champs de texte, tu copies-colles les instructions suivantes à l’emplacement désiré.

insérer de nouvelles lignes

Une ligne avec deux éléments :

2 champs
<div class="form-row">
<div class="column-half">		
		
[text* NOM-CHAMP-GAUCHE]
</div> <div class="column-half">
[text* NOM-CHAMP-DROITE]
</div> </div>

Une ligne avec un seul champ :

champ unique
<div class="form-row">
<div class="column-full">		
		
[text NOM-CHAMP]
</div> </div>

Tu remplaces ensuite le texte en majuscule.

Il existe d’autres éléments que tu peux intégrer.

Insère des cases à cocher

cases à cocher

Tu peux avoir un modèle qui accepte de multiples choix

<div class="form-row">
<div class="column-full">		
[checkbox checkbox-1234 "bleu" "vert" "rouge" "jaune" "orange" "noir"]
</div>

ou une seule option acceptée.

<div class="form-row">
<div class="column-full">		
[radio radio-1234 default:1 "bleu" "vert" "rouge" "jaune" "orange" "noir"]
</div>

Tu modifies le titre Échantillons souhaités. Les intitulés sont entourés de “” et séparés d’un espace.

Ajoute un menu déroulant

menu déroulant

Le code à ajouter :

<div class="form-row">
<div class="column-full">		
[select menu "RH" "Comptabilité" "Ingénieur" "Autre"]
</div>

Les menus déroulants sont difficiles à utiliser sur mobile. Tu dois réaliser un test pour valider que ce choix est pertinent pour les utilisateurs.

Intègre un champ date

champ date

Le code pour ajouter une date :

<div class="form-row">
<div class="column-full">		
		
[date date-1234]
</div> </div>

Donne la possibilité de joindre un fichier

joindre un fichier

Ce champ permet de limiter le poids du fichier (en Bytes) et les extensions acceptées (jpg, png, pdf, xls…).

limitations pour joindre un fichier

J’ai paramétré l’exemple pour un fichier Word ou PDF inférieur à 5 Mo.

<div class="form-row">
<div class="column-full">		

La limite de taille est de 5 Mo.

</div>

Modifie le caractère obligatoire d’un champ

Un champ est obligatoire s’il comporte une * à la suite de son nom : [email* Votre-email].

Ajoute une liste de destinataires

J’ai découvert cette astuce dans l’article Ajoutez un formulaire de contact à votre site avec Contact Form 7 de WPmarmite.

Tu ajoutes le code suivant en haut de formulaire.

code destinataires multiples

<div class="form-row"><div class="column-full">		
[checkbox* Destinataire exclusive "Comptabilité | compta@monsite.fr" "RH | rh@monsite.fr" "Direction | direction@monsite.fr"]
</div>

Tu intègres les différentes options sous la forme “Service ou personne | email” séparés par un espace en remplacement du texte d’exemple puis tu enregistres. Tu peux également changer l’intitulé du champ : Service destinataire du message.

remplacer destinataires

Dans l’onglet E-mail, tu indiques [Destinataire] dans le champ De.

installer emails destinataires multiples

Passe sur une version sombre

Si tu as choisi un thème foncè, la version classique ne sera pas approprié. Tu peux basculer sur une version avec le texte en blanc.

formulaire sombre - pour pas un rond

Tu remplaces

par
en haut des instructions du formulaire.

Contact Form 7 passer le texte en blanc

Ajuste la hauteur du pavé du message

Cela ne s’applique que pour les formulaires sans l’extension Material Design qui le réalise automatiquement.

Je trouvais le champ de saisie du message trop massif.

votre message : hauteur classique

Le résultat pour deux lignes en hauteur :

votre message : hauteur 2 lignes

Pour réduire sa hauteur, j’ai ajouté X2 pour n’afficher que deux lignes en hauteur dans [textarea your-message x2]. Tu peux tester différentes hauteurs.

code hauteur champ de saisi texte

Configure l’e-mail et les messages d’erreurs

Les réglages se situent dans le menu interne de la page.

menu email

Onglet e-mail

Tu définis le message que tu recevras lorsqu’un visiteur utilisera ton formulaire de contact.

Tu complètes ton adresse e-mail de réception des messages dans Pour.

destinataire

Tu peux ajouter un e-mail en copie cachée en ajoutant “cc: emailencopie@cmonsite.com” dans En-têtes additionnelles.

copie cachée du message

Je te recommande d’indiquer dans l’objet de l’e-mail la provenance du message avant “[your-subject]” par exemple : Formulaire page d’accueil.

L’objet complété dans le formulaire représenté par “[your-subject]” est utile pour visualiser immédiatement les messages prioritaires et supprimer les éventuels spams sans ouvrir le message.

objet de l'e-mail

Tu peux supprimer dans le corps du message : “– Cet e-mail a été envoyé […]” qui n’apporte rien.

corps du message

Il n’est pas nécessaire de toucher aux autres champs.

Onglet messages

Il s’agit des messages qui apparaissent dans le formulaire.

Le premier indique que l’envoi s’est déroulé correctement.

message d'un envoi réussi

Les suivants sont des messages d’erreurs.

message d'erreur champ obligatoire

Les messages sont correctement traduits et formels.

Ils doivent refléter le ton utilisé sur ton site. J’ai modifié le premier en “Ton message est expédié. Je te remercie de m’écrire. Je te répondrai le plus rapidement possible.”. J’ai appliqué le tutoiement dans les messages comme sur l’ensemble du site.

personnaliser les messages d'erreurs

Teste et intègre ton formulaire

Il est intéressant de tester tranquillement ton formulaire pour vérifier que tout fonctionne avant de le mettre en ligne.

Crée une page de test

Tu copies le code généré par Contact Form 7 présent sous le titre. Il apparait dès que tu enregistres ton formulaire.

short code formulaire Contact Form 7

Tu crées une nouvelle page : Pages > Ajouter que tu supprimeras par la suite.

ajouter une page

Je te recommande d’ajouter Test ou A supprimer au nom pour bien l’identifier.

page de test

Tu colles le code dans un paragraphe. WordPress va automatiquement reconnaître le type d’informations et transformer le bloc en Code court (Shortcode).

ajout du short code du formulaire dans une page WordPress

Tu enregistres le brouillon puis cliques sur Prévisualiser.

prévisualiser le formulaire

Tu vérifies l’aspect visuel (sur ordinateur et sur mobile en réduisant la largeur de ta fenêtre) ainsi que les éléments suivants :

  • le message d’erreur avec un champ obligatoire vide
  • le message si la réponse au quiz contre les spams est incorrect
  • la bonne réception de l’e-mail
  • l’e-mail reçu contient tous les champs du formulaire

Quand tu réalises une modification, tu enregistres ton formulaire et recharges ta page.

recharger une page

Une fois que ton test est validé, tu peux copier ton code où tu le souhaites dans tes pages et articles.

Je n’ai pas remarqué de conflit entre Material Design et Elementor. Un lecteur m’a remonté qu’une de ses animations à disparu.

Il l’a résolu en supprimant l’animation. Tu vérifies ta page après publication.

Intègre ton formulaire dans le pied de page ou la barre latérale

formulaire en barre latérale

Menu de gauche : Apparence > Widget

menu widgets

Tu sélectionnes Texte et l’endroit où tu souhaites intégrer ton formulaire.

ajouter un widget texte

Tu donnes, si tu le souhaites, un nom qui apparaîtra en titre au-dessus du formulaire et colles le code de Contact Form 7.

intègre un formulaire dans la barre latérale

Sauvegarde tes messages

Contact Form 7 n’enregistre pas les messages qui te sont adressés. Si tu souhaites une sauvegarde, tu installes et actives l’extension Flamingo.

Flamingo extension WordPress de sauvegarde des messages de Contact Form 7

Tu disposes d’un nouvel élément dans ton menu.

flamingo messages entrants

Dans messages entrants, tu retrouves la liste des messages réceptionnés.

messages sauvegardés

Que tu peux retrouver en intégralité en cliquant dessus.

détails du message

Tu peux déclarer un expéditeur comme spammeur.

déclarer le message en spam

Tu retrouveras d’autres moyens efficaces contre le spam dans le prochain chapitre.

Le carnet d’adresses collecte toutes les adresses e-mail.

menu carnet adresses flamingo

Il regroupe les messages par contact.

carnet d'adresses flamingo

Protège-toi contre le spam (4 outils)

Comme beaucoup de sites, j’ai reçu des quantités incroyables de spam par le formulaire. Voici ce que je recevais en deux heures.

spam reçus par le formulaire en deux heures

Quiz

quiz antispam standard

Le plus simple et le moins gênant pour l’utilisateur est l’ajout d’une question simple que les robots ne pourront pas résoudre. Je l’ai intégré dans mon exemple.

Le code à ajouter :

[quiz quiz-1234 "Question anti-spam : Que font 7+2 ?|9" "Question anti-spam : Que font 4+2 ?|6" "Question anti-spam : Que font 3+5 ?|8"]

Si tu souhaites avoir un meilleur rendu, tu peux utiliser le code que je présente.

Akismet

Dans l’article Spam Filtering with Akismet, l’équipe de Contact Form 7 propose d’ajouter les codes suivants aux champs pour utiliser l’anti-spam intégré :

  • URL : [text your-url akismet:author_url]
  • Auteur : [text* your-name akismet:author] (déjà réalisé dans la version communiquée dans cet article)
  • E-mail : [email* your-email akismet:author_email] (déjà réalisé dans la version communiquée dans cet article)

Honeypot

Contact Form 7 Honeypot installe une question invisible pour les utilisateurs mais que les robots peuvent compléter ce qui déclenche la mise en spam.

Tu la retrouves dans le répertoire des extensions WordPress.

contact form 7 honeypot

Elle ne demande aucun réglage

Captcha

Je ne suis pas un fan des captchas pour l’expérience utilisateurs. Le quiz est normalement suffisant pour filtrer les messages indésirables.

Cependant, Google a amélioré le système. Il donne une note de probabilité de spam et déclenche le capcha en fonction.

Installe l’extension dédiée aux Captchas de Contact Form 7

Tu installes et actives l’extension Really Simple CAPTCHA.

really simple captcha extension de lutte contre le spam dans les formulaires

Enregistre ton site sur Google

Tu te connectes sur une de tes adresses Gmail. Tu te rends sur la page Google reCaptcha.

  • Tu nommes le Captcha (par exemple Page d’accueil Mon Site),
  • choisis reCAPTCHA version 3,
  • complètes le nom de domaine de ton site sans https://www.,
  • acceptes les conditions
  • et valides.
paramètres de Google recaptcha

Tu obtiens tes clés d’activation.

clés captcha google

Dans WordPress, tu cliques sur Configuration de l’intégration dans Contact > Intégration.

intégration captcha dans WordPress

Tu colles les deux clés.

coller les clés captcha de google dans wordpress

Aucune autre action n’est nécessaire.

Le capcha ne s’affiche que si le visiteur possède un profil suspect. Tu vois cependant qu’il est actif avec ce logo qui apparaît en bas à droite.

logo recaptcha

Adresse une réponse automatique (autorépondeur)

Tu peux adresser un message automatiquement dès qu’un visiteur valide le formulaire.

Le plus naturel est d’indiquer que la demande de l’internaute est prise en compte et qu’une réponse lui sera adressée sous un certain délai.

Tu peux également adresser un code de réduction, renvoyer vers la page dédiées aux FAQ, diriger vers la nouvelle collection…

Tu actives l’e-mail (2) et complètes les champs.

email de réponse destinataire, expéditeur et objet

Il est possible de reprendre des champs complétés par l’internaute pour personnaliser le message.

personnalisation de l'email de réponse

Nous pourrions par exemple avoir :

Bonjour [Prenom],

Nous avons reçu votre demande concernant [your-subject]. Nous essayons de répondre le plus rapidement possible sous maximum 2 jours travaillés.

Cordialement,
M. Pink
contact@reservoir.fr

Les champs de personnalisation disponibles sont visibles en haut de page.

champs personnalisation disponibles

Pour éviter que ton texte ne perde son sens, mieux vaut n’utiliser que des champs obligatoires.

Personnalise les couleurs et polices de ton formulaire

Je monte le niveau d’un cran en te détaillant les CSS que tu peux modifier dans ton formulaire. Si tu débutes, honnêtement, tu peux passer cette étape et y revenir plus tard.

Ces codes sont valables uniquement pour les formulaires réalisés avec Material Design for Contact Form 7.

Bouton d’envoi

Si tu veux modifier la couleur du bouton, tu as deux couleurs à renseigner.

Celle quand la case RGPD est décochée,

.mdc-button
{
background-color: #eeeeee!important;
}

et celle quand le formulaire est prêt à être envoyé.

.mdc-button--raised:not(:disabled)
{
color:#ff33f0!important;
background-color: #ff9f33!important
}

Pour modifier l’apparence du texte du bouton :

.mdc-button
{
color:#55ff33!important;
font-family:impact, sans-serif!important;
font-style:italic;
font-size:1em!important
}

Couleurs des fonds

Tu peux modifier la couleur générale d’arrière-plan du formulaire :

.cf7md-form
{
  background: #E04B4D;
}

et celles des champs :

.mdc-text-field__input
{
  background-color: #fcff33!important;
}

Polices

Voici les instructions pour modifier la police et la taille de tous les éléments du formulaire.

cf7md-form,
.mdc-text-field__input,
.cf7md-item,
#cf7md-form input,
#cf7md-form label,
#cf7md-form textarea,
#cf7md-form p,
#cf7md-form h1,
#cf7md-form h2,
#cf7md-form h3,
#cf7md-form h4,
#cf7md-form h5,
#cf7md-form h6
{
color:#55ff33!important;
font-family:impact, sans-serif!important;
font-size:1em!important;
padding-bottom:0.3em;
padding-top:0.3em
}

Fond et bordure de la case à cocher

Je n’ai pas réussi à différencier quand la case est ou non cochée.

.mdc-checkbox__background
{
background-color: #ff9f33!important;
border-color:#eeeeee!important
}

Connecte Mailchimp

Tu installes l’extension Contact Form 7 For Mailchimp.

extension contact form 7 for mailchimp

Tu disposes désormais d’un nouvel onglet dans tes formulaires. Pour ceux que tu souhaites connecter à Mailchimp, tu complètes ta clé API et la connectes.

connecter Mailchimp à Contact form 7 avec l'api

Pour trouver ta clé API Mailchimp, tu te rends sur Profile dans les paramètres de ton compte Mailchimp.

profile

Extras > API keys

Mailchimp menu clé api

Tu reprends ton code. Si tu n’as pas crée de clé, tu commences par le bouton Create a key.

clé api

Quand ton compte est connecté avec l’extension, tu choisis ta liste.

choix liste

Tu détermines le champ que tu as utilisé pour la collecte d’emails

champ email

et éventuellement le nom du souscripteur.

champ souscripteur

Tu enregistres pour finaliser.

Conclusion

Le filtrage des spams issus du formulaire de contact représente un gain de temps considérable. J’ai reçu jusqu’à 11 e-mails indésirables en deux heures.

J’ai cherché comment obtenir le formulaire le plus attractif possible avec les solutions gratuites.


Découvre comment ajouter gratuitement un formulaire de contact esthétique sur ton site WordPress.
Click To Tweet


Le plus compliqué a été de limiter la partie technique au maximum pour que le tutoriel soit accessible au plus grand nombre.

Contact Form 7 est une extension fiable et mise à jour régulièrement. Cela t’assure de ne pas devoir tout refaire demain.

signature de Jean du site pour pas un rond

Les articles susceptibles de t’intéresser :

Retrouve tous les articles pour Créer seul ton site

portrait jean pourpasunrond

Jean

Fondateur, auteur et homme à tout faire


J’ai créé pour pas un rond pour que tu puisses réaliser seul ton site et le faire grandir avec des tutoriels pas à pas.

bannière de la newsletter de pour pas un rond version bleu-vert

Cet article Contact form 7 : Crée gratuitement un beau formulaire de contact [Tutoriel] de Jean est apparu en premier sur pour pas un rond.

]]>
https://www.pourpasunrond.fr/creer-un-formulaire-de-contact/feed/ 2
Sécurité WordPress : 4 extensions pour protéger ton site [Tuto] https://www.pourpasunrond.fr/assurer-securite-de-site/ https://www.pourpasunrond.fr/assurer-securite-de-site/#comments Fri, 25 Oct 2019 09:45:48 +0000 https://www.pourpasunrond.fr/?p=973 pour pas un rond
Sécurité WordPress : 4 extensions pour protéger ton site [Tuto]

Le plus important pour un site : sa sécurité. 4 extensions gratuites et fiables te facilitent la vie : protection, virus, perte de données.

Cet article Sécurité WordPress : 4 extensions pour protéger ton site [Tuto] de Jean est apparu en premier sur pour pas un rond.

]]>
pour pas un rond
Sécurité WordPress : 4 extensions pour protéger ton site [Tuto]

A Assurer la sécurité de ton site WordPress est une priorité.

Tu ne peux pas prendre le risque qu’un pirate prenne le contrôle de ton site pour diriger tes visiteurs vers des sites frauduleux.

Heureusement sur WordPress, des extensions s’occupent de tout pour toi. Cela ne prend que quelques minutes pour les paramétrer à l’aide de ce tutoriel détaillé.

Les plugins que je te présente sont gratuits. Ne perd plus une minute et protège ton site WordPress.

picto articles débutants
Débutant

Cet article prend environ 8 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

visuel Pinterest de l'article sur la sécurité de WordPress

Tu vas retrouver 3 extensions simples à mettre en œuvre et accessibles à tous. Cloudflare s’adresse aux utilisateurs avancés et n’est pas obligatoire quand tu débutes car les risques d’une attaque contre ton site sont limités.

La première extension va te permettre de disposer d’une alerte en cas de piratage.

Antivirus pour réagir immédiatement

Nous allons tout faire pour que cela n’arrive pas. Cependant, il est utile de se préparer à l’éventualité que ton site soit infecté.

Cela peut arriver par une faille d’un plugin que tu ne peux pas prévoir. Tu restaureras dans ce cas une version saine de ton site.

Tu installes Antivirus depuis le répertoire de WordPress.

extension wordpress antivirus

Réglages > Antivirus

Tu débutes par le scan de ton thème.

scan antivirus du thème

Toutes les sous-parties s’affichent en orange puis passent en vert au fur et à mesure de la vérification.

résultat du scan

Tu coches Check the theme templates for malware.

malware scans

Tu peux également recevoir les alertes de Google en cochant Malware detection by Google Safe Browsing et en complétant ton e-mail.

alertes antivirus

Tu recevras dans ce cas un e-mail toutes les semaines environ avec le lien vers la page de diagnostic de ton site.

Tu peux effectuer ce test directement sur l’outil de vérification de Google. Tu complètes l’url de ta page d’accueil

vérification site

et consultes le résultat.

résultat test

Tu vas découvrir un outil incroyable pour optimiser la sécurité de WordPress.

Secupress protège ton site du piratage

Il existe d’autres excellentes extensions qui réalisent plus ou moins les mêmes opérations. J’ai choisis SécuPress car le travail effectué est remarquable.

L’extension, en français, couvre tous les principaux thèmes liés à la sécurité de WordPress et sa version gratuite est, je trouve, particulièrement généreuse et évite de multiplier les extensions.

Les explications sont claires et l’interface efficace.

Du fait du large éventail couvert, le paramétrage est un peu long mais sans aucune difficulté.

Tu actives Secupress.

installer secupress

Secupress > Scanners

menu secupress

Tu vas commencer par auditer la sécurité de ton site.

scanner site

Secupress donne une note de sécurité à ton site. Ne t’inquiète pas. C’est juste pour t’informer des actions qu’il va effectuer pour toi.

score secupress avant optimisation

Tu vas passer sur la partie Modules : Secupress > Modules

Nous allons passer en revue les modules gratuits disponibles et leurs réglages. Je passe volontairement les paramètres de la version payante (en orange).

Tu navigues à l’aide du menu à gauche.

menu des modules SecuPress

Utilisateurs & Login

Tu indiques la nouvelle adresse de ta page de connexion à l’administration. Une url du style “hudiushdkj63” sera impossible à trouver au hasard.

Tu notes soigneusement cette adresse. Dés ta prochaine connexion, tu accéderas à ton administration par monsite.com/hudiushdkj63.

déplacer la page de connexion à l'administration de WordPress

Tu limites les tentatives de connexion pour te prémunir contre des robots qui essaient toutes les combinaisons.

bloqueur tentatives frauduleuses

J’ai été plus conservateur que les recommandations concernant les limites :

  • Combien de tentatives avant de bannir ? : 3 ( le minimum )
  • Combien de temps de bannissement ? : 60 minutes ( le maximum )
limitation des tentatives de connexion

Tu caches les erreurs de connexion.

erreurs de connexions

Tu peux ajouter une protection supplémentaire avec un captcha efficace contre les robots.

Si tu utilises Dashlane ou un autre gestionnaire de mots de passe, ne coches pas cette option.
Je me suis retrouvé banni de mon propre site !!!

captcha

Tu demandes l’ancien mot de passe quand un utilisateur veut le changer.

changement mot passe

Je n’ai pas encore d’utilisateurs que je souhaite bannir. Mais bon, c’est possible. Tu les gères dans la section Journaux et IP.

Tu bloques l’énumération des utilisateurs et des auteurs.

stopper énumération utilisateurs

Tu enregistres et passes à la section suivante.

Plugins & Thèmes

Tu vas bloquer les modifications sur ton thème et l’installation d’extensions. Tu devras désactiver ces options quand tu souhaiteras changer de thème ou installer de nouvelles fonctionnalités.

Tu interdis le chargement des thèmes directement sous format .zip.

interdiction zip

Tu bloques l’installation de nouveaux plugins.

bloquer installation plugins

Tu empêches l’installation de nouvelles extensions.

Cœur de WordPress

nouveaux thèmes

Tu forces les mises à jour mineures. Elles concernent uniquement le renforcement de la sécurité et présentent peu de risques.

Je suis plus mesuré pour les mises à jour des versions majeures.

Si tu as de nombreuses extensions, la probabilité d’une incompatibilité est non négligeable. Beaucoup suggèrent de laisser 2-3 semaines aux créateurs d’extensions pour finaliser les ajustements.

mises à jour wordpress

L’éditeur est idéal pour modifier simplement les fichiers CSS et PHP de ton thème enfant. Tu ne le désactives que si ton site est finalisé.

Tu filtres les uploads.

configuration wordpress

Données sensibles

Tu limites les multiples tentatives d’authentification du XML-RPC.

XML-RPC

Tu ajoutes un trou noir.

trou noir

Tu masques les informations qui pourraient aider les hackers et coches les 6 prochaines options :

  • affichage des fichiers dans les dossiers
  • divulgation des modules PHP
  • affichage de la version de PHP
  • affichage de la version de WordPress
  • accès aux fichiers mauvaises url
  • fichiers readme
masquer options sensibles wordpress

Parefeu

Tu bloques les mauvaises en-têtes :

  • les mauvais user-agents
  • les mauvaises méthodes de requêtes
  • les faux bots SEO
mauvaises requêtes

et les mauvaises URLs

  • mauvais contenus des URLs
  • scanners d’injections SQL
  • 404 sur les fichiers .php

Mauvaises URLs

mauvaises urls

Tu peux désactiver les commentaires de ton site ou lutter contre les spams dans les commentaires. Je préconise de les envoyer directement à la corbeille.

Antispam

anti spam

Tu supprimes les codes courts, utilises une black list étendue et désactives les Pingbacks et Trackbacks.

autres réglages antispam

Journaux et IP

Tu peux bloquer des IPs et conserver l’activité de ton site. Je n’en ai pas vu l’intérêt pour l’instant.

Tu testes à nouveau ton site et obtiens la note la plus haute (B) sans acheter la version Pro. C’est largement suffisant pour l’instant.

La version pro offre des fonctionnalités plus poussées mais permet surtout de cumuler la recherche de virus et la sauvegarde dans une même extension.

Passons à un autre point capital : la sauvegarde de ton site.

UpdraftPlus sauvegarde ton site

Tu installes l’extension UpdraftPlus WordPress Backup Plugin.

extension updraft plus

Réglages > Sauvegardes UpdraftPlus

réglages updraft

Tu cliques sur l’onglet Réglages.

Tu indiques la fréquence des sauvegardes automatiques.

fréquence sauvegardes

Je préconise une sauvegarde par rythme de publication avec 1 mois d’archives ou une dizaine de sauvegardes en quotidien.

Tu peux envoyer une copie de la sauvegarde vers des espaces de partage comme Google Drive ou Dropbox.

Cela devient indispensable quand ton site prend du poids car il est plus rapide de réaliser un export à partir de ces service que de WordPress.

Tu vérifies qu’Extensions, thèmes, et téléversements soient sélectionnés

inclure dans la sauvegarde

ainsi que Tout autre répertoire trouvé dans WP-content.

wp-content

Tu ne touches pas aux exclusions.

Tu peux cocher Courriel pour recevoir un avis de sauvegarde. C’est utile en cas de problème.

email

Tu enregistres.

Sauvegarde ponctuellement

Quand tu réalises une modification importante, c’est une bonne pratique de réaliser une sauvegarde manuelle.

Onglet Sauvegarder/restaurer

Tu cliques sur Sauvegarder

sauvegarde manuelle

et recommences.

confirmation sauvegarde

Tu obtiens ce message.

sauvegarde terminée

Restaure une version précédente

Onglet Sauvegarder/restaurer

Tu retrouves tes sauvegardes en bas et cliques sur restaurer.

restaurer

Tu sélectionnes tous les éléments

puis confirmes avec restaurer.

éléments à restaurer

Tu ne fermes pas la page avant la fin de la procédure.

process de restauration
restauration complète

Si tu débutes, tu passes directement aux bonnes pratiques. La configuration de Cloudflare est plus délicate.

Cloudflare prévient et bloque les attaques DDoS

Tu retrouves toute la démarche pour installer Cloudflare dans cet article sur l’optimisation de la vitesse de ton site. Cet outil possède de nombreuses autres fonctionnalités intéressantes.

Je vais te présenter celles concernant la sécurité.

Tu retrouveras le volume des menaces bloquées dans Analytics > Security

menaces

et le détail dans Firewall.

types menaces

Tu ajoutes dans les réglages (settings) du Firewall la protection contre les robots non identifiés.

bloquage robots non identifiés

Dans l’onglet Scrape Shield, tu masques les adresses e-mails aux robots (Email Address Obfuscation) et empêche d’utiliser ton serveur pour afficher des images sur d’autres sites (Hotlink Protection).

hot-link

Les hot-links peuvent entrainer une surcharge du serveur.

Dans l’onglet Overview, tu peux déclarer être attaqué. Les visiteurs devront résoudre un captcha pour accéder au site.

mode attaque

Tu retrouves cette fonctionnalité dans l’extension WordPress directement sur la page d’accueil.

wordpress under attack

Pour conclure, tu trouveras de bonnes pratiques pour assurer la sécurité de WordPress.

5 actions supplémentaires pour protéger WordPress

Garde ton WordPress à jour

Tu mets systématiquement à jour ton thème et tes extensions dès la sortie d’une nouvelle version. Tu procèdes de même avec les mises à jour intermédiaires de WordPress qui concernent la sécurité.

Le seul moment où tu peux attendre quelques jours ce sont pour les changements de version de WordPress qui occasionnent certaines fois des problèmes avec les extensions.

Rédige depuis un compte éditeur

Pour protéger au maximum son compte administrateur, il est préférable d’écrire ses publications sur un profil éditeur. Voici la procédure à suivre.

Utilise les connexions chiffrées

Le https n’est pas seulement indispensable pour les e-commercants. Il évite que les pirates accède à ton site.

Supprime les thèmes et plugins désactivés

Cela ne sert à rien de conserver des thèmes ou des extensions que tu n’utilises plus. Un thème inactif peut servir de porte d’entrée sur ton site.

Choisis avec soin ton nom d’utilisateur et ton mot de passe

Ton mot de passe, en particulier, ne doit pas être logique mais être complètement aléatoire pour diminuer les risques d’être découvert.

Conclusion

Tu as réalisé les principales recommandations pour protéger ton site :

  • ton compte administrateur WordPress est caché au fin fond de l’antarctique
  • les dernières versions brillent de milles feux
  • ton site est amoureusement sauvegardé

et bien d’autres.

La sécurité totale n’existe pas mais tu as réalisé du bon travail pour prévenir les ennuis.


Découvre 4 extensions indispensables pour sécuriser WordPress
Click To Tweet


Dernier point qui n’est pas directement lié à WordPress : un bon antivirus à jour (Avast en version gratuite par exemple) pour protéger ton ordinateur t’évitera les surprises surtout s’il est complété par Malwarebytes (je réalise au moins une analyse par mois avec la version gratuite).

signature de Jean du site pour pas un rond
portrait jean pourpasunrond

Jean

Fondateur, auteur et homme à tout faire


J’ai créé pour pas un rond pour que tu puisses réaliser seul ton site et le faire grandir avec des tutoriels pas à pas.

Les articles qui peuvent t’intéresser

Retrouve tous les articles pour Créer seul ton site

bannière newsletter

Cet article Sécurité WordPress : 4 extensions pour protéger ton site [Tuto] de Jean est apparu en premier sur pour pas un rond.

]]>
https://www.pourpasunrond.fr/assurer-securite-de-site/feed/ 12
INPI : dépose et protège ta marque https://www.pourpasunrond.fr/depot-marque-inpi/ https://www.pourpasunrond.fr/depot-marque-inpi/#respond Sun, 20 Oct 2019 14:42:01 +0000 https://www.pourpasunrond.fr/?p=13122 pour pas un rond
INPI : dépose et protège ta marque

L'enregistrement de ta marque à l'INPI protège ton entreprise des contrefacteurs. Je te montre toutes les étapes pas à pas dans ce tutoriel.

Cet article INPI : dépose et protège ta marque de Jean est apparu en premier sur pour pas un rond.

]]>
pour pas un rond
INPI : dépose et protège ta marque

D Déposer ta marque n’est aucunement une obligation légale.

Cependant, si tu crées ton entreprise, protéger ta marque est fortement recommandé.

Tu vas découvrir la procédure concrète pour réaliser ton dépôt de marque auprès de l’INPI et toutes les étapes de préparation en amont.

picto articles débutants
Débutant

Cet article prend environ 7 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

visuel pinterest dépôt marque inpi

Cet article relate ma démarche et a pour seul but de t’aider. Ce n’est en aucun cas un conseil juridique.

Débutons par les aspects concrets.

Quel est le coût et le délais d’un dépôt ?

La facture quand tu t’enregistres ta marque à l’INPI s’élève à 210 € (HT = TTC car pas de TVA) pour trois thématiques (classes) sur une durée de 10 ans. Chaque classe supplémentaire est facturée 42 €.

tarif

Nous reviendrons sur la notion fondamentale de classes un peu plus tard.

L’investissement en temps par grande étape :

  1. Recherche d’antériorité : 50 min
  2. Définition des classes : 15 min
  3. Formulaire administratif : 30 min

Je débute par quelques notions autour de la marque.

Tu peux passer directement à la vérification de la disponibilité. Je te recommande toutefois de valider les critères pour que ta marque soit recevable.

3 questions pratiques autour de la marque

Pourquoi déposer ta marque ?

Le but est de pouvoir intervenir juridiquement si un concurrent utilise ton nom. Cela fonctionne également si une marque présente des similitudes flagrantes.

Cela serait trop simple de commercialiser tranquillement des polos Lucuste avec un magnifique alligator.

Le dépôt prouve, sans aucune contestation possible, que tu disposes de l’antériorité. Tu es le seul qui puisse légitimement utiliser ta marque.

Qu’est-ce qu’une marque ?

Tu peux déposer du texte, un visuel ou l’association des deux.

3 types de marques illustrées

Si tu déposes un visuel complet et que tu changes une couleur de ton logo, la protection ne sera plus valide. Le plus simple est de déposer uniquement ton nom.

De plus, il est simple de réaliser une recherche sur un nom mais plus compliqué sur un visuel.

La protection de marque se différencie d’un brevet qui protège les innovations et le droit d’auteur qui défend les créations artistiques.

Marque et nom de domaine

Murielle-Isabelle CAHEN explique que déposer ta marque n’empêche pas son utilisation en nom de domaine sur un secteur différent de ton activité. (Cf l’article avec l’exemple d’arrêt de la cours de cassation).

À l’inverse, un nom de domaine exploité peut intérioriser une marque. Il n’est pas cependant pas recevable en France pour s’opposer à l’enregistrement d’une marque. (cf l’article Ne négligez pas vos noms de domaine ! de Nicolas Demilly).

Toutes les marques ne peuvent pas être enregistrées.

Les 4 critères pour pouvoir déposer une marque

Pour être recevable, une marque doit respecter les caractéristiques suivantes :

  • Unique
    • Cette marque n’est pas déposée et il n’existe pas de marque similaire
    • Un nom de domaine basé sur ta marque n’est pas enregistré sur ton secteur d’activité
  • Distincte : tu ne peux pas décrire ton produit ou service avec des termes génériques comme Les Roses Rouges pour un fleuriste.
  • Honnête : tu ne peux pas induire le consommateur en erreur en commercialisant une huile d’olive Italienne sous le nom Les Provencales par exemple.
  • Licite : tu respectes les lois et les bonnes mœurs

L’INPI précise également que tu ne peux pas déposer un terme élogieux comme Extraordinaire tout seul.

Vérifie la disponibilité de ta marque (recherche d’antériorité)

Tu commences par lister toutes les variations possibles de ta marque :

  • synonymes
  • traduction littérale
  • orthographe
  • phonétique

J’avais ainsi la liste suivante :

  • pour pas un rond
  • pourpasunrond
  • pour pas 1 rond
  • pas un rond
  • pas 1 rond

Mon cas est simple car une expression ne peut pas s’orthographier de multiples façons.

Tu rentres tous les termes de ta liste dans la base des marques de l’INPI.

inpi recherche nom marque

L’idéal est de ne rien trouver.

résultat recherche inpi

Si tu obtiens les marques existantes, tu peux quand même utiliser cette marque si elle n’est pas enregistrée sur ton activité.

marques antérieures

Même si une marque connue n’est pas enregistrée, la notoriété suffit à justifier d’un droit d’antériorité.

Pour la vérification au niveau des domaines, je te renvoie à la section test de l’article consacré au nom de domaine.

Détermine tes classes

Tu disposes de trois classes dans le tarif de base. Chaque classe supplémentaire te sera facturée 42 €.

Les 45 classes représentent une classification par typologie de produits et services.

Tu retrouves la liste complète des classes sur le site de l’INPI

liste des classes inpi

avec le descriptif correspondant.

détail classe

C’est un bel inventaire où tu retrouves tes différentes activités réparties dans plusieurs classes.

Autant te dire que Community manager sur Instagram n’existe pas.

Tu peux regarder ce que tes confrères ont enregistré pour vérifier si ton intuition est juste. Nous sommes d’accord que cela reste entre nous.

Tu ne peux pas réaliser un ajout de classe après le dépôt sans refaire toute la procédure.

Dépose ta marque

Qui peut déposer une marque ?

Une marque peut être déposée par une personne ou une entreprise. Dans ce deuxième cas, quand tu vends ton entreprise, la marque est automatiquement transférée.

Un intermédiaire (mandataire) est obligatoire si la marque est déposée au nom de plusieurs personnes.

La procédure d’enregistrement de ta marque

Les démarches se déroulent uniquement en ligne sur le service dédié de l’INPI.

Tu commences par créer un compte.

créer compte inpi

Les traditionnelles informations à fournir.

accès
informations

Si tu veux déposer au nom de ton entreprise, tu valides Je suis un compte administrateur.

compte administrateur

Cela dévoile une nouvelle série de champs à compléter.

dépôt nom société

Tu valides ton compte à l’aide du lien dans l’e-mail et accèdes à l’interface.

Tu sélectionnes Déposer, gérer, enregistrer sa marque française.

menu dépôt marque

Tu cliques sur le crayon dans le menu.

dépôt marque

Tu valides pour accéder au dépôt.

accéder au dépôt

Tu demandes l’enregistrement d’une marque française.

type de demande

Tu commences par modifier les coordonnées du Signataire.

intervenants

Tu choisis si tu déposes en ton nom (Déposant) ou pour le compte de ton entreprise (Représentant légal).

signataire

Tu recommences avec les deux autres champs obligatoires.

déposant et destinataire

Dans déposant, tu indiques pour qui tu réalises le dépôt. Tu sélectionnes Personne morale pour agir au nom de ta société.

Tu peux également préciser que ton entreprise est en cours de création.

déposant

Le destinataire est celui qui recevra le courrier.

destinataire

Tu passes ensuite à l’étape suivante.

3 étapes remplies

Tu sélectionnes le type de marque que tu enregistres. Le plus souvent :

  • Marque verbale pour du texte seul (mon choix)
  • Marque figurative pour un logo
  • Marque semi-figurative pour ta marque accompagnée de ton logo
type de marque

Tu indiques ta marque.

marque verbale

Tu sélectionnes les classes de ton activité.

classes

Étant donné que tu payes en fonction des classes sélectionnées et non en fonction des éléments à l’intérieur, je ne me suis pas posé de question et ai tout sélectionné.

Si tu as déjà un marque avec le même nom (ou similaire) enregistrée dans d’autres classes, il est judicieux de ne sélectionner que les activités que tu exerces pour éviter les recours.

sélection classe

Les questions suivantes ne devraient pas te concerner.

revendication propriété
renouvellement anticipé
marque certification
extension polynésie

Tu retrouves le récapitulatif que tu confirmes et accèdes ainsi au paiement.

payer

Tu reçois un récapitulatif de ta demande de dépôt.

Les étapes suivantes sont la publication au Bulletin officiel, l’examen de la demande et l’enregistrement. J’enrichirai l’article au fur et à mesure de mon avancement dans le processus.

Après le dépôt

Tout ne s’arrête pas à la réception du certificat.

Tu fais vivre ta marque

Si tu déposes ta marque sans l’utiliser, tu peux subir une demande de déchéance. Cela évite les petits malins qui déposeraient des marques en série sur le modèle de ce qui est réalisé pour les noms de domaine.

Tu surveilles tes contrefacteurs

L’INPI propose un service de surveillance des nouveaux enregistrements. Tu peux également te rendre sur le site chaque mois et effectuer une recherche sur ton nom de marque. Tu disposes de deux mois pour t’opposer à l’enregistrement d’une marque directement dans ton espace INPI.

Tu peux coupler cela avec une alerte Google sur ton nom de marque. C’est un outil de surveillance facile à mettre en œuvre et qui te permet également de remercier ceux qui te citent.

alerte Google sur le nom de marque

Tu renouvelles ta marque

L’INPI n’adresse pas de rappel.

Tu peux reconduire indéfiniment la protection de ta marque. Tous les 10 ans, 6 mois avant l’échéance, tu renouvelles ta demande sur le site.

Conclusion

Ta marque est protégée et tu peux faire valoir tes droits en France.

Le dépôt de marque à l’INPI est une formalité qui prend peu de temps. C’est un actif capital pour ton entreprise qui mérite d’y investir un montant raisonnable au vu des enjeux.


Protège ta marque. Retrouve les étapes détaillées du dépôt à l'INPI et du travail de préparation
Click To Tweet


Si ton entreprise est internationale, tu peux étendre la protection :

  • au niveau Européen avec l’EUIPO
  • au niveau mondial avec l’OMPI
signature de Jean du site pour pas un rond
portrait jean pourpasunrond

Jean

Fondateur, auteur et homme à tout faire


J’ai créé pour pas un rond pour que tu puisses réaliser seul ton site et le faire grandir avec des tutoriels pas à pas.

Les articles qui peuvent t’intéresser

Retrouve tous les tutoriels et ressources pour ton entreprise

bannière newsletter

Cet article INPI : dépose et protège ta marque de Jean est apparu en premier sur pour pas un rond.

]]>
https://www.pourpasunrond.fr/depot-marque-inpi/feed/ 0
Crée ton thème enfant sur WordPress https://www.pourpasunrond.fr/creer-un-theme-enfant/ https://www.pourpasunrond.fr/creer-un-theme-enfant/#comments Thu, 10 Oct 2019 15:01:18 +0000 https://www.pourpasunrond.fr/?p=3393 pour pas un rond
Crée ton thème enfant sur WordPress

Un thème enfant est l'étape indispensable avant de personnaliser ton thème sous peine de perdre tout ton travail pendant les mises à jour.

Cet article Crée ton thème enfant sur WordPress de Jean est apparu en premier sur pour pas un rond.

]]>
pour pas un rond
Crée ton thème enfant sur WordPress

S Si tu personnalises ton thème au-delà des fonctionnalités de l’éditeur, tu installes un thème enfant.

L’autre option est de ne jamais mettre à jour ton thème et d’ouvrir tes portes en grand aux pirates.

Cela ne prend que quelques minutes et t’évitera de perdre des heures de travail à la prochaine mise à jour.

Je te présente également des alternatives pour personnaliser ton thème en toute sérénité.

picto articles débutants
Débutant

Cet article prend environ 5 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

visuel Pinterest article WordPress thème enfant

Si tu souhaites comprendre comment fonctionne un thème enfant, je te présente une synthèse rapide. Sinon, tu passes directement à la pratique.

Quelle est l’utilité d’un thème enfant ?

Un thème enfant est une surcouche de code qui modifie l’apparence et les fonctionnalités de ton thème.

rôle thème enfant
Dans les faits, le thème enfant se charge en premier.

C’est une coquille quasiment vide qui n’attend que tes instructions.

Il est composé de deux fichiers l’un pour le style (CSS) et le second pour les fonctionnalités (PHP). Tu peux également avoir un visuel qui illustrera ton thème enfant.

L’inconvénient : Quand tu ne travailles pas directement sur le thème enfant, la personnalisation effectuée dans l’outil du thème n’est pas prise en compte. Certains thèmes présentent des fonctionnalités d’export comme nous le verrons par la suite.

Il existe d’autres solutions qui peuvent remplacer son utilisation.

Une alternative pour les CSS

Tu peux utiliser les CSS additionnels présents dans la majorité des thèmes. Comme ici pour Twenty Seventeen.

Apparence > Personnaliser > CSS additionnel

css additionnel

Attention : A ne pas confondre avec l’éditeur de thème.

Tu peux également installer l’extension SiteOrigin CSS. Elle héberge ton code. Celui-ci n’est pas affecté par les mises à jour.

siteorign css

Elle offre de nombreuses autres fonctionnalités qui simplifient l’ajout de CSS en particulier pour les polices.
Le tutoriel : Modifie ton thème avec SiteOrigin CSS.

Une alternative pour les fonctions

Code Snippets sert de librairie de codes PHP.

Son mode d’emploi par Pascal Cescato : Centralisez vos bouts de code avec “Code Snippets”.

code snippet

Je suis persuadé que cette question t’a traversé l’esprit.

Pourquoi ne pas modifier directement le thème parent ?

Cela fonctionne parfaitement jusqu’à la prochaine mise à jour.

Quand ton thème se met à jour, l’ancien code est remplacé par le nouveau. Tout ton travail de personnalisation a disparu. C’est le drame.

Je te montre maintenant à quoi cela ressemble en pratique.

Les composantes du thème enfant

Les deux exemples suivants sont issus d’un thème enfant de Twenty Seventeen généré automatiquement par WPMarmite. Les explications sont dans le paragraphe suivant.

Le fichier CSS

/*
Theme Name: Twenty Seventeen Enfant par WP Marmite
Description: Theme enfant du theme Twenty Seventeen. Vous pouvez désormais le personnaliser sans risquer de perdre vos modifications
Author: WPMarmite
Author URI: https://wpmarmite.com
Template: twentyseventeen
Version: 1.0
*/

Il comprend le nom du thème, sa description, l’auteur et l’url de l’auteur, le thème d’origine et la version.

Le fichier fonctions

<?php
/* Chargement de la feuille du style du theme parent */
add_action( 'wp_enqueue_scripts', 'wpchild_enqueue_styles' );
function wpchild_enqueue_styles(){
  wp_enqueue_style( 'wpm-http://mysterious-wombat.w5.poopy.life-style', get_template_directory_uri() . '/style.css' );
}

Pour l’instant, il indique uniquement de charger le thème parent après l’enfant.

La grande question : tu l’obtiens comment ton thème ?

Comment récupérer ton thème enfant

Je te présente trois méthodes pour créer ton propre thème enfant par ordre de préférence.

Utilise celui fourni par le créateur de ton thème

De nombreux créateurs de thèmes proposent des thèmes enfants prêts à l’emploi. L’avantage est qu’ils intègrent souvent des fonctionnalités spécifiques qui garantissent le parfait fonctionnement.

Tu installes uniquement les thèmes récupérés directement sur le site de l’éditeur. Tu verras que je fais une exception à la première ligne car Pascal est 100 % digne de confiance.

9 thèmes populaires :

Si tu ne trouves pas ton thème, tu recherches dans ton moteur préféré :

  • thème enfant + ton thème
  • child theme + ton thème

Tu peux également utiliser cet excellent générateur.

Génère ton thème en 2 secondes

WPMarmite a réalisé un excellent travail avec ce générateur de thèmes enfants simplissime à utiliser.

Tu renseignes l’url de ta page d’accueil sans / à la fin.

générateur thème enfant

Il ne te reste plus qu’à le télécharger.

télécharger thème enfant

Le plugin suivant suit la même logique.

Configure ton thème à l’aide d’une extension

Tu installes l’extension Child Theme Configurator.

extension child theme configurator

Outils > Thèmes enfants

menu thèmes enfants

Tu sélectionnes le thème parent dans le menu déroulant et analyse.

child theme configurator analyse

Tu obtiens un message de validité du thème.

message confirmation

Tu sautes à l’étape 9 et génères ton thème.

création thème enfant

En haut de la page, tu as désormais un message qui t’indique que le thème enfant est généré.

thème généré

Ton thème enfant est directement disponible dans les thèmes.

twenty seventeen child

Tu supprimes l’extension et passes directement à l’activation.

Installe ton thème enfant

Apparence > Thèmes

menu thème

Tu ajoutes un thème.

ajouter un thème

Tu télécharges le fichier Zip

téléverser thème
fichier thème enfant

et l’installes.

installer

Active ton thème enfant

Il est recommandé de prévisualiser le résultat avant d’activer pour s’assurer que tout fonctionne parfaitement.

Tu survoles ton thème pour faire apparaître les boutons. Tu cliques sur Prévisualisation en direct pour valider le bon fonctionnement.

prévisualisation

Si le résultat te convient, tu actives.

activer enfant

Tous les thèmes ne présentent pas cette option. Si tu as déjà commencé la personnalisation dans l’éditeur, elle évite de recommencer la configuration.

Migre les personnalisations déjà effectuées dans l’éditeur

Je te montre la procédure pour OceanWP.

Tu actives ton thème parent.

Theme Panel > Importer/exporter

importer exporter personnalisation thème oceanwp

Tu exportes les réglages.

exporter réglages

Tu actives ton thème enfant et importes.

importer réglages

Passons enfin à la mise en oeuvre.

Comment utiliser un thème enfant

Apparence > Editeur de thème

éditeur de thème

Tu sélectionnes ton thème enfant.

sélectionne thème enfant

Tu choisis le fichier à modifier.

selection fichier

Tu colles ton code à la suite après avoir passé une ligne.

ajout css

Tu enregistres.

mettre jour fichier thème

Conclusion

Tu as constaté qu’installer un thème enfant n’est pas compliqué.


WordPress : Découvre 3 méthodes simples pour créer ton thème enfant.
Click To Tweet


Tu as désormais toutes les cartes en main pour personnaliser ton thème.

signature de Jean du site pour pas un rond
portrait jean pourpasunrond

Jean

Fondateur, auteur et homme à tout faire


J’ai créé pour pas un rond pour que tu puisses réaliser seul ton site et le faire grandir avec des tutoriels pas à pas.

Les articles qui peuvent t’intéresser :

Retrouve tous les articles pour Créer seul ton site

bannière pour l'inscription à la newsletter

Cet article Crée ton thème enfant sur WordPress de Jean est apparu en premier sur pour pas un rond.

]]>
https://www.pourpasunrond.fr/creer-un-theme-enfant/feed/ 4