Squarespace : comment créer votre propre site Web créatif, sans code

1. Introduction: Vous souhaitez donc créer un site Web, mais par où commencer ? Quel programme allez-vous utiliser ? Eh bien, si vous êtes débutant ou si vous êtes très expérimenté et que vous voulez être super créatif. Je vais vous montrer le meilleur programme pour tout cela, et c'est Squarespace. Lorsque vous regardez Squarespace, vous pourriez avoir l'impression que c'est un peu trop modélisé. Eh bien, je vais vous montrer comment prendre ce modèle d'avion et le transformer en ce site web super cool et excitant. Bonjour, je suis John Wolfgang Miller. Je suis designer professionnel depuis 20 ans. J'ai travaillé pour de très gros clients comme Fox TV ici en Australie. Dans ce cours, je vais commencer par vous montrer comment faire un peu de recherches dans l'industrie. Ensuite, nous allons jeter un coup d'œil à tous les éléments mondiaux. Ce sont les parties qui apparaissent sur l'ensemble du site Web et celles qui vous permettent de montrer votre propre image de marque personnelle. Je vais vous montrer comment créer une page d'accueil très impressionnante, également une page à propos, une page de contact et bien sûr, la page de blog. Je vais également vous montrer comment mettre en arrière-plan cette animation. C'est quelque chose qui peut vraiment faire ressortir tout votre site Web. Si vous souhaitez développer votre portefeuille de sites Web et votre expérience de conception, je suis là pour vous aider dans tout cela. Donc, si vous êtes prêt, commençons. 2. Projet de classe: Votre projet ici est de suivre mes directives et de créer votre propre site Web génial. Dans les premières leçons, nous vous expliquerons la configuration de l'espace carré. Ensuite, nous examinerons la page d'accueil et créerons une page qui montre qui vous êtes. Nous examinerons ensuite les animations d'arrière-plan et montrerons comment donner à votre site ce côté créatif supplémentaire. OK. Ensuite, il y aura des leçons sur votre page, votre page de contact, puis nous examinerons attentivement la section blog. Je recommande de regarder toutes les leçons , puis de les relire une par une et de commencer à faire exactement ce que je vous ai montré après chacune d'elles. Vous pouvez soit utiliser toutes vos propres images ici soit utiliser exactement les mêmes images que celles que j'ai utilisées. Si vous le souhaitez, toutes mes images sont conservées ici dans la section des ressources. 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 donc de lire et de mettre en pause les vidéos au fur et à mesure. Et si tu as besoin que je répète quoi que ce soit, il suffit d'appuyer suffisamment de fois sur ce bouton de retour en arrière de 15 secondes pouvoir revoir à nouveau la partie entière Si vous rencontrez des problèmes avec la qualité vidéo dans Skillshare, il vous suffit de venir ici et cliquer sur cette icône de niveaux de qualité S'il est réglé sur Auto, en fonction de la vitesse de votre connexion Internet à la maison, il se peut qu'il ne s'affiche pas avec la meilleure qualité possible. Il suffit donc de le changer en sept, 20 ou dix 80 pixels, et vous verrez instantanément un grand changement de qualité. À la fin de ce cours, vous aurez un site Web génial. Assurez-vous donc de l'ajouter à la section du projet, et je vous ferai part de mes commentaires complets. 3. Mise en place de Squarespace: OK, nous voilà sur Square Space sur squarespace.com, et il y a un lien vers le bas dans La meilleure chose à propos de Square Space est qu'ils vous offrent toujours un essai gratuit de site Web. Vous pouvez donc jouer avec le programme et voir si c'est ce que vous voulez acheter. Aucune carte de crédit requise. Vous n'êtes pas obligé de saisir les informations de votre carte de crédit. Alors, une fois que vous aurez jeté un coup d'œil, cliquez ici sur Getarted Et cela vous mènera à la page des modèles. Square Space propose de nombreux modèles différents. N'hésitez pas à tous les parcourir si vous le souhaitez. Il suffit de sélectionner tous les modèles et faire défiler la page vers le bas pour voir chacun d'entre eux. Ils ont également un aperçu de tout ce qui s'y trouve, alors cliquez sur l'aperçu. Et il vous montrera comment fonctionne l'ensemble des sites, et vous pourrez même consulter le site de démonstration. Maintenant, le site Web que je vais créer. Eh bien, ce sera un site de blog. Ce sera un blog sur ce que je préfère au monde. Et ça, ce sont les jeux vidéo. Ce que j'adore, ce sont les jeux vidéo rétro. J'adore tous les vieux jeux Nintendo et Sega et toutes les vieilles machines d'arcade des années 80 et 90 Je veux donc avoir un blog qui parle de tout cela et de tous ces jeux incroyables. Donc, je pourrais tous les parcourir maintenant, ou ici, je peux choisir que ce soit un site de blog. Et cela permettra d' affiner les recherches. Ou bien, c'est une question de divertissement. Voyons donc ce que nous avons ici. Les options que nous avons choisies ici ne correspondaient pas à beaucoup de modèles. Alors choisissons autre chose. Je vais choisir la boutique en ligne. Je ne crée pas une boutique en ligne, mais vous pouvez prendre n'importe quel modèle et jouer avec lui pour faire ce que vous voulez , vraiment. Voyons donc ce que nous pouvons trouver d'autre ici, voir s'il y a quelque chose que j'aime. peu le genre de couleurs plus vives, mais c'est un peu simple, le blanc. Et j'aime bien celui-ci, pour être honnête. Je sais que ce n'est pas clair ou quoi que ce soit d'autre, mais j'aime bien la façon dont nous avons la grande image sur la droite , puis le gros texte sur la gauche. Prévisualisons celui-ci. OK. Oui. Je veux dire, c'est encore un peu ennuyeux en termes de couleurs. Mais en termes de mise en page, j'aime l'utilisation de grandes polices , de grandes images et d'autres choses. Je pense donc que nous allons commencer par cela, et je pense que nous allons le développer pour qu'il ressemble à ce que nous voulons. Allons donc ici, commençons par ce design. Et maintenant, vous devez créer un compte et vous pouvez le faire gratuitement. Vous n'avez pas à saisir les détails de votre carte de crédit ou quoi que ce soit d'autre. Je vais donc simplement continuer avec l'un de mes comptes Google. Maintenant que je l'ai saisi, comme vous pouvez le voir, c'est en train de mettre les choses en place. OK. Et voilà. Bienvenue sur votre site. Cela vient de créer le site pour nous en utilisant tout ce qui se trouve dans le modèle. Maintenant, nous allons entrer et jouer avec ça. Donc, tout d'abord, le titre du site. Je vais l'appeler Game Over. Modifiez ensuite les pages. Cela vous explique juste un peu comment cela fonctionne. Comment créer des pages. Je vais parler de tout ça maintenant. Alors lancez-vous. Encore une fois, vous obtiendrez de l'aide supplémentaire ici. Fermez celui-ci pour le moment. Et puis, ici sur la droite. Il s'agit essentiellement de votre site Web. C'est tout ce qui a déjà été créé pour vous. Il suffit de cliquer sur la petite flèche ici pour passer en mode plein écran. Et vous pouvez en quelque sorte faire défiler la page et voir comment le tout fonctionne. Il s'agit évidemment de savons, ce qui n'a rien à voir avec ce dont nous voulons parler Mais nous allons le changer pour qu'il soit entièrement consacré aux jeux vidéo, et ce sera beaucoup plus lumineux et beaucoup plus fort Mais comme vous pouvez le constater, cela figure déjà dans le nom de mon site Web en haut de la page. Fermons donc celui-ci. Ensuite, sur la gauche, vous avez le menu, et c'est là que vous pouvez tout gérer sur votre site Web. Je ne vais pas tout parcourir ici pour vous en ce moment, car il y en a beaucoup ici. Je vais juste vous montrer rapidement les pages ici. Ce sont toutes les pages que nous avons sur notre site Web, et ce ne sont que des démos qui ont été créées pour nous Nous en avons donc un pour le journal de la boutique et pour le contact. Et puis voici la page d'accueil. Et puis nous en avons d'autres ici, l' expédition, les retours et les revendeurs C'est parce qu'il s' agit d'une boutique en ligne, mais nous n'aurons pas besoin de ces choses. Je vais donc simplement les supprimer. Et je n'ai pas besoin de boutique, va, donc je vais le supprimer. Comme vous pouvez le voir ici, il s'agit la navigation principale qui se trouve dans l'en-tête du site Web. Et ici, ce sont ceux qui ne sont pas liés. Donc pas dans la navigation principale. Mais si vous voulez les mettre dedans, faites-les simplement glisser vers le haut. Et comme vous pouvez le voir, maintenant, la maison est là, mais je ne veux pas vraiment qu'elle y soit de toute façon, donc je vais la remettre dans linked. C'est donc ce que j'attends de mon site Web. Je veux un journal. Je veux une page A, et je veux une page de contact. Mais je ne veux pas utiliser le mot journal, alors je vais le remplacer par blog. Je passe donc le curseur ici et je clique sur l'icône des paramètres. Changez le titre de la page en blog. Titre de navigation vers le blog. C'est ce qui apparaît dans la barre de navigation. Et le slug d'URL vers le blog ou autre. Et assurez-vous que la page est activée. Celui-ci l' est déjà, alors cliquez sur Enregistrer. Comme vous pouvez le constater, la démo a disparu de là car elle est désormais activée. Activons simplement les deux autres. Et quand j'arrive sur cette page, c'est fait automatiquement, alors fermez-la et vous verrez que la démo a disparu. Idem ici et pareil ici sur la page d'accueil. Toutes les pages sont donc maintenant en ligne et toutes appelées, je veux qu'elles s'appellent. Alors revenons en arrière. 4. Éléments globaux: OK. Commençons maintenant à modifier le site Web, et pour ce faire, cliquez ici sur le bouton d'édition. OK. La première chose par laquelle je veux commencer ici est le backend du site Web. Ce sera quelque chose qui apparaîtra partout. Nous parlons donc des couleurs que je vais utiliser et des polices que je vais utiliser. Une chose très importante avec les sites Web est la cohérence. Vous souhaitez donc continuer à utiliser les mêmes couleurs et les mêmes polices sur l'ensemble du site Web. Et l'espace carré est excellent car il vous permet de tout configurer en une seule fois. Donc, pour modifier les couleurs de police et d'autres parties du site Web , rendez-vous ici sur cette icône de styles de site. Comme vous le verrez ici, ce sont toutes les choses que vous pouvez modifier, les polices, les couleurs, les animations, l'espacement, etc. Commençons par les couleurs. Il s'agit donc de la palette de couleurs qui a déjà été attribuée à ce site Web. Et les couleurs choisies ici sont adaptées à ce qui est vendu ici, des savons. Cependant, ce site Web que nous allons créer est entièrement consacré aux jeux vidéo rétro. Nous avons besoin d'une palette de couleurs différente. Nous avons besoin de quelque chose qui représente les couleurs vives des années 80 et 90. Alors venez ici pour modifier la palette. Et vous verrez qu' il existe déjà de nombreux préréglages par espace carré Si vous parcourez le site Web vers le bas, vous verrez comment se déclinent les différentes couleurs. Nous avons donc un jaune primaire puis un rouge secondaire. Et tu sais, ça a l'air plutôt sympa, en fait, mais je veux quelque chose de légèrement différent. Donc, ce que je vais faire, c'est entrer et modifier ceci. Ces deux extrémités de la palette sont parfaites, un blanc droit et un noir droit. Ce sont les trois que je souhaite changer. Je veux du jaune, mais je veux un jaune plus vif. Je vais donc cliquer sur le jaune. Ensuite, vous pouvez jouer ici avec différentes couleurs. Donc, si je veux choisir un vert, je le déplacerai là-bas. Mais ce que je veux, c'est un jaune j'en veux un très brillant. Donc, à mi-chemin entre l'orange et le vert. C'est déjà assez clair, mais vous pouvez jouer avec les niveaux de couleur ci-dessus, pour obtenir des couleurs plus foncées ou plus claires. Je veux être très brillant, alors passons directement dans ce coin. Nous y voilà. Celui-là à la fin. C'est parfait. J'adore ce jaune. C'est beau et brillant. La deuxième couleur qu'ils utilisent est un peu le rouge orangé, mais je veux un vrai rose Je veux une couleur magenta intense. Faisons glisser celui-ci ici dans cette sorte de section rose vif, un peu plus claire, je crois. Faisons simplement défiler la page vers le bas pour voir où cela est utilisé. Ah, on y va. J'adore ça. J'adore l'équilibre entre le jaune et le rose. C'est vraiment sympa. Vraiment brillant. Et puis encore une couleur que je veux changer. C'est un peu comme un rouge foncé, une sorte de marron Je veux que ce soit une sorte de bleu, mais un bleu vraiment vif. Cela n'est pas encore utilisé sur la page, mais je pense que cela semble plutôt intéressant. Peut-être. Oui, allons-y. Elle est encore un peu plus lumineuse. Nous verrons où cela sera utilisé plus tard. Si nous voulons intervenir et le modifier, nous pouvons le changer à tout moment. C'est ce qui fait la beauté de tout cela. Maintenant, c'est parti pour les couleurs. Revenons en arrière et examinons les polices de caractères. Lorsque vous arrivez ici, vous verrez les styles de texte globaux. Comme vous pouvez le voir ici, elles apparaissent sur l'ensemble du site. Ainsi, lorsque nous modifierons les titres, cela changera tous les titres du site Web Donc, celles-ci sont très grandes ici et celles un peu plus petites ici. Si je clique dessus. Vous verrez combien d' options différentes vous avez ici. Vous avez donc quatre tailles de titre différentes. Celui-ci étant le plus gros, ce serait un titre. Et ce serait un titre deux. Et la police choisie ici, une jolie police Serif, convient au site web de SOAP Eh bien, je veux quelque chose d'un peu plus fort, d'un peu plus lumineux. Je suis graphiste professionnel, et j'ai l'idée de choisir polices et de savoir lesquelles utiliser. Eh bien, j'ai toute l'expérience nécessaire ce domaine au cours de ma carrière. Si vos connaissances en matière choix de polices ne sont pas aussi solides que cela, je vous recommande vivement de consulter cette page. Il s'agit d'une page gérée par Google Fonts qui vous expliquera la meilleure façon de choisir le type. Le lien se trouve ci-dessous dans la section A. Et sur cette page, faites défiler la page vers le bas jusqu'à ce que vous voyiez celle-ci, une liste de contrôle pour choisir le type Il s'agit d'un excellent site Web qui vous explique les meilleures façons choisir différentes polices en fonction de votre image de marque, du produit que vous essayez de promouvoir. Alors venez ici et lisez bien tout cela. Si vous avez des questions sur la typographie et le choix des polices, envoyez-moi un message ici, et je vous répondrai dès que possible Maintenant, pour ce projet, je veux juste utiliser les polices Sansa, et j'ai deux choix que j'aimerais utiliser sur le site Web Le premier est celui-ci appelé Euros style. Et le second est celui-ci appelé interface. Dans Square Space, vous pouvez simplement parcourir toutes les polices qui s'y trouvent et les essayer toutes une par une. Découvrez ce qui fonctionne pour vous. Ce que je vais vous montrer ici, c'est si vous avez déjà le choix. Vous pouvez voir si cela est disponible dans l'espace carré. Et dans le premier cas, nous voulons changer l' endroit où nous nous trouvons déjà dans la section des titres. Changeons donc la famille de polices choisie ici, et je veux vraiment Eurostyle. Je vais donc cliquer dessus. Et cela me montrera quelles polices sont actuellement utilisées. Mais je ne veux ni l'une ni l'autre, donc je vais parcourir toutes les polices. Je peux rechercher des polices. Maintenant, toutes les polices ne sont pas toujours là pour que vous puissiez les utiliser. Vous trouverez peut-être le site Web de quelqu'un d'autre qui n'est pas disponible dans Square Space, ce qui peut être dû à des raisons de licence. Mais si vous trouvez une autre police utilisée dans un autre modèle d' espace carré, elle sera certainement là. Écrivons en euros. Faisons défiler la page vers le bas, nous avons étendu le style européen. C'est celui que je veux. Je vais juste vérifier que c' est déjà bien mieux. Vous pouvez voir que certaines choses viennent de changer ici. Le nom du site web et aussi ce gros titre ici, du savon pour tout le monde Revenons juste en arrière. Encore une chose. Je veux qu'il soit un peu plus fort que ça. Donc, si vous cliquez sur ce poids, évidemment, plus le chiffre est grand, plus le poids est élevé. Je peux aller jusqu'à 500 ou 900. 900. Allons y jeter un œil. Ça fait un peu deux quatre. Allons-y 500. Quelque part au milieu des deux. Oui, c'est sympa. Ensuite, du style, normal. Ce serait le cas s'il y avait différentes options italique ou en gras, mais nous avons juste besoin de l'option normale Ensuite, nous y reviendrons une seconde, mais avec la transformation du texte. Ce que je veux en fait, c'est qu'ils soient tous en majuscules. Nous y voilà. Ça a l'air très cool. C'est un peu plus fort, un peu plus sourd . Du savon pour tous. Cependant, comme vous pouvez le constater, la police est peut-être un peu trop grande. Réduisons-en simplement la taille. C'est le titre 1. Nous allons choisir celui-ci ici et le déposer un peu vers le bas. Disons peut-être 6,5. Oui, je trouve que ça a l'air bien. Et encore une chose. Je pense qu'il y a trop d'espace entre chaque mot ici. Il s'agit de la hauteur de la ligne. Jouons juste avec ça. Cela modifiera la hauteur de ligne pour toutes les versions de ce document, pas seulement pour le titre un, mais aussi pour le titre deux, titre trois et le titre quatre. Peut-être descendre à un ou peut-être même Oui, pas 0,9. Je crois que j'aime bien ça. Un espacement entre les lettres qui semble correct. J'en suis plutôt content, vous voulez un peu d'espace dessus. Ainsi, lorsque les gens consultent le site Web sur leur ordinateur de bureau, sur leur table, sur leur mobile, il sera toujours lisible. Mais jouons avec ça. OK. Je vais le laisser à 0,04 Et si nous voulons changer cela à tout moment, si nous pensons que cela fonctionne ici mais pas ailleurs sur le site, revenez simplement et modifiez-le. Et encore une fois, si vous le modifiez une fois, cela le changera sur l'ensemble du site Web. OK, alors revenons en arrière. Maintenant, ce que je veux modifier, ce sont les paragraphes. C'est donc le corps du texte principal que vous pouvez voir. Voyons donc où cela est utilisé. Ce genre de police ici. Cliquons sur les paragraphes. C'est en fait une très belle police, comme c'est déjà le cas. Mais c'est ici que je veux utiliser l' autre interface de police que j'ai choisie. polices de navigateur. Et celle-ci s' appelait interface, n'est-ce pas ? Nous y voilà. C'est donc ce que j'ai choisi . J'aime beaucoup le San Serra, je pense que c'est un peu plus approprié pour un site web sur les jeux vidéo. Mais vous pouvez choisir ce que vous voulez pour cela, et j'aimerais voir ce que vous choisirez. Revenons donc d'un pas en arrière. Encore une fois, nous avons différentes tailles pour les polices de paragraphe ici. Paragraphes un, deux et trois. Ils sont tous de trois tailles différentes, vous pouvez donc choisir les plus grands et les plus petits. En fait, je pense que c'est un bon équilibre en ce moment en termes de poids. Je pense que c'est un peu léger parce que nous l'utilisons sur un fond très clair. Alors alourdissons un peu ce chiffre, peut-être encore 400. Oui, c'est bien mieux. Je suis content de tout ce qu'il y a ici. Je n'ai pas besoin de le mettre en majuscules. Cela fonctionne pour les titres , mais pas pour le texte plus petit. Alors, gardons-le tel qu' il est, sans aucun. Revenons en arrière. Puis des boutons. Voyons où se trouvent les boutons. Voici un bouton. Nous en avons un gros au sommet. Passons donc aux boutons. Et la famille pour ça ? Eh bien, je pense qu'il doit y avoir à nouveau Eurostyle. C'est génial car cela m'indique maintenant quelles polices sont utilisées sur l'ensemble du site Web. Il va donc falloir le retrouver. Passons à Eurostyle Extended. Oui, j'adore ça. Ça a l'air vraiment cool. Revenons en arrière. Nous avons trois types de boutons différents ici, et ils sont tous de tailles différentes, comme vous pouvez le voir. Ils pèsent tous le même poids, et je pense que 500, je pense que c'est vraiment bien pour ce que nous avons ici. Mais encore une fois, nous pouvons revenir et modifier cela plus tard si vous le souhaitez. Et assurez-vous de les définir tous les trois sur la même police. Ensuite, le dernier est divers. Voyons ce que nous avons ici. C'est donc un peu comme une police d'accent supplémentaire qui ne serait pas utilisée sur l'ensemble du site Web, mais peut-être que vous voudriez l' utiliser comme une sorte d' élément surligné pour faire ressortir quelque chose de vraiment original et quelque chose de vraiment cool. C'est donc un endroit où vous pouvez être un peu plus créatif. Venons donc ici en famille. Et parcourez à nouveau toutes les polices. Maintenant, je veux quelque chose qui ressemble vraiment à huit bits, comme s'il venait des années 80 ou quelque chose comme ça. Si nous fabriquons des machines d'arcade, voyons simplement ce que nous avons qui respecte les règles de l'arcade. Tout cela a l'air vraiment cool et vraiment original. peu comme celui-ci où il est moitié blanc et à moitié noir. Alors choisissons-le. Maintenant, cela n'est encore utilisé nulle part. Mais je vais vous montrer dans l'en-tête à quel point cela peut paraître cool. Alors revenons en arrière. Le poids et la taille sont tout à fait corrects pour le moment , retour aux styles d'assise. Animations. Vous trouverez une belle liste d'animations ici. Et c'est la façon dont les différentes parties de votre site Web se chargeront lorsqu'un utilisateur arrive sur le site pour la première fois. Donc, pour le moment où il est réglé pour s'estomper, voyons à quoi ressemble l'échelle. OK, c'est plutôt cool. Vous pouvez voir l' en-tête en haut, le logo là. Cela s'adapte en quelque sorte. Toboggan. Si ça tombe , accrochez-le. C'est cool et flexible. Mais, tu sais, je crois que j'aime les clips. Restons-en à celui-ci pour le moment, puis accélérez. Lent, moyen, rapide. Je pense que je vais m'en tenir à la lenteur. Oui, j'aime bien ça. Encore une fois, jouez avec ce qui, selon vous, fonctionne ici. Si vous aimez le flex, c'est un peu fou, mais oui, c'est plutôt cool. Choisissez le flex. Je n'utilise qu'un clip. Puis espacement. Cela concerne donc toute la largeur de la page. Et c'est la largeur maximale que peut atteindre un site Web. Et puis la marge du site. C'est la lacune sur le côté du site Web ici. Et pour le moment c'est sur deux, si je le réduis à zéro, vous verrez que tout ira droit au but. Et ça a l'air plutôt cool. Mais de petites choses comme ça, elles sont trop proches du bord. Ils ont tous besoin d'un peu d' espace pour respirer. Alors, tu sais quoi ? Je pense que je vais juste garder ces deux-là. Voyons à quoi ressemblent les trois. D'accord, peut-être trois Je pense que cela donne juste un peu plus de marge de manœuvre ici. Et puis des boutons. Nous y avons déjà jeté un œil. Et comme vous pouvez le voir ici, il s'agit simplement d'une façon différente de passer en revue les trois différentes, mais il s'agit déjà de choisir notre police, et la forme que nous voulons est une pilule. Tu peux choisir quelque chose de différent. Tu peux en avoir un carré. Vous le verrez passer au carré ou à ce type de choix très rond. Celui-ci aux bords incurvés. J'aime bien le « p ». Mais jouez un peu ici et voyez ce qui vous convient le mieux. Aperçu. Eh bien, ce serait juste une plus grande bordure à l'extérieur. En fait, oui. Je trouve ça cool d'avoir ça un peu plus fort, peut-être quatre. OK. Retour aux styles du site. Blocs d'images. Écoutez, c'est quelque chose dont vous n' avez pas vraiment à vous inquiéter ici. N'hésitez pas à jouer avec, mais il ne s'agit que de différentes manières de déposer des images sur votre site Web. Vous pouvez l'afficher, comme vous avez du texte au-dessus d'une image. Mais nous n'allons pas les examiner pour le moment. Mais n'hésitez pas à jeter un coup d'œil autour de vous. OK. 5. Votre en-tête de site Web: Ensuite, je vais jouer avec cette section d'en-tête. Et la première chose que je veux changer là-dedans, c'est la police. Revenons sur les polices. Il s'agit d'une autre façon d' accéder à différents éléments. Vous n'avez pas besoin de passer par le menu ici. Vous cliquez sur la pièce que vous souhaitez modifier. Vous pouvez modifier cela. Commençons donc par celui-là. Le logo, l' en-tête principal du site Web. Comme vous pouvez le voir ici, c'est ce que l'on appelle le titre du site. C'est prendre la police du titre. Si vous venez ici, vous pouvez remplacer par une police personnalisée. Lorsque vous modifiez cela, c'est littéralement changer celle-ci ici, non pas par la police d'en-tête globale. Allons donc en famille. Et tu sais quoi, c'est là que je veux utiliser l'arcade Puffin. Voyons à quoi ça ressemble. Oh oui, j'adore ça. Ça a l'air vraiment cool. En tant que logo était un en-tête principal pour l'ensemble du site Web. C'est un peu plus petit. Revenons en arrière et jouons avec la taille. Je veux qu'il soit assez grand. Ensuite, juste une petite chose. Les lettres sont un peu trop proches l'une de l'autre, alors faisons glisser ça un peu. Oui, ça a l'air bien. Ok, c'est vraiment cool. Ça arrive vraiment. Maintenant, cliquons sur celui-ci ici. C'est notre bar de navigation. Comme vous pouvez le constater, elle utilise toujours l'ancienne police qui s'y trouvait. Allons ici, éditons ça. Je pense que le style euro étendu va paraître cool ici. Oui, ça a l'air vraiment cool. Mais vous savez quoi, je veux ça vraiment audacieux. Quel était le plus gros que nous ayons eu ici ? 900. Oui, j'adore ça. Joli et lumineux et criez T. Alors le titre du site mobile. Eh bien, rappelez-vous que si vous voulez voir à quoi ressemble quelque chose sur un ordinateur de bureau et sur mobile, ils seront légèrement différents parce que l'un est représenté, l'autre est paysage. Normalement, éditez votre site Web dans la version de bureau. Mais si jamais vous voulez voir ce que c'est dans la version mobile, cliquez sur celui-ci, et cela va changer. Nous pouvons donc maintenant voir comment toutes les couleurs fonctionnent, toutes les polices fonctionnent, les boutons et autres. Celui-ci ici, même si c'est encore dans l'ancienne version, n'est-ce pas ? Donc, si je clique sur le titre de ce site mobile, c'est toujours un titre. Allons donc ici. Et reprenons le costume et faisons ce que nous venons de faire pour la version de bureau. Passons donc à l'arcade Puffin. Retournez en arrière. Et puis, qu'est-ce que j'ai dit ? J'ai défini celui-ci sur 0, n'ai-je pas tapé 0 là-bas ? C'est parfait. Hauteur de la ligne. Disons simplement parce qu'il y a assis l'un sur l'autre maintenant, parce que le mobile est évidemment beaucoup plus petit. Faisons en sorte que cela corresponde. On y va. Ensuite, la taille de celui-ci. Disons simplement que je veux qu'il soit assez vieux. Peut-être 3,5. Et c'est génial. Bon, revenons en arrière. Maintenant que nous l'avons fait ici, cliquons sur Fermer, puis examinons l'en-tête. Je vais donc sortir de la version mobile. Jetons un coup d'œil à la vue du bureau. Cliquez ensuite sur cette section. Comme vous pouvez le voir ici, cela nous permettra de modifier l'en-tête du site. Je vois en haut que vous avez trois options différentes. Le premier est global, ce qui se produit sur tous les appareils. Alors que si vous cliquez sur celui-ci, c'est ce qui se produira sur la version de bureau, et c'est ce qui se produira sur la version mobile. Allons-y avec Global Fixe. Tout d'abord, le titre du site et le logo. Eh bien, nous avons déjà un logo que nous avons créé nous-mêmes à l'aide de polices. C'est une façon très simple de le faire. Mais si vous avez déjà votre propre logo visuel que vous avez créé en tant qu' image ici. éléments. C'est donc tout ce que nous pouvons voir en haut ici. Tout d'abord, bouton, je veux un bouton ici parce que je voulais passer à la page de contact plutôt que de dire commencer, je vais dire entrer en contact en fonction de l'endroit où je veux ça pour y aller. Eh bien, cela pourrait aller sur n'importe quel autre site Web, mais je veux qu'il aille sur l'une des pages de notre site Web. Cliquons donc sur le rouage. Vous pouvez ensuite l'envoyer vers une adresse e-mail, une adresse Web vers un autre fichier. Nous voulons qu'il aille sur une autre page de notre site Web. Cliquez donc sur la page. Je veux que cela aille sur la page de contact. Littéralement, quand je clique sur ce petit menu déroulant de toutes les pages que j'ai deux, choisissons simplement contact. Ouverture d'une nouvelle fenêtre. Faites-le s'il s'agit d'un site Web différent, mais s'il se trouve dans votre propre site Web, laissez-le de côté. Cliquez sur Enregistrer. Ensuite, les liens sociaux. Oui, je veux que leurs utilisateurs cliquent sur ce bouton. Il les amènera sur notre page Instagram. Si nous y allons, modifiez les liens sociaux. Vous pouvez en ajouter d'autres ici. Vous pouvez ajouter sur Facebook ou Twitter ou tout ce que vous voulez. Je veux juste Instagram au moment où il passe à celui de Squarespace. Envoyez-le sur la page GameOver. Gardez ça. Alors, un petit concurrent si on dit qu'il faut rendre ça un peu plus grand, n'est-ce pas ? Oui, ils se battent. Ça a l'air bien. Commutateur de langue. Ne vous inquiétez pas pour cette partie. C'est ce que vous pouvez voir ici, et c'est ce que vous avez si vous avez un site Web de vente, mais nous n'en avions pas un, donc nous allons désactiver celui-ci. On y va. C'est parfait. Maintenant. Revenons en arrière. Maintenant, c'est Morgan, amusez-vous un peu. Ce que nous avons ici, ce sont des choix de styles différents. Nous avons un thème dégradé solide, dynamique, thème dégradé solide, dynamique. Eh bien, j'ai tous ces éléments, ils fonctionnent tous. Mais ce que j'ai vu quand j'ai cliqué sur le thème, c'est tout ça ici. Il s'agit de toutes les couleurs que nous avons déjà choisies pour l'ensemble du site Web. Un jeu avec différents niveaux pour choisir celui que je pense que ça va paraître cool. J'ai tous ces éléments. J'ai aimé la façon dont nous avons eu couleurs vives à partir la première partie de la section des héros. Donc, je veux vraiment l'un des plus légers. Et celle-ci, noire, est un peu plane. Allons donc avec le rose. Oui, j'aime vraiment ça. J'aime que le logo de notre site Web principal soit en rose vif , puis entrer dans le bouton tactile. C'est vraiment cool. Je vais donc m'en tenir à ça. Puis le suivant ici, position fixe. Cela signifie simplement que l'en-tête reste dans une certaine position lorsque les utilisateurs parcourent votre page d'accueil et d'autres pages du site Web ? Eh bien, ne pas rester actif car cela aide les gens à naviguer sur l' ensemble du site Web. Vous avez deux options différentes ici. L'un est celui de base où il y restera constamment. Je veux faire défiler vers l'arrière. Ainsi, lorsque vous faites défiler vers le bas, il disparaît. Lorsque vous faites défiler vers le haut, il revient. C'est Anita, une façon cool de permettre une navigation supplémentaire aux utilisateurs. Alors choisissons le défilement là-bas, n'est-ce pas ? Ok, donc c'est tout de configurer les paramètres globaux. Voyons ce que nous avons obtenu pour la mise en page de l' en-tête de la version de bureau. J'ai donc cette option ici et elle déplacera chacun de ces éléments. Vous auriez un peu de jeu avec elle et vous verriez celui qui vous convient le mieux. En toute justice, je pense que j'ai aimé ce qu'il était à l'origine avec l'icône ici, ce bouton là. Et puis ces deux parties se sont centralisées. Je pense que c'est juste un bel équilibre de tout et il y a beaucoup d' espace de respiration blanc de chaque côté. Je vais m'en tenir à ça. Ne vous inquiétez pas de la largeur. Nous garderons cela aussi plein. Rembourrage vertical. Eh bien, c'est la quantité de place qu'il occupe en haut et en bas, c'est un peu grand. Faisons en sorte que cela soit un peu plus petit. Peut-être que deux éléments espacent, eh bien, c'est un peu l' espacement entre ces deux choses ici. Déposons cela aussi bas que possible. Oui, c'est plutôt bien. En fait, je pense qu'il faut juste un peu plus d'espace au sommet. Passons à 2.2. Espacement lié. Eh bien, c'est l' espace entre les deux blogs sur le contact, toutes les parties de notre barre de navigation. O. Atteins ça jusqu'à trois, je pense. Oui, c'est cool. Et puis la version mobile mobile. Alors, comment ça ressemble ? Comment cela fonctionne-t-il pour vous ? Nous avons ici quelques options différentes. Tout d'abord, la disposition des en-têtes. Encore une fois, nous pouvons avoir le logo à gauche, le menu hamburger à droite ou choisir différentes options pour cela. J'aime bien celui-ci car le logo est centralisé, puis le menu des hamburgers se trouve sur la gauche. Cependant, je pense que le texte est juste un peu trop volumineux. Je voulais courir sur une seule ligne comme sur le bureau. Je vais donc le garder tel quel. Ensuite, nous reviendrons en arrière et nous modifierons à nouveau la police. Différentes options pour votre menu de hamburgers. Un peu comme le plus, pour être honnête. Je pense que cela représente les machines d'arcade de la vieille école. Nous pouvons modifier l' épaisseur de cette ligne. Petit, moyen, grand, je pense que ça sent bon, beau et subtil. Ensuite, la prochaine option ici est le menu de superposition, et c'est à quoi cela ressemble. C'est lorsque quelqu'un clique sur le Plus, cela apparaîtra. Si j'y retourne, ça nous ramène à l'autre. La superposition se passe comme ça. C'est vraiment cool la façon dont il se transforme en jaune avec le noir sur le dessus. J'aime bien ça. Vous avez ici la barre de navigation principale, bouton d'icône Instagram, mais j' aimerais qu'elle soit centralisée, pour être honnête. Oui, nous y sommes. C'est beaucoup plus soigné. couleurs. Encore une fois, jouez avec tout ce que nous avons obtenu ici. Voyez lequel vous convient le mieux si vous souhaitez que le rose vif aille avec ça. Mais j'ai aimé le jaune. Gardons ça avec ça. Maintenant, nous en avons fini avec ça. Il suffit de cliquer sur Enregistrer. Puis modifiez à nouveau. Reprenons-le en mobile. Puis cliquez à nouveau sur les styles du site. Il existe deux polices. Cliquez sur le titre du site mobile et réduissons-le un peu plus petit. Il se trouve donc sur une seule ligne. Je pense à 2,5, et c'est bien. Il est là, il est lumineux, mais il reste petit et subtil. C'est donc tout fait. Sauvons ça. Voyons comment tout cela fonctionne. Oui, j'adore ça. J'adore ça. Je survole ce bouton et il devient rose. Et sur le bureau. Également très cool. Nous pouvons donc maintenant passer à la conception de l'ensemble de la page d'accueil. 6. Conception de site Web : Page d'accueil A: Nous allons maintenant commencer à éditer toutes nos pages. La section pages ici, nous avons quatre pages. Le meilleur pour commencer est la page d'accueil qui était déjà disponible. Donc ce que je veux sur cette page d'accueil, c' est quelque chose assez simple et simple qui indique aux gens qui nous sommes, ce que nous sommes, ce que nous pouvons leur offrir. Ce que je veux, c'est une section pour le blog, une section pour la section À propos du contact. Peut-être quelques petites images supplémentaires là-dedans pour montrer à quel point c'est cool et décalé. Nous allons donc commencer ici avec cette section. Et c'est ce qu'on appelle le héros est toujours la première partie que chaque utilisateur voit quand il arrive pour la première fois sur votre site Web, que ce soit sur ordinateur de bureau ou mobile. Allons donc modifier cette page. Et vous pouvez voir quels éléments ont déjà été ajoutés par Squarespace. Dans le modèle, nous avons une section entière, tout jusqu'à cette ligne bleue. C'est tout à fait dans une section. Cela signifie que nous pouvons modifier l'arrière-plan de cette section et cela va tout changer jusqu' à la ligne bleue. Commençons donc par ça. En survolant ici. Il me permet de modifier la section. Nous pouvons jouer avec différentes tailles ici, la hauteur de section est minimale, elle est dix, mais nous pouvons l'agrandir lorsque vous êtes petit, moyen ou grand. C'est la quantité d'espace entre ce que vous pouvez voir ici en haut. C'est le héros. Je veux que cela reste assez bas. Donc, restons à dix heures. En fait, comme vous pouvez le voir, il y a une petite entretoise supplémentaire ici. Je veux sortir ça. Donc, si vous voulez le retirer, survolez l'image et vous verrez que le rouge a été supprimé. Ok, je préfère cela maintenant, maintenant nous avons le même genre d'espace à droite et au-dessus de l'image. Cependant, je pense que je souhaite changer la couleur d'arrière-plan. Nous cliquons donc ici et passons à l'arrière-plan. Maintenant, vous pouvez faire plusieurs choses différentes ici. Vous pouvez mettre une image d'arrière-plan, vous pouvez mettre une vidéo d'arrière-plan ou une image d'arrière-plan. Je vais vous les montrer très bientôt. Mais ce que nous voulons vraiment faire, c'est la changer en couleur. Cliquons donc sur Colors. Et c'est ici que nous pouvons jouer avec les différentes couleurs déjà présentes dans notre palette de couleurs. Et tu sais ce que je veux pour ça ? Je veux le rose vif. Je pense que c'est bien équilibré depuis le logo et le bouton dans cette première section, allons avec le rose. Lorsque vous en avez fini, il suffit de cliquer ailleurs loin de cette petite fenêtre. Ce que je veux faire ici, c'est changer cette petite section ou c'est une section d'image qui a déjà configuré des textes sur le sous-titre gauche et le bouton ci-dessous. Si vous voulez modifier le style de cela. Cliquez sur cette section où elle indique l'image et cliquez sur le crayon. Ce que vous pouvez faire ici, c'est jouer avec le design. Pour le moment, nous avons une option de carte. Vous pouvez aller poster, comme je l'ai dit, c'est à ce moment que le texte est au-dessus de l'image. chevauchement. Et une colonne qui s'appelle un peu désordonnée. Des choses comme la pile, où il est au-dessus des textes un peu trop haut. J'aime bien ce que nous avions avant pour être honnête, qui a une carte. Je peux jouer autour de moi. Je pourrais mettre l' image à gauche ou sur la droite. Je pense que je suis comme à droite. Donc, restons simplement à ce que nous avons là. Je veux que vous jouiez avec ça et que vous fassiez quelque chose d'un peu différent de ce que j'ai fait ici. Donnez-lui votre propre style s'il vous plaît. Nous revenons donc au contenu. Ce que nous avons ici sont les autres éléments qui apparaissent ici. La principale chose que nous avons est un bouton. Et nous allons dire que cela va être lié à une autre page. Je veux qu'il aille sur la page À propos. Alors appelons-le simplement « À propos de nous ». Pour le moment, il est dit que ça va faire ses courses. Cette page n'existe plus. Cliquons donc sur le rouage. Revenons à la page, supprimons celle-ci, puis choisissez Enregistrer. Ensuite, le titre est ici. Eh bien, du savon pour tous ceux qui travaillent pour le site web de savon. Je vais donc changer ça en jeux rétro. Et puis la période que je couvre est de 85 à 95 ans. Oui, c'était génial. Cela fonctionne très bien avec le texte blanc sur le fond rose. La seule chose, c'est que je pense que pour celui-là, c'est un peu léger. Faisons simplement en sorte que ça soit audacieux. Et ça va mettre en évidence tous les textes et appuyer sur le ballon, oui, allez. Oui, c'était parfait. J'adore ça. Sous-titre. Eh bien, je veux dire ici aussi quelque chose qui fait suite à la une des journaux. Je veux dire ce que nous faisons sur ce site Web. Donc, des blogs hebdomadaires sur tous les meilleurs jeux vidéo de 1985 à 1995. On y va. Ensuite, une autre chose qui a besoin de changer, évidemment l'image parce qu'il s'agit de savon. Dans la section Contenu, cliquez sur Remplacer et choisissez Charger un fichier. Dans la section Contenu, Vous pouvez rechercher des images de stock si vous le souhaitez. Mais j'ai déjà configuré mon image pour celle-ci, donc je vais cliquer sur le fichier Upload. Voici donc tout mon jeu sur les choix. Je les ai déjà édités dans Photoshop. Vous souhaitez en savoir plus sur l' édition d'images destinées à être utilisées sur Internet. Ou allez dans la section À propos. Jetez un coup d'œil à mon visage. Cliquez dessus. Cela va faire apparaître toute ma page Skillshare. Si vous faites défiler vers le bas, vous verrez toutes les autres leçons que j'ai là-dedans. Et ils en ont un pour le téléchargement d'images. Comment optimiser vos photos pour que votre site Web fonctionne correctement et rapidement. Assurez-vous de regarder celui-ci pour avoir une meilleure idée de la façon dont la taille des images doit fonctionner sur Internet. J'ai déjà redimensionné tous ces éléments. Je vais choisir celui-là, Space Invaders à l'arcade rétro. Et oui, on y va. J'adore ça. Comme vous pouvez le constater, la section héros occupe une page complète. Ainsi, l'utilisateur peut voir d'une fois qui nous sommes, ce dont nous sommes, et il veut en savoir plus sur nous. Ils vont cliquer sur ce bouton. Vous pouvez voir à quoi cela ressemble sur mobile. mobiles très bien sont déplacés vers le haut avec le texte ci-dessous. Si vous deviez ouvrir votre téléphone portable, c'est une bonne introduction à qui nous sommes et à ce que nous faisons. Travaillez sur votre propre section de héros et suivez exactement ce que j'ai fait ici. Nous allons lui donner votre propre style personnel et le rendre encore plus clair ici. Bon, maintenant je veux faire défiler vers le bas et travailler sur la section suivante. C'est ici que je vais mettre en avant tous nos derniers articles de blog. Maintenant, le fond est jaune. Je pense que j'aime que ça soit jaune. J'aime la façon dont il fait défiler du blanc en haut au rose au jaune. Ce titre parle des savons préférés. Ce que nous ne voulons pas que nous voulions parler de jeux vidéo. Je vais juste coller cet en-tête. Vous pouvez choisir si vous voulez qu'il soit aligné à gauche , centralisé, aligné à droite, je pense qu'il sera centralisé ici parce qu'il placé au-dessus des derniers messages. Ne pensez pas que nous ayons besoin de cet espace . Je peux supprimer cela. Si vous voulez simplement jouer avec la hauteur de l'entretoise, vous pouvez simplement jouer avec celle-ci ici. Faites-le plus petit, agrandissez-le. Mais je ne pense pas que nous en ayons besoin. Supprimez donc ça. Je pense que ça a l'air cool dans la police noire. Mais je vais voir si je peux jouer avec la couleur du tout ici. Donc, ce qu'il y a actuellement est léger. Je pense que je veux que la lumière soit oui. Où ça va me donner l' en-tête rose au-dessus du jaune. Je pense que c'est vraiment cool. En termes de format. Eh bien, je pense que nous avions juste besoin d'un peu plus d' espace de respiration au-dessus de ça ici. Je pense que ça va juste passer trop vite à la une des journaux. suffit donc de le faire, de le personnaliser et de le rendre un peu plus haut. Disons peut-être 40. Oui, et c'est un peu plus d'espace de respiration. Maintenant, ce que nous avons ici, eh bien, ce ne sont que des images avec du texte. Nous allons déposer nos blogs là-dedans. Et puis ce bouton dessus pour accéder à tous les blogs. Il suffit donc de modifier le texte ici ou les blogs. Puis faites, je passe à la page du blog. Économisez. Ok, donc ce que nous avons ici, je veux les supprimer et je veux les ajouter dans une nouvelle section. Supprimons, supprimons. Supprimer. Vous pouvez voir avec chacun qu'il va en quelque sorte sur toute la largeur, ce qui sera de toute façon trop grand. Mais ce que je veux faire, c'est ajouter un résumé de tous nos derniers blocs dans Squarespace, très convivial. Si vous souhaitez ajouter quelque chose de nouveau, vous suffit de cliquer sur le Plus où vous voulez qu'il se trouve. Nous pouvons donc aller au-dessus de quelque chose en dessous de quelque chose. Je veux donc qu'il soit ici en dessous du titre. Je vais donc cliquer sur le plus. Et cela vous montrera toutes les différentes options que vous pouvez déposer ici, elles ont ce truc de bloc de défilement très cool. Vous pouvez simplement mettre du texte, de l'image, du bouton , de la vidéo, de regarder tous ces éléments, jouer avec eux. Découvrez ce que vous pouvez faire pour votre propre site Web qui fonctionnera vraiment pour vous. Mais ce que je veux faire ici, c'est un résumé, c'est un résumé de tous les derniers blogs. Cela va tomber, et ça n'a pas encore l'air cool. Mais si nous allons sélectionner une page, je vais choisir la page du blog. On y va. Cela est maintenant remplacé par les trois blogs déjà entrés par Squarespace. Encore une fois, il s'agit savon et de désinfectant pour les mains bricolage, pas de ce que nous voulons écrire, mais vous pouvez jouer avec l' affichage de tout ici. Revenons donc en arrière. Nous parlons maintenant la date de publication des métadonnées principales. Je ne veux pas que cela paraisse que vous pouvez simplement désactiver cela pour que vous n' ayez rien là. Eh bien, vous pouvez choisir autre chose. Je vais choisir une catégorie qui, pour le moment, ne vous montre rien, mais je vais vous montrer comment ça va fonctionner plus tard. Métadonnées secondaires. Eh bien, vous pouvez dire qui est l' auteur, qui a écrit le billet. Si vous souhaitez localiser le nombre de commentaires reçus, tout ce qui est pertinent pour vous. Mais je pense que je ne veux qu' une seule chose ici. Je veux la catégorie. Jouez avec vous-même et voyez ce qui fonctionne. Maintenant, concevez. Encore une fois, nous avons quelques options différentes. Carrousel. C'est plutôt sympa. Liste. C'est un peu désordonné. Et la grille. C'est plutôt cool. Mais je pense que j'aime bien le carrousel. J'aime bien ici la façon dont vous pouvez avoir plus de trois objets et les gens peuvent faire défiler. Il suffit donc de changer cela par d' autres éléments et vous pouvez le voir à l'écran. Changeons donc ça pour bien, tous nos messages. Nous allons donc le changer à 30. Comme vous pouvez le voir ici, nous avons maintenant cette petite flèche. Vous pouvez donc faire des allers-retours entre le dernier rapport d'aspect post, post et le plus ancien. Allons chercher une image carrée. Ça a l'air cool. On voit un peu plus de textes, petits, moyens, grands, peut-être grands. Ensuite, alignement. Je pense que j'aime me centraliser là-bas. Cela me dérange, c'est cette petite chose en haut qui dit un texte d'en-tête. Voyons simplement si je supprime ça. Oui, c'est parti. La seule chose qui doit être là. Ensuite, les éléments, c'est ce que nous allons voir. Nous voyons donc un titre, une image en vedette, exercice, un lien en savoir plus. C'est plutôt cool. Les gens savent qu'il faut cliquer là-dessus. Ça va aller jusqu'au poste. C'est ici que nous avons choisi la catégorie. Vous pouvez l'avoir sous le contenu. Je vais choisir au-dessus du titre. Ce qui va se passer ici les différentes catégories que nous utilisons pour nos blogs. Ils vont donc être des catégories telles que les années 1980, 1990, peut-être Nintendo, Sega, arcade, ce genre de choses. Ainsi, les gens savent à première vue exactement de quel genre de message il s'agit, de quel genre de jeu il parle de quel genre d'erreurs. Mais nous devons les ajouter. Nous le ferons donc un peu plus tard lorsque nous travaillerons sur la page du blog. Ok, donc c'est vraiment cool. Maintenant, la seule chose qui me dérange encore une fois, ce petit espace ici, je ne pense pas que nous ayons besoin de le retirer. Oui, je pense que j' aime ça comme ça va directement dans tous les blogs du bas, je vais tout de même centralisé. La seule chose, c'est que je ne peux pas tout voir en une seule fois. C'est donc un peu trop gros. Je peux réduire les images ici, mais je pense que ce que je veux faire, c'est modifier la largeur de la page. Encore une fois, passons à la section Modifier. Je ne vais donc pas éditer un seul élément ici. Je suis en train de modifier la page entière. Si vous voulez le faire, il suffit de cliquer loin de n'importe quel élément. Donc cet espace vide sur le clic droit sur cette section. Largeur du contenu au moment où il est en général, donc il remplit toute la page. Changeons ça pour les médias. Oui, c'est plutôt cool. J'aime bien ça. Je peux jouer avec l' alignement du contenu à gauche, le mettre à droite, mais évidemment centralisé va être beaucoup mieux. Alors, c'est presque tout à fait approprié. Je pense que certaines polices sont un peu trop grosses ici. Passons donc à nouveau à l'en-tête. C'est en ce moment, si on change ça par une rubrique trois, oui, c'est bien mieux. C'est juste un peu plus subtil maintenant. Ensuite, peut-être les tailles de police dans le résumé. Nous allons modifier cela. Que choisissons-nous pour celui-là ? J'ai peut-être choisi trop gros. Nous avions des médias de grande envergure. On y va. Maintenant, ce que vous pouvez voir, c'est l'affichage parfait sur une page de site Web. Ce que vous voulez pour chaque section, c'est pouvoir tout voir en même temps. C'est ainsi que les gens lisent de quoi il s'agit. Voyons donc le titre. Ils peuvent voir les derniers articles ici. Vous pouvez faire défiler cela et modifier les blogs qui apparaissent ici. Ou ils peuvent cliquer sur ce bouton et accéder à toute la page des journaux. Peut-être encore une chose. C'est un peu trop gros par rapport à tout le reste. Maintenant, ce que je veux faire, c'est passer à une taille plus petite. Donc, en ce moment, c'est le premier. Voyez ce qui est secondaire encore plus grand. Oui, on y va. Beaucoup plus subtil maintenant, je pense que ça marche bien d'avoir le gros ici. titre plus petit, un texte plus petit ici, puis tous les blogs adorent, c'est parfait. Maintenant, une chose qu'il est toujours prudent de noter aurait dû le faire après la première section. Cliquez toujours ici et cliquez sur Enregistrer. Cela signifie simplement que tout ce sur quoi nous travaillons est maintenant sauvegardé. Pour que si notre ordinateur tombe en panne ou quelque chose, nous ne perdons pas tout ce sur quoi nous avons travaillé. Assurez-vous donc de toujours cliquer dessus au fur et à mesure. L'autre option que vous avez ici, disons que j'ai écrit quelque chose ici. Meilleur site web au monde. Je ne veux pas dire ça. C'est un peu arrogant. Donc ce que je peux faire ici, c'est que je peux annuler et rétablir la pression du pied annuler. Il enlève les textes que je viens de mettre et c'est parti. Mais si j'ai pris quelque chose et que je veux peut-être le ramener, appuyez sur celui-ci quelques fois et cela refera tout ce que nous venons de faire. Même s'il s'agit probablement du meilleur site Web au monde, je vais le retirer. On y va. 7. Conception de site Web : Page d'accueil B: Vous pouvez maintenant jeter un coup d'œil à ce qui est déjà ici et vous pouvez jouer avec les sections qui ont été configurées pour vous. Et vous pouvez y entrer et vous pouvez tout modifier. Nous avons donc du texte ici, peu plus de texte que dans celui-ci, juste quelques images et tout est une grille. Mais si cela ne fonctionne pas vraiment pour vous, alors assurez-vous simplement de cliquer sur la section et de supprimer toute la section. Cela signifie qu'il ne sera plus là. Peut faire une erreur. N'hésitez pas à annuler ou à refaire si vous ne le souhaitez pas. Vous pouvez donc jouer avec les parties prédéfinies du modèle, ou vous pouvez ajouter une autre petite section vous-même, et je vais vous montrer quelque chose de très cool ici. Nous sommes donc en train de planer entre cette section jaune et cette section rose. Je vais cliquer sur Ajouter une section. Cela vous montrera toutes les options prédéfinies que vous avez dans Squarespace. Et il y a des choses très sympas ici. Cela nous montre les gros titres. Différentes façons d'avoir une image avec du texte dessus. Celui-ci avec une petite bordure noire, avec une bordure blanche. Vous pouvez jouer avec cela et cela ne fait que prendre toutes nos polices prédéfinies que nous avons choisies sur toutes nos couleurs. Vous pouvez donc voir à quoi cela vous ressemblerait. Nous avons quelques autres choses ici, comment faire des listes, des images, des citations, etc. Ça a l'air très cool. Mais oui, amusez-vous un peu avec ça vous-même et voyez si vous pouvez ajouter quelques éléments supplémentaires que je n'utilise pas ici et le rendre super cool. Ce que je veux vraiment ajouter ici, c'est une section en gros titres. Je viens de voir que j'aime bien celle-ci avec la bordure noire. Donc, ce que je veux, c'est avoir une image d'arrière-plan avec un petit texte cool au-dessus. Il n'a pas besoin d'un appel à l'action. Il n'a pas besoin d'un bouton dessus. Juste une autre chose qui dit qui nous sommes et ce dont nous sommes. Alors, laissons-le dedans. Et puis j'aime bien ce que nous avons ici en termes de titre et de texte en dessous. Je ne veux pas que ce bouton soit là. Il va donc supprimer celui-là. Oui, ça a l'air cool. De toute évidence, l'image qui ne convient pas à ce que nous faisons ici. Allons donc ici et éditons cette section. Encore une fois, fond. Ce paramètre est prédéfini à partir du modèle Squarespace. Nous allons donc remplacer ça. Téléchargez un autre fichier. Ce que je voulais ici, c'est une image qui montre un autre côté des machines d'arcade, les flippers. J'ai donc une image de flipper rétro vraiment cool ici. Allons-y ça. Oui, ça a l'air génial. J'aime bien la façon dont les textes sont par-dessus tout ça. Le problème, c'est l'image que j'ai. Il y a beaucoup de contraste clair et sombre dedans. Donc, le texte blanc et ensuite sur le dessus ne fonctionne pas vraiment. Mais c'est génial car lorsque nous sommes dans cette section d'arrière-plan, nous pouvons ajouter une opacité de superposition. Vous pouvez donc voir ici qu'il est fixé à 15%. Si je joue avec ça, c'est prendre le noir qui est déjà en arrière-plan ici, et c'est au-dessus de l'image. Ce que vous faites, c'est que vous voyez toujours l'image, mais vous pouvez lire le texte qui se trouve au-dessus de celle-ci. Ce que je veux, c'est quelque chose entre les deux, peut-être 50 %. Je pense que c'est 40. Ils ont eu 35 ans. Oui, je pense que tu peux aller 40 ans. Je pense que vous pouvez toujours lire le texte en plus de cela et encore voir quelles sont les images ci-dessous. Cliquons donc d'ici. Maintenant, je veux entrer des textes sur le jeu de flipper. Eh bien, j'ai juste pensé à quelque chose de très cool et décalé, qui vient d'une chanson, je pense de l'OMS. Je vais vous montrer ce que c'est. Je vais le coller ici dans la première position. Bien sûr. Joue un flipper méchant. Ça a l'air vraiment cool. Mais c'est un peu trop gros. Alors, peut-être que l' on passe à la deuxième position. Oui, c'est beaucoup mieux. Je regarde ce texte maintenant, mais je pense que l'interligne est un peu trop faible. Donc, ce que je vais faire, il suffit de sauvegarder cette page. Retournez dans Edit. Ensuite, je vais revenir ici aux styles de site. Polices, titres. Je pense que c'est juste cette hauteur de ligne. Mettons-le en un, peut-être. Oui. D'accord. C'est un peu plus soigné. Donne au texte un peu plus d'espace de respiration pour qu'il ne soit pas assis l'un sur l'autre. D'accord. Revenons donc en arrière. Fermez celui-là. Ensuite, sous le titre ici, mettons une autre ligne de cette chanson. Je n'ai rien vu de tel dans aucun amusement qui va moins audacieux. Allons-y pour sortir le ballon. Oui, j'adore ça. Ça a l'air vraiment cool. Nous avons donc ici une autre section qui est vraiment facile et rapide à réaliser car nous utilisons le modèle où nous avons une image d'arrière-plan, la bordure noire avec un petit texte original sur le dessus de ça. Bon, donc, sauve ça. Retournez dans l'édition. D'accord, nous avons donc la section héros qui passe à la page À propos de nous. Les meilleurs jeux. Blogs. Ensuite, il y a une petite image cool et décalée. Et puis une autre section que je dois remplir en bas. Je veux simplement qu'il s'agisse la page de contact pour que les gens sachent que nous voulons être en contact avec eux. Ici, regardez, ça a l'air plutôt cool. Il pourrait être utilisé pour cela. Mais encore une fois, je pense que je vais ajouter une section. Je pense que j'ai vu quelque chose ici qui, je pense, fonctionnerait en termes de couleurs, de tout ce que nous utilisons. Et c'est celui-là. La façon dont nous sommes arrivés comme une image à gauche avec une zone de texte à côté. Je vais donc déposer celui-là. Ok, ça a l'air cool, mais rejouons avec les couleurs ici. couleurs. Le rose est de retour. Oh, c'est génial. Et cela a également changé la couleur du texte ici. J'aime ça avec un fond blanc avec le texte rose sur le dessus. C'est cool. D'accord, puis image. Nous allons modifier cela. Encore une fois, je vais remplacer ça par une de mes propres images. Voyons ce que nous avons obtenu. Mario Luigi saute. Oui, ça a l'air cool. J'aime la façon dont nous avons une image plus grande ici maintenant. Et il est maintenant centralisé avec la zone de texte située à droite. Il suffit donc de changer le texte ici. Cette fenêtre. Plutôt que de le distinguer. Je veux dire Mario, Luigi, en tête trois, je pense que c'est une bonne taille qui nous donne un peu plus d' espace de respiration au sommet. Ensuite, il va copier certains textes plus pertinents par rapport à ce dont nous parlons ici. Nous voulons avoir des nouvelles de vous, nous voulons savoir quels sont vos jeux d'arcade préférés des années 80 et 90. Avez-vous le meilleur score sur Donkey Kong ? Voyons si nous pouvons être vous. Ensuite, ce bouton ici. Reprenez contact. Et je veux que cela passe sur la page de contact. Alors, par ici, entrez en contact. C'est fini pour le contact. Enregistrez la configuration sessile. D'accord. Maintenant, c'est génial. J'adore cette section. Maintenant. Je vais me débarrasser de cette section ci-dessous. Je pense que nous en avons besoin. Où est-ce que cette section ci-dessous ? Cela nous amène au pied et nous y travaillerons ensuite. Nous allons juste le sauvegarder à nouveau. Pensez que l'espacement est un peu en retrait ici. Je pense que nous avons un peu trop d'espace en bas, pas assez d'espace à gauche ou à droite. Il suffit donc de le modifier rapidement. Allez donc dans la section Modifier. Ensuite, la largeur du contenu doit être trop petite. C'est un peu deux sacs. Faisons un autre sur mesure. Quelque part entre les deux. Voyons voir, peut-être 90 %. Je pense que ça marche, ça lui donne juste un peu plus d'espace de respiration. Donc, lorsque vous regardez la page entière, nous voyons Mario sauter et ensuite nous voyons tout le texte ensemble en une seule fois. Bon, garde ça. Une dernière section à consulter sur la page d'accueil est le pied de page. Maintenant, le pied de page, semblable à l'en-tête, apparaîtra en bas de chaque page. Nous allons modifier celui-ci. Vous savez quoi, j'ai déjà aimé le jaune qui se passe là-dedans. Mais il y a juste quelques éléments ici que je ne veux pas, je dois modifier le bulletin d'information. Nous n'en avons pas un. Débarrasse-toi de ça. Cette image est plus savonneuse, débarrasse-toi de ça. Ensuite, ce texte ici, eh bien, sont des liens qui ont sauté vers le haut. Il s'agit de liens vers toutes les pages du site Web. Tout d'abord, eh bien, le positionnement n'est pas tout à fait correct. Vous pouvez voir ici que nous avons deux colonnes différentes. Nous avons une colonne à gauche, une entretoise et une colonne à droite. Ce que je veux faire, c'est jouer avec le deux-points de largeur. Et vous pouvez le faire n'importe où sur la page avec n'importe quel élément. Il suffit littéralement de mettre votre petite flèche dessus et de la faire glisser. Faites-le glisser vers la droite. On y va. Ça a l'air cool. Ensuite, avec le texte, je préférerais que ce soit centralisé. Non seulement me permet de déposer quelque chose de différent de ce côté-ci, mais aussi le texte ici. Eh bien, la plupart de ces choses ne sont pas pertinentes. C'est supprimer une boutique de pièces détachées. Non, merci. Bon journal, je devrais dire blog. Logan, supprimez le reste de chaque côté. Alors ce sont tout, ce n'est que du texte avec des liens. C'est pourquoi il est un peu rose vif et a un trait souligné en dessous. Si vous souhaitez modifier n'importe quel texte et Andy retirer ou modifier un lien, mettez en surbrillance le texte, cliquez sur cette petite icône ici, ce lien, une. Cela vous indiquera quel lien est utilisé ici. Vous cliquez sur votre rouage. Encore une fois, faites ce que nous avons fait plus tôt. Vous pouvez y aller. Vers une adresse e-mail. Vous pouvez accéder à un fichier d'adresses Web ou à une page, évidemment une page sans qu'il s'agisse d'un blog de journal, où nous voulons qu'il aille. Bon, donc bloguez et contactez, comme nous sommes arrivés dans le bar de navigation en haut. Différentes façons de naviguer sur votre site par les utilisateurs. Allons postuler. Et puis encore une chose que je veux déposer ici. Voyons juste quelque chose de cool et de décalé. Dans ce petit pop-up. J'ai aimé le look de cette petite chose plus tôt en introduisant le bloc de défilement. Voyons à quoi ça ressemble. Ok, c'est cool. Donc, ce que nous allions descendre en bas ici, des textes qui défilent de droite à gauche. Bien sûr. Je peux changer la direction de cela. Oui, on peut y aller. Permettez-moi de changer la taille de cela. Je pense que c'est assez gros médium, assez bonne vitesse. Oui. Je pense que la plus lente est meilleure pour que vous puissiez le lire. Mais en termes de contenu, que voulons-nous ici ? Je ne veux pas le rêver et cette petite ligne tortillante. Passons donc à GameOver. Ensuite, j'aime bien la ligne tordue, mais je veux qu'un autre mot soit ici. Que se passe-t-il lorsque le jeu est terminé sur une machine d'arcade, faut insérer une autre pièce. Alors, c'est un peu comme cette petite ligne tortillante. En fait, j'en veux un autre. Cliquez donc sur celui-ci, dupliquez. Ensuite, ces petits points de chaque côté vous permettent de le faire glisser vers le haut et vers le bas. On y va donc. Maintenant, c'est fini. Ligne Squiggly, Insérer la pièce. ligne squiggly est un peu lente. Peut-être même le téléphone rapide. Oui, je pense que c'est mieux. Ok, donc ça a l'air vraiment cool. J'adore ça. Je ne veux pas de cette entretoise et d'autres espaces, n'est-ce pas ? J'ai besoin d'y aller. Regardez-moi ça. C'est une façon géniale de terminer le site Web avec notre pied de page. Il est écrit GameOver, Insérer une pièce. Et puis des parties du site Web ici à droite. La seule chose, c'est que je pense que je veux que ça aille dans l'autre sens. Oui, Insérez le jeu de pièces. Cela fonctionne beaucoup mieux. Intensité des vagues, vous pouvez jouer avec ça et le rendre un peu plus bancal. Tout au long de ça. Un peu fou. J'aime bien être honnête. Déclarez sans quoi que ce soit que vous voulez faire avec ça. Mais en mettant quelque chose comme ça, c'est un petit élément cool que Squarespace lui a acheté. Alors, sauvegardez ça. Maintenant que cela a été sauvé, jetons un coup d'œil à l'ensemble de notre page d'accueil. Cliquez sur la petite flèche. Ici, nous avons une petite section d'en-tête très cool. petite introduction cool avec les routeurs. Meilleurs jeux, 85 à 95. J'aime cette petite animation car cette section arrive également. Une autre petite animation cool s'estompe et l'appelle une image avec du texte dessus. Sur celui-là. Oui, j'adore cette petite animation aussi. Mario, Luigi est en contact. Et puis je vais prendre le pied de page à la fin. Pièce de jeu sur insert. On y va donc. La page d'accueil est maintenant terminée. C'est superbe. Il a l'air très décalé, très lumineux, très cool. Et il y a ce que nous voulions dire sur les jeux rétro de 85 à 95 ans. Et c'est tout fait. Cependant, je pense qu' il y a encore quelques petites choses intéressantes que nous pouvons faire avec certaines de ces sections. Parlons donc de celui-ci dans la prochaine leçon. 8. Conception de site Web : Animation d'arrière-plan: J'espère que vous avez trouvé la première partie de la page d'accueil moins que très facile à suivre et que vous avez déjà une page d'accueil géniale vous-même. Et vous avez aussi jeté votre propre petit style ici. Je suis vraiment content de ce que nous avons sur la page d'accueil jusqu' à présent, mais je veux juste vous montrer quelques petites choses intéressantes que vous pouvez faire juste pour que chaque section se démarque ce petit peu de plus faire juste pour que chaque section . Commençons donc par la section des héros. Modifiez donc la section. Ce que nous allons examiner ici, c'est le contexte. Nous avons brièvement examiné cela plus tôt en disant que vous pouvez ajouter une image d'arrière-plan ou vidéo d' arrière-plan ou celle-ci, une illustration de fond. Maintenant, c'est quelque chose qui vient avec Squarespace. Ce que vous avez, c'est toutes ces petites sections animées sympas qui donnent vraiment du caractère à cet arrière-plan. Certains d'entre eux sont un peu fous et peuvent être difficiles à lire le texte blanc en haut. Celui-ci a l'air vraiment cool. Juste quelques petits points blancs qui volent en arrière-plan. Mais celle que j'aime vraiment, celle-ci en bas ici. Ce qu'il fait, c'est essayer de créer une grille 3D avec des couleurs différentes afin de sauter et sortir et d'obtenir un style d'animation très subtil. La beauté de celle-ci est que vous avez normalement trois options principales parmi lesquelles vous pouvez choisir. C'est un gros, un petit, un super petit, un peu comme ça. Donc ce que je veux faire ici, c'est bien les couleurs, ça ne fonctionne pas vraiment avec le jaune et le rose ensemble parce que je ne peux pas lire les textes en haut. Commençons donc par le noir. On y va. Cette première étoile, qui a l'air incroyable. J'aime bien la façon dont vous entrez dans cette lueur de rose qui vole autour. C'est très cool. Mais j'essaie d' opter pour un style de jeu vidéo un peu plus rétro huit bits 80. Voyons donc ce que nous avons ici, la forme et la taille. De cette façon, vous pouvez jouer un peu avec elle afin modifier la taille des boîtes qui s'y trouvent. C'est donc un très petit, petit 11 fois la taille, deux fois la taille. J'aime bien ça. Ce genre de style représente davantage ce genre de style 8 bits où ils n'avaient pas trop de pixels pour jouer. Alors, nous allons rester avec le tube. Ensuite, le mouvement, eh bien, c'est la vitesse du mouvement ici. avez-vous rapide ou lent ? Je pense que ça ralentit pour être honnête, parce que je ne veux pas que ce soit subtil. Alors, c'est amusant. Ce placement, pixélisé ou turbulent. Voyons ce qu'ils font tous les deux. Pixélisé cependant. Eh bien, on y va. C'est beaucoup plus de style AT. Cela me rappelle Super Mario de la Nintendo originale. Et oui, ça m'a vraiment plu. Je pense que ça a l'air vraiment cool et ajoute juste un peu de caractère supplémentaire. La seule chose, c'est que je pense que le contraste entre le rose et le noir n'est pas tout à fait correct. Allons donc simplement avec cette couleur foncée. Vous pouvez cliquer dessus. Vous pouvez choisir quelque chose votre palette Août en allant à la personnalisation. Ensuite, on peut vraiment jouer avec la couleur ici. Donc ce que je veux, c'est nous regarder comme une piscine sombre, peut-être voyons ce que nous avons ici. Oui. Oui, c'est mieux. Peut-être même un peu plus sombre là-bas. Je sais, un peu plus près du rose, je pense. Oui, ça marche. J'adore ça. Ensuite, fermez cette petite fenêtre où vous y jetez un coup d'œil. Oui, j'adore ça. C'est un vrai style de jeu rétro. Et c'est un autre petit pas en avant par rapport à ce fond rose uni. ce que nous avions. Bon, faisons défiler vers le bas. J'aime vraiment ce que nous avons ici. J'aime bien le fond jaune uni pour être honnête. Cependant, j'ai vu quelque chose autour. Je ne veux pas jeter ça ici aussi. C'était ce bloc de défilement. J'aime vraiment ce que nous avons fait dans le pied de page avec celui-là. Et je veux juste un peu le tout petit et subtil sur le chemin. Il peut juste rester en dessous de tous les blogs et le rêver, ça ne fonctionne pas. Mais je vais penser une petite phrase cool de l' un de mes jeux préférés. Finisse-le. Combat mortel. Si vous vous souvenez de celui-là. Oui, on y va. Tout s'insère toujours dans la page et je pense que cela ajoute un joli petit peu d' éléments subtils à la page. Bon, maintenant la section suivante, mais j'aime vraiment ça. Je ne veux pas vraiment en faire trop avec celle-ci, mais je pense que tout comme une sorte de mouvement subtil sur l'image d'arrière-plan serait plutôt cool en fait. Donc, si je vais éditer la section ici, arrière-plan, comme vous le savez, est l'image jusqu'à présent. Ce que nous avons ici, c'est l'effet Image. C'est quelque chose qui peut simplement faire bouger l' image en arrière-plan. Alors, qu'est-ce qu'on a ? Nous avons du liquide. J'aime bien ça. Grain de film. C'est plutôt cool. Cela lui donne un peu plus une sorte de style des années 80. On dirait un vieux téléviseur des années 80. Des lignes réfractées bien que c'est peu cassé, l' image en quelque sorte. est l'une de ces animations qui change en quelque sorte. Vous vous déplacez de haut en bas à travers les images. J'ai vraiment aimé que le premier soit honnête. liquide. Oui, j'aime un peu ça, au moment où je viens dans cette section, c'est un peu aller comme ça au lieu que le mouvement se soit mis en arrière-plan. Très cool. D'accord. Maintenant, je veux faire quelque chose d'un peu différent ici. Je pense que le contexte est trop clair. Ajoutons donc une image à celle-ci. Chargez le fichier. J'ai ce lever de soleil vraiment cool, en quelque sorte des années 80. Oui, je pense que ça a l'air blanc, ça a l'air super 80 et ça a l'air vraiment cool derrière Super Mario qui saute dans les parages. C'est juste un peu à suivre. Alors peut-être jouons à nouveau avec l'opacité. Il apporte tout cela, dans le rose qui était là auparavant. L'image est toujours là, mais c'est un peu comme s'asseoir derrière cette superposition rose. Parfait. D'accord. Et une dernière chose, jouons avec le pied de page. Je pense que je veux que ce soit la même grille animée, mais je veux le faire d'une manière légèrement différente. Nous allons choisir celui-là. Alors choisissons la grille plus petite que j'ai vraiment aimé. Mais encore une fois, à fond dit jouer avec les couleurs. Commençons par le blanc. C'est cool. Mais j'ai aimé le jaune. Revenons donc au jaune. Oui, c'est très cool. Je pense que le texte noir s'inscrit très bien au-dessus de tout ça. Oui, c'est génial. Puis forme et taille. Gardons simplement la même taille que l'émotion. Eh bien, je veux qu'il ne bouge pas. Il suffit donc de laisser tomber le mouvement à 0. Oui, ça fonctionne comme ça. C'est un peu comme encore, j'aime ça maintenant comme c'est une sorte d'animation, mais ce n'est pas animé. C'est vraiment cool. Donc, le fond de la grille, je pense qu'il va rendre le jaune un peu plus sombre. Oui, on y va. Ça a l'air cool. J'adore ça. Bon, donc nous allons sauver celui-là. Regardons ensuite toute la page en direct. J'adore cette animation subtile, très genre de style 8 bits en arrière-plan. Alors, celui-ci est toujours cool. Je l'ai fini. Incroyable. Il suffit de courir le long du bas. Il y a de l'amour qui, c'est vraiment décalé. Ça a l'air beaucoup plus cool avec Luigi, ça lui donne juste un peu de caractère en arrière-plan. C'est le pied de page. Donc oui, c'est juste pour vous montrer des tas de choses différentes que vous pouvez faire avec l'arrière-plan de votre page d'accueil. Et ils, chaque section se lève un peu plus, un peu plus cool. J'espère que vous avez bien joué avec cette page d'accueil. Si vous suivez ma direction complète ou prenez votre propre style et votre propre contenu et jouez avec ces arrière-plans et les faire vraiment se démarquer. J'ai hâte de voir ce que vous avez fait avec celui-ci. Maintenant, nous avons terminé cette leçon. Passons aux pages restantes. 9. Conception de site Web : Page À propos: Ok, donc la page d'accueil est maintenant prête. J'espère que vous avez suivi cette étape par étape. Et vous avez votre propre page d'accueil et vous en êtes vraiment content et ça a l'air vraiment cool. J'ai hâte de voir tous ces éléments. Maintenant, la structure et conception du site Web sont toutes triées. Ce que nous devons faire maintenant, c'est l'utiliser sur toutes les autres pages. Venez ici, cliquez sur les pages. Le premier que nous allons modifier est la page À propos. Donc, évidemment, une page À propos est la page qui consiste à dire simplement aux utilisateurs qui viennent visiter le site Web pour la première fois, quoi vous parlez. Lorsque vous entrez dans l'éditeur, vous pouvez voir comment il a déjà été créé à l'aide du modèle. Nous avons une autre introduction pleine page avec des textes d'introduction et une image cool avec notre bleu servant d'arrière-plan. Ensuite, nous avons plus de texte au-dessus de l'image. Ensuite, une section supplémentaire à la fin expliquant un peu plus qui nous sommes. La meilleure chose que vous verrez sur cette page, c' est regarder votre pied de page. C'est exactement comme ça que nous avons défini avant et l'en-tête exactement comme nous l'avons configuré avant. Ils sont identiques et cohérents sur chaque page du site Web. Par conséquent, lorsque nous venons éditer ici, nous modifions cette section, cette section et cette section. Et évidemment, nous pouvons ajouter une section supplémentaire si nous en avons besoin. Mais j'aime vraiment ce que nous avons en haut ici, alors je vais travailler avec ça. Tout d'abord, modifions ce texte en haut. Il suffit de coller ce que je veux dire, en gardant l' arcade classique en vie depuis 85 ans. Comme vous pouvez le voir ici, utilise déjà la rubrique 1. C'est beaucoup trop gros. Rubrique trois, plus petite, probablement un peu trop petite. Je pense que la direction était parfaite, alors on va s'en tenir à ça. Ensuite, voici un peu plus de texte d' introduction qui utilise le deuxième paragraphe. Je vais les coller ce que j'ai déjà écrit ici. Ensuite, j'aimerais un autre bouton identique à celui que nous avions sur la page d'accueil. Et je veux que ce bouton mène les utilisateurs à travers la page du blog. Encore une fois, c'est simplement une navigation supplémentaire qu'ils peuvent utiliser la barre de navigation en haut ou les boutons des pages, différentes façons de trouver les pages souhaitées. Pour ce faire, venez ici et cliquez sur Modifier. Ensuite, allez sur le lien ici et allez sur le bouton. Et vous verrez que cela est apparu ci-dessous avec les principaux textes. Ce que je veux dire ici, c'est lire plus et aller sur notre page de blog. C'est aussi simple que ça. Une autre chose que nous devons changer, c'est l'image. Il s'agit de l'image qui provient du modèle. Allons remplacer le fichier de téléchargement. Et j'utiliserai cette image ici, en jouant à la crise temporelle. Une autre image que j'ai mise en place à l'avance. C'est vraiment cool. Juste un petit problème. Il y a un peu d'espace ici. On va juste sortir ça. On y va. Ce n'était qu'un espace dans le texte. Maintenant, tout s'aligne mieux. Même espace entre ici et là. Oui, ça a l'air génial. J'adore ça. Cependant, le problème est qu'il s'intègre en quelque sorte dans la page, mais pas tout à fait. Comme vous pouvez le voir, le bouton qui n'est pas tout à fait aligné avec le bas de l'image. Je pense donc que ce texte est trop volumineux, alors passons à la troisième rubrique. On y va. Maintenant, tout est centralisé à côté de l'image. Et cela lui donne juste un peu d'espace de respiration ici et ici. Lorsqu'un utilisateur visite la page, il voit tout en une seule fois. Et j'adore ce fond bleu, mais comme nous l'avons fait sur la page d'accueil, voyons si nous pouvons apporter un fond un peu plus cool. Passons donc ici et cliquons sur la section Modifier. Revenons en arrière. Je vais essayer d'autres œuvres d'art en arrière-plan. Encore une fois, lorsque vous construisez cette page vous-même, jouez bien avec celles-ci et voyez si vous en trouvez une qui vous plaît. Ça a l'air cool. Et j'ai adoré le jaune et le rose, mais ça ne marchera pas ici parce qu'on ne peut pas lire les textes par-dessus. Allons donc à nouveau dans le filtre. Tout d'abord, eh bien, changeons l'un des préréglages ici. Vous pouvez choisir une image personnalisée si vous le souhaitez. J'adore ces icônes qu' ils ont là-dedans. Et parmi eux tous, celui-ci ici, l'étoile. Eh bien, cela semble le plus des années 1980, plus approprié pour un site web de jeux vidéo d' arcade. Encore une fois, je ne peux pas vraiment voir les textes et autres choses. Alors choisissons une image dix Tia. Eh bien, faisons simplement ce blanc , puis rendons l' arrière-plan bleu. Mais encore une fois, je ne peux pas lire le texte au-dessus de l'icône blanche. Apportons quelques modifications à ce réseau. Défilons vers le bas. Tout d'abord, redimensionnez le nombre d'images, mais il y en a trop. Donc, ce que je vais faire, c'est personnaliser ça. Si petit, moyen, grand ou personnalisé. Je vais le laisser tomber à beaucoup plus petit. Disons simplement que nous allons simplement changer cela par deux. Et ensuite, le nombre d'images. Laissons tomber ça à beaucoup moins. Du sexe jaune. C'est très subtil. On peut en voir un flotter ici et un derrière ici, un derrière. Mais je n'arrive toujours pas à lire le texte en plus de ça. Faisons donc une autre modification. Allons filtrer et jouer avec eux. Et cela vous donnera une autre sorte de superposition au-dessus des icônes en arrière-plan. Alors jouez avec eux, faites le tour du point de croix. C'est plutôt cool, en fait. Il ressemble un peu plus à un cube des années 80 comme ça. Ensuite, celui-là, on y va. Cercle dégradé. Je ne sais pas vraiment ce que cela signifie en termes de design et d'affichage. Mais j'ai ce que je veux ici. Je peux donc voir la petite étoile flotter, mais je peux toujours lire le texte dessus. Ce que j'ai maintenant, c'est ce genre de style grillagé un peu de fond. C'est donc génial. La seule chose, c'est que je ne pense pas vouloir que ça bouge. Donc, si je change la vitesse de l'onde, c'est mis à 0. Voyons ce qui se passe. Oui, on y va. Ça ne bouge plus. J'adore ça. Nous y sommes. C'est cool. la chance. C'est un arrière-plan très subtil à ajouter ici, mais il lui donne juste un peu plus de caractère et représente ce que nous avons fait ailleurs sur le site. Ok, donc c'est cette section triée. Voyons simplement ce que nous avons dans les deux autres sections. Pour être honnête, je ne pense pas avoir besoin de beaucoup plus de texte ici. Je pense que je veux juste expliquer brièvement aux gens qui nous sommes, ce que nous faisons, puis envoyer les gens sur la page du blog. Ce que je vais faire, c'est supprimer cette section. Survolez la section. Retirer. Maintenant, nous avons ça en bas, qui a l'air très cool et j'aime ce style. Ce n'est pas ce que nous essayons de faire ici. Je ne sais pas quelle est cette image, sorte de lac Salt ou quelque chose comme ça. Changeons donc cette image par celle que nous avons utilisée précédemment. Comme un arrière-plan. Remplacer. Je vais passer dans même contexte que celui que j'ai fait sur la page d'accueil derrière Super Mario. Oui, c'est ce que je veux. Je veux donc juste avoir ce genre de brève introduction, envoyant les gens sur le blog. Et puis juste un petit signe sympa ici. Je ne peux pas vraiment lire le texte ici. Faisons donc une autre superposition de couleur au-dessus de l'image. Contexte. Opacité de superposition. Allons juste faire ça tout de suite. Ok, c'est joli et haut. J'adore ça, mais je ne veux pas que ce soit du Blues. Les humains sont un peu comme le bleu ici. Et puis je veux un peu de contraste, peut-être transformé en rose. Voyons où nous pouvons le modifier. Passons aux couleurs. C'est parce qu' il est dans l'obscurité ici. Si je devais choisir lumineux aussi. On y va. Maintenant, j'aimerais contraster d'une couleur vive. Nous avons commencé par les blancs, nous allons dans le bleu, dans le rose, puis dans le jaune de la photo. C'est génial. Maintenant, j'ai juste besoin de modifier le texte. Donc, ce que je vais vraiment faire, c'est supprimer ce résultat. Ensuite, ils ont mis quelques petits tirets supplémentaires ici, quelques petites lignes. Je n'en veux pas. Et je veux que ça dise « bons moments ». J'ai donc écrit dans ou je centralise tout simplement cela. Ils le ramènent au paragraphe deux. Je veux vraiment l'utiliser ici. C'est la même police que nous utilisons ici pour le jeu terminé. Je pense que c'est juste un autre point étrange que nous puissions le déposer. Soulignons cela ici dans les textes. Choisissez Monospace. Comme vous pouvez le constater, cela l'a changé en police que nous utilisons en haut ici. Et c'est écrit, Good Times. Le problème, c'est que je ne peux pas tout à fait lire cela, donc nous devons simplement changer la taille de cela. Cela se fait dans notre configuration des polices ici. Donc, tout d'abord, sauvegardons simplement cette page. Faites défiler jusqu'à ce que nous regardons. Appuyez à nouveau sur Modifier. Et puis venez ici pour les polices de caractères. Je vais cliquer sur la police suivante ici, qui est bouffante arcade, la police que nous utilisons. Nous avons déjà choisi la famille de polices et nous avons le poids. C'est celui-ci ici, taille basée sur la taille, qui est très, très petite. Allons le rendre beaucoup plus grand. Sept. Je pense que sept y sont bons. Oui, j'ai vraiment aimé ça de près. Et maintenant, nous sommes de retour ici. C'est donc vraiment cool de voir ce petit texte d'introduction. Dans cette image de fond avec bons moments en haut, dans le flottement. Mais tu veux juste un peu plus décalé. Je vais déposer une petite image ou une petite icône au-dessus de ce texte. Cliquez donc sur le plus, puis choisissez l'image. Et une image, encore une fois, télécharge un fichier. Et ici, j'ai cette petite PNG. Une image PNG est une qui n'a pas d' arrière-plan derrière elle. Et c'est juste une icône d'un envahisseur spatial. Je veux faire tomber ça au-dessus du mot. De bons moments. Oui, j'adore ça. Ça a l'air vraiment cool. C'est un peu flottant devant cette image solaire. Et puis ça dit Good Times en dessous de lui. La seule chose, c'est que je pense que cette section est un peu trop grande. Donc, ce que je vais faire, c'est ajouter une entretoise de chaque côté de cette image. Encore une fois, cliquez sur votre plus et choisissez une entretoise. Et cela déposera automatiquement l'entretoise au-dessus de l'image. Mais ce que nous voulons faire, c'est en mettre un à gauche et un à droite. Donc, tout d'abord, dupliquons ça , puis une autre entretoise. Nous avons donc maintenant deux espaces ici. Ensuite, maintenez votre souris et faites-la glisser bas vers la gauche de l'image. Comme vous pouvez le voir ici, une longue ligne bleue laissé tomber l'espace et à gauche de tout ce qui se trouve sur cette page. Mais ce n'est pas ce que nous voulons, c'est juste à gauche de l'icône. Amenez-le donc un peu jusqu'à ce que vous voyiez la ligne la plus courte. Vous pouvez voir qu' il s'agit de la même hauteur que l'image de l'envahisseur de l'espace. Il suffit donc de le déposer là. On y va. Maintenant, nous sommes tombés dans une petite entretoise à côté de l'icône. Maintenant, je vais faire la même chose de l'autre côté. ligne plus petite, c'est là. On y va. Et je peux même le rendre légèrement plus petit. Je pense que j'ai vraiment aimé cette taille, mais si vous voulez la faire glisser pour la réduire, il suffit de faire glisser le bord de la boîte et de l' amener à gauche ou à droite. En fait, je pense que j' aime cette taille. Je veux dire, c'est un joli petit espace entre les bons moments et le Fils. Oui. D'accord. Nous allons le laisser à cette taille. Maintenant, j'ai une page à propos, petite introduction disant garder l'arcade classique en vie depuis 85 ans. Quelques courts textes sur qui je suis, ce dont je suis. Un bouton qui permet aux utilisateurs d'accéder à la page du blog. Et puis juste un petit signe décalé. Ils disent que de bons moments avec cette icône de machine d' arcade des années 80. Alors, s'il vous plaît, suivez ce que j'ai fait ici. Prenez votre propre page À propos et assemblez-la de manière à ce que vous estimez être le mieux adaptée au site Web que vous construisez. Vous voudrez peut-être y ajouter quelques sections supplémentaires pour entrer un peu plus en détail. Ou toute autre section qui envoie les utilisateurs vers d'autres parties de votre site Web. Mais lorsque vous avez terminé, cliquez ici et enregistrez. Lorsque nous reviendrons ici, vous verrez à quoi ressemble la page sur le bureau. Jetons un coup d' œil à son apparence sur mobile. Encore une fois, nous avons le même en-tête d' introduction ici. J'aime vraiment ça. Alors la mise en page est parfaite. Commence par une image qui fait la une des journaux, fait défiler les gens jusqu' à Read More, puis regarde ce Good Times. C'était génial. 10. Conception de site Web : Page de contact: La page suivante sur laquelle je veux que vous travailliez est la page de contact. Il s'agit d'une page très importante sur n'importe quel site Web avec lequel les gens peuvent entrer en contact. Vous, parlez avec vous, jetez des idées pour vos blogs par exemple. Cliquons donc sur Contact. Reprenons-le simplement sur le bureau. Il s'agit de la page fournie avec le modèle. C'est assez simple. Rarement me contactez. Formulaire permettant aux gens d'entrer en contact avec vous, une image. Et puis le pied de page, très droit et simple, et vous voulez vraiment le garder ainsi pour votre site Web. Défilons vers le haut et passons à l'édition. J'aime bien ce qu'ils ont ici, mais je veux le simplifier encore plus. Donc, ce que je vais faire, c'est trouver une autre section de contact ici. À la section, voyons ce que nous avons. Contact parfait. Voici quelques autres écrans très simples pour vous. Vous pouvez l'avoir partout en haut d' une image d'arrière-plan si vous aimez ce style, utilisez-le une image d'arrière-plan si vous aimez ce style, sur votre site Web ou simplement du texte avec un bouton de contact ci-dessous qui conduirait les gens par adresse e-mail. Mais je veux que ça reste simple. Je ne veux pas me former. Je veux juste quelque chose de simple, comme une adresse e-mail et un numéro de téléphone. Allons déposer celui-ci. Oui, j' aime bien ce simple et gentil contact avec nous. E-mail, téléphone, robe, puis quelques liens vers les réseaux sociaux. Je vais donc utiliser cette section. Tout d'abord, supprimons simplement cette section. Ensuite. Eh bien, il a l'air bien et blanc, mais je ne veux pas qu'il passe plus d' en-tête blanc dans la section blanche ici. Nous allons donc modifier l'ensemble de la section. Deux couleurs que nous avons utilisé un fond jaune, nous avons utilisé des arrière-plans roses, des arrière-plans bleus. Si vous êtes heureux de continuer avec cela sur votre site Web, faites de même. Cependant, montez, fond noir. Je veux simplement que ça reste simple. Cela signifie que j'ai un peu de variété sur le site Web en utilisant toujours la même structure, une couleur d'arrière-plan différente. J'aime bien ça. Cliquons ici. Changeons ensuite cette image. Nous allons passer ici et remplacer le fichier de téléchargement d'image. C'est l'image que j'ai choisi d'utiliser ici. C'est cool. J'adore ça. J'adore la propreté et la propreté. Je ne pense pas que cela ait besoin d'un milieu fou parce que c'est plutôt un appel à l'action pour amener les gens à entrer en contact avec vous. Tout ce que je ne suis pas à l'aise ici. Rarement, ce sont juste ces bords incurvés sur l'image qui ont l'air vraiment cool, mais ce n'est pas un style que j'ai utilisé ailleurs sur le site Web. Donc, d'un point de vue cohérent, passons au design. Comme vous pouvez le constater, il y a un rayon d'angle. Mettons-le à 0. Nous y allons, nous avons l'image, nous contacter, l'e-mail. Il suffit de changer cela le bon jeu de messagerie via mon numéro de téléphone où je vis. Pas New York, mais c'est très bien pour l'instant. Et puis, ici, je n'ai pas de page Twitter, alors supprimons simplement celle-ci. Et ensuite, cela va sur Facebook et Instagram. Et encore une fois, ce ne sont que des textes, des liens, alors survolez celui que vous voulez, Instagram. Ensuite, vous pouvez entrer ici et nous pouvons changer cela en jeu sur la page Instagram. Faites de même sur Facebook dot com. L'adresse e-mail, tout d' abord, met en évidence le mot, vient ici pour créer un lien. Comme vous pouvez le voir, il est déjà dit quelle est l'adresse e-mail, mais où est-ce que ça va aller ? Cliquez ici. Et nous allons y saisir votre adresse e-mail. C'est alors si vous souhaitez que le sujet apparaisse. Donc, nous allons simplement dire corps, CC, BCC, facultatif, laissez cela comme facultatif. Ce n'est pas important ici. Gardez ça. Appliquer. Vous voyez que cela est souligné maintenant, car il s'agit d'une adresse e-mail cliquable en direct pour que les utilisateurs puissent contacter. Ok, donc c'est parfait pour ce patient. Gardez-le propre, simple et propre. Disons cela. Oui, c'est simple. J'aime aussi ce petit mélange animé là-dedans. Jetons un coup d'œil à ce que cela ressemble sur mobile. Parfait. Oui, j'aime que tout apparaisse sur une seule page. Belle image expliquant qui nous sommes, ce que nous faisons, et contactez-nous avec les détails, différentes façons de nous contacter. D'accord. Nous avons donc maintenant une page d'accueil à propos de la page, une page de contact. Il n'y a plus qu'une page à terminer. Maintenant, la page du blog. 11. Conception de site Web : Blogs: Nous voici donc dans la section blog du site Web. J'ai laissé celui-ci jusqu'à la fin, car il y a deux choses différentes impliquées dans la configuration de ces pages. Tout d'abord, la page globale du blog, puis chaque bloc individuel. Commençons donc par jeter un coup d'œil à la page globale. Passons d'abord au bureau. Affichez ensuite en plein écran. Il s'agit donc de la configuration globale fournie avec le modèle. Et j'ai vraiment aimé cet affichage où l' on peut avoir une image à gauche, une méta description en haut, le titre puis des textes d' introduction. Puis la suivante, l' image sur les textes de droite à gauche, qui a laissé le taux d'imposition. J'ai bien aimé ce présentoir. Cependant, comme vous pouvez le constater, les tailles de police ne fonctionnent pas vraiment ici. Donc, ce que nous allons faire, c'est commencer par réparer tout ça. Cliquons ici , puis modifions la page. Je veux donc que ce soit beaucoup plus petit. Peut-être aussi plus petit. Ce que je veux, c'est que ce petit espace ici disparaisse au bord des images qui se touchent. Si nous réduisons ce texte, j'espère que cela fonctionnera. Cliquons sur Styles de site. Nous allons passer aux polices de caractères. Le meilleur moyen de gérer tout cela est de cliquer sur chaque partie de la page individuellement. Pour le moment, il affiche la date de publication du blog. Nous allons changer cela dans une minute, mais réduisons les choses . Je vais donc cliquer sur celui-ci. Comme vous pouvez le voir ici, nous reprenons les différents textes que nous avons configurés pour la page À propos, qui était génial à cette taille, mais nous ne voulons pas que ce soit de cette taille ici. Donc, ce que nous allons faire, c'est cliquer dessus et le changer en costume. Il a automatiquement capté la même police, la même famille, le même poids et le même style. Cependant, c'est cette taille de matière. C'est celui que nous voulons déposer pour être beaucoup plus petit. Mais si nous le modifions ici, il ne le modifiera pas sur la page À propos. Parce que cela utilise un style personnalisé uniquement pour cet élément sur la page du blog. Laissons-le sur un plan beaucoup plus petit, peut-être 1,51,6, peut-être 1,7. J'aime bien ça. C'est un peu petit et subtil, mais il est toujours dans la même police. Alors maintenant, le titre, c'est en train de reprendre, je suppose ce que nous avons fait sur les autres pages. Nous passons à la troisième rubrique simplement parce qu'elle était un peu plus petite. On y va. C'est beaucoup plus soigné maintenant. Et comme vous pouvez le constater, ces deux images sont touchantes. Ce que nous avons maintenant, c'est l'affichage parfait de l'image, du titre du blog et une petite introduction sur le sujet de votre blog. Cependant, je veux encore une chose de plus ici. Je pense que du point de vue de l'utilisateur, il est préférable d'avoir un petit bouton Lire la suite ci-dessous pour que les utilisateurs sachent exactement où cliquer pour lire ce blog. Revenons donc en arrière. Je vais donc venir ici et cliquer sur la section Modifier. Si vous le souhaitez, vous pouvez jouer avec la mise en page différente. Vous pouvez les avoir côte à côte, donc ils sont assis l'un à côté de l'autre. Encore une fois, est ramené dans les tailles de police originales qui existaient. Et choisissez celui que vous voulez, puis vous pouvez le modifier. Blog de maçonnerie. C'est ainsi que nous avons l'image carrée en haut avec le texte ci-dessous. Ça a l'air plutôt cool. Mais je n'aime pas la façon dont les choses ne s'alignent pas vraiment là-dedans. Je vais revenir à ce que nous avions à l'origine, la largeur alternée côte à côte, pleine, mécontente de ça. Des images. Eh bien, si vous voulez qu'ils soient légèrement plus petits, jouez avec ça ici. Mais pour être honnête, je suis content de la place. Je pense que c'est une belle mise en page, donne un peu d'espace de respiration en haut et en bas ici. Ensuite, jouez de nouveau autour de l'alignement du texte ici, que vous souhaitiez afficher l'extrait ou que vous ne vouliez pas montrer l'expert, mais je veux vraiment cela là-dedans. Ensuite, lisez plus de lien. C'est celui que je veux. Montrez ça. On y va. C'est ce qui est souligné. Les utilisateurs savent que cliquez dessus pour les amener au bloc. C'est parfait. Je suis très, très content de la mise en page de cette page. Comme toujours, vous pouvez également modifier la couleur de l' arrière-plan ici, entrer en couleurs si vous le souhaitez en jaune avec du texte noir. Ça a aussi l'air cool. Tout ce que vous pensez fonctionne pour votre site Web fonction de la palette de couleurs que nous avons choisie précédemment. Mais je vais m'en tenir au rose vif. C'est la partie principale de notre site Web, et c'est la couleur principale, ma couleur principale que nous utilisons dans le bouton de navigation d'en-tête. Je vais donc m'en tenir à ça. Ok, donc, ici et économisez. Ce qui vient avec le modèle, c'est pour les blogs qui ont déjà été créés. Nous ne voulons pas les utiliser. Nous allons les supprimer. Mais tout d'abord, il suffit de cliquer sur le premier et de voir à quoi il ressemble. Ok, donc encore une fois, il s' agit de récupérer le style initial et les éléments de conception initiaux à partir des modèles. Je vais devoir changer quelques choses ici. Comme vous pouvez le constater, il utilise la police d'origine fournie avec le modèle. Alors, venons ici et éditons. Cliquez ici pour modifier la section. Les mêmes options ici que toujours. Si vous voulez jouer avec la largeur de cette page, venez ici, réglez sur étroit. Vous pouvez avoir un format moyen, voire plus large, dans la façon dont il remplit la page complète. Si vous voulez que le texte soit aligné, si vous voulez que tout soit centralisé, choisissez cela ici. J'aime la façon dont nous l'avons fait étroit, et j'ai un peu aimé que ce texte soit aligné à gauche. Je vais remettre ça à ce que c'était. Je suis content de tout ce que cette méta-description. Et bien, encore une fois, il utilise la date. Mais ce que je veux faire ici est le même que sur la page d'accueil. Je veux que ce soit le catalyseur. Lorsque je clique dessus, rien ne s'affiche encore et je vais vous montrer comment, où et pourquoi. Vous devriez changer cela très bientôt. Mais je veux sortir de la date. Je ne pense pas que la date à laquelle elle a été posée soit importante pour mon site Web. C'est peut-être pour le vôtre. Choisissez ce qui vous semble le mieux adapté à votre site Web. Et je vais désactiver la date. Il semble vide pour le moment. Mais quand nous mettons dans des catégories qui afficheront, Encore une fois, les couleurs, changez l'arrière-plan ici si vous voulez choisir ce qui fonctionne pour vous, mais je vais simplement rester avec le rose que vous voulez avoir sur la page du blog devrait toujours s' afficher de cette façon lorsque les gens arrivent sur mon blog. Bon, donc je suis content de tout ce qui s'y trouve. Mais ce que je dois changer, c'est la police utilisée ici, la police du corps. Je suis très content de ça. C'est juste reprendre le paragraphe habituel. Cependant, cela utilise ici une police différente de l' ancien modèle d'origine. Je veux la même police de titre que celle utilisée ailleurs sur le site. Encore une fois, je vais cliquer ici sur les styles du site, aller dans les polices, mettre en surbrillance ce texte, puis descendre pour attribuer des styles. Comme vous pouvez le constater ici, c'est ce que nous avons déjà édité. Il s'agissait du titre du site, du titre du site mobile et de la navigation sur le site. Ces éléments que vous pouvez voir ici, ce que nous voulons modifier maintenant, c'est l'article de blog. Allons donc dans le titre. C'est sur mesure en ce moment, mais je veux qu'il s'agisse de nos titres originaux. Retournons donc à cette taille pendant que je peux choisir l'une de celles que nous avons déjà choisies, troisième position continue de fonctionner pour moi. J'aime la taille de ça, donc je vais le garder tel quel. Maintenant, ça a l'air génial. Il utilise notre police de titre habituelle, la police paragraphe normale. Revenons donc en arrière. Mais une autre partie était la Metta, qui est apparue ci-dessus ici. Maintenant, je viens de sortir ça. Eh bien, allons juste parler de la matière. Et changeons à nouveau la famille de polices en Puffin Arcade Chrome. Vous verrez à quoi ça ressemble dans une minute, mais revenons en arrière. La taille Metta alors que nous définissons cette taille comme 1.7 sur la page du blog, il suffit de le changer à 1,7 à nouveau. Je vais vous montrer à quoi cela ressemble dans une minute une fois que nous aurons créé le premier blog. Mais vous pouvez toujours revenir ici et le changer quand même. Revenons donc en arrière. D'accord, pour ce qui est de l'affichage ici, je suis content de ça. Ce que vous voyez en bas ici, c'est navigation vers le prochain blog. Cela montrera son titre et il fera des allers-retours. Et c'est en utilisant notre police de titres habituelle. Je vais donc garder ça tel quel. De la façon dont j'ai mis en place celui-ci, chaque blog va maintenant apparaître. De cette façon. Il aura le même espacement sur la page. Il aura les mêmes polices de titre et la même copie de corps. Je vais maintenant vous montrer comment ajouter vos propres blogs à cette page. Deux façons différentes de le faire. Tout d'abord, nous pouvons prendre l'un de ces blogs déjà ici et le modifier. Ou si nous voulons simplement commencer par le nôtre, cliquez ici sur le Plus. Je vais commencer par vous montrer comment modifier une version déjà présente, juste pour vous donner une bonne idée de ce qui est configuré et affichage pour les utilisateurs qui visitent votre site Web. Prenons le premier ici. C'est ainsi que cela se présente en ce moment. Et si je clique sur les points ici, je peux modifier les paramètres. Voici donc différents paramètres ici et nous allons les parcourir un par un pour que je puisse vous montrer ce qui doit être fait. Si les blogs de la partie la plus importante de votre site Web, assurez-vous que chaque élément que vous ajoutez ici est correctement fait. Tout d'abord, image, eh bien, c'est une image de savon. Nous voulons une autre image de jeux vidéo ici. Supprimez donc l'image. Je vais commencer par écrire un blog sur la crise temporelle, le jeu d'arcade de tir que j'ai adoré dans les années 90. Je vais donc simplement télécharger cette image que j'ai sauvegardée de ce jeu. Nous partons et sortons maintenant. Il s'agit de la phrase qui s'affiche pour tout le monde dans différentes parties de votre site Web. De la page d'accueil à la page du blog est donc une phrase simple et droite qui explique très clairement ce qu'il s'agit du blog. J'ai donc déjà écrit un extrait de crise temporelle. Time Crise est une première personne sur espionnage de Rails série de jeux d'arcade de Nam Co. introduite en 1995. Il explique donc simplement ce qu'est le jeu quand il est sorti, qui l'a produit, utilise savoir exactement ce qu'ils sont sur le point de lire. Ensuite, ici, c'est l'URL de la publication. C'est encore une fois en utilisant la limace d'URL qui existait auparavant, mais je ne veux pas qu'il s' agisse du processus de fabrication de savon. Je veux que le billet de blog parle de crise temporelle. Je vais donc juste le copier et le coller ici. Auteure, eh bien, c'est moi. Nous n'avons créé qu' un seul auteur ici. Sourceurl, ne vous inquiétez pas de tout ça pour ce genre de choses. Ensuite, entrez dans les options. Statut. C'est ici que vous pouvez configurer s'il s'agit d'un brouillon, quelque chose que vous allez faire plus tard, ou vous pouvez définir une date différente à laquelle vous souhaitez que la publication apparaisse. Je vais juste laisser celui-ci tel qu'il est publié ici. Je n'ai pas besoin de changer cela. Maintenant, revenons en arrière. C'est ici que nous pouvons ajouter des balises et des catégories. Vous pouvez ajouter des balises à vos publications. Les catégories sont celles que je regarde ici pour le moment, je n'aurai qu'une poignée de billets de blog. Dans un an. J'espère en avoir des centaines. Je veux aider les utilisateurs à naviguer sur le site Web et à lire différents articles de blog qui concernent différents domaines, différents appareils. Cliquons donc sur les catégories. Ce que je vais écrire ici, c'est les années 90, car il s'agit d'un jeu vidéo des années 90. Et puis ce que je vais écrire, c'est Arcade. Cela m'aide à diviser tous les articles de mon blog. S'il s'agit des années 80 ou si vous utilisez la catégorie des années 1880. S'il s'agit d'arcade, d'arcade, toute évidence si c'est Nintendo ou Sega, je vais entrer dans cette catégorie. Lorsque c'est fait, cliquez en arrière, puis venez ici à SEL. Encore une fois, c'est juste lui prendre ce qu'il y avait auparavant. Changeons donc le titre SEO en crise temporelle. Ensuite, je mets les mêmes extraits que ceux que j'ai mis plus tôt dans le référencement. Pour ceux d'entre vous qui ne savent pas ce qu'est le référencement, il s'agit de l'optimisation des moteurs de recherche. Et cela facilite grandement de tous vos articles de blog et affichage de tous vos articles de blog et de votre site Web global dans les recherches sur Google. Cela se fait en changeant le titre et la description par quelque chose qui inclut des mots qu' ils rechercheraient. S'ils sont à la recherche d'un post sur la crise temporelle, il y a deux fois ici. Vous êtes donc plus susceptible de faire des achats dans les recherches Google. Image sociale. Cela se produira si quelqu'un partage votre billet de blog sur les réseaux sociaux. Vous n'avez pas besoin d'une image ici, mais vous obtiendrez plus de clics si les gens peuvent voir. Ajoutons donc exactement la même image que celle que nous venons d'utiliser, Ton Crisis. On y va. Ne vous inquiétez pas du partage et de la localisation. Ce n'est pas important pour ce que nous faisons ici. Sauvons donc celui-ci. Ok, donc quand nous reviendrons sur cette page, vous verrez que la catégorie apparaît maintenant au-dessus du titre du blog et qu'ils utilisent police Accent très décalée. Donc, le backend du billet de blog, c'est tout configuré, tout est prêt à partir. Ce que nous devons faire maintenant, c'est modifier l'article en entier. Cliquez ici sur Modifier. Maintenant, évidemment, la principale chose qui ne va pas ici est le titre de l'article. Changeons cela en crise temporelle. Ensuite, nous avons ici une vidéo. Je ne veux pas que cette vidéo soit là. Si je veux le faire, commencez par une image. Chargez une image. Encore une fois, il suffit utiliser la même image que celle que nous avons utilisée ailleurs pour une crise temporelle. Ok, ça a l'air cool. Nous avons donc maintenant rencontré le titre de la description, l'image d' introduction, et voici tout le texte. C'est encore quelque chose à propos des savons. Je vais juste souligner cela et coller dans tous les textes que j'ai écrits pour la crise temporelle. Il est ajouté à quelques petites lacunes supplémentaires ici. Je vais juste supprimer cet écart. Ce fossé, gardez tout cela ensemble. Je veux juste lui lancer une chose supplémentaire que je vais faire à chaque poste. Je veux voir cela en action. Je vais donc lancer une petite vidéo. Je vais donc cliquer ici. En vidéo. Ce que vous pouvez faire ici, c'est simplement prendre le lien pour une vidéo de YouTube et la coller ici, aussi simple que cela. Donc, si nous arrivons sur YouTube, voici un tas de vidéos de crise temporelle qui apparaissent. Je vais donc choisir celui-ci, qui est un long jeu du jeu. La vidéo commencera à jouer, puis vient ici pour partager et copier le lien qu'ils vous donnent ici. Ensuite, retournez sur votre site Web et collez-le ici. Recherche de celle qui a été correctement localisée. Et on y va. C'est aussi simple que ça. Nous avons maintenant un article de blog parfaitement configuré. Image, texte d'introduction, vidéo, texte. Donc celui-ci est maintenant parfaitement mis en place, venez ici pour économiser. Maintenant, nous en avons un que vous verrez ici, maintenant il a le bon titre et la vignette correcte pour la crise temporelle. C'est pourquoi je vous ai montré comment modifier un article déjà présent. Maintenant que nous avons édité celui-ci, je ne veux pas que ces trois autres soient ici. Je vais donc les prendre et les supprimer tous les trois. Ok, donc nous avons maintenant un article de blog et nous avons deux façons différentes d'en ajouter un nouveau. Cliquez ici sur l'annonce et suivez les mêmes instructions que celles que je viens de vous donner. Mettons donc l'image de titre, pile principale de texte, puis ajoutons une autre vidéo. Bon, maintenant mon Street Fighter 21 est parfaitement installé ici. Alors, gardons ça. Et c'est toujours des brouillons. Alors, venez ici dans les paramètres. Suivez les mêmes règles pour ces pièces. Votre blog est déjà parfaitement configuré car il a pris le nom du titre. Catégories d'options, années 1990 également. Et comme vous pouvez le constater, il a déjà choisi cette catégorie. Il suffit donc de sélectionner celui-là. N'ajoutez pas de nouvelle catégorie car elle existe déjà. C'était populaire sur Nintendo. Il s'agit donc d'une nouvelle catégorie. Encore une fois, suivez les mêmes règles. Assurez-vous que ce document est publié dès maintenant. Suivez les mêmes règles de référencement, d'image sociale, etc., puis cliquez sur Enregistrer. Et maintenant , il affiche la description Meta ici. C'est donc un autre article parfait. C'est donc une façon d' en ajouter une nouvelle. Un autre moyen est de cliquer ici et de dupliquer. Vous pouvez prendre un ancien post qui a été configuré exactement de la même manière. Mais assurez-vous simplement d'être au courant des réseaux sociaux, partager les sorties, l'image miniature, tout ce qui est pareil. Et assurez-vous simplement de ne pas répéter ce que vous avez fait pour une autre affiche. Je pense que l'utilisation du signe plus et l' ajout d'un nouvel article est la meilleure façon de le faire. Allez-y et ajoutez quelques articles de blog différents. Vous ne voulez pas créer un tout nouveau site Web avec un seul article. J'en ai quelques-uns. Je vais en ajouter deux autres ici. Ensuite, nous examinerons l' apparence de la page d'accueil et du reste du site Web. Nous avons maintenant quatre blogs en direct. 12. Votre évaluation de site Web: Ok, donc je suis de retour sur la page du blog, sur la page globale du blog, et je peux repérer quelques erreurs que j'ai faites de standard pour n'importe quel graphiste. Repérez un problème, entrez et résolvez-le. Tout d'abord, comme vous pouvez le voir ici, où j'ai la catégorie en tête ici, Nintendo des années 1980. Il montre toujours la date à laquelle je ne voulais pas ça là-dedans. Prenons donc celui-là. Je viendrai ici pour modifier, modifier la page, voir ce que j'ai mal fait. Donc ici, nous avons l'alignement du texte, etc. Le contenu métallique principal est celui des catégories parce que j' ai du contenu métallique secondaire comme date. Cela me montre donc à la fois ce que je veux que ce soit vide. Si je ne change rien à ça, on y va. La beauté de cela, c'est quand un utilisateur vient ici, comme vous pouvez le constater, c'est en fait un canal de liaison. Donc, si quelqu'un clique là-dessus, passez à une autre page qui montre tous les blogs des années 1880. Alors que s'ils viennent ici et cliquent sur Nintendo, ils afficheront tous les blogs de Nintendo. C'est pourquoi il est vraiment utile d'avoir cela sur votre page de blog pour aider les gens à naviguer eux-mêmes. C'est donc une solution rapide très simple. Le prochain. Vous l' avez peut-être remarqué en haut de la barre de navigation, ou chaque mot est un peu comme frappé. Je ne le veux pas parce que cela suggère presque que ce n'est pas la page en direct, comme si elle n'était pas prête ou quelque chose comme ça. Je veux que la ligne soit juste en dessous. J'ai donc clairement installé quelque chose de mal ici. Allons donc ici et changeons les styles du site. chose de mal que j'ai fait ici. Je vais donc passer aux polices et cliquer sur celle-ci. Il s'agit donc de la navigation sur le site. Donc, tout semblait correct Ici, la police correcte, le poids correct, peut faire tomber ça. En fait, je pense que j' aime bien les 500 là-bas. Le truc du designer. Changez d'avis plus tard. Je pense que c'est celui-ci ici, la hauteur de la ligne. Je pense que c'est le problème parce que je l'ai réglé sur 0 et il doit être, oui, c'est tout là. C'est génial. Ce que je veux, c'est juste que cette ligne soit placée sous le mot. Donc, sous le nom de la page sur laquelle nous nous trouvons, je pense qu'il y a 1,5. C'est bien. Maintenant que j'ai résolu mes problèmes, je vais jeter un coup d'œil à l'ensemble du site Web. Cliquons donc sur le logo ici et accédons à la page d'accueil. Cet en-tête est toujours génial et parfait. Ce héros d'introduction a fière allure. Maintenant, on y va. C'est là que cela a changé. Maintenant, nous avons nos propres blogs personnels ici, et vous pouvez avoir vos propres blogs personnels ici pour savoir ce qu'il a fait, c'est qu'ils sont répertoriés par ordre de date, même si nous ne disons pas quelles données il apparaît, ils s'affichent dans l'ordre des dates. Cela signifie que si quelqu'un continue de venir sur votre site Web chaque semaine et que vous ajoutez un nouvel article de blog chaque semaine. Ce sera le premier qui s'affiche ici. En ce qui concerne l'utilisation de la barre de navigation ici, cela bascule entre les publications actuelles et les publications antérieures. Et de toute évidence, nous en avons quatre au total. Maintenant. Nous avons Pac-Man, Super Mario, Street Fighter deux et une crise temporelle, et ils sont dans l'ordre des dates. Un autre excellent outil de navigation pour aider les utilisateurs à effectuer des recherches. Ici, où nous avons des liens vers ces articles de blog individuels. Vous pouvez cliquer sur l'image et cela vous guidera également. Vous pouvez cliquer sur les catégories pour voir uniquement les blogs de cette catégorie. Cliquons donc sur Nintendo. Cela ne fait que me montrer les messages de Nintendo. Je n'en ai fait que deux, Super Mario Three Street Fighter deux, ce sont les seuls à afficher, je m'intéresse aux années 1980. Cliquez dessus. Juste l'échelle Pac-Man Super Mario des années 1980. Revenons donc en arrière. Donc, ça a l'air absolument génial. J'adore ça sur les blogs ici que nous les avons tous montrés en une seule fois. Ensuite, notre image d'introduction et les liens vers la page de contact et notre pied de page. Parfait, j'adore la façon dont ce site se présente maintenant. Allons juste au mobile. Plein écran. Oui, ça a l'air génial. Ici, nous avons la navigation ici, il montre deux billets de blog à la fois et je peux faire défiler les plus anciens, le terminer ou les blogs. Il joue un flipper méchant. Basculez vers une seule image de représentation. Parfait, mais ce type au milieu, Mario, Luigi, il est très bien là maintenant. Entrez en contact. Ensuite, le pied de page. Ok, ça a l'air génial. Jetons un coup d'œil à la page du blog. Également parfait. Cette ligne est maintenant placée sous le mot blog. Voici tous nos articles de blog et ce texte occupe la place parfaite. Catégorie, titre, exercer, lire plus et une image carrée dans leur espace de respiration au-dessus et en dessous. C'est magnifique. Si nous cliquons sur n'importe quel blog, vous pouvez cliquer sur l'image, savoir plus ou sur le titre. Cela vous amènera à ce billet de blog qui vous montre tout le contenu. Ensuite, si vous souhaitez faire défiler l' ancien et le nouveau post, vous avez également cette navigation à la fin de chaque article de blog. Nous sommes donc Street Fighter deux. Vous verrez celui d'avant, c'était Super Mario trois après cette crise du temps. La page d'accueil est donc géniale. page de blog est superbe. Voyons la page À propos. J'adore cette petite animation là-bas. J'ai adoré ce fond, très subtil, mais un peu plus de profondeur à cette page. Pour en savoir plus, rendez-vous sur la page du blog. De bons moments. Vous venez de voir la petite icône s' afficher dans une petite animation subtile et cool. Ça a l'air génial. Donc, dernière page, contact, que nous pouvons obtenir en cliquant sur ce bouton ou en cliquant et entrer en contact. Maintenant, nous sommes une autre belle animation d' introduction. Plus de courbes sur cette image, mais une superbe page Contactez-nous avec une adresse e-mail d'appel à l' action et qui permet aux gens d'accéder à nos pages de médias sociaux. On y va. Nous avons maintenant un site Web magnifique avec une page d'accueil animée incroyable et cool avec beaucoup d'action, beaucoup d'éléments passionnants sur lesquels les gens peuvent cliquer. Page de blog cool À propos de la page et de contact. J'espère donc que vous avez suivi toutes ces leçons de très près. Et j'ai traversé cette étape par étape avec moi. Et vous avez maintenant votre propre site Web génial qui ressemble exactement à celui-ci ou à votre propre site Web personnel et incroyable. Si c'est le cas, publiez-le ici dans la section Projet. Et je reviendrai vers vous avec mes commentaires à ce sujet dès que possible. 13. Extras Squarespace: Donc maintenant, vous devriez avoir un site Web génial dont vous êtes vraiment, vraiment satisfait. Nous n'utilisons toujours que la version d'évaluation. Donc, personne d'autre au monde peut vraiment voir ce site Web, juste vous. Mais si vous voulez le faire vivre pour le monde entier, c'est très simple. Il suffit de cliquer sur le bouton s' abonner ici et de choisir le forfait qui vous convient le mieux car il s'agit d'un seul site Web personnel, très petit, probablement celui-ci qui est le mois, fonctionnera pour vous. Vous verrez ici également qu'il inclut un domaine personnalisé gratuit. Je vais vous montrer ce que cela signifie. Donc, lorsque nous arrivons ici et que nous allons dans Paramètres, cliquez sur les domaines que vous voyez ici qui indiquent girafe de cricket, H4, dn, et cetera. C'est le nom de domaine de notre site Web jusqu'à présent. Donc, si vous souhaitez le partager avec quelqu'un, vous partagez cette URL. Maintenant, ce n'est pas cool et ça n' a rien à voir avec ce que nous écrivons ici. Mais si vous vous inscrivez à Squarespace, vous pouvez choisir le vôtre, et tout cela est inclus dans l'ensemble des cultures. Donc, si je clique ici, j'ai un domaine. Il prendra d'abord le titre de votre site Web et vous indiquera s'il est disponible sous forme de nom de domaine. Malheureusement, GameOver.com n' est pas disponible. Je ne suis pas la première personne à y penser. Il existe différentes variantes de ce type. Vous pourriez avoir un jeu sur vidéo ou même un ninja GameOver, mais je ne veux pas ça. Je veux juste .com à la fin parce que c'est ce avec quoi nous sommes communs. Essayons simplement quelque chose d'autre. Peut-être game over log n. Oui, GameOver blog.com qui est disponible. Je vais donc choisir celui-là. Ainsi, lorsque vous avez toute cette configuration, vous disposez d'un site Web en direct et il utilise un nom de domaine approprié. Si vous revenez ici, vous pouvez jouer avec tout ce qui est ici, comme je l'ai dit plus tôt, jetez un coup d'œil à travers tout, voyez ce qui va marcher pour vous. En termes de marketing, vous pouvez configurer des campagnes par e-mail. Vous pouvez travailler sur le référencement, optimisation des moteurs de recherche, et vous pouvez en faire la promotion sur vos propres réseaux sociaux. Venez ici et vous pouvez créer des histoires Instagram, et cetera. C'est là que tu y vas. Vous avez maintenant un site Web étonnant que vous avez construit vous-même en utilisant votre style. Il est en direct, il a un nom de domaine. Vous pouvez le promouvoir et créer et simplement créer plus d' abonnés et devenir le site Web le plus populaire au monde, ou du moins le site Web le plus populaire au monde. Il s'agit de jeux rétro de 1985 à 95. Applaudissements. 14. Merci: Merci d'avoir regardé toute cette classe. J'espère que cela vous a beaucoup appris sur la conception de sites Web. Et vous avez maintenant un site Web génial que vous voulez me montrer. Wow, si vous le faites, publiez-le ici dans la section projet, et je vous répondrai avec mes commentaires dès que possible. De plus, si vous avez des questions sur tout ce que j'ai abordé toute la classe publiée ici dans la section discussion. Et encore une fois, je vous répondrai dès que possible. Pendant que vous y êtes. Assurez-vous de cliquer sur mon nom et de voir tout mon profil. Ici. Vous trouverez quelques cours sur l'utilisation du constructeur de pages Elementor avec WordPress qui peuvent sembler un peu complexes, mais je vais vous parler de tout ce que vous devez savoir si vous cherchez à construire vos compétences en conception Web. Regardez-les. Également. Assurez-vous de me suivre et vous le découvrirez dès que j'aurai téléchargé un tout nouveau cours. Super, passez une bonne journée.