Site Web de portfolio : Elementor et WordPress, conception Web sans code

1. Introduction: Nous sommes tous des créatifs ici. Nous avons tous de grands talents et nous avons tous besoin d'un portfolio en ligne afin de pouvoir montrer au monde entier ces incroyables compétences. Vous êtes peut-être photographe, illustrateur ou graphiste. Quoi qu'il en soit, votre portefeuille doit provenir de vous. Cela devrait mettre en valeur votre personnalité. Si vous utilisez Wordpress, vous pouvez commencer avec un modèle prédéfini, ce qui vous fera perdre tout votre style personnel. Cependant, si vous commencez par une page blanche, tout ce que vous voulez peut arriver. Nous pourrions faire tout cela en utilisant le générateur de pages élémentaire. Jetons donc un coup d'œil à celui-ci. Je suis John Wolfgang Miller. Je suis designer professionnel depuis 20 ans et je suis là pour vous aider à créer votre portfolio en ligne. Wordpress peut devenir un peu complexe, surtout si vous ne l'avez jamais utilisé auparavant. Dans ce cours, je vais vous apprendre à utiliser l'Elemental Page Builder s'agit d'un programme en ligne où aucune connaissance en codage n'est nécessaire. Tout se résume au plaisir du design créatif. À la fin de tout cela, vous aurez les compétences nécessaires pour créer votre propre portfolio et lui donner votre propre style personnel. Et par conséquent, vous aurez le site Web le plus impressionnant au monde. Va te préparer une tasse de thé assieds-toi avec moi et commençons. 2. Projet de classe: Votre principal projet ici aujourd'hui est de créer un site Web de portfolio d'une seule page. Nous n'utiliserons la version gratuite d'Elemental ici, afin que vous puissiez en apprendre beaucoup sur l'utilisation ce programme sans avoir à payer quoi que ce soit Nous commencerons ensuite par la section d'ouverture de votre héros, montrant qui vous êtes et en quoi consiste votre portfolio. Ensuite, nous examinerons votre galerie d'images. Je vais vous montrer comment configurer un affichage de galerie très cool et vous expliquer les éléments élémentaires , les options d'animation et les points lumineux de l'image Lorsque cela sera terminé, vous créerez la section de pied de page de votre site Web où vous pourrez inclure tout contact ou lien vers les réseaux sociaux Lorsque la version de bureau du site Web sera terminée, je vous montrerai à quel point il est facile de tout faire fonctionner parfaitement sur tablette et mobile. Suivez chaque leçon une par une et voyez si vous pouvez construire vous-même chaque partie avant de passer à la suivante. Si vous souhaitez créer exactement le même site Web que celui que je crée ici, juste pour développer toutes vos compétences. Ou vous pouvez télécharger les images que j' utilise dans la section des ressources ici. Téléchargez l'intégralité de ce fichier et téléchargez-le dans votre médiathèque. Ou si vous vous sentez maintenant assez à l'aise avec Elementor, utilisez vos propres images et montrez-moi votre propre portfolio cool avec votre propre style cool Dans ce cours et dans tous mes cours, je vais aborder beaucoup de sujets différents et démontrer de nombreuses compétences différentes. Je vous recommande de lire et de mettre les vidéos en pause au fur et à mesure. Et si vous voulez que je reprenne une partie de ce cours, il vous suffit d'appuyer sur ce bouton de 15 secondes, suffisamment de temps pour pouvoir revoir la partie entière si vous rencontrez des problèmes de qualité vidéo Vous pouvez le voir ici dans Skillshare, nous allons simplement cliquer sur cette icône des paramètres Cog Il est réglé sur automatique et, selon la vitesse de votre connexion Internet, il se peut qu'il ne s'affiche pas avec la meilleure qualité possible. Essayez simplement de le changer en 720 ou 1080 pixels, et vous verrez instantanément un grand changement de qualité. Quand tu auras terminé tout le cours. Assurez-vous de télécharger un lien et une capture d'écran de votre site Web ici, dans la section projet. Je vais vous faire part de mes commentaires immédiatement. J'aime aussi recevoir les avis de tous mes étudiants pour voir ce qui a fonctionné le mieux pour vous dans ce cours. Venez ici et laissez-moi un avis complet. OK, commençons. 5. Portfolio : héros: Commençons par créer la section héros de votre site Web. Ce que je vais vous montrer ici, c'est comment ouvrir une page entière. Faites défiler la page vers le haut vers le haut. Choisissons la boîte flexible telle que nous la voulons. 50, 50. Choisissons l'une des deux colonnes qui ont été déposées dans notre conteneur. Il y a juste deux choses que nous voulons changer ici, la hauteur et la largeur. Tout d'abord, comme vous pouvez le voir, la hauteur est divisée ici, mais nous voulons que cela remplisse toute la page Il suffit de cliquer sur les points en haut et de nous assurer que le conteneur de modifications se trouve sur la gauche Passez ensuite à cette section où il est indiqué la hauteur minimale. Ensuite, dans ce petit menu déroulant sur la droite où il est écrit x, choisissez H. H représente la hauteur visuelle. Cela est exprimé en pourcentage par rapport à la hauteur que nous voulons qu'il occupe. 100 % de la page. Littéralement, il suffit d'écrire 100 ici. Vous verrez que chaque section est descendue tout en bas de la page. Nous avons trié notre taille. Ensuite, nous examinons à nouveau la largeur du contenu, ici sur la gauche, comme vous pouvez le voir, il est actuellement encadré. Nous ne voulons pas qu'il soit mis en boîte. Nous voulons qu'il soit sur toute la largeur. Comme vous pouvez le voir ici, vous avez une sorte de ligne pointillée puis un espace vide à gauche et à droite Nous le changeons en pleine largeur, il passe sur toute la largeur de la page. Cependant, vous pouvez toujours voir de petits espaces entre les deux. Il s'agit d'un paramètre par défaut dans Elementor, où il ajoute automatiquement une marge ou un rembourrage à chaque conteneur que vous placez sur la page Pour vous montrer rapidement comment modifier cela, il suffit de cliquer avec le bouton droit de la souris n'importe où sur la page et de rétablir la structure. Choisissez ensuite le contenant dans lequel vous souhaitez retirer le rembourrage Passons à la principale. Cliquez sur le niveau supérieur ici, le conteneur de stockage principal. Ensuite, venez ici, sur la gauche, dans le menu Avancé. Ce sont les deux sections que nous examinons ici. C'est à la fois une marge et un rembourrage. Ils sont définis sur l' élément ou les tailles par défaut, cependant, pour supprimer cette marge et ce rembourrage met simplement zéro ici Et faites de même pour le rembourrage Comme vous pouvez le voir, lorsque je change l'un d'entre eux, cela les change tous. Et c'est parce que, comme vous pouvez le voir ici, les valeurs sont liées entre elles. Si vous avez besoin de montants différents de chaque côté, cliquez simplement sur ce bouton pour les dissocier Ensuite, vous verrez que vous pouvez ajouter différents montants, 50 en haut, 50 en bas, mais toujours zéro à gauche et à droite, mais nous voulons zéro dans l'ensemble. Ensuite, vous pouvez choisir de le faire sur tous les conteneurs ici en les sélectionnant un par un. Maintenant, je vais ajouter trois choses différentes. Tout d'abord, je vais changer la couleur de fond du conteneur principal. Ensuite, je vais vous montrer comment ajouter une image sur le côté gauche et comment ajouter le texte sur le côté droit. Tout d'abord, commençons par la couleur de fond. Passons au conteneur principal ici dans la structure. Ensuite, sur la gauche, choisissez le style. C'est ici que vous pouvez modifier l'arrière-plan de l'ensemble de ce conteneur. En termes de type d'arrière-plan, plusieurs options s'offrent à vous. Classique, ce serait juste un dégradé de couleurs droit. Une couleur qui se fond dans une autre couleur, une vidéo ou un diaporama, c'est à dire que plusieurs images glissent de l'une à l'autre Joue toi-même avec ça. Découvrez ce qui fonctionne pour vous. Cependant, je veux rester simple et simplement ajouter une couleur classique. Je vais cliquer sur cette icône. Vous avez maintenant deux choix. Vous pouvez choisir d'ajouter une couleur ou d'ajouter une image entière. Je recherche une couleur dans cette section. Par conséquent, je vais passer à cette case grise barrée qui indique qu' aucune couleur n'a été sélectionnée. Il s'agit du sélecteur de couleurs. Vous pouvez choisir votre couleur ici ou saisir manuellement un code hexadécimal Tout d'abord, celui-ci choisira la couleur et voici l' opacité de cette couleur Réglons celui-ci à 100 % de la couleur sélectionnée ici. Eh bien, c'est noir, c'est pourquoi il est devenu 100 % noir. Si je fais glisser celui-ci vers la gauche et la droite, cela me donnera différentes options ci-dessus. Maintenant, je recherche une couleur rose, magenta. Je vais le faire glisser jusqu'à ce point. Cependant, comme vous pouvez le voir ici, je suis toujours en train de sélectionner la version noire de cette couleur. Si je prends simplement cette petite icône et que je la fais glisser de haut en bas, cela me permettra de sélectionner ici et de choisir la couleur que je recherche. Parce que cette icône est en haut. Je peux maintenant jouer avec celui-ci. Choisissez simplement une couleur qui représente vraiment qui je suis et mon style. L'autre option consiste à saisir manuellement un code hexadécimal ici. Vous ne savez pas ce qu'est un code hexadécimal, ou vous avez besoin de conseils pour choisir les couleurs, où les chercher. Laissez-moi une question dans la section de discussion ici et je vous répondrai dès que possible. Cependant, j'ai une couleur préférée. Ce que je vais faire, c'est le coller ici. Je vais mettre en évidence tout le texte ici. Ensuite, collez la couleur que j'ai choisie, c'est-à-dire 00f. C'est la couleur que j'utilise pour l'ensemble de mon image de marque. Ma carte de visite aurait cette couleur. Mon logo aurait cette couleur. Si vous avez choisi une couleur, il est important d'être uniforme. Je vais maintenant ajouter une image de fond pour le premier conteneur, celui de gauche. Revenez ici pour structurer et sélectionner ce conteneur. Maintenant, si vous souhaitez normalement ajouter une image, comme vous le faites lorsque vous venez ici, vous choisissez la section d'image ici dans Basic et vous la glissez et déposez dans le conteneur que vous souhaitez faire ressortir. Cependant, cela pose un problème. L'image ne remplit pas tout l'espace dont nous disposons pour ce conteneur. Ce n'est pas possible, car il sera affiché sur différents appareils, à différentes tailles, etc. Supprimons cette image, cliquez avec le bouton droit de la souris et choisissez Supprimer. Alors revenez ici à Container. Cliquez dessus. Ensuite, venez ici sur la gauche pour modifier le conteneur et choisissez Style. Assurez-vous que vous êtes de nouveau dans cette section d'arrière-plan à partir du type d'arrière-plan, choisissez Classique. C'est ici que nous allons choisir une image plutôt qu'une couleur comme arrière-plan. Cliquez ici sur le plus. Je vais cliquer ici pour sélectionner le fichier que je souhaite télécharger depuis mon ordinateur. Dans ce dossier, j'ai deux photos de moi. J'aimerais choisir celui-ci ici, et une fois qu'il sera téléchargé, il suffit de choisir Select. Comme vous pouvez le voir, cela a fait apparaître l'image de moi comme arrière-plan du conteneur. Par conséquent, il remplit tout le récipient. Heureusement, le résultat n'est pas tout à fait correct, n'est-ce pas ? C'est trop gros. C'est donc me couper la moitié du visage pour le modifier. Viens ici sur la gauche. Regardez ces sections ici. Positionnez, attachez, répétez et affichez le site. Tout d'abord, commençons par la position. Il est défini par défaut, mais c'est ici que vous pouvez choisir la position. Que vous vouliez que ce soit à gauche, à droite, en haut en bas, j'aimerais que ce soit au milieu. Je vais donc choisir le centre, le centre. Eh bien, c'est un très bon début. Cela semble donc une bonne chose en termes de répétition. Eh bien, cela signifie que vous pouvez avoir la même image répétée plusieurs fois à l'intérieur de la boîte. Ce n'est pas ce que je veux. Je vais alors choisir non à partir de la taille de l'écran, c'est le plus important. Plusieurs options s'offrent à vous. Vous pouvez choisir la couverture ou le contenu. À toi de choisir, c'est tout. Cela signifie que vous pouvez voir l'image dans son intégralité, et c'est pourquoi vous avez un espace vide en haut et en bas. Je vais choisir la couverture car, comme vous avez pu le constater, elle a parfaitement rempli la boîte. L'image se trouve maintenant tout en haut et en bas de la page, puis la seule division se trouve à gauche et à droite. Cependant, je peux tout voir. Je peux voir mon visage, mon ordinateur, mon bras, ma tasse. Tout va bien, donc je vais m'en tenir à celui-ci. Maintenant c'est fait. Eh bien, juste un petit conseil pour vous. Je recommande de continuer à le sauvegarder au fur et à mesure, car si votre ordinateur tombe en panne, vous pouvez revenir à ce que vous venez de faire Tu n'as pas besoin de le refaire pour le faire. Venons ici où il est écrit « Publier ». Cliquez sur cette petite flèche déroulante, puis sur Enregistrer le brouillon enregistré. Cela signifie que si votre ordinateur tombe en panne maintenant vous reviendrez toujours exactement à ce que vous avez OK, nous avons le côté gauche de notre héros. Travaillons du bon côté. Soulignons ce contenant. Ce que nous voulons faire ici , c'est ajouter du texte. Passons au point positif, choisissons le titre, puis faisons-le glisser vers le haut. Maintenant, cela vient d' ajouter déjà le texte par défaut à tous les paramètres par défaut. Vous verrez ici sur le côté gauche. Eh bien, tout d' abord, nous avons le titre, c'est le texte qui apparaîtra. Ce que je voudrais ajouter ici, c'est mon nom. Je vais donc faire appel à John Wolfgang Miller. Ensuite, nous allons choisir la balise HTML. Cliquez sur ce menu déroulant, et vous verrez H 1h2h3, etc. H est l'abréviation de Headed. Il s'agit d'une configuration pour des raisons de Google, pour des raisons de référencement. Cela signifie que H one est le titre de l'introduction, le titre de l'introduction de votre page. Ensuite, les autres titres que vous avez suivront ci-dessous. Vous choisirez H deux et H trois s'il s'agit d'un sous-titre, car c' est l'introduction de notre page qui est la principale Je vais choisir H one. Et un petit conseil car vous ne devriez vraiment avoir qu' un seul H sur la page et ce devrait être la première chose qui apparaisse. Toute question sur les titres, toute question sur les rubriques H one et le référencement Encore une fois, insérez cela dans les discussions et je vous répondrai dès que Nous allons maintenant examiner la position de ce texte à l'intérieur du conteneur. Revenons ici au conteneur, cliquez sur celui-ci, puis vous voulez choisir Layout. Ici, sur la gauche, nous examinons le contenu justifié et nous examinons les éléments d'alignement. Tout d'abord, justifiez le contenu. Cela permet de choisir l'endroit où il apparaîtra dans le conteneur pour lequel il est déjà configuré pour commencer. Nous pouvons choisir le centre ou la fin. Je vais juste te montrer la fin. C'est tout en bas que nous le voulons. Nous voulons qu'il soit au centre. Choisissons alors cela, une ligne d'articles. Eh bien, cela signifie encore une fois, qu'il est automatiquement configuré pour commencer à la fin, ce côté ou encore une fois dans le sens du terme. Choisissons le centre. J'ai trié la position de mon texte. Cliquons à nouveau sur le texte. Vous pouvez soit choisir Heading up here dans la structure. En fait, je clique simplement sur le texte lui-même. Alors viens ici pour te coiffer. C'est ici que nous pouvons modifier la façon dont ce texte apparaît. Nous pouvons choisir l' alignement que nous voulons il soit aligné à gauche, puis à nouveau centralisé. Nous pouvons changer la couleur, et nous pouvons changer la typographie utilisée pour le moment, elle est alignée à gauche, et j'en suis content Cependant, la couleur, eh bien, je ne veux pas que ce soit le noir sur le fond d'un agenda. Cliquons sur celui-ci. Faisons simplement glisser cette petite icône vers le haut à gauche qui choisira le blanc pur. Le blanc pur est toujours représenté par six, quelle que soit la couleur que vous avez sélectionnée ici, le coin le plus éloigné de ce côté, et ce côté seront toujours du blanc pur et du noir pur. Eh bien, je veux du blanc pur. Ensuite, je vais déplacer la structure ici pour qu'elle ne couvre pas mon texte. Ensuite, je vais choisir cette icône en forme de stylo ici. Pour la typographie, c'est ici que vous pouvez choisir tout ce que vous voulez concernant la typographie affichée Tu peux choisir la famille. Ici, vous pouvez choisir le système. Ce sont les éléments de base que vous voyez partout. Ceux de Google, ceux qui sont gratuits de Google. Ensuite, ça continue pour toujours. C'est vrai, il y a peut-être d'autres paramètres dedans, mais oui, comme vous pouvez le voir, il y a juste beaucoup de polices différentes ici. Nous y reviendrons. Ce que je vais faire, c'est sélectionner un que je connais déjà. Cela va de la même manière que la couleur que j'ai choisie comme arrière-plan. J'ai choisi une police que j'utilise pour l'ensemble de mon image de marque. Si vous souhaitez savoir où trouver des polices, où trouver des idées de typographie Encore une fois, il suffit de m'envoyer un message dans les discussions, mais je vais écrire dans celui-ci que je connais et que je sais que j'aime, il s'appelle Bunge C'est une excellente police parce qu' elle me représente vraiment. Il est très grand, très audacieux et ressemble au style des années 80 Avec le texte en blanc uni, il fonctionne très bien sur le fond lumineux d' Agena Choisissons Bunge. Vous avez d'autres options ici. Ce poids unique est approprié si vous en avez choisi un qui a plusieurs poids différents, comme Futura ou Helvetica, ils auront plusieurs options différentes de lumière à extraction fine Il ne s'agit que d'un seul texte en gras qui le laissera tel quel par défaut en termes de transformation. Eh bien, vous pouvez choisir s'il doit être majuscules ou en minuscules Cela signifie simplement que la première lettre de chaque mot est en majuscule. Cependant, comme vous pouvez le constater, il s'agit déjà d'une police en majuscules. Je n'ai besoin de rien de tout ça. La seule chose que je vais regarder à l'intérieur ici est la taille. C'est trop petit pour le moment, je vais simplement faire glisser celui-ci vers la droite et l'agrandir beaucoup. Je pense qu'il y a une question sur la taille que je veux qu'il soit. Je veux qu'il occupe beaucoup d' espace à l'intérieur de ce conteneur. Comme vous pouvez le constater, cela pose un gros problème dans où il est trop grand pour rentrer dans le contenant. Ce que nous devons faire ici, c'est quelque chose pour lequel il travaille, mon style convient à mon nom. Pour ce faire, je vais diviser un peu le mot. Je vais juste vous montrer quelques trucs de base très simples en matière de codage, je vous le promets. Pas de code, mais celui-ci est très simple et il est bon que vous le connaissiez. Venez ici pour accéder au contenu. C'est le titre que nous avons ici. Ce que je veux faire, c'est diviser le mot Wolfgang en deux mots, Wolf et Gang Pour ce faire, je viens de sélectionner dans cette boîte de titre le mot Wolfgang et de cliquer au milieu de celui-ci Tout ce que je vais faire ici, c'est mettre du code. Tout d'abord, sur votre clavier, choisissez ce support, celui pointu, qui, sur un Mac Book, se trouve en bas à la lumière inférieure, choisissez le côté gauche Écrivez ensuite ces deux lettres R puis choisissez celle qui se trouve sur le côté droit. Voilà. Vous verrez qu'il a séparé Wolf et Gang en deux mots distincts. Mais bon, c'est foutu maintenant John et Wolf sont sur la même ligne. Comment vais-je résoudre ce problème ? Eh bien, tout d'abord, je vais utiliser les mots John et Wolf pour supprimer l'espace qui s' y trouvait déjà et ajouter une autre pause. Allons-y. J'aime vraiment ça. Cela fonctionne vraiment bien maintenant. John Wolf Gang Miller. Je pense que même le mot Miller ne se divise pas aussi bien, mais il fait six lettres. Je vais mettre un petit écart entre le L et le L. Encore une fois, même problème entre le gang et Mill. Faisons une pause là-dedans. Allons-y, John Miller. Cela me résume vraiment, qui je suis et vous savez quoi ? Je pense que son affichage fonctionne très bien. Un petit conseil pour toi ici. Cette petite flèche sur le côté gauche est un excellent élément ou paramètre pour masquer le panneau. Je clique dessus, tout le reste disparaît, y compris la fenêtre de structure. Maintenant, je peux voir exactement à quoi cela ressemblerait pour tous ceux qui visitent mon site Web, car c'est ce qu'ils verraient. Maintenant, il suffit de cliquer à nouveau sur la flèche pour récupérer tous les outils. Alors enregistrons-le à nouveau. Ici, sur Save Draft, nous avons maintenant une section de héros terminée. Passons à la galerie de votre portfolio. 6. Portfolio : grille de galerie: Nous allons maintenant ajouter une autre section en dessous du héros. Faisons défiler la page vers le bas. Ce que nous allons examiner ici, ce sont deux choses, les conteneurs et les réseaux. Il s'agira essentiellement d'une grille à l'intérieur un conteneur, puis de conteneurs à l'intérieur d'une grille. Je vais vous montrer comment utiliser ces différents éléments et cela vous montrera une façon très cool de présenter l'ensemble de votre galerie. Nous allons commencer par un conteneur ordinaire. Cliquez sur le signe plus, choisissez Flex Box, puis choisissez simplement celui-ci. Un pont de pointage à colonne unique. Alors passons à l'essentiel. Choisissons la grille et faisons-la glisser dans le conteneur. Il s'agit d'une grille. La façon dont fonctionne une grille est que vous pouvez choisir le nombre de colonnes et le nombre de lignes dans chaque colonne. C'est toujours exactement la même largeur. Cela vous donne une belle mise en page uniforme. Je vais opter pour quatre colonnes. Je veux que tout cela apparaisse sur une seule ligne. Voici à quoi ressemble ma grille. Maintenant, ce que je veux faire ici, c'est ajouter un certain nombre d'images différentes afin créer une grille d'affichage vraiment cool qui montre un grand nombre de choses que j'ai faites au ma carrière, comme vous le feriez normalement. Encore une fois, vous arriverez ici au point positif et vous déposerez une image qui déposerait une image dans cette colonne. Cependant, si j' essaie ensuite de déposer une autre image dans la même colonne, elle ne restera pas là, elle passe automatiquement à la partie suivante de la grille. Vous ne pouvez avoir qu'un seul élément dans chaque colonne. Cependant, je souhaite avoir plusieurs images différentes. C'est ce que je dois faire. Encore une fois, revenez à l'avantage choisissez un contenant et déposez-le dans la colonne. Ce que vous pouvez voir ici est un conteneur à l'intérieur d'une colonne de la grille qui se trouve à l'intérieur d'un conteneur principal. Cela signifie maintenant qu' avec ce conteneur, je peux y déposer plusieurs images différentes. Ce que je vais faire, c'est supprimer ces deux images qui sont là d'elles-mêmes. Je vais passer le curseur sur cette icône rose, cliquer avec le bouton droit de la souris et choisir Supprimer Idem sur ce clic droit. Supprimer. Maintenant, ce que je veux faire, c'est déposer une image dans ce conteneur, ici à gauche vers les widgets, faire glisser l'image et la déposer dedans. Ensuite, si je veux en ajouter une autre en dessous, encore une fois, passez ici au plus, sélectionnez l'image et déposez-la dedans. Comme vous pouvez le voir ici, nous avons la petite ligne rose qui se trouve en haut ou en bas. Cela signifie qu'il se trouvera à l'intérieur de ce conteneur, au-dessus ou en dessous de l'image qui s'y trouve. Déposons-le simplement ci-dessous. Maintenant, nous avons deux images à l'intérieur d'un conteneur qui se trouve dans cette colonne. Je pense que je veux trois ou peut-être quatre images dans ce conteneur. Je peux juste monter ici pour ajouter un élément et en ajouter un autre. Mais une façon plus rapide de le faire, c' est de venir ici pour structurer. Nous sommes à l'intérieur du conteneur et nous savons que nous avons ces deux éléments à l'intérieur du conteneur. Vous pouvez voir qu'il est configuré ici avec un petit menu déroulant où les éléments sont définis pour montrer ce qu'il contient. me suffit de survoler la dernière image, de cliquer avec le bouton droit de la souris, puis de choisir Dupliquer Je vais le faire deux fois. J'ai maintenant quatre images à l'intérieur de ce conteneur. Maintenant, ce que je veux faire, c'est le recréer trois fois de plus. Encore une fois, tout cela va prendre beaucoup de temps à tout faire manuellement. Tout ce que je vais faire, c'est sélectionner ce conteneur ici. Je vais juste désactiver la flèche pour ne pas voir ce qu'elle contient. Ensuite, je vais cliquer dessus avec le bouton droit de la souris. Dupliquez cette date, c'est ce que j'ai ici. Maintenant, si je clique sur la flèche, ai une grille qui sera configurée et qui affichera toutes les différentes parties de mon portfolio. Revenons d'abord à l'éditeur. Eh bien, comme vous pouvez le voir sur l'espacement, c'est encadré et c' est ce que nous voulons Nous voulons en fait un peu d'espace blanc chaque côté de ce conteneur principal, car du point de vue du design, espaces blancs sont très importants. Cela aide à encadrer tout ce qui s'y trouve. Tout d'abord, je dois juste jouer un peu avec l'espacement à l'intérieur de ce conteneur principal De toute évidence, nous avons un petit espace blanc à gauche et à droite. Ajoutons-en un en haut et en bas. Choisissons le conteneur principal. Viens ici pour avancer à nouveau. Nous allons jouer avec la marge et le rembourrage Ce que je veux faire, c'est dissocier les valeurs des deux. Mettons un rembourrage de 100 pixels en haut et de 100 pixels en bas Comme vous pouvez le constater, nous avons maintenant un bel espace blanc sur toute la grille qui est superbe. Cela lui donne juste un peu plus d'espace lorsque vous avez plusieurs images, c'est très important. Maintenant, la seule chose qui ne va pas, et écoutez, je suis graphiste, je remarque toujours ce genre de choses, c'est que je veux que ce soit égal. Vous pouvez constater que l' espace entre ces deux images est plus court que l'espace entre chaque colonne. C'est encore une fois parce que le paramètre par défaut de chaque conteneur se trouve dans cette grille. Passons au conteneur 1, passons à Advanced, et remettons tout cela à zéro. Encore une fois, vous pouvez voir que tout s'aligne correctement. Ensuite, je vais écrire pour cliquer sur la première copie du conteneur , puis sur le style de style du conteneur restant. Maintenant, nous y voilà. C'est parfait. Je n'ai plus mal à la tête d'un graphiste. Je peux voir un espace absolument uniforme entre les colonnes et les rangées de. Maintenant, je veux juste commencer à ajouter chaque image individuelle. Passons à la première image ici. Cliquez sur l'icône en forme de crayon, en haut à droite sur la gauche, où il est écrit « Choisir à nouveau l'image Vous y verrez juste l'image de placement en gris . Au début, n'est pas ce que nous voulons, évidemment. Cliquons sur cette image. Lorsque j'ouvre la médiathèque, je peux voir toutes les images que j'ai téléchargées. Si vous voulez en savoir un peu plus sur le téléchargement d'images, nous allons consulter mon profil sur le partage des compétences et regarder cette vidéo qui vous expliquera rapidement ce qu' il faut faire lorsque nous téléchargeons des images sur Wordpress Ce qui compte, c'est le ratio entre cette image, la taille du fichier et le nom du fichier. Regardez cette courte vidéo, vous en saurez un peu plus. Lorsque toutes vos images sont prêtes à être téléchargées , cliquez ici et sélectionnez Fichiers. Ce que j'ai ici, ce sont trois dossiers d'images différents. Ils ont tous des ratios différents, certains sont de trois par deux, autres de deux par trois et d'autres sont carrés. Ouvrez simplement chacune d'entre elles pour vous les montrer. Permettez-moi de remplacer cela par une liste de trois par deux. Chaque image que j'ai ici est réglée selon ce ratio exact, trois par 23 par 23 par deux. Ensuite, j'ai les mêmes images qui sont toutes configurées deux par trois. Tous les poumons. Cela a fonctionné deux par trois de toute façon. Alors le dernier choix que j' ai est le carré un par un. Encore une fois, les mêmes images, le même contenu, présentés de différentes manières. Ce que je vais faire ici, c'est télécharger chacune de ces images. Je ne vais pas les utiliser toutes, mais j'ai veillé à ce que toutes mes tailles de fichiers image soient aussi petites que possible, cela ne prenne pas trop de place dans le backend de mon site Web. Tout d'abord, choisissons tous les carrés, les plus légers, chacun d'entre eux. Choisissez Ouvrir. Quand ils auront tous été téléchargés. Revenez ici pour télécharger à nouveau des fichiers, sélectionner des fichiers, choisir deux par trois et les télécharger tous. Puis le final 13 par deux. Téléchargez-les également. Lorsqu'ils sont tous téléchargés, il vous suffit de choisir le premier que vous souhaitez voir apparaître dans votre galerie. Je vais en choisir un trois par deux. Je pense que je vais choisir celui-ci ici. Galerie d'art 51. Vous vous demandez peut-être pourquoi j'ai téléchargé des ratios différents pour les mêmes images ? Eh bien, c'est juste pour être un peu plus créatif. Bien qu'il soit important d'avoir tous les espaces entre les deux, lignes et les colonnes identiques, je ne pense pas qu'il soit important d'avoir la même taille ou le même ratio des images. Laisse-moi juste te montrer. Choisissons le numéro deux. Image numéro deux dans cette colonne. Ici, je veux ajouter une image carrée. Eh bien, ce sont les premiers que j'ai téléchargés. Choisissons l'un d'entre eux. Peut-être que celui-ci plonge aux Fidji. Ensuite, je veux sélectionner un ratio de deux par trois, une image de portrait. Cliquons sur Modifier l'image. Choisissez l'image ci-dessus. Ce sont les deuxièmes que j'ai mis en ligne, n'est-ce pas ? Faisons défiler la page vers le bas jusqu' à l'une d'entre elles. Peut-être celui-ci ici. Oui, c'est deux par trois. Et c'est une fille qui porte un t-shirt que j'ai conçu pour une entreprise appelée Get. Sélectionnons-le. Nous y voilà. Nous avons maintenant un peu de variété en termes d' image, de forme et de taille. Cela signifie également que ce n'est pas toujours le cas ici , ce qui attire un peu plus votre attention, qui fait ressortir une chose plus qu'une autre. En regardant cela, vous savez ce que je pense, étant donné que j' ai beaucoup de tailles différentes dans cette colonne, je pense que trois images suffiraient probablement. Je ne pense pas en avoir besoin de quatre. Descendons et supprimons ce dernier. Cliquez avec le bouton droit sur l'icône et choisissez Supprimer. Maintenant, je vais simplement ajouter trois images différentes à chaque colonne, des images avec des ratios différents. Ensuite, nous pouvons jouer avec la position de chacun d'entre eux et voir ce qui fonctionne le mieux en termes de création d' une grille créative. Je vais simplement commencer par supprimer la quatrième image de chaque colonne. Supprime celui-ci. Il se peut que je change d'avis à un moment donné. Cela fonctionnera peut-être mieux. Si je voulais peut-être 43 images sur deux pour en laisser quatre dans cette colonne, c'est ce qui se produit. Ce n'est pas un problème. Je viens d'ajouter un autre widget d'image. Mais maintenant, je vais simplement sélectionner une autre variété d' images qui mettent le mieux en valeur mon portfolio de design graphique. Jouez avec cela et essayez de choisir une bonne variété d'images. Certains peuvent être un peu plus éloignés, autres un peu plus rapprochés, autres avec des personnes, d' autres pas. C'est bien d'y ajouter un peu de variété. Choisissez simplement ce que vous vous sentez le mieux. Montre qui vous êtes, votre style, vos éléments mis en évidence. Vous n'êtes pas obligé de montrer tout ce que vous avez fait au cours de votre carrière. Il suffit de choisir les meilleurs morceaux. Maintenant, ce qui fonctionne vraiment bien cette grille, c'est que j'ai un peu de variété. Si je clique simplement sur la flèche, tout se trouve dans une seule page de bureau. J'aime bien le fait que lorsque les gens parcourent mon site Web, ils voient cette section consacrée aux héros où ils voient mon nom et moi. Et puis, lorsqu'ils défilent vers le bas, ils peuvent tout voir en une seule fois. C'est très cool. Cependant, je pense que je peux toujours jouer avec l'affichage, avec la structure de tout. Cliquons sur la flèche. Je pense que ce que je veux, c'est que comme nous avons un alignement différent en bas de chaque colonne, je ne pense pas que nous devrions avoir le même alignement en haut. Ce que je vais faire, c'est simplement centraliser le contenu de chaque conteneur dans chaque colonne Revenons à la structure ici. Même si je ferme le menu de chacune d'elles ici, la première version 1.1 que je veux faire pour chacune d'entre elles, clique sur le conteneur, passe ici à Layout, puis choisis Justify. Le contenu est de nouveau au centre. Et puis alignez à nouveau les éléments au centre. Maintenant, cela n'a rien fait bouger, pourquoi ? Parce que c'est dans le réseau. Et c'est en fait la plus haute colonne de toutes. Cependant, je clique avec le bouton droit sur ce conteneur, choisis Copier, puis je choisis Coller. Dans les trois prochains, nous verrons ce qui se passera. Style de collage. Nous y voilà. Collez le style A Style. Maintenant, si je clique sur ma petite flèche de masquage du panneau, c'est parti. Ça a l'air vraiment génial. C' est juste un peu plus créatif. Maintenant, lorsque quelqu'un fait défiler la page vers le bas depuis le haut, voit tout s'afficher il voit tout s'afficher selon un magnifique motif pas nécessairement dans une grille, mais dans une grille Si cela a du sens créatif, il suffit de cliquer sur la flèche ici. Maintenant, juste une petite chose. Plus je regarde ça, je ne sais pas. Je pense que c'est juste un peu bizarre en termes de placement de chaque image. Je pense que je veux qu'il soit plus grand sur les deux au centre , puis un peu plus court sur ceux de gauche ou de droite Ce que je vais faire, c'est montrer à nouveau le panneau. Tout ce que je vais faire, c'est simplement faire glisser une image d' un endroit à un autre, juste pour jouer avec elle. Tout d'abord, je veux que cette image de la fille dans la deuxième colonne en haut. Tout ce que je vais faire, c'est passer le curseur sur l'icône rose pour modifier l'image Maintenez ma souris enfoncée et faites-la glisser vers le haut au-dessus de l'image suivante. Voilà, il est déposé dans ce conteneur. Vous pouvez voir ici sur la structure deux images de ce conteneur. Nous en avons peut-être quatre maintenant. Déplaçons simplement celle-ci ici, à l'endroit où se trouvait la dernière image. Oui, allons-y. OK, je suis vraiment content de cette mise en page maintenant. Eh bien, chaque conteneur a une hauteur différente, donc ils ne s' alignent pas exactement. Aucune de ces sections ne s' aligne, savent-ils qu'elles ne fonctionnent pas comme un petit labyrinthe dans lequel vos yeux peuvent courir Je pense que c'est une belle exposition de toutes mes meilleures œuvres dans une galerie . Revenons à l'éditeur et sauvegardons le brouillon. 7. Portfolio : animation de galerie et lightbox: Maintenant, je veux vous montrer deux autres choses intéressantes que vous pouvez faire dans Elementor avec vos images Nous allons regarder l'écran de la boîte à lumière. C'est ce que verront vos utilisateurs s'ils cliquent sur une image. Mais tout d'abord, nous allons nous intéresser à l'animation. Ce que je veux vous montrer pour l'animation, que vous avez de nombreuses options différentes pour cet élément interne Ce que nous pouvons faire, c'est prendre chaque élément et le faire apparaître d'une certaine manière. Je vais commencer par vous montrer comment cela fonctionnerait pour l'ensemble du réseau. Je vais juste cliquer sur la grille puis venir ici pour avancer. Ce que nous examinons ici, ce sont les effets de mouvement. La partie que nous voulons examiner est l'animation d'entrée. Le moment est défini par défaut, ce qui signifie simplement qu'il ne fera rien. Cependant, entrez, vous avez menu déroulant et vous avez en fait de nombreuses options différentes ici. Choisissez-en un au hasard ou quelque chose comme ça. Ceux-là sont toujours drôles. Chercheurs d'attention. Bounce signifie simplement que toute la grille rebondira lorsque quelqu'un fait défiler la page vers le bas jusqu'à cette partie du flash de votre page, c'est plutôt sympa en fait Pulse, oui, il y a plein de choses étranges tu peux faire avec ça. Cela dépend simplement de votre style et de ce qui, selon vous , vous représente le mieux. Cependant, même si j' aime être créatif, j'aimerais que les choses restent simples et soignées. Celui que je choisis toujours pour cela est une simple décoloration et vous pouvez voir que cela s'est produit assez rapidement Cependant, vous pouvez jouer avec cette durée d'animation réglée sur normale. Réglez-le simplement sur lent. Nous y voilà. C'est une entrée beaucoup plus agréable et plus lente Ce que nous avons là, c'est une animation pour l'ensemble de la grille à afficher en même temps. Mais ce que je veux, c'est être un peu plus créatif et faire quelque chose de légèrement différent pour chaque image contenue dans le conteneur. Éteignons-le simplement. Pour ce faire, cliquez sur ce petit x ici. Et cela le ramène au paramètre par défaut ou vous pouvez choisir de ne pas le faire. Désormais, l'ensemble de la grille n'a plus d'animation d'entrée. Ce que je vais faire, c'est changer l'animation d'entrée pour chaque image. Revenons à la première, 51, cliquez sur Modifier l' image, puis sur Avancé et faites défiler l'écran vers le bas jusqu'à Effets de mouvement Et c'est juste pour cette animation d'entrée d'image. Encore une fois, je vais choisir Fade in. Encore une fois, je vais choisir Slow. Désormais, lorsqu'un utilisateur fait défiler la page jusqu' à cette partie de la page, seule cette image s'affiche Je veux qu'ils soient tous exposés. Si je devais simplement sélectionner chaque image et choisir exactement la même chose, elles apparaîtront toutes en même temps. C'est exactement ce que nous essayons d' éviter dans le réseau. Animation. Par exemple, si je devais juste choisir la suivante, je ferais de la plongée aux Fidji. Entrez ici, choisissez les effets de mouvement, l'entrée, l'animation, le fondu, puis choisissez Lent. Nous allons vous dire quoi, voyons simplement à quoi cela ressemble. Maintenant, pour que les utilisateurs puissent le faire, arrivons ici, cliquons sur Enregistrer le brouillon. Ensuite, il suffit de cliquer sur ce petit œil pour prévisualiser les modifications qui m'amènent sur la page. C'est ainsi que tous vos utilisateurs verront votre site Web. Ensuite, alors que je fais défiler la page vers le bas jusqu'à la section galerie, vous verrez les deux s'y estomper Fais-le juste un peu plus vite pour que tu puisses le voir. Rechargeons Nous y voilà. Ils s'estompent donc tous les deux, mais ils s'estompent tous les deux à la même vitesse Revenons simplement à notre éditeur. Ce que je veux examiner ici, c'est un délai d'animation, un léger retard par rapport au moment où l'animation se produit. Nous pouvons voir le premier ici, 51, avec un effet de mouvement. Celui-là peut rester tel quel. Allons plonger aux Fidji. Passons lentement aux effets de mouvement. Mettons un délai de 500 millisecondes. Je vais vous montrer la vitesse à laquelle cela se produit dans une seconde, alors vraiment Oz. Changeons cela, 12 750 millions Sauvegardons la piste, puis prévisualisons les modifications. En faisant défiler la page vers le bas, vous verrez que ces trois images arrivent à des vitesses légèrement différentes. Rechargeons à nouveau toute la page. Nous y voilà. C'est parfait. Ces trois images arrivent à des moments légèrement différents. Tout ce que je veux faire maintenant, c'est choisir une heure complètement aléatoire pour chaque image afin qu'elles s'estompent toutes, mais aucune en même temps. Revenons à l'éditeur et je vais tous les changer à une vitesse différente. Je vais juste travailler sur chacune d'entre elles très rapidement, mais prenez votre temps vous-même. Jouez avec des vitesses différentes pour chacun d'entre eux. Et continuez à rouvrir et à recharger la page afin de trouver un bon équilibre qui vous convient parfaitement C'est ainsi que la galerie apparaît désormais. Lorsqu'ils défilent vers le bas, vous verrez qu'ils arrivent tous à des moments légèrement différents. C'est un style créatif vraiment cool que vous pouvez ajouter à votre propre portfolio. Rechargeons celui-ci. Voilà. Comme ça. Ils ont une grille présentée d'une manière plutôt cool, qui est également animée d'une manière très cool. Cela attirera l' attention des gens à chaque fois. Maintenant, une dernière chose à examiner est le réglage de la boîte à lumière. Revenons à l'éditeur. Maintenant, je voudrais vous montrer le réglage de la boîte à lumière. C'est quelque chose que vous pouvez ajouter au site Web de votre portfolio. Lorsque les utilisateurs viennent vous rendre visite, ils peuvent cliquer sur l'image, la voir beaucoup plus grande et en savoir un peu plus sur ce que vous avez fait dans le cadre de ce travail. C'est très facile à configurer. Passez ici à votre première image et cliquez sur l'icône de modification de l'image, puis passez ici au contenu sur la gauche. Ce que nous examinons ici, c'est la section des liens. Ils ont deux options. Dans ce menu déroulant, vous pouvez ajouter une URL personnalisée si vous souhaitez les utilisateurs vers un autre site Web, par pour afficher le projet sur lequel vous avez travaillé. Mais ce que nous examinons ici, c'est la boîte à lumière, alors choisissons le fichier multimédia. La boîte à lumière est réglée sur les paramètres par défaut. Cela signifie que lorsque quelqu'un vient sur votre site Web et clique sur l'image, voici ce qu'il voit. Il suffit de cliquer sur la flèche pour en voir plus. Vous voyez l'image affichée presque en plein écran avec quelques icônes ici. C'est une faute, éteignez l'écran, partagez et fermez. Il a ce fond noir clair qui a l'air vraiment cool et c'est un excellent moyen de mettre en valeur l'ensemble de votre portfolio. Les gens peuvent cliquer sur ce qu'ils aiment dans la galerie et choisir d'en voir beaucoup plus. Cependant, je souhaite apporter quelques modifications à cela. J'aimerais changer la couleur de l'arrière-plan. Je souhaite qu'un peu plus d'informations apparaissent ci-dessous sous l'image, juste pour expliquer le projet sur lequel j'ai travaillé à tous mes utilisateurs. Fermons celui-ci sur cette flèche. Cliquez à nouveau sur cette image, assurez-vous d'avoir enregistré votre brouillon avant de le faire. Ensuite, venez ici pour éclairer le panneau de la boîte et cliquez dessus. Cela fera apparaître les paramètres du site. Il s'agit de la boîte à lumière située dans les paramètres du site, ce qui signifie que tout ce que vous modifiez ici changera sur l'ensemble du site Web. Vous avez le choix entre quelques options ici. Ce sont les quatre icônes que nous affichons en haut à droite lorsque nous l'avons examiné plus tôt. Donc, zoomez sur l'écran, partagez, etc. Ensuite, vous verrez le titre et la description. C'est ce qui s'affichera sous l'image déjà configurée pour s'afficher. Le problème est que nous n'avons pas configuré cela pour cette image ou pour aucune des images. Je vais vous montrer comment faire dans quelques secondes. Tout d'abord, nous voulons changer la couleur de fond. J'aime ce noir clair. Mais comme j'ai un site Web très audacieux et lumineux, par exemple une couleur plus vive et plus audacieuse, pour y retourner, vous pouvez venir ici, cliquer sur cette icône et choisir votre propre couleur. Ou un moyen plus rapide de le faire, ou un moyen sur lequel vous avez un contrôle total, est de cliquer sur cette icône ici. Cela vous montrera les couleurs globales de votre site Web. Ils sont tous entrés dans les paramètres par défaut. Elément intérieur ou couleur primaire, couleur secondaire, texte, couleur, accent. Si vous cliquez sur cette icône ici, vous pouvez accéder à l'endroit où vous pouvez modifier ces paramètres. Cela signifie que n'importe où sur le site Web, si vous choisissez cette couleur primaire, elle changera sur l'ensemble du site Web. Cependant, pour l'instant, je suis très content de ce bleu vif et audacieux, couleur A Ion. Je vais choisir celui-ci alors. Pour être honnête, il n'y a rien d'autre que je doive vraiment changer ici. Mais tu as d'autres options. Vous pouvez jouer avec eux vous-même. Taille de l'icône de la barre haute, définissons-la un peu plus haut. Voici les petites icônes qui se trouvaient à l'extrême droite. Ils étaient peut-être un peu petits. Mettons-leur 225. Sauvegardez-le puis revenez si vous avez besoin de changer quoi que ce soit ou avez besoin de changer quoi que ce soit ou de le ramener à ce qu'il était avant. Enregistrons-le, puis retournons à l'éditeur. Cliquez ensuite sur cette première icône et voyons à quoi cela ressemble. Voilà, cliquons sur la flèche. Nous voyons maintenant ce fond bleu beaucoup plus clair et plus audacieux. Nous voyons des icônes légèrement plus grandes en haut ici. Je pense qu'ils fonctionnent vraiment bien. Et ils sont géniaux parce qu' ils sont en blanc parce que je pense que cela fonctionne bien sur cette couleur de fond. Ce que vous pouvez voir ici, c'est ce que nous avons examiné il y a une seconde, le titre et la description de l'image qui s' affichera ici. Le problème est que nous ne l'avons pas configuré sur cette image. Revenons à l'éditeur. Fermons celui-ci ici. Cliquez ensuite sur la flèche, puis sélectionnez votre première image. Alors saute ici. Il est écrit « Choisir une image » et cliquez sur l'image. Encore une fois, cela ne changera pas l'image choisie. Cela vous permettra de modifier à la fois le titre et la description. Les informations textuelles pour chaque image sont toujours configurées ici, sur le côté droit. Maintenant, le titre, c'est ce que vous pouviez déjà voir dans la boîte à lumière, a été automatiquement extrait du nom du fichier. Il y a donc toutes ces petites lignes entre chaque mot. Je vais juste les retirer. Le surlignage, la suppression, puis votre description. Eh bien, c'est ici que vous pouvez simplement écrire la description de l'image. Cela provient d'une galerie d'art appelée 51. J'ai déjà rédigé ma description. Je vais le coller ici. Voilà. Un sac fourre-tout avec un logo 51 mettant en valeur le logo en noir et blanc. Parfait. Maintenant, choisissons Select. Maintenant, quand je clique sur l'image, vous verrez à quoi elle ressemble maintenant. Alors, cliquons sur la flèche. Nous avons le fond bleu vif , puis nous avons le titre et la description. C'est génial. Les utilisateurs peuvent accéder au site Web, choisir une image , cliquer dessus et en savoir plus. Cliquez sur votre flèche. vous reste plus qu'à parcourir chaque image et à le faire pour chacune d'entre elles, car la description est évidemment différente pour chacune d'entre elles. Cliquons sur cette image d'édition ici à gauche ou sur le titre de l'image. Supprimons à nouveau ces tirets , puis écrivons dans la description Alors qu'il s'agissait de deux couvertures de plongée aux Fidji sponsorisées par le BG Tourism Board. Et sélectionnez maintenant, lorsque je clique dessus, vous verrez les informations complètes ci-dessous. Maintenant, il ne me reste plus qu'à le parcourir et à l'ajouter à chaque image. Quand c'est fait, tout prêt. Sauvegardons ça. Jetons un coup d' œil aux modifications. Tu vas voir ce que nous avons. Nous avons le héros, nous avons une galerie animée très cool qui apparaît. Et lorsque les utilisateurs cliquent sur une seule image, ils voient cette image beaucoup plus grande. Et ils trouveront beaucoup plus d'informations sur le travail que vous avez effectué. 8. Portfolio : concevoir: Nous allons donc maintenant ajouter le pied de page de votre site Web, la fin de la page entière La fin du site Web, la signature. Je suppose que ce que je veux mettre ici contient des liens vers mes pages de réseaux sociaux et une carte pour que les gens puissent venir me rendre visite. Commençons par là. Ajoutons un nouveau conteneur. Cliquons sur le Plus. Choisissons Flex Box. Ce que je veux, ce sont deux colonnes. Encore une fois. Cependant, je veux que la colonne de gauche soit légèrement plus petite, car je aimerais y trouver que des icônes de réseaux sociaux. Ensuite, je veux un plan de mon bureau ici sur la droite. Plutôt que de choisir le 50 ou le 50, choisissons d'abord celui-ci, changeons l' affichage de ce pied. Nous voulons qu'il se démarque différemment de celui ci-dessus. Évidemment, ici, on passe du rose vif au blanc. Je ne veux pas que le blanc devienne blanc. J'ai besoin de quelque chose de distinct, l'opposé du blanc, du noir pur. Cliquons sur ces points ici. Modifiez le conteneur, venez ici pour le styliser, choisissez Classique, puis choisissons simplement une couleur. Cliquez à nouveau sur celui-ci, comme je l'ai déjà dit, si vous faites glisser ce petit jusqu'en bas à gauche, cela devient noir pur 00000 C'est ce que je veux. Comme vous pouvez le constater, les deux conteneurs internes sont placés à l'intérieur, mais ils se trouvent juste à côté. Ce que je veux, c'est plus de rembourrage en haut et en bas. Identique à ce que j'ai fait ci-dessus. Je ne suis pas là pour avancer. Passons au rembourrage. Dissocions les valeurs , puis disons simplement que c'est 100 en haut et 100 en bas Non, 100, pas 1 000. Nous y sommes. Nous avons maintenant un peu d'espace au-dessus et en dessous de ce que nous allons entrer ici. Qu'est-ce que je voudrais ajouter ici ? Eh bien, je veux juste un petit titre, une petite signature, puis quelques icônes de réseaux sociaux. Ensuite, nous ajouterons la carte ici, sur le côté gauche. Passons à l'avantage, allons-y, déposez-le dans ce contenant. Je voudrais juste l'appeler encore une fois. Modifions-en à nouveau l' affichage. Passons donc au style sur la couleur du texte de fond noir, vous êtes blanc, puis à la typographie, j'aimerais qu'elle s'affiche la même manière que l' en-tête en haut Cliquez sur Par défaut, écrivez en bunge, quelle que soit la typographie que vous avez choisie pour le titre de votre introduction Allons-y. J'adore ça. Une dernière chose. Revenez ici pour passer au contenu Encore une fois, assurez-vous qu'il ne s'agit pas d'un H1h2 Parfait Laissons les choses comme ça. J'aime vraiment sa taille. Il n'est pas nécessaire qu'il soit trop gros, comme celui-ci ici, juste plus ici, point, point, point. En dessous, j'aimerais ajouter mes réseaux sociaux, je suis ici pour ajouter des éléments. Vous pourrez peut-être le trouver dans ce grand menu ici. Mais il est plus facile de simplement taper dans le widget que vous recherchez des icônes sociales. Encore une fois, dragon drop en dessous de votre titre. Assurez-vous de voir la ligne rose ci-dessous. Allons-y. Cela est supprimé dans tous les paramètres par défaut. Tout d'abord, l'alignement est centralisé comme ça. À aligner à gauche de manière à ce qu'il se trouve en dessous du m ou plus ici. Ensuite, la forme est arrondie, a un bord incurvé. Je peux choisir le carré, le cercle, je pense le cercle. Ensuite, pour ce qui est des icônes sociales, eh bien, j'ai Facebook, Twitter ou X, comme on l' appelle maintenant, et Youtube. Cependant, je voudrais en montrer trois légèrement différentes. Je veux montrer le travail d'Instagram, de Hands and Dribble dans n'importe quel secteur créatif Vous comprendrez ce que sont Hants et Dribble. Il existe également d'excellents moyens de présenter votre portfolio sur les réseaux sociaux. Pour les changer, cliquez sur le premier ici, Facebook. C'est l'icône qui a été choisie pour ce lien, évidemment Facebook. Cliquons sur l'icône. Vous verrez la bibliothèque d'icônes Elementor. C'est ici que vous pouvez choisir n'importe quelle icône que vous souhaitez utiliser ici, couvrant la plupart des réseaux sociaux ici. Celui que je veux, c'est Instagram. Tu ne peux pas le voir tout de suite. Encore une fois, tapez simplement le nom ici, Instagram, puis choisissez Insérer ici. Nous avons ajouté le logo Instagram, Twitter. Cliquez sur l'icône Nz pour Youtube. Changeons cela en Dribble. Ça y est. Ce sont les trois que je veux. Allons-y. Cela montre les trois éléments j'aimerais que mes utilisateurs voient et sur lesquels ils cliquent. Tout d'abord, je dois ajouter l'URL de chacun d'entre eux. Commençons ici avec Dribble. Comme nous en sommes à celui-ci, vous pouvez le saisir, ou il est simplement plus facile de le copier-coller. Mais laisse-moi juste taper celui-ci. En tapant, assurez-vous d' inclure HTPS, deux points, puis dribble, ripple B.com Il suffit ensuite de cliquer sur cette petite icône à droite qui indique « Options de lien ». Assurez-vous que pour quelque chose comme les réseaux sociaux ou site Web de quelqu'un d'autre, il est toujours sélectionné pour s'ouvrir dans une nouvelle fenêtre. Cela signifie simplement qu'une fenêtre séparée s'ouvrira. Cela signifie que les internautes sont toujours sur votre site Web. Cela ne les emportera pas. Laisse-moi juste le copier. Https ici. Design en forme de barre oblique de Hunt.com. Instagram. Spell it right.com slash John, design Tous mes liens et mes icônes sont configurés. La seule chose que je veux changer, que je suis content que celui des chasseurs et des pilotes arborent leurs couleurs officielles Mais Instagram n'a pas choisi de couleur, pourquoi ? Parce qu'Instagram n'est pas vraiment une seule couleur. S'agit-il d'un dégradé de plusieurs couleurs différentes ? Il y a juste cette couleur de fond noir qui ne fonctionne pas vraiment sur notre fond noir dans la sélection Instagram. Ici, allez dans Couleur, cliquez sur ce menu déroulant et choisissez Personnaliser. Ce que je veux faire, eh bien, je peux choisir la couleur que je veux mettre ici. Cependant, comme il s'agit d'Instagram, et comme c'est notre chaîne Instagram, je vais choisir une couleur d'agenda que j'ai choisie en haut de la page. Ramenons-le. Passons à une structure, puis passons au conteneur tout en haut de la page. Viens ensuite ici sur la gauche pour t'habiller. Vous y verrez la couleur que nous avons choisie. Vous pouvez le survoler N'oubliez pas que le moyen le plus simple est de cliquer dessus et de faire une copie rapide. Ensuite, faites défiler l'écran vers le bas sur les icônes sociales, Instagram. Et ce que je veux changer ici, c'est la couleur primaire. Cliquons sur celui-ci. Collez mon code hexadécimal, ça a l'air génial. Il suffit de cliquer sur la flèche ici. J'aime vraiment ça. Ils ont l'air vraiment cool. Je pense que le seul problème que j'ai avec eux, c'est qu'ils sont un peu grands et qu'il n'y a pas vraiment assez d'espace entre eux. Si vous voulez changer quelque chose comme ça, très facilement, assurez-vous que les icônes sociales sont surlignées sur le. Voici un style, c' est là que vous pouvez jouer avec plusieurs choses différentes. Taille, vous pouvez simplement faire glisser celle-ci vers le haut et vers le bas pour changer la taille de l'ensemble. rembourrage est évidemment l'espace autour de l'icône qui permet de mettre le zéro autour d'elle Assez grand, peut-être un espacement de 0,5. C'est celui que je veux changer, c'est-à-dire m'accorder cinq pixels entre chaque cercle. Mettons-en un peu, appuyons dessus et descendons 15. Allons-y. Je pense que ça a l'air bien mieux. Ensuite, une dernière chose que vous pouvez faire ici, qui est une très bonne icône amusante. Cliquez dessus. Survolons simplement l'animation pour que lorsqu'un utilisateur arrive votre site Web et passe le pointeur de la souris sur cette icône, il puisse faire quelque chose de très intéressant Cliquez sur votre menu déroulant pour qu'ils grandissent, rétrécissent. Qu'ils rétrécissent. Joue juste avec tout ça, je veux dire, des trucs dingues ici. Voyons juste ce que nous avons. Inclinaison. C'est plutôt cool en fait. Oui, choisissez-en un qui vous convient et qui correspond à votre personnalité. J'aime bien que le psy veuille être comme ça. Cliquez sur la flèche. Oui, cela montre simplement qu' ils se déplacent comme ça, que ce n'est pas actif et les gens sont plus enclins à cliquer dessus. OK, c'est donc notre colonne de gauche triée. Maintenant, déposons simplement une carte ici. Encore une fois, retrouvez ici votre plus un type d'élément dans le mot carte, Google Maps. C'est ce que nous allons ajouter, le faire glisser et le déposer dans votre conteneur. Ceci est automatiquement configuré pour afficher une carte Google. Maintenant, nous avons juste choisi un emplacement par défaut , à savoir Londres à la dernière minute, mais nous voulons le remplacer l'emplacement de notre bureau. Maintenant, pour ceux d'entre vous qui ont déjà vu le film Finding Nemo, vous connaissez cette adresse en Australie qui est le 47 Wallaby Street Mettons-le simplement dedans. Allons-y. Il a choisi le 47 Wallaby Street , à Blackwall en Nouvelle-Galles du Sud Et ce avec quoi vous pouvez jouer ici, c'est le zoom. Comme vous pouvez le constater en ce moment, c'est assez loin, ce qui vous indiquera où se trouve mon bureau dans le pays. Mais zoomons légèrement ou dézoomons légèrement pour voir ce qui se passe. J'ai zoomé, je l'ai changé à 13 et cela montre simplement où se trouve mon bureau, juste en montrant les villes environnantes les plages et toute l' eau, peut-être Passons un peu plus à 15, je pense. Oui, allons-y. Nous pouvons donc voir que c'est Wallaby Street et voir où cela se situe par rapport à tout le reste. Maintenant, vous pouvez aussi jouer avec la hauteur de celui-ci, mais comme je n'en ai pas beaucoup sur le côté gauche, je ne veux pas vraiment le rendre trop grand qu'il ne le est , pour être honnête. Vous pouvez simplement jouer avec un réglage en pixels. En fait, je pense qu'il est un peu plus petit. Peut-être 250 pixels. 150. 250, peut-être 300, je crois. Oui, je pense que ça a l'air parfait. Maintenant, mon pied est plus trié ici, des icônes de réseaux sociaux et une carte indiquant où se trouve le bureau. Retournons ici. Enregistrez le brouillon, puis prévisualisons les modifications. Ce que vous pouvez voir ici est maintenant un site Web complet. Vous verrez à quel point c'était facile et rapide à réaliser. ne vous reste plus qu'à suivre ce que je vous ai montré ici et à le recréer dans votre propre style Votre image ici sur la gauche, choisissez l'image qui représente le mieux vous ou votre travail. Choisissez le titre de votre site Web ici, peut-être le nom de l'entreprise ou votre nom. Choisissez ensuite l'affichage de votre galerie manière dont vous souhaitez qu'elle s'affiche, les images que vous choisissez, puis votre pied. Choisissez ce que vous voulez ici, il suffit d'avoir les icônes des réseaux sociaux. Vous pouvez inclure un numéro de téléphone ou une adresse e-mail si vous souhaitez que les gens vous contactent directement. Je veux donc simplement qu'ils sachent où se trouve mon bureau et qu'ils puissent ensuite trouver le chemin pour s'y rendre. Du point de vue du bureau, tout est trié. Nous devons maintenant voir comment le modifier pour la tablette et le mobile. 9. Design de mobile et de tablette: Nous avons trié la version de bureau de votre site Web de votre portfolio. Cependant, nous devons nous assurer qu'il fonctionne parfaitement sur ordinateur de bureau, tablette et mobile. La façon dont Elementary est configuré est la suivante : la tablette hérite des sections du bureau et mobile hérite des sections de la Vous devez travailler dessus dans cet ordre, même si vous pensez peut-être que le mobile est le travail le plus important à ce sujet. Enfin, vous pouvez tout faire fonctionner sur ordinateur, le modifier pour tablette, puis le modifier pour mobile. Le bureau est tout trié. Cliquons sur cette icône ici pour la changer en tablette, et nous pouvons modifier la tablette. Vous verrez d'abord à quoi tout ressemble. Tout ce qu'il a fait, c'est copier exactement ce que nous avons fait sur ordinateur et l'avons changé pour tablette. Je pense que c'est presque là pour la façon dont les gens regardent les choses sur tablette, qu'ils les regardent en portrait ou en paysage. Je pense que recréer ce que nous avons fait sur ordinateur fonctionne Cependant, il y a quelques problèmes d'espacement et de dimensionnement Commençons par le héros. Le principal problème ici est évidemment la taille du texte ici, non ? Cliquons sur celui-ci. Alors passons ici au style, passons à la typographie. Cliquez sur cette icône, puis modifions-la. Il est réglé sur 130 pixels, ce qui est formidable de l'avoir. Ce gros ordinateur de bureau, pas une tablette. Passons peut-être à environ la moitié de cette taille, 65. Peut-être un peu plus grand. Vous pouvez simplement continuer à appuyer sur cette petite section de haut en bas ici. Peut-être 90. Je pense que cela fonctionne très bien, n'est-ce pas ? Je crois que j'aime toujours cette répartition 50-50 de gauche à droite. Et je trouve que ça s'affiche très bien. Cependant, mon visage, ouah, tu peux le voir. Mais un petit peu, mes cheveux sont coupés. Changeons simplement la position de l'image d' arrière-plan qui, comme vous vous en souviendrez, se trouve à l'intérieur de ce conteneur ici. Cliquez sur votre icône grise ou rendez-vous ici dans Structure. Ensuite, venez ici sur la gauche et choisissez Style. Comme vous pouvez le voir ici, cela a encore une fois hérité de ce que nous avons fait pour les ordinateurs de bureau. Maintenant, nous l'avons réglé au centre. Je pense que la centralisation est une bonne chose, mais voyons à quoi cela ressemble. Centré sur la gauche, ça me fait perdre beaucoup plus de temps. Tu peux juste voir mon coude. Essayons vers la droite. Encore une fois, ce n'est pas suffisant. Ce que je dois faire ici c'est choisir la dernière sélection à ce sujet, qui est personnalisée ici. Je peux jouer avec la position X et la position Y. La position Y est correcte car elle se situe tout en haut de l'image. Et tout en bas de l'image, c'est juste la position X. Jouons juste avec ça. Faites glisser cette petite icône de gauche à droite et obtenez-la pour qu'elle vous plaise ? Je pense que nous allons peut-être arriver à un bon chiffre, 350. Moins 350. Nous y voilà. Je clique sur ma flèche ici. La chauve-souris est parfaite. Je suis centralisé. Je souris, et vous pouvez voir mon nom à droite sur la tablette. Parfait. Maintenant, nous allons simplement faire défiler l'écran vers le bas. Nous avons maintenant deux options différentes ici. Je pense que cela fonctionne comme une grille à quatre colonnes. Cependant, vous pouvez modifier cela si vous le modifiez ici, cela ne changera pas cela sur Desktop. Si vous venez ici à droite et que vous cliquez sur Grille, vous pouvez voir différentes options pour ordinateur de bureau, tablette et mobile. Si nous voulions qu'il soit placé sur deux colonnes, je changerais simplement ce chiffre ici à deux. Ensuite, si je clique sur la flèche, vous pouvez voir qu'elle affiche les images différemment. Il est passé de quatre colonnes à deux colonnes. Cependant, je ne pense pas que cela fonctionne très bien, car vous obtenez alors des espaces étranges ici et des espaces étranges. Je pense que cela ne fonctionnerait de cette façon que s'il s'agissait de quatre colonnes ou d'une colonne. Jetons un coup d'œil à une colonne. Eh bien, c'est vraiment incroyable, n'est-ce pas ? Affiche tout en pleine largeur. Cependant, je ne sais pas, je pense que j'aimerais en ajouter quatre. Je pense que je vais remettre ça en place. Et je pense que je vais opter pour une seule chronique sur mobile telle que nous l'avons actuellement. C'est pareil, c'est sur ordinateur. seul petit problème ici est l'espacement entre les bords de l'écran Nous pouvons changer cela. Nous avons juste besoin d'un peu de rembourrage supplémentaire Cliquons sur ces points en haut pour modifier le conteneur ici afin d'avancer à nouveau, il est hérité de ce que nous avions configuré pour Desktop. Si je devais cliquer sur celui-ci et taper un zéro, ramènerais à zéro. Dissocions-les alors. Panoramique en haut. Eh bien, je pense qu'ils devraient être légèrement plus petits. Peut-être 50. C'est une bonne chose. Les 50 derniers. J'ai juste besoin d'un peu de rembourrage à droite et à gauche Essayons peut-être 25 pixels à droite, 25 pixels à gauche. Cliquons sur la flèche ou adorons. C'est un excellent passage de la section héros à la section galerie. Et devinez quoi, quand je clique sur l'un d'entre eux, je reçois toujours l'affichage. Il est automatiquement remplacé par un affichage en largeur. Sur tablette, c'est la galerie en sections, maintenant c'est juste le pied Je crois que j'aime toujours cet endroit. Mais peut-être qu'il ne devrait pas y avoir deux colonnes. Peut-être devons-nous le remplacer par une seule colonne. Cliquons sur les points ici. Ce que nous allons faire, c'est modifier la disposition des colonnes internes. Sur tablette uniquement, nous sommes dans le conteneur principal. Viens ici pour la mise en page. Ce que vous avez ici, c'est une direction. Comme vous pouvez le voir ici, il s' agit d'une rangée horizontale, composée deux colonnes, l'une à gauche, l'autre à droite. Si je clique sur celui-ci, il deviendra vertical. Il est maintenant empilé, et cela fonctionne beaucoup mieux sur les tablettes Je pense que nous devons juste jouer avec l' espacement entre tout ici Tout d'abord, passons au conteneur principal. Allons-y encore pour avancer. Faisons simplement ce que nous avons fait ci-dessus et jouons avec les paramètres à ce sujet. En fait, je veux faire exactement les mêmes réglages de rembourrage. J'en écrirai 50 ici. Dissociez la modification, la droite à 25 et la gauche à 25. Nous avons maintenant le même rembourrage que ci-dessus, un bel espace de 50 pixels en haut et en bas de 25 pixels à gauche et à droite Cependant, comme vous pouvez le constater, c'est comme si changer les choses sur une carte n'allait pas jusqu'au bout. Alors plus ici, eh bien, c'est sur deux lignes. Je veux que ce soit sur un seul. Cela s'explique simplement par l'espacement des deux conteneurs internes Celui-ci a été fixé à 33 % et celui-ci à 66 % un tiers, et 23. » Maintenant qu'ils sont assis l'un sur l'autre, cela devrait être 100 % pour chacun. Si je le change ici, cela ne le changera pas depuis Desktop. Prenons ce premier contenant. Cliquez sur votre case grise, puis ici, au lieu de pixels, modifiez ces 2 % puis tapez 100 ici. Nous allons maintenant voir que la largeur totale de ce conteneur est identique à la largeur du conteneur de stockage. Faisons de même pour la carte. Envoyé 100. Ça a l'air bien mieux. Maintenant, je préfère de loin cet écran. Comme je l'ai dit, nous comprendrons que tout ce que nous changeons ici ne changera pas. Sur ordinateur de bureau, vous pouvez toujours revenir en arrière et vérifier cela. Cliquez sur Bureau, ce sont toujours deux colonnes qui vont de gauche à droite, alors que sur tablette, elles sont empilées C'est notre version pour tablette. C'est tout ce que Hero Works. Œuvres de galerie Œuvres. Jetons maintenant un coup d'œil au mobile. Encore une fois, c'est un héritage tout ce que nous avons fait sur tablette. C'est pourquoi ces deux colonnes sont désormais empilées. Faisons simplement défiler la page vers le haut et commençons par ici. Celui-ci est légèrement différent. Pourquoi ? Eh bien, parce que c'est mobile. Par conséquent, une colonne à gauche et une colonne à droite. Ça n'allait jamais marcher, n'est-ce pas ? C'est trop fin pour ça. Ce qu'il a fait, c'est qu'il a empilé les deux colonnes l'une sur l'autre Tout ce que je dois faire ici, c'est jouer avec la taille et l' espacement de chacun Tout d'abord, changeons simplement la taille de ce texte ici. Passons à la typographie. 90, c'est trop gros pour un mobile. Modifions-le peut-être en 50, peut-être 60. Je pense que c'est plutôt bien. Cependant, je pense toujours qu' il y a trop d'espace en haut et pas assez de place pour moi au sommet. Je clique sur la flèche qui montre le moins d'espace à cet endroit. Ce que nous devons faire, c'est ajouter une entretoise. Il s'agit d'une colonne vide, essentiellement, il n'y a aucune image à l'intérieur. Ce n'est que la taille des conteneurs qui l'entourent, car ceux-ci sont empilés, c'est pourquoi celui-ci est beaucoup plus petit que celui ci-dessous. Ajoutons un espaceur d'ici à l'élément. Cliquez sur l'espaceur Plus Choose, encore une fois, saisissez-le simplement ici Si vous ne le voyez pas et que vous le faites glisser en haut de la colonne ici, c'est ici que vous pouvez jouer avec l'espace. Utilisons cette barre de déplacement ici. Alors, il ne reste plus qu'à lui donner une taille parfaite. Je pense que 260 pixels, c'est peut-être parfait. Cliquons sur la flèche. L'image que j'ai de moi-même est bien meilleure. Et puis le texte, eh bien, il se trouve toujours dessous de l'image et vous pouvez tout voir en une seule fois. Cela a toujours le même impact que celui observé sur les ordinateurs de bureau et les appareils mobiles, mais il est désormais simplement empilé plutôt que dans des colonnes séparées à gauche ou à droite Maintenant, faisons simplement défiler la page vers le bas jusqu'à la section galerie. Ce qui est fait ici automatiquement c'est de remplacer ces quatre colonnes par une seule colonne sur mobile. C'est certainement ce que nous voulons. Au fur et à mesure que nous faisons défiler la page vers le bas, vous verrez simplement comment tout cela fonctionne. Il n'y a aucun espace aléatoire entre chaque tablette. Le réglage est le même pour chaque image. Cela fonctionne vraiment bien. Encore une fois, il s'agit d'un héritage du rembourrage que nous avons configuré pour la tablette Changeons simplement cela pour les appareils mobiles. Donnez-lui un peu plus d'espace. Faisons défiler la page vers le haut. Cliquez sur ces points ou choisissez ce conteneur ici dans sa structure, si vous savez où il se trouve. Comme vous pouvez le voir, il y a le 50 et le 25. Je pense que c'est trop sur tous les bords. Je pense que peut-être 15 pixels sur tout le pourtour. Oui, je préfère de loin ça. Je ne pense pas qu'il ait besoin d'un grand espace au sommet et qu'il n'en ait pas besoin d' autant ici. Dehors, ça a l'air fantastique. Encore une fois, permettez-moi de cliquer sur l'un de ces écrans comme ça. Nous avons maintenant l'image en haut et le texte ci-dessous. Mais il est parfaitement converti pour une utilisation sur ordinateur de bureau, tablette et mobile. Hero cherche de superbes galeries, elle est fantastique, pour être honnête. Je pense que cette section Pota fonctionne également très bien. Je vais juste cliquer sur ces points. Modifiez ce paramètre par rapport à ce que j'ai configuré pour la galerie ci-dessus, juste pour une cohérence de 15. Je pense que cela fonctionne très bien à gauche et à droite. Cependant, comme il s'agit du pied de page, je pense qu'il faut un peu plus d'espace au-dessus et dessous juste pour donner un peu plus d'espace au texte et aux icônes Dissocions-les alors. Voyons voir en haut, peut-être changer cela à 30. Le double en bas, 30 également. Nous y voilà. J'adore ça. C'était aussi simple que cela de prendre tout ce que vous faisiez sur ordinateur et de le modifier légèrement pour tablette et mobile. Jetons un coup d' œil aux trois maintenant. C'est un ordinateur de bureau, très beau. Encore une fois, rien n'a changé car nous l'avons fait dans cet ordre. Nous avons commencé par l'ordinateur de bureau, puis nous sommes passés à la tablette, puis au mobile. C'est un ordinateur de bureau. C'est aussi une tablette. Parfait. C'est mobile. J'adore ça. Vous avez donc maintenant un site Web de portfolio complet. Il ne nous reste plus qu'une chose à faire. Fermons-le et publions-le. Faisons-le vivre. 10. Lancez votre site: Maintenant que votre site est publié, rendez-vous ici sur l'icône Elementor sur la gauche, puis passez à Wordpress Cliquez ensuite ici sur cette icône Wordpress. Et puis une dernière chose à configurer, entrez ici pour l'apparence et choisissez Personnaliser. Ignorez ce que vous voyez ici sur la droite. Ce ne sont que des paramètres de base de WordPress. Ce sont des choses que vous pouvez faire en dehors d'Elementor, mais votre page ne s'affichera pas comme nous pouvons le voir sur la droite Maintenant, la seule chose que je veux changer ici, c'est l'identité du site. Cliquez donc sur celui-ci. Comme vous pouvez le voir ici, cela figure dans le titre du site. C'est ce que j'ai configuré dans Elemental plus tôt. Cependant, le slogan indique simplement mon blog WordPress. C'est entré en quelque sorte automatiquement. Ce que je veux vraiment écrire ici n'est qu'une phrase sur qui je suis et ce que je peux offrir aux clients. Je vais donc coller celui-ci. Et j' ai parlé de John Wolfgang Miller, studio de création travaillant dans le domaine de l'impression numérique et de l'image de marque Résumez-vous en une seule ligne. Cela vous aidera lorsque des personnes vous recherchent sur Google. Ensuite, les deux dernières choses, votre logo et l'icône de votre site. Encore une fois, il s'agit du logo de votre entreprise. Il n'apparaît pas sur votre site Web pour le moment, mais il est possible qu'il apparaisse dans les recherches Google. Et l'icône de votre site est la toute petite icône. Comme vous pouvez le voir ici , elle apparaît dans onglets du navigateur lorsque vous naviguez sur Internet. Si plusieurs onglets sont ouverts, ce sera le tout petit logo qui se trouve à côté du titre de votre site Web. Donc, pour choisir celui-ci, je vais utiliser le même logo pour les deux. Cliquez ici pour sélectionner le logo. Si vous l'avez déjà téléchargé, choisissez-le dans la médiathèque. Si ce n'est pas le cas, cliquez sur Télécharger des fichiers et retrouvez-le sur votre ordinateur. C'est celui que j'ai choisi. Voici le logo de mon entreprise qui porte mes initiales. Je vais donc choisir ça, sélectionner. Évitez de recadrer. Je n'ai pas besoin de recadrer l'image. C'est la forme et la taille parfaites telles quelles. Ensuite, choisissons l'icône du site. Ce sera exactement le même. Juste pour celui-ci, et vous verrez que les dimensions d'image suggérées sont de 512 x 512 pixels. C'est exactement la même taille que j'ai définie pour celui-ci. Il vous suffit ensuite de cliquer sur Publier. Cliquez ensuite ici sur l'ARL et accédez à celle-ci intitulée Paramètres de la page d'accueil. C'est ici que vous choisissez quelle page de l'ensemble de votre site Web sera la page d'accueil. Le premier que tout le monde voit lorsqu'il visite votre site Web. Ici, choisissez une page statique, et dans ce menu déroulant, choisissez celle que nous venons de configurer Je l'ai donc appelé John Wolfgang Design. C'est ça. Vos sites Web sont maintenant prêts à être utilisés, cliquez ici sur Publier. Fermez ensuite cette page en cliquant sur le X. Vous avez donc maintenant un site Web en ligne, et si vous souhaitez avoir mon avis sur la création du site Web, utilisez simplement le nom de domaine que WoZma vous a donné lors de votre inscription Toutefois, s'il s'agit d'un service que vous souhaitez mettre en ligne pour que tout le monde puisse le voir, nous pouvons remplacer le nom de domaine un nom que vous avez acheté ailleurs. ce faire, reconnectez-vous à votre compte WoZma et cliquez sur les applications récemment déployées sur le site Web que nous venons de configurer Et puis, ici, cliquez sur Configurer les domaines. C'est donc ici que vous pouvez ajouter un nom de domaine que vous avez peut-être acheté ailleurs. L'un des endroits les plus populaires pour acheter un nom de domaine est quelque chose comme Go Daddy. Donc, si vous l'avez acheté, vous pouvez le diriger vers le site Web que vous venez de créer. Prenez donc ce nom de domaine et mettez-le dans cette case ici. Et puis cliquez sur Ajouter, vous avez quelques options ici. Il suffit de suivre la version recommandée en haut, ce qui signifie qu' elle fonctionnera avec la version WWW et sans le WWW. Et vous êtes accédé à cette page, et voici les deux lignes de code que vous devez ajouter à votre fournisseur DNS. C'est donc un fournisseur de système de noms de domaine, donc peut-être Go Daddy Crazy Domains, l'un de ces services en ligne. Quel que soit le service que vous utilisez, si vous ne savez pas où le saisir, envoyez-moi un message ici, et je vous ferai savoir, pour ce service spécifique, comment le configurer. Nous devons donc entrer et configurer ce code d'enregistrement A ici et cet enregistrement de nom C ici. Et lorsque tout est terminé, il suffit de cliquer sur Actualiser sur les deux. Cela peut prendre jusqu'à 72 heures pour réellement fonctionner, mais cela se produit normalement en une heure environ. Continuez donc à tester votre nom de domaine, et une fois que tout sera configuré, voici ce que vous verrez. Il redirigera les utilisateurs vers le site Web que vous avez configuré en utilisant le bon nom de domaine, et vous pourrez le partager dans le monde entier, sur les réseaux sociaux, en parler à tous vos amis. 11. Merci: Merci d'avoir regardé toute cette classe. J' espère que vous en avez appris beaucoup plus sur l'élémentaire et que vous avez maintenant un portefeuille impressionnant. Lorsque le site est prêt, assurez-vous de le publier ici dans la section du projet ci-dessous. Et je vous donnerai mes commentaires tout de suite. Si vous avez des questions sur quoi que ce soit dans la classe, publiez cela dans les discussions et je répondrai dès que possible. Et cliquez sur mon nom ci-dessous pour voir mon profil Skillshare complet. En ce moment, vous verrez toutes mes classes, dont plus sont sur élémentaire et aussi vous demander de télécharger des images sur votre site Web. Et n'oubliez pas de me suivre. Donc, vous le découvrirez chaque fois que je télécharge une nouvelle classe. Ok, c'est tout. Passez une belle journée.