Analyse approfondie de l'éditeur Elementor : Création d'un site Web personnalisé sur le thème WoodMart (04)

Dans le dernier numéro, nous avons abordé la question de la mise en place d'un système de gestion de l'information.Affiches sur le thème de Woodmart(bannière), ce tutoriel parle de l'éditeur Elementor pour rénover le thème Woodmart, nous allons nous plonger dans l'utilisation de l'éditeur Elementor pour personnaliser et optimiser votre thème WoodMart. Avec ce tutoriel, apprenez à utiliser les modules multifonctionnels d'Elementor pour créer un site web à la fois beau et fonctionnel.

Entrez dans le mode d'édition comme indiqué ci-dessus

Chaque modèle contient différents modules, comme indiqué ci-dessous. Il s'agit d'une capture d'écran de l'un des modules, mais l'application réelle ne signifie pas que chaque module est adapté au modèle.

Ci-dessous, le même modèle, mais avec un effet différent

N'est-il pas beaucoup plus beau, moins monotone, mais avec sa propre personnalité ?

Ensuite, nous parlerons de l'effet de chaque fonction de l'éditeur Elementor et des méthodes spécifiques.

Expliquons d'abord la mise en page complète du modèle ci-dessus, nous entrons dans le modèle à droite de la page d'édition pour voir la mise en page complète, comme suit

La mise en page présentée ci-dessus est la composition du conteneur (conteneur), le conteneur se trouvant à l'intérieur des différents modules.

Comme indiqué ci-dessus, par exemple, par le module de titre et de classification deux implémentations, sur la droite correspondra à l'affichage, l'éditeur Elementor, plus adapté pour les novices, mais si vous voulez ajuster le plus beau et le plus beau, est également la nécessité d'une certaine quantité d'expérience.

Prenons deux modules plus spécifiques, à titre d'exemple, comme suit

D'après l'image ci-dessus, il s'agit d'une affiche ou d'une photo et d'un module d'affichage de produits à droite, la disposition est 1:3, en fait, ce sont les deux conteneurs à l'intérieur du module qui ont été ajoutés !

Regardez d'abord le côté gauche, l'image suivante : le symbole de la boîte est le conteneur (Container), le symbole du stylo est l'éditeur du module, il s'agit d'un module Promo Banner (bannières promotionnelles).

Etapes : Site web front-end → sélectionner le module correspondant → boîte (conteneur) Conteneur

En entrant dans le conteneur, nous pouvons voir certains paramètres du conteneur comme suit

Il y a trois réglages principaux, comme suit

Mise en page : Mise en page

Style

Avancé : Paramètres avancés (avancés)

Disposition du conteneur : le style du conteneur, divisé en boîtes flexibles et en grilles (boîtes rouges).

Largeur du contenu : la disposition du conteneur, divisé en centre et pleine largeur, la pleine largeur est plein écran, selon la traduction et l'effet réel sera en mesure de comprendre (boîte jaune).

Largeur : la largeur de l'ensemble du conteneur. (boîte bleue)

Hauteur minimale : hauteur de l'ensemble du conteneur (boîte bleue)

Vous pouvez voir la boîte bleue pour ajuster le dos peut être ajusté en fonction du pourcentage d'ajustement ou l'ajustement de pixel, mais il y a d'autres, un total de quatre formats, le plus couramment utilisé ou j'ai dit que les deux, nous ajustons en fonction de la situation réelle, mais aussi voir le modèle de l'appareil, indiquant qu'il est possible d'ajuster en fonction de chaque appareil individuellement, si l'adaptatif n'est pas idéal, vous pouvez aller à ajuster le format de l'appareil.

Lacunes : colonnes, comprises comme des lacunes avant le conteneur (cases vertes)

Style, comme indiqué ci-dessus.

Ici, le conteneur est ajusté à la couleur de fond (background), les autres n'ont temporairement pas besoin d'être déplacés !

Comme indiqué ci-dessus.Avancé : Paramètres avancés (avancés)

Layout→Margin : ajuster le décalage du cadre extérieur

Layout→Padding : ajuster le décalage du cadre intérieur

En général, il n'est pas nécessaire d'ajuster, si vous avez besoin de style n'est pas le même, ou remplir le besoin d'ajuster, c'est-à-dire, le besoin de meilleurs résultats, mais ne recommande pas que les novices obtenir, peut conduire à une bonne sensation du côté de l'ordinateur, mais d'autres appareils semblent être en désordre par le sentiment !

Responsive : responsive, vous pouvez faire de ce module, de sorte que l'appareil à afficher, ou seulement afficher dans un appareil, très flexible, et même vous pouvez mettre en place deux du même, mais pour des appareils différents, est arrivé à un très bon effet, mais aussi d'éviter l'auto-adaptation ou d'ajuster à l'effet d'une solution !

Ce qui précède est le conteneur (Conteneur) L'utilisation de base du conteneur est à peu près la même, il y aura des différences subtiles, mais pas de module, la différence sera grande !

Voici ce que nous avons à dire sur le module

Général : En général, ce module permet d'insérer des liens.

Contexte.

Source : Sources d'information

choose imae : choisir l'image, mais seulement si votre source est choisir l'image, vous pouvez aller dans la bibliothèque de médias ou télécharger l'image.

Hauteur de la bannière : hauteur du module

Position de l'image : position de l'image affichée

Comme indiqué ci-dessus, le contenu

Correspondant à l'emplacement du bon module, il est relativement simple de ne pas dire la même chose, vous pouvez également être traduit en fonction de la compréhension de l'image.

Style : le style, ici vous pouvez vous occuper du style de chaque composant, c'est pour les rendre plus beaux, comme le titre de la description du bouton, ainsi que plus d'effets du module, nous allons en fonction de la traduction pour comprendre le module.

Avancé : paramètres avancés (advanced), essentiellement les mêmes que pour les conteneurs, mais les novices n'ont pas besoin de les modifier.

Ensuite, nous parlerons du côté droit.

Étapes : Site web frontal → conteneur correspondant (icône de la boîte) ou module (symbole du stylo)

Comme le montre la figure ci-dessus, il est constitué d'un conteneur à l'intérieur duquel sont ajoutés le module de titre et le module de bouton, le conteneur se trouvant en dessous de l'ajout d'un module de produit

Comme indiqué ci-dessus, le fait de toucher le titre fait apparaître le symbole du stylo pour accéder à l'éditeur, et il en va de même pour le module des boutons, comme indiqué ci-dessous.

Comme le montre l'image ci-dessus, la signification est très bien comprise d'après la traduction. Grâce à l'introduction détaillée de ce numéro, je pense que vous avez une compréhension plus profonde de l'application de l'éditeur Elementor dans le thème personnalisé WoodMart. Nous avons montré comment améliorer l'effet visuel et la fonctionnalité de votre site web avec différents modules et conteneurs. Restez à l'écoute pour notre prochain article où nous continuerons à explorer d'autres astuces sur l'utilisation des modules de base et des conteneurs pour vous aider à améliorer le design de votre site web. Nous vous remercions de votre lecture et vous donnons rendez-vous dans le prochain numéro !