Quel que soit le type de site que possédez, devez non seulement avoir un contenu de haute qualité, mais aussi être en mesure de le présenter de façon convaincante. Heureusement, de nombreux outils nous permettent de partager de façon créative un large éventail d et de données. Vous pouvez ajouter des effets parallaxes pour mettre en évidence les tons modernes de votre site, utiliser la commutation et lrsquoaccordéon pour une meilleure structure de contenu, et les widgets de traitement sont précieux parce qursquoils nous permettent drsquoafficher des données complexes drsquoune manière claire, intéressante et attrayante. avez un type quelconque de contenu impliquant la visualisation drsquoun processus, devez être en mesure de subdiviser les utilisateurs drsquoune manière simple, claire et concise sans perdre aucun détail important associé à celui ci. Le magasin en ligne trouvera des widgets de processus précieux, car il peut être utilisé pour afficher progressivement le processus drsquoachat en ligne, les entreprises peuvent partager lrsquoapparence du processus de recrutement au sein de lrsquoentreprise, les sites Web de soins de santé peuvent afficher les différentes étapes du processus de guérison, Tout type de flux de travail peut être visualisé par étapes: les possibilités sont infinies.
Dans nous montrerons comment configurer et personnaliser facilement les widgets de processus sur votre site Web. Pour en savoir plus: Qi plug in Process Widget for elementor Process Widget content tab options Process Widget style tab options Examples
Widget de processus elementor Qi plug in elementor Qi plug in est un outil puissant, polyvalent et facile à utiliser qui ajoute un peu drsquoélégance à votre site en plus drsquoajouter des fonctionnalités à votre site. À lrsquoheure actuelle, lrsquooutil est la plus grande collection drsquoadd ons gratuits sur le Web, avec 60 widgets gratuits que même les débutants peuvent enrichir leur site avec des éléments efficac
Je nrsquoai pas besoin de savoir coder. Les widgets de processus inclus ont de nombreuses options personnalisées qui permettent de créer tous les types de flux de travail et de belles visualisations de processus qui correspondent exactement aux besoins et au style de votre site.
Lorsque faites glisser le Widget de processus latéralement, obtenez la vue par défaut que pouvez éditer. Il est important de noter que le Widget utilise la police utilisée par le thème, donc si voulez lrsquouniformité de cette section, nrsquoavez pas à la changer.
Les options pour définir les widgets de processus sont les options de contenu et de style. Ici, nous sélectionnons les éléments requis dans le Widget de processus et déterminons à quoi tout ressemble en termes de style. Il y a beaucoup de personnalisations, mais elles sont bien organisées et trouverez facile drsquoessayer et de tester ces options.
Widgets de processus – Options de lrsquoonglet Contenu il y a des options générales, des options drsquoanimation, des mises en page de processus et des outils de développement utiles ici, mais il y a aussi un guide que pouvez trouver des instructions et du soutien de lrsquoauteur du plug in. Options générales devez drsquoabord configurer les paramètres généraux du Widget lui même.
Ici, nous sélectionnons le nombre de colonnes, et si voulez que tous les éléments soient sur une ligne, sélectionnez le nombre drsquoéléments pour le nombre de colonnes. non, si placez moins de colonnes drsquoéléments, lrsquoélément se trouve sur 2 lignes ou plus, ou si sélectionnez plus de colonnes drsquoéléments, un espace est laissé dans la ligne.
Une fois que commencez à le construire, saurez probablement combien drsquoéléments sont nécessaires, donc jrsquoaime configurer maintenant, et bien sûr pouvez personnaliser ces paramètres plus tard. Un réglage important est la réponse de colonne, et nous pouvons ajuster lrsquoapparence du processus sur différents appareils de taille. Vous pouvez sélectionner par défaut ou
Éléments du processus. Par conséquent, si voulez que tous les éléments de chaque élément soient sur un plan différent, le décalage est réglé séparément.
La taille du détenteur drsquoarticle est la taille actuelle du champ 1, crsquoest à dire le nombre drsquoétapes, et nous verrons plus tard que trouverez drsquoautres éléments ici. (cette option se trouve également dans les options de style si nous voulons que toutes les boîtes à gants aient la même taille.) La typographie drsquoun article fait référence aux caractéristiques typographiques du nombre de paragraphes drsquoun article.
Lrsquoarrière plan est utilisé pour spécifier la couleur ou lrsquoarrière plan approprié pour lrsquoélément. De plus, nous pouvons définir un fond de gradient. voulez que tous les éléments aient le même arrière plan, nous lrsquoajusterons dans les options de style, et si voulez que différents éléments aient un arrière plan différent, nous lrsquoajusterons par les paramètres de lrsquoélément.
Maintenant, nous nrsquoAjoutons que la couleur de fond.
Par défaut, le projet srsquoaffiche comme un cercle, mais si avez besoin drsquoun carré ou drsquoune forme avec un angle particulier, le rayon de support de lrsquoobjet est où lrsquoajusterez. Lorsque la valeur est 0, le carré de lrsquoangle droit. Ajoutez ces valeurs pour voir comment lrsquoangle change. supprimez ces valeurs, obtenez un autre cercle. Tous les angles ne doivent pas être les mêmes, pouvez définir des valeurs différentes pour chaque angle.
Le type de bord, la largeur et la couleur se réfèrent aux éléments de bord. Le type de bord est Nobody lorsque ne voulez pas de bord. Tous ces paramètres sont également disponibles dans les options de style si voulez que tous les éléments soient les mêmes.
Nous venons de voir comment changer lrsquooffset, et maintenant nous avons deux options qui nous permettent de changer lemplacement de la seule ligne menant au processus suivant. Le décalage de la ligne supérieure est utilisé pour déplacer la position de la ligne (haut bas) et la rotation de la ligne est utilisée pour la tourner. Comme pouvez le voir dans les notes ci dessous, nous avons tourné la ligne
Nrsquoest plus perpendiculaire à lrsquoélément. Vous nrsquoavez que ces paramètres pour le projet lui même.
Ce que nous avons délibérément omis au début, crsquoest lrsquooption type drsquoicône, que nous devons ajouter de la Bibliothèque au projet, ou charger lrsquoicône SVG.
Notez ce qui se passe ensuite, le numéro de séquence nrsquoest plus écrit au milieu de lrsquoélément, mais comme un cercle supplémentaire distinct. La typographie et la couleur des objets se réfèrent maintenant à lrsquoicône elle même. Ici, nous redimensionnerons chaque icône (dans lrsquooption taille typographique) et la couleur.
Une autre chose que nous nrsquoavons pas examinée en détail ci dessus est lrsquoimage de fond de lrsquoélément, comme le deuxième élément dans lrsquoexemple:
Chaque image de fond a des paramètres spécifiques sur la position, la taille et si elle est simple ou a un effet de défilement (options incluses). Vous aurez toutes ces options lorsque utiliserez lrsquoimage de fond.
Après avoir défini les options générales, nos widgets de processus sont les suivants:
Voir les options drsquoanimation un widget de processus peut avoir une animation: les éléments sont chargés lrsquoun après lrsquoautre et affichés dans le même ordre, où nous ajustons si nous en avons besoin. Options de mise en page deux options de mise en page sont disponibles: une vue horizontale et une vue verticale du processus. Jusqursquoà présent, nous avons tout affiché horizontalement. Cependant, si sélectionnez affichage vertical, les options sont identiques. La seule chose à noter est le nombre de colonnes (dont nous avons discuté dans les options générales). nous voulons que les éléments soient placés lrsquoun après lrsquoautre dans une colonne, le processus vertical a toujours une colonne. Puisque nous avons défini trois colonnes pour lrsquoexemple, parce que nous avons 3 éléments, sans changer les colonnes, notre Widget ressemble à ceci:
Oophyte
Vous, si on met en place une colonne, tout se passera comme drsquohabitude:
Cette option nous permet de visualiser les widgets en Code court si nécessaire.
Comme nous lrsquoavons mentionné précédemment, ici nous pouvons trouver la documentation et lrsquoaide pour le Widget lui même de lrsquoauteur du plug in.
Widget de processus – onglet styles options lrsquoonglet styles offre des options pour définir le style de la section processus. Comme nous lrsquoavons déjà dit, tout ce qui est mis en place ici srsquoappliquera à tous les éléments de notre processus, à lrsquoexception de ceux qui ont un contenu différent sur lrsquoélément lui même. Ici, pouvez trouver différentes options qui se répètent dans lrsquoélément lui même, comme la couleur, la typographie, lrsquooffset. La seule chose qui nrsquoexiste pas dans lrsquoélément est lrsquoalignement qui spécifie comment le titre et le texte sont centrés. voulez que tous les éléments soient les mêmes, pouvez ajuster le style ici. Dans notre exemple, nous modifions principalement les éléments parce que nous avons des couleurs de fond, des tailles et des emplacements différents. Nous définissons ici la couleur du projet, la couleur de lrsquoicône grise par défaut, qui est maintenant noire.
Les options de style de ligne traitent des styles de ligne: Nous avons différents types et nous pouvons ajuster la couleur et lrsquoépaisseur.
Espacement des styles, espacement au dessus des sous titres, espacement au dessus du texte et remplissage autour du texte. Ce remplissage autour du texte peut « réduire » le contenu en insérant le remplissage dans un champ qui ne peut pas afficher le texte. Nous nrsquoavons ces paramètres que si notre article contient des icônes insérées, crsquoest à dire si nous avons des champs supplémentaires où se trouvent les nombres. Le réglage fait référence au numéro et au champ dans lequel il se trouve. La couleur du support supplémentaire est la couleur du champ où le numéro du support supplémentaire et lrsquoimpression sont liés au Rego.
Lrsquoapparence du numéro lui même. La taille de la cage supplémentaire est la taille du champ, et avec lrsquoaide de la position de la cage supplémentaire, nous pouvons changer la position du champ. Nous pouvons également ajouter un arrière plan pour les champs drsquoun élément normal, mais nous ne pouvons pas ajouter un arrière plan pour chaque champ ici individuellement, qui srsquoapplique généralement à tous les champs. Nous avons ajouté une image de fond.
Par exemple, voyons si nous nous comprenons et, à partir de la démonstration, nous pouvons voir comment certains processus ont été élaborés. Cela aide à créer votre propre et à savoir immédiatement où définir quoi. Nous avons montré un exemple horizontal. À première vue, nous pouvons remarquer que nous avons 3 colonnes, dont lrsquoélément est une icône un champ supplémentaire avec des nombres nous dit que lrsquoélément est une icône, pas une image, parce que nous avons dit que cela nrsquoapparaîtra que lorsqursquoil apparaîtra. Parce que les éléments ont des couleurs différentes, nous savons que ces paramètres sont effectués dans lrsquoélément lui même, pas dans les options générales. Nous pouvons également remarquer que les décalages sont réglables parce que tous les éléments ne sont pas dans le même plan. Toutes les icônes et le texte ont la même couleur, nous disant que crsquoest défini dans les options de lrsquoonglet style.
Le deuxième exemple, bien qursquoil puisse sembler plus complexe, est plus facile à mettre en oeuvre. Ici, les lignes de la page sont divisées en deux parties. Lrsquoimage à gauche et le flux à droite. Le processus a une disposition verticale, ce qui signifie que le nombre de colonnes dans le processus est 1 et que les cinq éléments sont placés lrsquoun après lrsquoautre. Tous les éléments sont disposés symétriquement en dessous lrsquoun de lrsquoautre, ce qui signifie qursquoaucun décalage nrsquoest défini. Tous les textes ont les mêmes caractéristiques, de sorte que les styles sont définis dans lrsquoonglet styles. Ici, nous pouvons voir que chaque élément a une image de fond (le nombre nrsquoa pas drsquoautres champs), mais nous pouvons également remarquer que le nombre nrsquoest pas
Par défaut, au centre de lrsquoélément. Il y a une technique pour cacher les nombres au cas où ne voudriez pas qursquoils apparaissent. Il suffit de définir la taille typographique du projet à 0 Px dans lrsquoonglet styles des options générales. De cette façon, les chiffres ne seront pas affichés.
Cela peut être utile si ne voulez pas afficher le processus, mais simplement utiliser ce Widget pour drsquoautres besoins, et voir des nombres ou des étapes peut déranger. Lrsquoajout de widgets de processus à votre site Web à lrsquoaide du plug in Qi drsquoelementor est non seulement simple, mais aussi amusant et permet drsquoexprimer votre créativité. Nous encourageons à continuer drsquoexplorer des façons drsquoenrichir la conception et la fonctionnalité du site. votre site se concentre principalement sur le contenu visuel, voudrez peut être aussi en savoir plus sur l’ajout de pages et de lignes de pleine largeur au site WordPress, ou si voulez une meilleure structure de contenu, pourriez être intéressé à en savoir plus sur les onglets WordPress. Comme nous lrsquoavons mentionné précédemment, le plug in Qi offre 60 widgets gratuits, de sorte que lrsquoessai et lrsquoexpérimentation de nouvelles possibilités ne constituent pas une menace pour votre budget, mais il ne peut que inciter à améliorer votre site et à ajouter plus de fonctionnalités utiles. Nous espérons que cet article sera utile. préférez, nrsquohésitez pas à lire certains de ces articles! Comment supprimer des produits connexes dans woocommerce 4 façons simples de créer des boutons WordPress comment configurer la barre de notification WordPress en quelques étapes
