Créer un site web personnalisé : utilisation avancée de l'éditeur Elementor et du thème WoodMart (05)

Le numéro précédent présentaitIntroduction de base à l'éditeur ElementorAssocié au thème WoodMart, nous allons aujourd'hui voir comment utiliser l'éditeur Elementor avec le thème WoodMart pour une personnalisation plus avancée du design du site web. Que vous soyez novice en matière de design ou expérimenté à la recherche d'une mise en page plus raffinée, cet article vous fournira des étapes et des conseils pratiques.

Etapes : Front-end du site → Editer avec Elementor → glisser vers l'avant du pied de page(ou l'ajout d'un module pourrait être)

Comme indiqué ci-dessus, il y a quatre boutons, à savoir Add, Template File, ai Build, Theme Template Options.

En général, c'est le premier fichier de modèle qui est le plus utilisé, le deuxième, à moins que vous ne sauvegardiez un module et que vous ne souhaitiez ensuite l'ajouter à un certain endroit, mais cela fait partie des paramètres de haut niveau, le novice en général ne peut pas l'utiliser, il n'est pas recommandé d'utiliser le troisième, le quatrième, les modèles de thème, selon le thème n'est pas le même, bien sûr, le contenu est différent, l'exemple ci-dessus montre le thème WoodMart

Lorsque nous cliquons sur ajouter, nous obtenons les options suivantes

Le style du conteneur illustré ci-dessus peut être choisi en fonction de la situation réelle.

Ils ont une différence évidente : Grid (grille) est nécessaire pour définir la première grille, Flexbox (boîte flexible) n'est pas nécessaire, mais il y aura une différence, c'est que si vous ajoutez une boîte flexible a commencé à sélectionner seulement l'ensemble, pas séparé, sélectionnez deux ou trois, il ne peut pas sélectionner, sauf si ajouté à nouveau, mais si c'est une grille, vous pouvez basculer entre les formats multiples vous-même. Les gens choisissent en fonction de la situation réelle

Après avoir ajouté un conteneur, trois boutons se trouvent en haut du conteneur : Ajouter, Modifier et Fermer.

Plus haut dans l'article, il a été indiqué que tout ajout de conteneur est également en mesure d'ajouter des conteneurs, à l'exception du pied de page en bas de la page, qui peut être ajouté.

Le second est l'éditeur, qui propose quelques options pour les paramètres du conteneur.

Le troisième est fermé, inutile d'en dire plus.

Concentrons-nous sur la deuxième modification, comme suit

Les autres sont enPrevious Previous post.Comme indiqué ci-dessus, cette fonction n'est généralement pas utilisée par les novices, mais si vous voulez que les conteneurs soient plus beaux ou que vous ajustiez la diversité, en fait, la traduction est écrite très clairement, il est donc facile de comprendre, la boîte rouge a un projet, il y a une direction en dessous, l'image ci-dessus montre en bas, parce que vous ajoutez un conteneur pour choisir est en bas l'autre sont certains de l'orientation de l'affichage, nous allons en fonction de la situation réelle pour ajuster !

Le style est également enArticle précédentIntroduit, et pas grand-chose à ajouter ici

L'une des caractéristiques tacites de l'histoire d'aujourd'hui est l'avancée de la technologie de l'information et de la communication.

Comme indiqué ci-dessus, afin de mieux comprendre, j'utilise l'image chinoise pour dire, il devrait être mieux de comprendre certaines des bases chinoises ont expliqué les options, nous devrions être "collant" plus confus, parce que la traduction est inexacte, en fait, sur le conteneur vous pouvez choisir de fixer le haut ou le bas, ou le sens de pas fixé !

Transformer : Conteneur (Container) de certains effets spéciaux, nous allons selon la traduction choisir, généralement ne pas avoir à se déplacer !

Point de conteneur à ajouter, vous pouvez choisir le module, le côté gauche aura le conteneur (Layout), et la fonction de base (Basic), et le côté gauche aura la fonction de base (Basic), et le côté gauche aura la fonction de base (Basic).Elementor Caractéristiques de la version PRO (Pro)

Les fonctions de base de chaque thème sont différentes, si votre site possède d'autres plugins, ils seront également dans la fonction de base de l'affichage.

Mais les fonctions de base pour répondre à votre construction de base d'un site Web, peuvent ne pas être assez belles, et des effets colorés, alors vous avez besoin de la version Pro payée pour atteindre, besoin d'ajouter quel module, cliquez sur le module que vous avez besoin de faire glisser vers le conteneur à l'intérieur !

Description du module :

Etapes : Site web front-end → Editer avec Elementor → Container (Conteneur) → Heading

Heading : titre, compris comme un grand titre, le tableau suivant, vous pouvez définir le titre du texte (Title), ainsi que le lien (link) et la taille du titre (HTML Tag) ainsi que la direction du titre (Alignment), le titre de la couleur (Text Color), la disposition de la police (Typography), la taille ou le style de la police, la taille et ainsi de suite !

Etapes : Front-end du site → Editer avec Elementor → Container (conteneur) → Editeur de texte

Éditeur de texte : éditeur de texte (si le texte est plus recommandé, comme l'introduction de certains produits, l'introduction de la société, etc.) le tableau suivant, le contenu du texte, la séparation du texte (colonnes), peut être interprété comme le texte de l'ensemble du conteneur pour occuper le nombre d'espaces entre les colonnes (si vous n'avez pas à configurer la séparation du texte, vous n'avez pas besoin de l'ajuster).

Comme indiqué ci-dessus, il existe également un style d'éditeur de texte qui vous permet d'ajuster la palette de couleurs, l'orientation du texte, la couleur du titre du texte, la mise en page du texte, l'alignement du contenu, la largeur du contenu, etc.

Etapes : Front-end du site → Editer avec Elementor → Container (conteneur) → Editeur de texte

image:Pictures

Choisir l'image : choisissez une image, vous pouvez la télécharger à partir de la médiathèque du site ou localement.

Résolution de l'image : la taille de la résolution de l'image, vous pouvez choisir parmi un large éventail de résolutions.

Légende : le titre, qui peut être affiché ou non.

Lien : lien, peut afficher un lien personnalisé ou un lien vers un média

Comme indiqué ci-dessus, Alignement (position de l'image) Largeur (largeur de l'image), Largeur maximale (largeur maximale de l'image), Hauteur (hauteur de l'image) Normal (état par défaut), Survol (état au survol, état au clic de la souris) deux états différents peuvent être ajustés, et l'autre en fonction de la traduction de la compréhension sur la ligne !

Etapes : Container (Container) → sélectionner la disposition en deux colonnes → grille de sélection des images sous forme de sélection de deux colonnes

Si vous souhaitez obtenir l'effet illustré ci-dessus, vous devez utiliser la fonction avancée de l'image.Veuillez noter qu'il s'agit de l'image et non du conteneur.Si vous avez besoin de définir la valeur de décalage dans la marge (cadre extérieur) dans la figure suivante, mais veuillez déconnecter les symboles du lien, si vous ne déconnectez pas, les quatre directions sont modifiées ensemble, comme dans la figure ci-dessus, un biais à gauche vers le bas, un biais à droite vers le haut, dans la direction correspondante pour définir la valeur sur la ligne !

Bien sûr, il existe une méthode simple qui consiste à faire une photo de ce type d'insertion directe, plus simple que ma méthode, à choisir en fonction des besoins.

Etapes : Front-end du site → Editer avec Elementor → Container (Conteneur) → Bouton

Bouton : le bouton vous permet de passer au bouton du lien, c'est une fonction essentielle et magnifique !

Type, généralement par défaut, vous pouvez également choisir d'autres

Texte (nom du bouton), écrire comme il convient

Bouton de lien pour accéder à un lien

Icône (icône), vous pouvez définir l'icône ou l'absence d'icône, en fonction de la situation réelle, pour ajuster l'image de l'appareil.

Bouton lD (ID du bouton), il n'est généralement pas nécessaire de régler le paramètre

Position : la direction du bouton

Typographie : disposition des boutons

Couleur du texte : couleur du texte
Type d'arrière-plan
Couleur : Couleur

Normal : Défaut
Survoler : Survoler

Deux états différents sont ajustés séparément

Etapes : Site web front-end → Editer avec Elementor → Container (conteneur) → Spacer (espaceur)

Entretoise. Il s'agit d'un espace entre le flou supérieur et le flou inférieur ou le conteneur.

Etapes : Site web front-end → Editer avec Elementor → Container (Container) → Divider

Diviseur.

Vous pouvez définir la largeur et la couleur, ainsi que la hauteur, la différence entre lui et l'espaceur (Spacer) est que la fonction sera un peu plus puissante, la fonction d'espaceur (Spacer) n'est qu'un espace, comme illustré ci-dessous, l'effet de division de la ligne (Divider) ne sera pas le même !

Plus de modules

Vidéo : insertion de vidéos

Google Maps : insertion de cartes

icône : icône

Ces paramètres sont relativement simples à configurer, vous pouvez donc les configurer en fonction de la traduction.

Dans ce numéro, nous avons parlé des fonctionnalités de base de l'éditeur Elementor et de quelques partages d'expérience, à travers le tutoriel d'aujourd'hui, nous espérons que vous pourrez maîtriser l'application avancée de l'éditeur Elementor avec le thème WoodMart, afin de créer un site web à la fois beau et complet. Dans le prochain épisode, nous présenterons les fonctionnalités de la version payante d'Elementor, alors restez à l'écoute pour plus d'astuces professionnelles et de conseils approfondis !