Comment créer des sites Web WordPress réactifs (avec thèmes)

L'utilisation d'un site Web réactif n'est plus une option lors de la création de sites Web. En termes simples, une conception de site Web réactive rend votre site beau, quel que soit le dispositif utilisé par vos visiteurs pour afficher et interagir avec le contenu..

Étant donné que plus de 80% des personnes possèdent un smartphone, il est indispensable de veiller à la réactivité de votre site Web. Selon les statistiques du marketing mobile de 2016, 57% des utilisateurs déclarent ne pas recommander une entreprise dont le site mobile est mal conçu et 88% des consommateurs qui recherchent un type d'entreprise locale sur un appareil mobile affaires dans les 24 heures.

Lorsque vous tenez compte de ce qui précède, vous comprendrez facilement pourquoi le contenu de votre site Web doit être accessible sur divers appareils. Heureusement, il est facile de rendre votre site Web WordPress réactif grâce à une pléthore de thèmes réactifs..

Dans ce didacticiel, nous allons vous montrer comment choisir un thème WordPress réactif, comment utiliser un thème réactif pour votre site et vous fournir des ressources pour en savoir plus sur la conception réactive et la création de votre propre thème WordPress réactif..

Comment choisir un thème WordPress réactif

Lorsque vous recherchez un thème réactif pour votre site, vous devez prendre en compte quelques éléments. En fonction de votre secteur d'activité, il est important de choisir un thème au design attrayant, mais également aux fonctionnalités nécessaires pour aider vos visiteurs à en apprendre davantage sur votre entreprise et à passer des prospects aux clients payants..

Voici quelques éléments clés à rechercher lorsque vous magasinez pour un thème WordPress réactif pour votre site..  

1. Considérez les caractéristiques

En ce qui concerne les fonctionnalités, recherchez un thème doté de fonctionnalités correspondant à votre secteur. Par exemple, si vous êtes une agence de création ou un designer, vous aurez besoin d'un thème qui permette de présenter votre portefeuille ainsi que des témoignages d'anciens clients..

Si vous vendez des produits, recherchez un thème qui s'intègre bien à un plug-in de commerce électronique ou vous permet d'afficher des tableaux de prix. De même, si vous comptez sur la possibilité de réserver des clients depuis votre site, recherchez un thème comportant un formulaire de réservation intégré..

Heureusement, il existe de nombreux thèmes WordPress spécifiques à l’industrie, dotés de toutes les fonctionnalités nécessaires et réactifs..

2. Vérifier les options de personnalisation

Vous voudrez rechercher un thème doté d'options de personnalisation flexibles. Dans la plupart des cas, votre thème est livré avec un panneau de paramètres qui vous permet de personnaliser les couleurs, les polices, de télécharger votre logo, etc. Si vous souhaitez expérimenter différentes mises en page, choisissez un thème qui s'intègre à un constructeur de page ou propose un autre moyen de configurer différentes mises en page pour vos pages..

3. Rechercher un thème WordPress réactif avec un design attrayant

Enfin, recherchez un thème au design attrayant, similaire à l'apparence de votre site Web. Ceci élimine le temps nécessaire pour modifier ou mettre en page la mise en page de vos pages et vous permettra de la personnaliser plus facilement..

Une fois que vous avez trouvé un thème WordPress réactif que vous aimez, tout ce que vous avez à faire est de l’acheter et de télécharger le fichier compressé sur votre ordinateur. Découvrez des thèmes WordPress réactifs sur ThemeForest ou Envato Elements: 

Comment démarrer avec votre site Web réactif

Maintenant que vous avez défini votre thème, il est temps de commencer à créer votre site Web réactif. Vous devrez acheter un nom de domaine et un plan d'hébergement sur lequel vous installerez WordPress et votre thème préféré..

C'est également une bonne idée de préparer le contenu qui sera placé sur votre site afin que vous puissiez simplement copier et coller le contenu au moment de le télécharger, plutôt que de perdre du temps à le rechercher..

1. Un nom de domaine

La première étape consiste à acheter un nom de domaine pour votre site web. Cela permettra à vos visiteurs et à vos clients de trouver votre site Web sur le Web. Il est donc important de choisir un nom qui représentera votre entreprise ou votre marque. Dans la mesure du possible, essayez d’apparier votre nom de domaine avec une extension .COM. Vous pouvez choisir de nommer votre site Web de la même manière que le nom de votre entreprise ou de choisir votre propre nom si vous créez un portefeuille personnel, un blog ou un site Web de CV..

2. Un plan d'hébergement

Une fois que vous avez défini votre nom de domaine, vous devez choisir un plan d'hébergement afin que les internautes puissent accéder à votre site. Il existe de nombreuses options en matière d’hébergement, allant de forfaits partagés peu coûteux à des forfaits d’hébergement WordPress gérés plus coûteux..

Si vous ne savez pas par où commencer, considérez Envato Hosted. Envato Hosted propose un hébergement WordPress haut de gamme géré, mais le véritable avantage est qu'ils peuvent installer et configurer WordPress avec le thème choisi et prendre en charge les détails techniques de la configuration de votre site..  

Le plan hébergé Envato comprend également:

  • Jusqu'à 100 000 visites mensuelles du trafic entrant, 5 Go d'espace disque et 100 Go de bande passante mensuelle.
  • Sauvegardes quotidiennes, sécurité des serveurs et surveillance du site, ainsi que le soutien constant de notre équipe d'experts WordPress.

3. Contenu et images

Enfin, prenez le temps de préparer tout le contenu de votre site Web. Cela comprend généralement des images, une copie qui ira sur vos pages les plus importantes telles que le Sur, Prestations de service ou Travaille avec nous pages. Si vous avez plusieurs départements, envisagez d'inclure le bios et les photos de ceux qui gèrent chaque département afin que vos visiteurs sachent qui contacter..

Préparer votre contenu à l'avance vous permet simplement de le copier-coller à la place d'un contenu de démonstration disponible avec les thèmes les plus modernes..

Comment créer votre site

Maintenant que tout est en place, il est temps de créer votre site. La première chose à faire est d'installer WordPress. Ensuite, vous pouvez installer votre thème, les plugins nécessaires, et continuer avec la configuration et la personnalisation du thème..

Pour les besoins de ce didacticiel, nous utiliserons le thème WordPress Oshine responsive. Le thème Oshine présente un design moderne et réactif et peut être utilisé pour une variété de niches. Il comprend plus de 30 démonstrations qui peuvent être importées en un seul clic et utilisées pour configurer rapidement votre site Web..

Thème d'Oshine

1. Installer WordPress

Comme mentionné précédemment, la première étape consiste à installer WordPress. Votre hébergeur vous enverra un email de bienvenue contenant le lien vers le tableau de bord ou le panneau de configuration de votre compte d'hébergement, ainsi que votre nom d'utilisateur et votre mot de passe. Cliquez sur le lien et entrez les informations fournies.

Une fois connecté, vous pourrez rechercher une section intitulée WordPress Installer, Installateurs en un clic, Installateurs Softaculous, ou quelque chose de similaire. Trouvez le WordPress icône, cliquez dessus et suivez les instructions.

Dans la plupart des cas, un écran vous invitant à entrer le nom et la description de votre site, le nom d'utilisateur et le mot de passe souhaités, ainsi que votre adresse électronique, vous est proposé. Remplissez les champs avec vos informations puis appuyez sur le bouton Installer bouton.

Après quelques minutes, WordPress sera installé, ce qui signifie que vous pouvez maintenant vous connecter à votre tableau de bord WordPress. Il suffit de visiter www.votrenom.com/wp-admin (remplacez yoursitename.com par votre nom de domaine actuel) et entrez le nom d'utilisateur et le mot de passe que vous avez créés lors de l'installation.  

2. Installer un thème WordPress

Dans votre tableau de bord WordPress, accédez à Apparence> Thèmes> Ajouter un nouveau. Puis clique Télécharger un thème.

Installer le thème Oshine.

Recherchez le dossier zip téléchargé qui contient les fichiers du thème et téléchargez-le. Une fois l’installation terminée, cliquez sur Activer.

3. Installer les plugins requis

Après avoir activé le thème, vous remarquerez une notification dans le tableau de bord avec un message indiquant que certains plug-ins sont nécessaires pour que le thème dispose de toutes ses fonctionnalités. Clique le Commencer l'installation des plugins lien à prendre directement à l'écran d'installation.

Installer les plugins nécessaires.

Sélectionnez tous les plugins et cliquez sur Installer. Après cela, allez à Plugins> Tous les plugins> Inactive et sélectionnez tous les plugins inactifs puis choisissez le Activer option du menu déroulant.

Comment personnaliser votre site

La prochaine étape de la configuration de votre site Web consiste à importer du contenu de démonstration, à le remplacer par le vôtre, et à modifier les paramètres du thème pour inclure vos polices, couleurs, logo, etc..

1. Importer du contenu de démonstration

Le moyen le plus rapide de configurer votre site consiste à installer le contenu de la démonstration. Cela fera ressembler votre thème à la démo que vous avez choisie, avec toutes les pages créées et configurées, il ne vous reste plus qu'à remplacer le contenu..

Pour commencer, accédez au thème WordPress adaptatif d’Oshine et naviguez jusqu’à la Importation languette. Sélectionnez la version de démonstration préférée et choisissez le contenu que vous souhaitez installer. Dans notre cas, j'ai sélectionné tout le contenu et cliqué sur le bouton Installer bouton. Attendez que le processus soit terminé et votre site sera prêt pour la personnalisation. Regardez-le pour vous assurer que le processus d'importation a réussi.

Importer du contenu de démonstration dans Oshine.

Continuons avec le remplacement du contenu de la démo. Dans votre tableau de bord WordPress, accédez à Des pages et cliquez sur le modifier bouton sur la page avec laquelle vous voulez travailler. Dans cet exemple, nous allons éditer la page d'accueil.

Le thème WordPress Oshine responsive utilise le constructeur de pages Tatsu pour créer la mise en page de toutes les pages de votre site, ce qui facilite grandement leur modification. Cliquez simplement sur le Éditer avec Tatsu bouton et vous pourrez modifier la mise en page, ajouter des modules supplémentaires, etc..

Tatsu Editor

Pour modifier des éléments sur votre page, cliquez simplement sur la partie de la page que vous souhaitez modifier, entrez votre propre texte et ajustez les paramètres à votre guise. Vous pouvez également ajouter des éléments supplémentaires tels que des zones de texte, des boutons, des icônes, des vidéos, des images, etc..

Ajout de modules au thème WordPress réactif.

2. Personnaliser l'apparence visuelle

Une fois que vous avez terminé de remplacer le contenu par le vôtre, il est temps de personnaliser l'apparence visuelle de votre site. Aller à Options d'Oshine pour commencer à personnaliser votre site. Vous remarquerez qu'il y a pas mal d'options ici.

Vous pouvez télécharger votre propre logo et votre image d'arrière-plan, personnaliser les polices utilisées sur votre site, contrôler les styles de mobile, définir les informations à afficher dans le pied de page et l'en-tête, etc. Vous pouvez également personnaliser les paramètres par défaut pour les styles globaux, insérer vos informations de contact ainsi que des scripts de suivi tels que le code Google Analytics et optimiser les performances de votre site en réduisant les feuilles de style et les scripts..

Comment créer un thème de site Web réactif et pourquoi le faire

Utiliser un thème WordPress personnalisé est un excellent moyen de gagner du temps et d’assurer la réactivité de votre site. Cependant, vous pouvez faire passer votre site au niveau supérieur en créant votre propre thème WordPress réactif à partir de zéro..

Bien que cela puisse sembler décourageant, cela vous donne le contrôle ultime sur la conception et les fonctionnalités de votre site. Si vous êtes curieux de savoir comment créer votre propre thème responsive ou si vous souhaitez en savoir plus sur la conception de sites Web responsive, voici quelques tutoriels pour vous aider à démarrer..

1. Web design réactif pour les débutants

Ce cours vous explique les bases de la conception réactive, explique l’approche mobile d’abord et les différentes dispositions utilisées dans la conception Web réactive, et aborde des sujets plus avancés tels que l’assurance que vos images sont réactives et l’utilisation de requêtes multimédia pour contrôler la disposition de vos images. site web pour une variété d'appareils.

2. Construire un premier thème WordPress réactif pour mobile

Ce didacticiel pas à pas vous explique comment utiliser un thème de démarrage et le transformer en thème réactif en gardant à l’esprit l’approche mobile d’abord. Vous apprendrez à ajouter des styles pour les appareils mobiles et à transformer votre thème en style pour les appareils de bureau..

3. Sept plugins pour aider vos utilisateurs mobiles

Dans cet article, vous découvrirez sept plugins WordPress utiles qui optimiseront votre site pour les appareils mobiles; de vous assurer que vos images et vos widgets sont réactifs, de couvrir les plug-ins spécifiques pour que votre site soit bien sur les appareils mobiles, même si votre thème n'est pas encore réactif.

Commencez avec votre site Web réactif

La création d'un site Web réactif peut sembler décourageante, mais les thèmes WordPress réactifs facilitent grandement cette tâche, même pour les débutants. Utilisez notre tutoriel ci-dessus comme point de référence et explorez des ressources supplémentaires sur la conception Web réactive. Et si vous avez besoin d'un thème WordPress réactif, consultez notre collection de thèmes WordPress réactifs de haute qualité pour tous les secteurs.

EnregistrerEnregistrer