WordPress 5.5 :  obtenez des mises à jour automatiques pour les plugins et les thèmes

WordPress 5.5 : obtenez des mises à jour automatiques pour les plugins et les thèmes

WordPress 5.5 : obtenez des mises à jour automatiques pour les plugins et les thèmes

WordPress 5.5 :  obtenez des mises à jour automatiques pour les plugins et les thèmes 1

La prochaine mise à jour de WordPress 5.5 élargira les possibilités de mise à jour automatique du CMS WordPress aux thèmes ainsi que les extensions.

Actuellement, la mise à jour automatique n’est disponible que pour le noyau du CMS WordPress. Bientôt, lorsqu’une version stable de WordPress 5.5 sera disponible pour tout le monde, les thèmes et les plugins pourront également être configurés pour se mettre à jour automatiquement.

On peut supposer que la fonctionnalité de mise à jour automatique sera étendue aux thèmes et aux plugins afin de prévenir les piratages du site.

Les vulnérabilités de ce type peuvent être facilement corrigées par une mise à jour rapide. Le problème est que de nombreux propriétaires de sites installent des plugins et des thèmes et oublient ensuite de les mettre à jour.

Avec le lancement de la version 5.5, les propriétaires de sites peuvent théoriquement installer des plugins, les oublier et rester en sécurité car les plugins seront mis à jour automatiquement.

Une fonction attendue depuis longtemps est en préparation depuis des mois

Cette fonctionnalité de mise à jour automatique est en préparation depuis 2019, bien qu’elle soit sans doute attendue depuis bien plus longtemps que cela.

En février, l’équipe officielle de WordPress a publié une version beta de WordPress 5.5. Les notes du plugin indiquent que cette fonctionnalité était initialement prévue pour une sortie en 2019. Elle n’a pas été livrée à temps, mais elle n’a pas été oubliée.

La mise à jour automatique des thèmes et des plugins devrait maintenant être disponible avec la prochaine version de WordPress (v5.5).

Sébastien Chaidron

WordPress 5.5 :  obtenez des mises à jour automatiques pour les plugins et les thèmes 2
Depuis des années, je développe avec passion des sites web et je travaille pour vous en tant que développeur WordPress Freelance. Contactez-moi pour plus d’informations à support@easyonweb.be

Comment trouver des polices d’écriture sur d’autres sites web

Contenu de l'article Comment trouver des polices d'écriture sur dautres sites web ? Via l'inspecteur de page Via WhatFont Comment installer WhatFont Comment utiliser WhatFont Conclusion Mon Thème WordPress favoris!* Mon plugin Multilingue préféré ?* Chaque site web a...

Créer un formulaire dynamique sur WordPress

Contenu du tuto Créer un formulaire dynamique sur wordpress Description du plugin 1. Choisir une version (Free ou Premium) 2. Installation du plugin 3. Création votre premier formulaire 4. Ajout de champs dynamiques 5. Création du formulaire calculé 6. Traitement des...

Comment insérer un iframe dans WordPress

Contenu de l'article Intégrer un Iframe dans WordPress Qu'est-ce qu'un Iframe ? Pourquoi ai-je besoin d'un Iframe? Intégrer Google Maps Intégrer une vidéo YouTube  Intégrer un Iframe dans WordPress Depuis des années, je développe avec passion des sites web et je...

Comment aligner verticalement le contenu avec Divi

Contenu de l'article Comment aligner verticalement le contenu avec Divi Résultat 1. Ouvrir les paramètres de la colonne 2. Harmoniser les hauteurs des colonnes 3. Accédez aux paramètres de la colonne ou si situe le contenu à centrer 4. Centrer le contenu verticalement...

Thème Divi pour WordPress – Test et avis

Contenu de l'article Thème Divi pour WordPress – Test et avis Qui est derrière Divi ? Que propose Divi ? Concevez des en-têtes et des pieds de page avec Divi Theme Builder Divi et SEO Téléchargement et prix de Divi Documentation et soutien sur le thème Les...

Wix ou WordPress, qui est le meilleur en 2020?

Wix ou WordPress? À lire absolument avant de choisir!Sébastien Chaidron | Webdesigner & Développeur Web freelance à BruxellesLorsqu'il s'agit de choisir une solution pour votre site web, quel système de gestion de contenu (CMS) vous conviendra le mieux, WordPress...

Comment augmenter le trafic de mon site web

Vous recherchez à améliorer votre référencement naturel ( SEO ) pour mieux positionner votre site sur les moteurs de recherche ? Voici 3 Astuces pour augmenter votre visibilité sur le Web. Le référencement naturel n'est plus aussi facile qu'il y a 10 ans. Aujourd'hui...

Catégories

Comment trouver des polices d’écriture sur d’autres sites web

Comment trouver des polices d’écriture sur d’autres sites web

Comment trouver des polices d’écriture sur d’autres sites web

Chaque site web a son propre design et utilise ses propres polices d’écriture pour donner la touche correspondante en fonction du type de contenu et des goûts du propriétaire. En ce sens, le choix d’une bonne police d’écriture est essentiel pour qu’un site web soit non seulement attrayant, mais aussi facile à lire. Nous sommes sûrs qu’à certaines occasions, nous avons visité une page web et que nous avons aimé le type de police utilisé, mais nous ne savons pas comment l’identifier pour pouvoir l’utiliser plus tard dans nos documents, nos présentations ou même sur notre propre site web. Je vous montre comment identifier la police d’écriture utilisée sur une page web.

Comment trouver des polices d'écriture sur d'autres sites web 3

Vous pouvez ainsi connaître les polices, la taille et les couleurs des polices d’autres sites web :

Via l’inspecteur de page

Comment trouver des polices d'écriture sur d'autres sites web 4

Si vous connaissez un peu le langage HTML, vous pouvez connaître la police utilisée sur un site web grâce à l’outil de développement proposé par la plupart des navigateurs web modernes. Dans le cas de Google Chrome ou de Mozilla Firefox, il suffit d’appuyer sur la touche F12 pour ouvrir l’outil de développement, puis de sélectionner l’outil qui nous permet de sélectionner les éléments du web. Maintenant, il suffit de sélectionner une zone du site web dont le texte est écrit dans la police que nous voulons identifier, puis de regarder la fenêtre d’inspection des éléments pour voir le type de police utilisé. De plus, nous pourrons en connaître la taille et même la couleur.

Comment trouver des polices d'écriture sur d'autres sites web 5

Comment connaître la typographie, la police d’écriture ou la police d’une page web avec WhatFont

Mais si vous n’avez aucune connaissance du HTML, la meilleure chose à faire est d’utiliser WhatFont, une extension développée pour le navigateur Google Chrome qui vous permet d’identifier la police utilisée sur n’importe quel site web en un seul clic. Pour ce faire, la première chose à faire est d’installer WhatFont dans notre navigateur Chrome et une fois cela fait, nous visitons la page où la police que nous aimons apparaît, nous cliquons sur l’icône WhatFont et nous passons le pointeur de la souris sur le texte écrit avec cette police.

connaître la police de caractères d’une toile

Le nom de la police s’affichera, mais si nous cliquons sur le texte, WhatFont nous montrera des informations supplémentaires sur la police, comme son style, sa taille, sa couleur et un aperçu de toutes les lettres de cette police.

Comment télécharger et installer WhatFont pour connaître la police de caractères d’une page web ?

1) la première chose à faire est d’aller sur la boutique en ligne de Google. Je vous laisse le lien direct pour installer WhatFont. Une fois sur place, il vous suffit de cliquer sur l’option Ajouter à Chrome.

Comment trouver des polices d'écriture sur d'autres sites web 6

2)Dans la fenêtre suivante, cliquez sur Ajouter une extension pour l’installer dans Chrome. 

Comment trouver des polices d'écriture sur d'autres sites web 7

3)Prêts ! WhatFont a déjà été installé sur votre navigateur. Vous pourrez l’identifier avec le symbole du F et du ? comme je vous le montre dans l’image suivante.

Comment utiliser WhatFont pour connaître la police de caractères d’une page web ?

Il vous suffit de cliquer sur l’icône WhatFont, puis de cliquer sur la police d’écriture que vous souhaitez connaître. Une fois que vous aurez fait cela, vous verrez une boîte avec toutes les données de cette police comme je vous le montre dans l’image ci-dessous.

 

Comment trouver des polices d'écriture sur d'autres sites web 8

Si vous voulez juste connaître le nom de la police, il vous suffit, comme à l’étape précédente, de cliquer sur l’icône WhatFont et de passer la souris sur la lettre sans cliquer. Vous verrez une petite boîte avec seulement le nom de la police.

Conclusion

  • WhatFont est un outil très simple à utiliser. Il n’y a pas de complications.
  • Vous pouvez savoir quelle police d’écriture se trouve sur une page web mais pas sur une image.
  • Si vous êtes un concepteur de sites web, c’est l’une des extensions qui ne peuvent pas manquer dans votre navigateur.
  • C’est gratuit 😉

Sébastien Chaidron

Comment trouver des polices d'écriture sur d'autres sites web 9
Depuis des années, je développe avec passion des sites web et je travaille pour vous en tant que développeur WordPress Freelance. Contactez-moi pour plus d’informations à support@easyonweb.be

Comment trouver des polices d’écriture sur d’autres sites web

Contenu de l'article Comment trouver des polices d'écriture sur dautres sites web ? Via l'inspecteur de page Via WhatFont Comment installer WhatFont Comment utiliser WhatFont Conclusion Mon Thème WordPress favoris!* Mon plugin Multilingue préféré ?* Chaque site web a...

Créer un formulaire dynamique sur WordPress

Contenu du tuto Créer un formulaire dynamique sur wordpress Description du plugin 1. Choisir une version (Free ou Premium) 2. Installation du plugin 3. Création votre premier formulaire 4. Ajout de champs dynamiques 5. Création du formulaire calculé 6. Traitement des...

Comment insérer un iframe dans WordPress

Contenu de l'article Intégrer un Iframe dans WordPress Qu'est-ce qu'un Iframe ? Pourquoi ai-je besoin d'un Iframe? Intégrer Google Maps Intégrer une vidéo YouTube  Intégrer un Iframe dans WordPress Depuis des années, je développe avec passion des sites web et je...

Comment aligner verticalement le contenu avec Divi

Contenu de l'article Comment aligner verticalement le contenu avec Divi Résultat 1. Ouvrir les paramètres de la colonne 2. Harmoniser les hauteurs des colonnes 3. Accédez aux paramètres de la colonne ou si situe le contenu à centrer 4. Centrer le contenu verticalement...

Thème Divi pour WordPress – Test et avis

Contenu de l'article Thème Divi pour WordPress – Test et avis Qui est derrière Divi ? Que propose Divi ? Concevez des en-têtes et des pieds de page avec Divi Theme Builder Divi et SEO Téléchargement et prix de Divi Documentation et soutien sur le thème Les...

Wix ou WordPress, qui est le meilleur en 2020?

Wix ou WordPress? À lire absolument avant de choisir!Sébastien Chaidron | Webdesigner & Développeur Web freelance à BruxellesLorsqu'il s'agit de choisir une solution pour votre site web, quel système de gestion de contenu (CMS) vous conviendra le mieux, WordPress...

Comment augmenter le trafic de mon site web

Vous recherchez à améliorer votre référencement naturel ( SEO ) pour mieux positionner votre site sur les moteurs de recherche ? Voici 3 Astuces pour augmenter votre visibilité sur le Web. Le référencement naturel n'est plus aussi facile qu'il y a 10 ans. Aujourd'hui...

Catégories

Créer un formulaire dynamique sur WordPress

Créer un formulaire dynamique sur WordPress

Créer un formulaire dynamique sur WordPress

Grâce à Calculated Fields Form vous pouvez créez des devis, des formulaires dynamiques avec calculs intégrés.

Si vous louez des chambres d’hôtes, vous avez besoin d’un formulaire de réservation qui calcul le prix de la location en fonction du nombre de personnes et de la durée. Vous pouvez aussi fournir des services ( comme moi ) et permettre à vos visteurs/prospects d’avoir une offre de prix en direct grâce à un formulaire dynamique.

Dans ce tuto je vous explique comment créé un devis en ligne ou un formulaire de réservation dynamique étape par étape.

Créer un formulaire dynamique sur WordPress 10

Description du plugin

Comme ce plugin dispose d’un ensemble solide de caractéristiques et de fonctionnalités de base, il peut être utilisé à plusieurs fins, notamment

Formulaire de contact : créer un formulaire de contact avancé avec des cases à cocher, des listes radio, des listes déroulantes et des téléchargements de fichiers.

Formulaire de calcul : ajouter une calculatrice générale, un outil de conversion, une calculateur avec date, un formulaire de réservation, un générateur de devis ou un formulaire d’auto-calcul.

Formulaire de paiement PayPal : vendre des biens ou des services avec des totaux et des suppléments calculés automatiquement pour l’achat via PayPal.

Ce plugin de formulaire de champs calculés est un outil polyvalent qui peut être utilisé sur tout site web nécessitant un formulaire avancé, en particulier ceux qui nécessitent la possibilité d’afficher un calcul dans un ou plusieurs des champs.

Étape par étape : Comment créer un formulaire calculé sur votre site WordPress.

1. Choisir sa version: gratuite ou premium ?

La première étape consiste à se procurer le plugin, Il existe une version gratuite et des versions payantes. Ici je ne vais parler que de la version gratuite et la version pro qui coûte 49,99€.

Voici un petit tableau comparatif entre les deux versions. Pour découvrir le tableau officiel n’hésitez pas visiter leur page dédier ici.

La grande différence entre les deux versions est la possibilité d’envoyer des emails, d’accepter les paiements en direct (paypal), l’exportation et surtour les 60 jours d’assistance technique.

2. Installation du plugin

Une fois que vous avez choisit la version dont vous avez besoin vous allez devoir installer celui-ci. Si vous ne l’avez pas encore téléchargé rendez-vous ici pour le télécharger sur votre pc.

Ceci fait rendez-vous sur votre panneau d’administation WordPress

  1. Si une autre version du plugin a été installée, désactivez-la, puis appuyez sur le bouton « Supprimer » correspondant.
  2. Naviguer sur « Ajouter une extension »
  3. Ensuite « Téléverser l’extension »
  4. Selectionnez le fichier sur votre ordinateur
  5. Activer l’extension
Créer un formulaire dynamique sur WordPress 11

3. Création de votre premier formulaire

Depuis l’écran principal du plugin, vous pouvez voir la liste des formulaires qui ont déjà été créés, tout en ayant la possibilité de créer un nouveau formulaire.

Vous pouvez ajouter le shortcode à droite à n’importe quel endroit sur votre site. Vous pouvez également appuyer sur Cloner pour dupliquer le formulaire et modifier les calculs qui s’y trouvent déjà en utilisant le bouton Settings.

Créer un formulaire dynamique sur WordPress 12

Sur ce tuto nous allons concevoir un formulaire de réservation de chambre d’hôtes. Disons que nous avons 2 chambres de 4 personnes à louée, avec une tarification différente pour les enfants et les adultes.

Nous allons créer via l’encadré New Form un nouveau formulaire intitulé : Réservation chambres d’hôtes (le nom importe peu c’est juste pour vous aider à reconnaitre les formulaires)

4. Paramétrage de votre formulaire

Votre formulaire créé cliquez sur le bouton « Settings » à droite de celui-ci.

Créer un formulaire dynamique sur WordPress 13

Supprimez le champ « Number » créé par défault.

Créer un formulaire dynamique sur WordPress 14

Nous allons maintenant demander de au visiteur d’inscrire son nom, prénom, son numéro de téléphone et son email.

 

Commençons par le nom et le prénom:

  1. Cliquez sur « Add a Field »
  2. Ajoutez une « Single Line Text »
  3. Accédez aux paramètres du champ via « Fields Settings »
Créer un formulaire dynamique sur WordPress 15

Editer les champs

  1. Modifiez le « Field Label » par « Entrez votre nom: »
  2. Cochez la case « Required » si vous souhaitez que ce champ soit obligatoire
  3. Dupliquez le champ grâce au bouton prévu à cet effet et modifier le « Field Label » par  « Entrez votre prénom: »
Créer un formulaire dynamique sur WordPress 16

Ajouter un champ email

  1. Cliquez sur « Add a Field »
  2. Ajoutez un champ « Email »
  3. Accédez aux paramètres du champ via « Fields Settings »
Créer un formulaire dynamique sur WordPress 17

Ensuite éditer les champs comme fait précédamment en cochant la case « Required » si vous désirez que le champ soit requis.

Pour ce qui est du téléphone je vais inséré un champ « number » plus simple à utilisé que le champ « Phone field », cependant si vous désirez obligé un format prédéfinit vous pouvez utilisé le champ « Phone field » et dans les paramètres choisir le format désiré. Cependant je déconseille cette méthode, qui ajoute une barrière à l’envoi du formulaire pas forcément nécessaire.

5. Ajout de champs dynamiques

Entrons dans le vif du sujet. Nous allons intégrer les champs calculés au travers du formulaire qui va de façon dynamique modifier les champs en fontion des choix du visiteur.

Dans notre exemple de réservation de chambres d’hôtes nous allons laisser le choix de choisir entre deux chambres. la chambre Confort et la chambre Luxe.

Nous ajoutons un champ « Checkbox » pour laisser le choix au visiteur de selectionner une chambre ou l’autre, ou encore les deux.

Créer un formulaire dynamique sur WordPress 18

Configuration des champs dynamiques

 

  • Remplissez le « Field Label » ici j’indique: « Choisissez la chambre qui vous intéresse: »
  • Dans l’encadré « Choices » je choisis deux possibilités (vous pouvez en ajoutez ou en supprimer grâce au + et -)
  • Ensuite j’introduis une petite instruction pour le visiteur
Créer un formulaire dynamique sur WordPress 19

Notre but est que lorsqu’un visiteur coche une case une nouvelle section s’affiche lui laissant la possibilité de selectionner le nombre de locataire.

Nous allons créer deux listes déroulantes, une pour chaque chambre, de 1 à 4 personnes.

Créer un formulaire dynamique sur WordPress 20

On va remplir le « Field Label » pour la première chambre et configurer la liste déroulante, vous pouvez dès à présent entrer la valeur de la location pour une journée sous l’onglet « Value ».

Ici j’ai choisis 4 possibilités: 1, 2, 3 ou 4 adultes qui valent rescpectivement : 200, 250, 275 et 300€.

Créer un formulaire dynamique sur WordPress 21

Il reste maintenant la deuxième liste déroulante à créer pour la « Chambre Luxe » on peut dupliquer le dernier champ « dropdown » à l’aide du bouton « duplicate » comme ci-dessous.

Créer un formulaire dynamique sur WordPress 22

Il ne vous reste plus qu’a éditer le la liste déroulante pour que les champs correspondent à la seconde chambres ( textes et valeurs).

Comment cacher et afficher certain champ

Le principe est assez simple pour cacher ou afficher certain champ.

Dans mon exemple nous voulons afficher les deux derniers champs ( listes déroulantes ) quand un visiteur coche une chambre. Pour ce faire cliquer sur le champ des case à cocher ( la selection des chambres ) pour afficher la configuration.

  1. Cliquer sur « Show Dependencies » de nouveaux champs apparaissent.
  2. Choisir les les liste déroulantes correspondantes pour chaque chambre.
Créer un formulaire dynamique sur WordPress 23

Et voila et le formulaire est maintenant dynamique et les listes déroulantes ne s’affichent qu’après avoir sélectionné une chambre. 

Création du formulaire calculé

Dans notre exemple de chambres d’hôtes nous allons laisser la possibilité aux visiteurs de choisir le nombre de nuitée grâce à une liste déroulante comme suit : 

Créer un formulaire dynamique sur WordPress 24

Le champ « value » est important pour notre formulaire calculé. Veillez bien à ce que celui-ci corresponde au nombre de nuitée(s): 1 pour une nuit, 2 pour deux nuits etc…

Nous allons maintenant créer un champ « Calculated Field », un champ « Calculated Field » est déjà présent lors de la création du formulaire, on peut très bien le réutilisé.

  1. Remplir le champ « Field Label » ici je vais simplement mettre « Total: »
  2. Assurez-vous que le champ »Read Only » est bien coché, afin que le visiteur ne puisse pas modifier la valeur.
  3. Créer la formule mathématique: dans notre cas nous allons additionner la valeur des listes déroulantes et le multiplier par le nombre de nuitée(s). A noté que vous pouvez retrouvez le nom des champs dans les paramètres de ceux-ci sous l’onglet « Field name ».
Créer un formulaire dynamique sur WordPress 25

Traitement des formulaires / Paramètres des courriels :

Créer un formulaire dynamique sur WordPress 26

Uniquement disponnible avec la version « pro » que vous pouvze vous procurez ici : se procurer le plugin

  • « from » email: Il est fortement recommandé d’utiliser une adresse e-mail du domaine du site web. Les principaux services de courrier électronique (comme Gmail, Hotmail, Yahoo, MSN, etc.) vérifient la correspondance entre l’adresse électronique figurant dans l’en-tête « Sender » des courriers électroniques et les domaines qui envoient les courriers électroniques. Si la correspondance échoue, les e-mails peuvent être considérés comme du spam ou du « phishing », auquel cas ils seront supprimés pour des raisons de sécurité.

    Traduit avec www.DeepL.com/Translator (version gratuite)

  • Destination emails (séparés par des virgules) : Liste des administrateurs qui recevront la notification par courrier électronique. Pour permettre la sélection dynamique des e-mails de destination avec un champ du formulaire, entrez la balise spéciale du champ, par exemple : <%fieldname1%>
  • Email subject: Sujet de l’e-mail de notification envoyé après le paiement.
  • Include additional information?: Informations facultatives sur l’adresse IP et le navigateur de l’utilisateur.
  • Email format? Choisissez si le courriel sera envoyé en texte brut ou au format HTML.
  • Message: Contenu de l’e-mail de notification que vous recevrez. Conservez la balise <%INFO%>, elle sera remplacée automatiquement par les données du formulaire envoyé par l’utilisateur.

Modification des libellés et des textes du formulaire

Créer un formulaire dynamique sur WordPress 27

Les textes champs du formulaire ont été rédigés sous la forme suivante:

  • Submit button label: La légende du bouton d’envoi.
  • Previous button label: La légende du bouton précédent.
  • Next button label: La légende du bouton suivant.
  • Captcha label: Le titre de la section Captcha..
  • Refresh captcha: Le message pour rafraîchir le code Captcha.
  • Security code label: Étiquette recommandant de saisir le code Captcha.
  • Captcha required: Message d’erreur si le Captcha est vide.
  • Captcha error: Message d’erreur si le Captcha se échoue.
  • Payment options: Texte de l’option de paiement
  • Coupon code label: Libellé utilisé dans la section des coupons.
  • Page X of Y: Libellé des pages dans un formulaire multi-pages. Utiliser le format : Page {0} de {0}

Sébastien Chaidron

Créer un formulaire dynamique sur WordPress 28
Depuis des années, je développe avec passion des sites web et je travaille pour vous en tant que développeur WordPress Freelance. Contactez-moi pour plus d’informations à support@easyonweb.be

Comment trouver des polices d’écriture sur d’autres sites web

Contenu de l'article Comment trouver des polices d'écriture sur dautres sites web ? Via l'inspecteur de page Via WhatFont Comment installer WhatFont Comment utiliser WhatFont Conclusion Mon Thème WordPress favoris!* Mon plugin Multilingue préféré ?* Chaque site web a...

Créer un formulaire dynamique sur WordPress

Contenu du tuto Créer un formulaire dynamique sur wordpress Description du plugin 1. Choisir une version (Free ou Premium) 2. Installation du plugin 3. Création votre premier formulaire 4. Ajout de champs dynamiques 5. Création du formulaire calculé 6. Traitement des...

Comment insérer un iframe dans WordPress

Contenu de l'article Intégrer un Iframe dans WordPress Qu'est-ce qu'un Iframe ? Pourquoi ai-je besoin d'un Iframe? Intégrer Google Maps Intégrer une vidéo YouTube  Intégrer un Iframe dans WordPress Depuis des années, je développe avec passion des sites web et je...

Comment aligner verticalement le contenu avec Divi

Contenu de l'article Comment aligner verticalement le contenu avec Divi Résultat 1. Ouvrir les paramètres de la colonne 2. Harmoniser les hauteurs des colonnes 3. Accédez aux paramètres de la colonne ou si situe le contenu à centrer 4. Centrer le contenu verticalement...

Thème Divi pour WordPress – Test et avis

Contenu de l'article Thème Divi pour WordPress – Test et avis Qui est derrière Divi ? Que propose Divi ? Concevez des en-têtes et des pieds de page avec Divi Theme Builder Divi et SEO Téléchargement et prix de Divi Documentation et soutien sur le thème Les...

Wix ou WordPress, qui est le meilleur en 2020?

Wix ou WordPress? À lire absolument avant de choisir!Sébastien Chaidron | Webdesigner & Développeur Web freelance à BruxellesLorsqu'il s'agit de choisir une solution pour votre site web, quel système de gestion de contenu (CMS) vous conviendra le mieux, WordPress...

Comment augmenter le trafic de mon site web

Vous recherchez à améliorer votre référencement naturel ( SEO ) pour mieux positionner votre site sur les moteurs de recherche ? Voici 3 Astuces pour augmenter votre visibilité sur le Web. Le référencement naturel n'est plus aussi facile qu'il y a 10 ans. Aujourd'hui...

Catégories

Comment insérer un iframe dans WordPress

Comment insérer un iframe dans WordPress

Comment insérer un iframe dans WordPress

On me demande souvent comment intégrer une iframe dans WordPress. Dans cet article, vous découvrirez également à quelles fins les Iframes sont nécessaires, quels sont les cas d’utilisation courante et comment vous pouvez afficher les Iframes dans WordPress facilement.

Qu’est-ce qu’un Iframe en fait ?

iFrame est le nom donné à une balise HTML utilisée dans le langage informatique pour intégrer dans une page HTML le contenu d’une autre page HTML. Un iframe est donc un élément HTML utilisé pour l’affichage structuré de contenu web externe. À l’aide d’une iframe, des cartes Google ou des vidéos YouTube peuvent être intégrés dans un site web (WordPress). Les iframes sont prises en charge depuis la spécification HTML 4.0. Tous les navigateurs modernes prennent en charge l’intégration d Iframe

Pourquoi ai-je besoin d’un Iframe dans WordPress ?

Dans WordPress, les iframes sont utilisées pour intégrer des cartes ou des vidéos provenant de plateformes externes.

Intégrer Google Maps dans WordPress

Dans cette section, je vais vous montrer comment intégrer une carte Google Maps en tant qu’iframe dans WordPress.

  • Ouvrez d’abord Google Maps en cliquant ici.
  • Dans la recherche, entrez l’endroit que vous voulez montrer sur votre Google Map. À titre d’exemple, je vais maintenant prendre le siège social de Google en Belgique et intégrer une iframe dans WordPress (utiliser une iframe pour intégrer la carte Google Map dans WordPress).
Comment insérer un iframe dans WordPress 29
  • Cliquez ensuite sur le bouton « Partager » dans la barre de gauche. Après avoir cliqué sur le bouton « Partager » dans la barre latérale de Google Maps, une fenêtre apparaît. Vous pouvez maintenant choisir d’inclure la carte Google Map comme lien sur votre site web ou comme une carte Google Maps.
Comment insérer un iframe dans WordPress 30

Dans la vue suivante, vous verrez la carte, qui est générée par le code iframe standard.

  • vous avez la possibilité d’ajuster la taille de la carte. À cet effet, vous trouverez une petite lsite déroulante sous le bouton « Partager », avec laquelle vous pouvez choisir entre Grande 800 x 600px, Moyenne 600 x 450px (est sélectionné comme valeur par défaut), PEtite 400 x 300px et une taille personnalisée.
  • Selectionnez maintenant le code HTML généré et copiez-le.

Intégrer une vidéo YouTube dans WordPress

  • Rendez-vous sur le portail de YouTube, que vous trouverez ici.
  • Recherchez la vidéo que vous souhaitez inclure dans votre page WordPress
  • Si vous avez trouvé une vidéo que vous souhaitez intégrer dans votre page WordPress, cliquez sur le bouton de partage situé sous la vidéo.
Comment insérer un iframe dans WordPress 31
  • Dans le PopUp suivant, cliquez sur le bouton Intégrer (le premier). Dans le PopUp suivant, vous trouverez un lien pour intégrer la vidéo YouTube
  • Dans cette dernière étape, vous  pouvez effectuer de multiples configurations.
    En plus de la taille de l’iframe, vous pouvez également définir à quelle minute la vidéo doit commencer, si d’autres vidéos doivent être proposées à la fin de la vidéo ou si les commandes de lecture de la vidéo doivent être affichées.
Comment insérer un iframe dans WordPress 32

Intégrer un Iframe sur WordPress

  • Via Gutenberg

    Pour ce faire ajoutez simplement le code Html copié précédemment dans un bloc « code » comme illustré ci-dessous

Comment insérer un iframe dans WordPress 33
  • Via l’éditeur de texte ou le visual builder de Divi

Pour ce faire ajouter simplement un module texte
Assurez-vous simplement de cochez l’onglet « Text » souvent situé à droite de l’onglet « Visuel ».

Comment insérer un iframe dans WordPress 34

Sébastien Chaidron

Comment insérer un iframe dans WordPress 35
Depuis des années, je développe avec passion des sites web et je travaille pour vous en tant que développeur WordPress Freelance. Contactez-moi pour plus d’informations à support@easyonweb.be

Comment trouver des polices d’écriture sur d’autres sites web

Contenu de l'article Comment trouver des polices d'écriture sur dautres sites web ? Via l'inspecteur de page Via WhatFont Comment installer WhatFont Comment utiliser WhatFont Conclusion Mon Thème WordPress favoris!* Mon plugin Multilingue préféré ?* Chaque site web a...

Créer un formulaire dynamique sur WordPress

Contenu du tuto Créer un formulaire dynamique sur wordpress Description du plugin 1. Choisir une version (Free ou Premium) 2. Installation du plugin 3. Création votre premier formulaire 4. Ajout de champs dynamiques 5. Création du formulaire calculé 6. Traitement des...

Comment insérer un iframe dans WordPress

Contenu de l'article Intégrer un Iframe dans WordPress Qu'est-ce qu'un Iframe ? Pourquoi ai-je besoin d'un Iframe? Intégrer Google Maps Intégrer une vidéo YouTube  Intégrer un Iframe dans WordPress Depuis des années, je développe avec passion des sites web et je...

Comment aligner verticalement le contenu avec Divi

Contenu de l'article Comment aligner verticalement le contenu avec Divi Résultat 1. Ouvrir les paramètres de la colonne 2. Harmoniser les hauteurs des colonnes 3. Accédez aux paramètres de la colonne ou si situe le contenu à centrer 4. Centrer le contenu verticalement...

Thème Divi pour WordPress – Test et avis

Contenu de l'article Thème Divi pour WordPress – Test et avis Qui est derrière Divi ? Que propose Divi ? Concevez des en-têtes et des pieds de page avec Divi Theme Builder Divi et SEO Téléchargement et prix de Divi Documentation et soutien sur le thème Les...

Wix ou WordPress, qui est le meilleur en 2020?

Wix ou WordPress? À lire absolument avant de choisir!Sébastien Chaidron | Webdesigner & Développeur Web freelance à BruxellesLorsqu'il s'agit de choisir une solution pour votre site web, quel système de gestion de contenu (CMS) vous conviendra le mieux, WordPress...

Comment augmenter le trafic de mon site web

Vous recherchez à améliorer votre référencement naturel ( SEO ) pour mieux positionner votre site sur les moteurs de recherche ? Voici 3 Astuces pour augmenter votre visibilité sur le Web. Le référencement naturel n'est plus aussi facile qu'il y a 10 ans. Aujourd'hui...

Catégories

Comment aligner verticalement le contenu avec Divi

Comment aligner verticalement le contenu avec Divi

Comment aligner verticalement le contenu avec Divi

Il peut être intérressant quand untilise le thème Divi, de vouloir centrer verticalement du contenu ou un image par rapport à un autre contenu. Souvent quand on utilise deux colonnes ou plus.

Dans se petit guide je vous explique étape par étape avec des screenshots comment centrer verticalement votre contenu facilement.   

Comment aligner verticalement le contenu avec Divi 36

Nous allons, comme vous le voyez sous l’image ci-dessous, aligner une image par rapport à du contenu. Cela ne vous prendra que 4 petites étapes. C’est parti!

Comment aligner verticalement le contenu avec Divi 37

1. Ouvrir les paramètres de la colonne

Rendez-vous sur votre site web et accédez à l’administration. Une fois dessus selectionnez la page désirée et activez le Visual Builder d’Elegant Themes.

Cliquez sur l’écrou du cadre vert (celui des colonnes) pour ouvrir le menu de configuration des colonne.

Comment aligner verticalement le contenu avec Divi 38

2.Harmoniser les hauteurs des colonnes

Pour ce faire : 

  1. Cliquez sur Style
  2. Cliquez sur Dimensionnement
  3. Switchez sur oui sous le paramètre « Harmoniser les hauteurs des colonnes » (ne cliquez pas de suite sur le petit « v » on va devoir retourner sous l’onglet Contenu) 
Comment aligner verticalement le contenu avec Divi 39

3.Accédez aux paramètres de la colonne ou si situe le contenu à centrer

Vous devez maintenant cliquez sur l’onglet « Contenu »  ensuite selon ou se trouve votre contenu à centrer verticalement, ici dans mon cas je veux centrer l’image par rapport au texte, celle-ci se situant dans la seconde colonne je vais cliquer sur l’écrou de la seconde colonne (cfr point 2).

Comment aligner verticalement le contenu avec Divi 40

4.Centrer le contenu verticalement grâce à une ligne css

Comment aligner verticalement le contenu avec Divi 41

Une fois dans les paramètres de la colonne:

  1. Cliquez sur l’onglet « Avancé »
  2. Cliquez sur le menu « Personnaliser CSS »
  3. Ajouter cette petite ligne de code CSS dans l’encadré nommé « Elément principal »

 margin:auto;

Comment aligner verticalement le contenu avec Divi 42

Et voila votre contenu est maintenant centré verticalement par rapport à votre contenu. 

Si cette article vous a aidé, n’hésitez pas à me laisser un commentaire cela fait toujours plaisir !

Sébastien Chaidron

Comment aligner verticalement le contenu avec Divi 43
Depuis des années, je développe avec passion des sites web et je travaille pour vous en tant que développeur WordPress Freelance. Contactez-moi pour plus d’informations à support@easyonweb.be

Comment trouver des polices d’écriture sur d’autres sites web

Contenu de l'article Comment trouver des polices d'écriture sur dautres sites web ? Via l'inspecteur de page Via WhatFont Comment installer WhatFont Comment utiliser WhatFont Conclusion Mon Thème WordPress favoris!* Mon plugin Multilingue préféré ?* Chaque site web a...

Créer un formulaire dynamique sur WordPress

Contenu du tuto Créer un formulaire dynamique sur wordpress Description du plugin 1. Choisir une version (Free ou Premium) 2. Installation du plugin 3. Création votre premier formulaire 4. Ajout de champs dynamiques 5. Création du formulaire calculé 6. Traitement des...

Comment insérer un iframe dans WordPress

Contenu de l'article Intégrer un Iframe dans WordPress Qu'est-ce qu'un Iframe ? Pourquoi ai-je besoin d'un Iframe? Intégrer Google Maps Intégrer une vidéo YouTube  Intégrer un Iframe dans WordPress Depuis des années, je développe avec passion des sites web et je...

Comment aligner verticalement le contenu avec Divi

Contenu de l'article Comment aligner verticalement le contenu avec Divi Résultat 1. Ouvrir les paramètres de la colonne 2. Harmoniser les hauteurs des colonnes 3. Accédez aux paramètres de la colonne ou si situe le contenu à centrer 4. Centrer le contenu verticalement...

Thème Divi pour WordPress – Test et avis

Contenu de l'article Thème Divi pour WordPress – Test et avis Qui est derrière Divi ? Que propose Divi ? Concevez des en-têtes et des pieds de page avec Divi Theme Builder Divi et SEO Téléchargement et prix de Divi Documentation et soutien sur le thème Les...

Wix ou WordPress, qui est le meilleur en 2020?

Wix ou WordPress? À lire absolument avant de choisir!Sébastien Chaidron | Webdesigner & Développeur Web freelance à BruxellesLorsqu'il s'agit de choisir une solution pour votre site web, quel système de gestion de contenu (CMS) vous conviendra le mieux, WordPress...

Comment augmenter le trafic de mon site web

Vous recherchez à améliorer votre référencement naturel ( SEO ) pour mieux positionner votre site sur les moteurs de recherche ? Voici 3 Astuces pour augmenter votre visibilité sur le Web. Le référencement naturel n'est plus aussi facile qu'il y a 10 ans. Aujourd'hui...

Catégories

Thème Divi pour WordPress – Test et avis

Thème Divi pour WordPress – Test et avis

Thème Divi pour WordPress – Test et avis

Divi est mon thème préféré de WordPress Premium depuis des années. Je le recommande officiellement à mes clients et aux personnes intéressées. Il est donc temps de présenter le thème d’un peu plus près et de vous donner ma expérience.

Tôt ou tard, presque tous ceux qui utilisent des thèmes WordPress rencontreront Divi d’Elegant Themes. Ce test vous en dit plus sur le populaire PageBuilder, en montre les caractéristiques, en donne les avantages et en laisse un bon aperçu. Il vaut la peine de le lire, surtout pour les débutants. Avec la mise à jour de la version 4, beaucoup de choses ont changé sur Divi. Cet article contient également des informations étendues sur Divi, afin que chacun ait une bonne vue d’ensemble après la lecture et puisse décider si Divi convient ou non à ses propres besoins.

Thème Divi pour WordPress - Test et avis 44

Qui est derrière Divi ?

Une activité professionnelle sur Internet exige une conception professionnelle et des experts qui savent s’y prendre. Souvent, une bonne conception est très coûteuse et les débutants n’ont pas le capital de départ pour investir dans ce domaine ou ne peuvent pas programmer eux-mêmes. La société Elegant Themes comble cette lacune et propose des thèmes WordPress professionnels pour un coût comparativement très faible contre une performance élevée. Actuellement, Elegant Themes compte plus de 75 thèmes WordPress dans son portfolio, et d’autres sont ajoutés chaque mois. Chaque thème offre un maximum de flexibilité. En tant que membre d’Elegant Themes, vous pouvez utiliser tous les thèmes et les utiliser pour autant de projets web que vous le souhaitez.

Que propose Divi ?

Tout le monde n’est pas capable de programmer un site web par lui-même. Si vous voulez quand même présenter votre entreprise en ligne, vous avez besoin d’un éditeur visuel. Ainsi, chacun peut créer un site web WordPress selon ses propres idées. Sans connaissance préalable du CSS ou du HTML, les débutants en WordPress peuvent créer en un rien de temps un site web moderne et de qualité. Cela semble facile et c’est le cas. Il serait certainement hors de propos de montrer toutes les fonctions et possibilités de Divi, aussi nous nous limiterons aux bases essentielles. En outre, le reste du texte fait référence à des tutoriels dans lesquels Divi est expliquée de manière détaillée. Ici, il vaut le coup de cliquer sur les liens insérés et d’y jeter un coup d’œil. Il est donc clair que presque toutes les envies peuvent prendrent forme avec Divi.

Thème Divi 4.0

Dans l’histoire d’ Elegant Theme, la quatrième version du thème est l’une des plus grosse mises à jour. Les nombreuses nouveautés feront le bonheur des fans fidèles de Divi ainsi que les débutants. La nouveauté la plus importante est le Divi Theme Builder, qu’il ne faut pas confondre avec le Divi Builder (Pagebuilder) qui est intégré depuis longtemps.

Concevez des en-têtes et des pieds de page avec Divi Theme Builder

En plus du contenu de la page, il est désormais possible de personnaliser des éléments tels que les pieds de page ou les en-têtes grâce au Visual Builder. Les utilisateurs peuvent maintenant concevoir des en-tête totalement personnalisable. Cela ne signifie rien de moins que la possibilité de concevoir un site web de manière totalement unique, de A à Z. Ce qui était auparavant réservé aux programmeurs avec l’éditeur visuel entièrement disponnible, on peut maintenant faire tout ce que l’on souhaite avec Divi.

Divi et SEO

Divi ne fait pas obstacle à l’optimisation des moteurs de recherche. C’est ce que doit faire un bon thème. Le référencement a de nombreuses facettes. Du contenu aux liens internes, à la navigation, à l’expertise, etc. Donc, tout d’abord, le référencement n’est pas défini par le thème. Un thème WordPress mal optimisé peut être la raison pour laquelle un site web n’est pas très visible dans les moteurs de recherche courants. Derrière Elegant Themes se trouve une équipe de développeurs professionnels et expérimentés, qui maîtrisent parfaitement les bases de l’optimisation des moteurs de recherche. Les utilisateurs de Divi en profitent. Chaque template offre une base idéale pour un site web bien référencé, car le layout a été développé de manière à être optimisé pour les moteurs de recherche.

En combinaison avec un plugin SEO comme Yoast ou Rankmath, vous êtes certaint d’être bien placé dans les moteurs de recherche.

Téléchargement et prix de Divi

Le template WordPress est facile à télécharger sur le site web d’Elegant Themes après être devenu membre d’Elegant Themes.

Il existe actuellement deux options : Licence d’un an ou à vie
Le paiement s’effectue exclusivement via Paypal. Si l’abonnement n’est pas renouvelé dans le cadre de la licence annuelle, les thèmes déjà téléchargés peuvent être réutilisés. Seules les mises à jour de sécurité et les nouvelles fonctionnalités ne sont plus disponibles (ce qui n’est donc pas recommandé à long terme). Les clients qui choisissent Divi peuvent choisir entre deux tarifs (licences). Il ne s’agit pas d’un achat au sens traditionnel du terme. Les utilisateurs achètent plutôt une adhésion. La réduction à deux licences seulement est très appréciée, car les clients peuvent profiter de tous les avantages offerts par le thème et n’ont plus qu’à décider quel terme choisir. Au lieu de lire de nombreuses options et tarifs et d’essayer de faire des comparaisons, Elegant Themes facilite la tâche des clients dans ce domaine et prouve que le système est bien pensé. Le client en profite et gagne du temps.

Garantie de remboursement

Il ne coûte rien de tester Divi de Elegant Themes. Si vous n’êtes pas satisfait, vous pouvez annuler dans les 30 jours et vous faire rembourser par Paypal. Un test détaillé est possible pendant cette période, afin que les utilisateurs aient la possibilité de tester l’adhésion.

Avantage : pas de limite

Quelle que soit la variante choisie par les utilisateurs. Le modèle n’offre aucune limite ou restreint la fréquence d’utilisation sur ses propres sites web. Peu importe le nombre de vos propres sites web sur lesquels vous souhaitez utiliser le modèle. Elegant Themes ne fixe aucune limite. Dans ce domaine, Elegant Themes se distingue également des autres fournisseurs, qui combinent rarement la possibilité d’utiliser le thème sur plusieurs sites.

Remarque : Elegant Themes se démarque du courant dominant dans ce domaine, facilite la prise en main pour ses clients et ne les jette pas dans une jungle d’options tarifaires ou de clauses cachées. La transparence et la clarté sont les caractéristiques du plan tarifaire et donnent un avantage à Elegant Themes.

Licence annuelle

La licence pour un an est disponible au prix de 89 $ et comprend des plugins et d’autres thèmes. La licence annuelle comprend toutes les mises à jour qui ont lieu cette année.

Licence à vie

Avec cette variante, les utilisateurs reçoivent un accès aussi longtemps que la société Elegant Themes est présente sur le marché. Cette licence à vie est disponible au prix unique de 249 $.

Utilisation des licences pour les projets de vos clients

Les agences ou les indépendants freelance dans la conception de sites web sont autorisés à utiliser leur propre compte à Elegant Themes (je l’ai demandé) pour équiper leurs projets clients. Les projets reçoivent des mises à jour via une clé API. C’est bien sûr extrêmement intéressant pour les professionnels et les clients.

Documentation et soutien sur le thème

Divi et Extra disposent d’une documentation très détaillée où l’on peut toute la documentation nécéssaire. Cette documentation décrit également en détail les nombreuses fonctions supplémentaires du thème, afin qu’aucune question ne reste sans réponse et que les utilisateurs soient pleinement informés. Pour obtenir de l’aide, une équipe de soutien est à la disposition des utilisateurs par courrier électronique ou, plus rapidement encore, par chat.

Le forum offre une aide pour toutes les questions dont les réponse ne figure pas dans la documentation.
Les utilisateurs peuvent également consulter une très grande communauté s’ils ont des problèmes ou des difficultés. Pour les débutants qui pourraient avoir des problèmes, cette communauté est toujours prête à vous donner un coup de main. Les utilisateurs particulièrement expérimentés sont heureux d’aider les débutants et de les soutenir par des conseils judicieux. L’aide apportée ici est très rapide et fiable. Les questions reçoivent une réponse après environ 15 minutes et même les problèmes liés au code peuvent être résolus rapidement.

Ce que propose Divi : un résumé

Divi a pensé à tout. Voici un résumé de ce que Divi propose.

 

  • Installation des méta-descriptions et méta-titres sans plugin
  • Intégration du code Javascipt pour le suivi, AdWord et Google Analytics
  • Installation de bannières publicitaires
  • Smooth-Scrolling
  • Intégration des médias sociaux
  • WooCommerce peut être utilisé pour les magasins
  • Polices de caractères Google
  • Responsive
  • Optimisation pour la vitesse des pages
  • Mega menu
  • Backend en français
  • Mises à jour automatiques
  • Éléments : formulaire de contact, témoignages, vidéos, onglets, curseurs, tableaux de prix, compte à rebours, e-mail optin, appel à l’action, galeries, compteurs, audio, accordéon, photos et vidéos.
  • Créateur de pages avec l’éditeur visuel
  • Et bien plus encore

Sébastien Chaidron

Thème Divi pour WordPress - Test et avis 45
Depuis des années, je développe avec passion des sites web et je travaille pour vous en tant que développeur WordPress Freelance. Contactez-moi pour plus d’informations à support@easyonweb.be

Comment trouver des polices d’écriture sur d’autres sites web

Contenu de l'article Comment trouver des polices d'écriture sur dautres sites web ? Via l'inspecteur de page Via WhatFont Comment installer WhatFont Comment utiliser WhatFont Conclusion Mon Thème WordPress favoris!* Mon plugin Multilingue préféré ?* Chaque site web a...

Créer un formulaire dynamique sur WordPress

Contenu du tuto Créer un formulaire dynamique sur wordpress Description du plugin 1. Choisir une version (Free ou Premium) 2. Installation du plugin 3. Création votre premier formulaire 4. Ajout de champs dynamiques 5. Création du formulaire calculé 6. Traitement des...

Comment insérer un iframe dans WordPress

Contenu de l'article Intégrer un Iframe dans WordPress Qu'est-ce qu'un Iframe ? Pourquoi ai-je besoin d'un Iframe? Intégrer Google Maps Intégrer une vidéo YouTube  Intégrer un Iframe dans WordPress Depuis des années, je développe avec passion des sites web et je...

Comment aligner verticalement le contenu avec Divi

Contenu de l'article Comment aligner verticalement le contenu avec Divi Résultat 1. Ouvrir les paramètres de la colonne 2. Harmoniser les hauteurs des colonnes 3. Accédez aux paramètres de la colonne ou si situe le contenu à centrer 4. Centrer le contenu verticalement...

Thème Divi pour WordPress – Test et avis

Contenu de l'article Thème Divi pour WordPress – Test et avis Qui est derrière Divi ? Que propose Divi ? Concevez des en-têtes et des pieds de page avec Divi Theme Builder Divi et SEO Téléchargement et prix de Divi Documentation et soutien sur le thème Les...

Wix ou WordPress, qui est le meilleur en 2020?

Wix ou WordPress? À lire absolument avant de choisir!Sébastien Chaidron | Webdesigner & Développeur Web freelance à BruxellesLorsqu'il s'agit de choisir une solution pour votre site web, quel système de gestion de contenu (CMS) vous conviendra le mieux, WordPress...

Comment augmenter le trafic de mon site web

Vous recherchez à améliorer votre référencement naturel ( SEO ) pour mieux positionner votre site sur les moteurs de recherche ? Voici 3 Astuces pour augmenter votre visibilité sur le Web. Le référencement naturel n'est plus aussi facile qu'il y a 10 ans. Aujourd'hui...

Catégories