Comment utiliser Divi pour concevoir une excellente expérience de travail pour votre site freelance

Montrer votre expérience de travail et vos compétences en ligne est une excellente façon de se démarquer des pigistes. Avec Divi, vous pouvez créer une chronologie unique pour voir votre historique de travail de façon claire et professionnelle. De plus, avec le module de compteur circulaire de Divi, vous pouvez ajouter une infographie animée pour mettre en évidence vos compétences. Dans ce tutoriel, je vais vous montrer comment utiliser Divi Builder pour concevoir une excellente expérience de travail et des sections de compétences pour votre site Web. On y va. Voici un aperçu de ce que nous allons créer dans ce tutoriel. Créez votre propre section de titre créez une section de titre et utilisez un formulaire texte pour ajouter des lignes aux colonnes. Saisissez le HTML suivant pour le contenu du formulaire texte:

C’est à moi.

Éducation, expérience professionnelle et certaines compétences

Prévention des infractions. Le conservateur non nul doit agir immédiatement. Thalamus ou vestibule thalamique; Donec velit neque, encanteur sit amet aliquam Vel, ullamcorper sit amet ligula. Le diamètre du vestibule et la taille du véhicule dépendent de la cabine. Donec rutrum congue Leo eget malesuada.

Mettre à jour les paramètres de l’onglet conception du formulaire texte comme suit:
Police de texte: source sans pro taille du texte: 16px Parce que nous avons une tête H2 et une tête H3 dans notre contenu, nous devons les concevoir en même temps. Titre 2 Police: étroite archive titre 2 poids de police: gras titre 2 style de police: tt titre 2 taille du texte: 24 Px titre 2 couleur du texte: # 06a08c titre 3 caractères: Julius sans un titre 3 poids de police: gras titre 3 style de police: tt titre 3 taille du texte: 62px Titre couleur du texte 3: # 3d394b Mettre à jour les paramètres de ligne immédiatement après l’entrée du compte
Ligne personnalisée: – 30px en haut, – 30px à gauche remplissage personnalisé: 30 Px à droite, 40 Px en bas Nous devons créer une ligne de droite pour la ligne de temps continue sur la deuxième colonne. Pour ce faire, nous créerons un bord droit sur ce module Blurb. Mise à jour comme suit: style de bord: largeur droite droite droite: 2px couleur droite: # 06a08c Maintenant, nous sommes prêts à copier notre module Blurb pour créer du contenu temporel supplémentaire. Copiez le module Blurb trois fois pour créer un total de quatre modules Blurb dans la première colonne. Copiez ensuite le même module Blurb et collez – le dans la deuxième colonne. Ensuite, supprimez la bordure droite du module Blurb qui se trouve maintenant dans la deuxième colonne. Maintenant, copiez le module Blurb deux fois pour créer un total de trois modules Blurb dans la deuxième colonne. Nous devons supprimer l’espace de ligne supplémentaire sous l’indication de la deuxième colonne en supprimant le bord droit des deux dernières étiquettes de la première colonne. Pour ce faire, utilisez ce qui suit pour mettre à jour les deux derniers modules Blurb de la première colonne: largeur du bord droit: 0px Maintenant, nous devons ajouter le bord gauche à la ligne pour attacher l’icône bleue dans la première ligne. Pour ce faire, mettez à jour les paramètres de ligne comme suit: style de bord: largeur de bord gauche: 2px couleur de bord gauche: # 06a08c Maintenant, Rafraîchissez légèrement l’espacement des lignes. Remplissage personnalisé: Haut 28px, bas 0px lorsque l’icône dépasse le bord gauche du voyage, nous devons ajouter une ligne de CSS personnalisé pour nous assurer que le reste de l’icône est visible. Pour ce faire, allez à l’onglet avancé des paramètres de ligne et saisissez ce qui suit dans la zone de l’élément principal: overflow: visible; Pour masquer la limite gauche à côté du dernier Blurb dans la première colonne, nous devons donner
Voir le reste de l’illustration. Concevoir et positionner le deuxième compteur de cercle mettre à jour les paramètres du deuxième compteur de cercle (compteur sous le compteur original) en utilisant ce qui suit: No: 80bar Background color: # 187d6f width: 330 Px Notez que j’ai réduit la largeur du compteur de cercle de 20 Px du premier. De cette façon, il s’adaptera bien au Centre du grand cercle. Nous devons maintenant régler le compteur de boucle à une marge négative. Marges personnalisées: – 338 Px Superior enregistre maintenant les paramètres et prévisualise la page. Vous devriez voir que ce cercle correspond à l’autre. Continuez avec les deux compteurs circulaires suivants. Concevoir et positionner un troisième compteur de cercle, mettre à jour les paramètres suivants: No: 70 Bar Background color: # eec42d width: 310 Px Notez que j’ai encore réduit la largeur du cercle de 20 Px. Il s’agit d’assurer une distance égale entre les cercles qui se chevauchent. Marges personnalisées: – haut 318 Px Notez que les marges personnalisées sont également réduites de 20 Px pour tenir compte de l’espacement vertical correct entre les cercles qui se chevauchent. Concevoir et positionner un quatrième compteur circulaire, mettre à jour les paramètres suivants: numéro: 90 couleur de fond de barre: # 3d394b À ce stade, vous voudrez peut – être inclure le numéro au Centre du compteur circulaire. Dans ce cas, il suffit de mettre à jour la couleur du texte en noir. Couleur du texte: foncé en fait, vous pouvez choisir d’afficher n’importe quelle valeur dans les quatre compteurs circulaires de cette façon. Assurez – vous simplement de sélectionner un seul texte foncé afin que vous n’ayez pas à chevaucher les chiffres. Largeur: 290 Px Marges personnalisées: – 298 Px en haut, 80 Px en bas pour le dernier module circulaire, vous n’avez pas seulement besoin de marges
Pour créer une troisième étiquette, copiez l’étiquette que vous venez de créer et mettez à jour ce qui suit: Title: WordPress icon color: # eec42d title text color: # eec42d Ajoutez une quatrième étiquette couleur pour créer une quatrième étiquette, copiez l’étiquette que vous venez de créer et mettez à jour ce qui suit: Titre: couleur de l’icône WordPress: # 3d394b titre couleur du texte: # 3d394b Enregistrer les modifications. Comme dernière touche, ajoutez un séparateur dans la zone, retournez à la configuration de la zone et ajoutez un séparateur pour ajouter une texture de fond comme suit: séparateur: style du séparateur supérieur: voir la couleur du séparateur de capture d’écran: rgba (6160140,0.08) hauteur du séparateur: 1100 px C’est tout. C’est le résultat final. Une fois la conception de l’emballage terminée, tout ce que vous avez à faire est de retourner et de mettre à jour vos icônes, votre contenu, vos compétences, etc. Selon vos besoins, vous êtes prêt. Si vous devez remplacer l’icône par votre propre icône \/ image, soyez assuré. Assurez – vous simplement qu’ils sont 40px X 40px pour s’adapter à cette disposition. J’espère que cette section sur l’expérience de travail vous aidera à vous démarquer en tant que pigiste. Je pense que cette disposition s’applique également à d’autres cas d’utilisation. Par exemple, vous pouvez utiliser cette disposition de ligne de temps pour afficher l’historique de l’entreprise sur la page d’information. J’ai hâte d’entendre vos commentaires. Bonjour!