Thème Flatesome
Flatsome est un puissant thème WordPress conçu pour les sites Web de commerce électronique et est livré avec l'intégration de WooCommerce.
C'est l'un des thèmes WooCommerce les plus populaires sur ThemeForest. Au moment de la rédaction de ce didacticiel, il s'agissait de plus de 174 500 ventes et d'une note impressionnante de 4,8 étoiles provenant de plus de 6 600 avis.
Flatsome est principalement conçu pour les débutants et les utilisateurs non avertis en technologie.
C'est idéal pour les personnes qui souhaitent se lancer dans une activité en ligne mais ne savent pas comment coder ou n'ont pas le budget pour embaucher un codeur professionnel. Avec Flatsome, vous pourrez créer un site Web d'aspect professionnel à l'aide d'outils simples et intuitifs.
Maintenant, Flatsome est livré avec des tonnes de fonctionnalités et de fonctionnalités impressionnantes. Pour présenter ce qui est disponible et comment cela fonctionne, nous avons un tutoriel rapide vous montrant comment créer une page de produit WooCommerce à l'aide de Flatsome.
Alors, sans plus tarder, commençons :
Table des matières:
- Thème Flatesome
- Différence entre Flatsome, WooCommerce et WordPress
- Créez une page de produit WooCommerce en utilisant le thème Flatsome
- Étape 1 : sélectionnez une mise en page pour la page du produit
- (Facultatif) Étape 2 : Créer une page de produit manuellement
- Étape 3 : Personnaliser la page du produit
- Emballer
Différence entre Flatsome, WooCommerce et WordPress
Alors que nous accueillons nos nouveaux lecteurs, nous devons mettre certaines informations nécessaires pour nous assurer que tous nos lecteurs sont sur la même page. Ici, nous allons discuter de la différence entre les trois terminologies que nous utiliserons tout au long de cet article.
Commençons par WordPress. C'est une plate-forme sur laquelle vous installez différents thèmes et plugin pour créer votre site Web. Il existe des milliers de plugin et de thèmes disponibles pour accomplir d'autres tâches selon vos besoins.
WooCommerce est un plugin nous installons sur WordPress qui vous permet d'ajouter différentes fonctionnalités à notre site Web. Avec l'installation de ce plugin , nous pouvons créer notre site Web et notre boutique en ligne avec des fonctionnalités supplémentaires telles que le panier, le traitement des paiements, la gestion des produits, etc.
Enfin, mais certainement, l'un des éléments les plus critiques est la perspective de notre site Web. Flatsome est un thème qui nous permet de personnaliser la perspective de notre site Web en fonction de nos envies. Par exemple, si le logo de votre entreprise est orange, vous souhaitez refléter la couleur de votre site Web. C'est ce que Flatsome peut vous offrir.
Créez une page de produit WooCommerce en utilisant le thème Flatsome
Étant donné que tous nos lecteurs ont des connaissances sur WordPress, WoCommerce et Flatsome, il est temps pour nous de passer à la personnalisation de notre page produit avec le fantastique constructeur UX fourni avec le thème Flatsome. C'est une fonction de glisser-déposer qui rend la vie du concepteur extrêmement facile.
Presque tout le monde a fait des achats en ligne, probablement en raison des temps difficiles auxquels nous avons été confrontés ces derniers mois. Rester à la maison était la solution la plus sûre pour nous tous. C'est la raison pour laquelle tous nos lecteurs seront d'accord sur le fait qu'une boutique en ligne est beaucoup plus compliquée qu'un site Web standard.
Cependant, avec l'aide de WooCommerce et Flatsome, cette tâche est devenue extrêmement facile. Vous devez vous asseoir et planifier à quoi ressemblera votre site Web, et c'est tout. WooCommerce sera là pour vous aider avec ses options de constructeur. Vous pouvez créer une boutique en ligne fonctionnelle à part entière en quelques minutes par glisser-déposer.
Avec WooCommerce et Flatsome , vous pourrez donner à vos idées d'avoir une boutique en ligne une toute nouvelle vie. Votre site Web doit avoir un look moderne et beau pour attirer les clients. Par conséquent, Flatsome est la meilleure solution pour tous vos problèmes, alors téléchargez-le ici et commençons.
Flatsome a des fonctionnalités fantastiques, mais l'une des parties est qu'il est devenu le premier choix de plus de 300 000 utilisateurs. Un outil ultime aide à créer de formidables sites Web réactifs sans avoir à coder une seule ligne. De plus, sa capacité à créer des boutiques en ligne très créatives et uniques le rend encore plus digne.
Alors sans perdre plus de temps, passons au tutoriel. Ce didacticiel vous guide tout au long du processus de conception de la page des produits. Les images vous aideront à avoir une meilleure idée de la façon dont la tâche se déroulera tout au long du processus.
Étape 1 : sélectionnez une mise en page pour la page du produit
Tout d'abord, nous allons commencer par sélectionner une mise en page de la page des produits. Cette sélection va créer une page de base pour notre boutique en ligne, que nous personnaliserons selon nos envies par la suite. Ce guide étape par étape vous guidera tout au long du processus de personnalisation de la page.
Pour cet ex amp , nous continuerons avec l'option Classic Shop. Cependant, il n'y a aucune restriction sur vous. Le processus de personnalisation sera similaire pour chaque mise en page que vous sélectionnez. La seule différence serait que la structure de base de la page sera différente de l'autre.
En passant au personnalisateur de produit, nous lui avons donné le nom de barre latérale gauche pleine hauteur.
Deux options sont disponibles pour personnaliser la page des produits. Le premier est à faire avec le générateur UX, tandis que l'autre consiste à créer la page manuellement. Si vous sélectionnez la deuxième option, vous devrez vous diriger vers la documentation officielle et localiser les codes courts. Si vous êtes un débutant et que c'est votre première expérience dans la création d'une boutique en ligne, je vous recommande d'opter pour cette première option.
(Facultatif) Étape 2 : Créer une page de produit manuellement
Voici une capture d'écran de la page de documentation officielle de Flatsome. Vous pouvez taper le mot shortcodes et les rechercher.
Une fois que vous avez lancé la recherche, une liste de codes courts s'affiche à l'écran. Vous pouvez choisir les shortcodes importants pour la page produit. L'utilisation de codes courts nécessite moins d'effort, mais il est essentiel que vous ayez une petite expérience pratique avec WordPress et l'utilisation de codes courts.
Voici la liste des shortcodes que vous pouvez utiliser sur le site Web pour créer des pages.
Dans cet ex amp , nous personnaliserons la disposition de la barre latérale gauche pleine hauteur; ainsi, nous copierons le code pour la conception. Voici une image de l'application, mais vous pouvez facilement la copier à partir de la structure.
Commencez par créer un bloc avec un titre. Si vous souhaitez développer Head, vous devez cliquer sur "Ajouter un nouveau" disponible sous les blocs UX placés dans votre tableau de bord.
Vous pouvez nommer le bloc selon vos envies. Ici , dans cet ancien amp le, nous avons nommé le syndicat comme « pleine hauteur gauche mise en page de la barre latérale. » Ensuite, vous pouvez voir les shortcodes dans l'éditeur de blocs. Une fois que vous avez terminé de copier les shortcodes souhaités, vous pouvez cliquer sur publier.
Nous serons au pair après cette petite étape où nous pourrons personnaliser notre page selon nos envies. Accédez maintenant à l'option de thème de la page produit et appuyez sur l'icône de mise en page personnalisée.
Une fois terminé, vous pourrez désormais créer des blocs à partir de la liste déroulante Présentation du produit personnalisé.
Choisissez le bloc que nous venons de créer. Notre objectif principal pour créer ce bloc était de créer une page produit à partir de celui-ci. Selon cet ancien amp d' amp , la disposition de la barre latérale gauche pleine hauteur est le bloc, tandis qu'à votre extrémité, ce sera comme vous l'avez nommé.
Une fois terminé, appuyez simplement sur le bouton Publier; il enregistrera les paramètres.
Étape 3 : Personnaliser la page du produit
Il est temps pour nous de commencer la personnalisation. Tout d'abord, nous naviguerons dans la page des produits existants à partir du front-end que nous avons défini précédemment dans les étapes.
Il est important que vous sélectionniez un produit particulier que nous devons configurer. Vous devriez avoir des détails complets, des images du travail que nous devons personnaliser. De cette façon, le processus devient plus confortable pour visualiser la section de page que vous allez créer.
L'option UX builder est visible. Appuyez simplement sur le bouton pour démarrer la personnalisation.
Une fois le générateur UX ouvert, vous pouvez voir sur l'image que les éléments de la page produit sont disponibles dans le panneau latéral gauche de votre page produits.
Le panneau latéral gauche est le bloc que nous avons initialement créé. Nous l'avons créé à l'aide des shortcodes extraits de la documentation.
Vous avez la possibilité de réorganiser les éléments à partir du panneau latéral gauche et de modifier les paramètres à partir de l'option d'élément. Dans cet ex amp , nous réorganiserons le prix disponible dans le menu de gauche.
De plus, il vous permet également de réorganiser les éléments de l'aperçu du constructeur et de mettre des composants supplémentaires sur la page du produit du constructeur. Dans cette démo, la section Onglets de produits et le produit associé ont été réorganisés avec un simple glisser-déposer.
Avec l'importante fonctionnalité de glisser-déposer, Flatsome est prêt à vous fournir ce que vous recherchez sur votre site Web. Avec des modules hautement personnalisables, vous pouvez créer facilement des pages fantastiques. La fonction glisser-déposer rend la vie encore plus confortable.
Emballer
Il est impératif d'avoir une entreprise en ligne à l'ère moderne, car les gens préfèrent rester à la maison pour rester en sécurité. Alors commencez à créer votre première boutique en ligne avec Flatsome et hypnotisez vos clients par son caractère unique et sa créativité. De plus, il n'y a pas de désordre de code dans l'éditeur de contenu, juste quelques lignes de code court. Flatsome est sans aucun doute le meilleur thème que j'ai rencontré. Il n'est donc pas nécessaire de chercher un autre thème, appuyez simplement sur le bouton de téléchargement et commencez immédiatement à créer votre boutique en ligne personnalisée.
