Flatsome est un thème WordPress puissant conçu pour les sites Web de commerce électronique et 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 y avait plus de 174 500 ventes et une superbe note 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 qui ne savent pas coder ou qui n'ont pas le budget nécessaire pour embaucher un codeur professionnel. Avec Flatsome, vous pourrez créer un site Web d'aspect professionnel à l'aide d'outils simples et intuitifs.
Désormais, Flatsome est doté de tonnes de fonctionnalités et de fonctionnalités impressionnantes. Pour présenter ce qui est disponible et comment cela fonctionne, nous avons un didacticiel rapide vous montrant comment créer une page de produit WooCommerce à l'aide de Flatsome.
Alors, sans plus attendre, commençons :
Table des matières:
Alors que nous accueillons nos nouveaux lecteurs, nous devons mettre certaines informations nécessaires pour garantir que tous nos lecteurs sont sur la même longueur d'onde. Nous discuterons ici de la différence entre les trois terminologies que nous utiliserons tout au long de cet article.
Commençons par WordPress. C'est une plateforme 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 effectuer d'autres tâches selon vos besoins.
WooCommerce est un plugin que nous installons sur WordPress et 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 d'achat, le traitement des paiements, la gestion des produits, etc.
Enfin, mais certainement l’un des éléments les plus critiques est l’apparence de notre site Web. Flatsome est un thème qui nous permet de personnaliser la perspective de notre site Internet selon nos envies. Par exemple, si le logo de votre entreprise est orange, vous souhaiterez refléter la couleur de votre site Web. C'est ce que Flatsome peut vous offrir.
Puisque tous nos lecteurs connaissent 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. Il s’agit d’une fonctionnalité 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 simple. 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 création. Vous pouvez créer une boutique en ligne fonctionnelle à part entière en quelques minutes seulement par glisser-déposer.
Avec WooCommerce et Flatsome , vous pourrez donner une toute nouvelle vie à vos idées de boutique en ligne. Votre site Web doit avoir une apparence moderne et belle pour pouvoir attirer les clients. Par conséquent, Flatsome est la meilleure solution à tous vos problèmes, alors téléchargez-le à partir d' ici et commençons.
Flatsome possède des fonctionnalités fantastiques, mais l’une des choses est qu’il est devenu le premier choix de plus de 300 000 utilisateurs. Un outil ultime aide à créer des sites Web extrêmement réactifs sans avoir à coder une seule ligne. De plus, sa capacité à créer des boutiques en ligne hautement créatives et uniques le rend encore plus digne.
Alors sans perdre plus de temps, passons au tutoriel. Ce didacticiel vous guide à travers le processus complet de conception de la page 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.
Tout d’abord, nous commencerons par sélectionner une mise en page de la page produits. Cette sélection permettra de 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 amp , nous continuerons avec l’option Classic Shop. Cependant, aucune restriction ne vous est imposée. 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 des autres.
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. La première doit être réalisée avec le constructeur UX, tandis que l'autre consiste à construire 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 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.
Voici une capture d'écran de la page de documentation officielle de Flatsome. Vous pouvez taper les mots shortcodes et les rechercher.
Une fois que vous aurez appuyé sur Rechercher, une liste de codes courts sera affichée à l’écran. Vous pouvez choisir les shortcodes importants pour la page produit. L’utilisation de shortcodes nécessite moins d’efforts, mais il est essentiel que vous ayez une petite expérience pratique de WordPress et de l’utilisation des shortcodes.
Voici la liste des shortcodes que vous pouvez utiliser sur le site pour créer des pages.
Dans cet amp , nous personnaliserons la disposition de la barre latérale gauche sur toute la hauteur ; ainsi, nous copierons le code de 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 amp , nous avons nommé l'union « Disposition de la barre latérale gauche pleine hauteur ». Ensuite, vous pouvez voir les shortcodes dans l’éditeur de blocs. Une fois que vous avez terminé de copier les codes courts souhaités, vous pouvez cliquer sur publier.
Nous serons à égalité 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 Mise en page du produit personnalisé.
Choisissez le bloc que nous venons de créer. Notre objectif principal en créant ce bloc était d'en créer une page produit. Selon cet 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é, cliquez simplement sur le bouton Publier ; cela enregistrera les paramètres.
Il est temps pour nous de commencer la personnalisation. Tout d’abord, nous allons parcourir la page des produits existants à partir du front-end que nous avons défini plus tôt 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 lancer 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 disposez d'options pour réorganiser les éléments du panneau latéral gauche et modifier les paramètres à partir de l'option d'élément. Dans cet 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 d'ajouter des composants supplémentaires sur la page produit du constructeur. Dans cette démo, la section Onglets Produits et le Produit associé ont été réorganisés par un simple glisser-déposer.
Grâce à l'importante fonctionnalité 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.
Il est impératif d’avoir une entreprise en ligne à notre époque moderne, car les gens préfèrent rester chez eux 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 code en désordre dans l’éditeur de contenu, juste quelques lignes de shortcode. 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 de téléchargement et commencez immédiatement à créer votre boutique en ligne personnalisée.
Les en-têtes et pieds de page d’un site Web sont des éléments essentiels. Dans la plupart des cas, l'en-tête fournit la navigation…
Astra et OceanWP sont deux des thèmes WordPress les plus populaires sur le marché. Professionnel…
Créer un excellent site Web d'actualités ne nécessite pas que vous deveniez un concepteur de sites Web. Nous…
Le thème Newspaper est l'un des thèmes WordPress les plus importants conçus par tagDiv, un…
Lorsqu'il s'agit de créer une boutique en ligne, WooCommerce est le plugin incontournable. Il…
Un en-tête est généralement la première chose qu’une personne voit lorsqu’elle visite votre site Web,…