Développez votre agitation latérale ; Branding & design pour votre site Squarespace

1. Introduction: Salut, je m'appelle Rosanna. Bienvenue à développer votre côté Hustle, branding et design pour votre site Web Squarespace aujourd'hui, nous allons jeter un oeil à la façon développer vos propres directives de marque personnelles pour vous, votre site Web et finalement votre coté. Ensuite, nous allons examiner comment traduire cela dans votre site Web et obtenir le design et la sensation à travers chaque page de votre site. C' est une classe pour débutants, donc aucune connaissance préalable de squarespace n'est nécessaire, mais cela vous aidera si vous avez déjà construit votre site web squarespace. Donc, si vous n'avez pas déjà vérifié mon autre cours sur la façon de créer votre premier site Web et est revenu ici et nous allons commencer. 2. Recherche et inspiration: Ok, nous allons nous lancer dans la conception de votre site Web Thief. Le premier point de départ pour moi avec un nouveau projet est toujours avec la recherche et l'inspiration. Cela va être particulièrement important si vous construisez. Ce site fait partie de votre côté Hustle. Avoir une base solide de recherche et d'inspiration vous donnera une orientation et une attention particulière lorsque vous êtes au milieu de tout cela pour vous concentrer sur la phase de recherche. Jetons un coup d'oeil au projet de classe. La première section est de partager une image hors de votre inspiration avec quelques puces expliquant ce que vous aimez à ce sujet. Tout d'abord, nous voulons commencer par un regard large sur différents supports d'inspiration potentiels, tels que les magazines Pinterest, tels que les magazines Pinterest sites web ou les affiches. Pensez au processus comme un entonnoir. Commencez par le haut avec le plus large spectre d'inspiration, puis affinez vers le bas jusqu'à ce que vous ayez les inspirations que vous avez choisies. Pinterest est un endroit idéal pour tout rassembler ensemble, car c'est un moteur de recherche visuel que vous pouvez rechercher et enregistrer ensuite vos photos d'inspiration choisies . Voici mon dernier conseil d'inspection. Je n'ai enregistré ici que mes favoris en termes de polices, couleurs, images et styles de cette façon j'ai un endroit ont recueilli l'inspiration organisée que je peux me référer et garder les choses simples. Nous verrons comment ce tableau Inspiration informe mon design au fur et à mesure que nous parcourons la classe pour la première partie de notre projet de classe, assurez-vous de partager une capture d'écran de votre choix et des images d'inspiration et d'ajouter quelques points sur ce que vous comme. Assurez-vous simplement que la collection finale est seulement vos favoris absolus au plus, trois de chacun de la sélection des polices, des couleurs, des images en vente. Si vous vous sentez débordée, il y a un lien vers mon tableau Pinterest dans le projet de classe sont ci-dessous pour la scène, un élément large de la recherche afin que vous puissiez jeter un coup d'oeil et voir s'il y a quelque chose là-bas que vous aimez vous obtenir démarré. Assurez-vous d'enregistrer votre photo inspo dans le projet de classe ci-dessous et de partager ce que vous aimez à ce sujet . Donc, pour terminer la leçon 1, faire des recherches et, surtout, essayer de profiter de cette étape. Vous cherchez des choses que vous aimez et que vous voulez imiter. Comment amusant avec elle et être ouvert. L' inspiration peut provenir de n'importe où 3. Branding: Maintenant que vous avez votre collection de recherche et d'inspiration organisée, il est temps de développer cela dans votre image de marque personnelle. Pour votre propre site Web Squarespace, j'ai créé un PDF Branding Guidelines Checklist que vous pouvez télécharger sur l'une ou l'autre impression sont utilisés sur votre ordinateur. Cela sera vraiment utile pour garder une trace de l'endroit où vous êtes dans un voyage, surtout si votre côté bousculent et doivent déposer ce projet et le reprendre à nouveau. Plus tard, vous pouvez trouver les directives Pdf Brendan télécharger dans leur section projet pour les informations de classe ci-dessous. Je sais que le terme branding peut sembler une tâche écrasante, quelque chose qui n'est réservé qu'aux graphistes et aux professionnels. Mais j'utilise mon expérience et mes connaissances pour aider à faire cela sur une partie agréable et durable de votre parcours de conception de site Web. La liste de contrôle de l'image de marque est conçue pour être remplie de haut en bas, étape par étape. En divisant votre marque globale en ces huit étapes, nous avons un processus gérable et pouvons franchir chaque étape une à la fois. Jetons un coup d'oeil ensemble à ma collection d'inspiration dans mes lignes directrices de marque, car ce cours est une suite de ma classe précédente. Commencez votre coté. Comment construire votre site Web de première classe. Je vais continuer à développer le site web que j'ai construit dans cette classe. Si vous n'avez pas encore eu la chance de construire les fondations de votre site, je suggère de commencer par cette classe afin que vous puissiez construire votre site, puis revenez ici pour la conception et l'image de marque. Donc, continuant à partir de ce cours, j'ai déjà été en mesure de remplir le début de ma liste de contrôle de marque avec mon nom pour mon site Web ou ma marque. Je n'ai pas de slogan, mais j'ai inclus l'énoncé de mission que nous avons écrit dans la dernière classe comment construire votre premier site Squarespace. Je vais passer par les prochaines étapes avec vous pour que vous puissiez voir mon processus. J' ai ouvert il y a pdf en aperçu sur mon Mac, et je vais juste l'éditer ici comme l'option la plus simple, la plus rapide, la plus facile. Je vais remplir chaque étape avec eux cette modification dans l'aperçu afin que je puisse tout garder ensemble en un seul endroit. Si vous êtes en mesure de le faire ou de commencer un nouveau document vierge et de tout y déposer, il pourrait être vraiment utile de voir tous les éléments de votre marque au même endroit pour vous assurer qu'ils sont cohésifs et créer l'ambiance globale et l'impression que vous cherchez. Donc, parce que nous avons fait un excellent travail à l'étape de la recherche, il devrait être assez simple de remplir notre liste de vérification de l'image de marque. Je vais mettre mes deux documents, donc j'ai mon tableau Pinterest avec l'inspiration de conception de site web. Donc, ce sont juste les choses les plus préférées que j'ai choisi pour l'inspiration du site Web . Et j'ai ça côte à côte avec la version d'édition d'aperçu de ma liste de vérification pour mes directives Brendan. J' ai donc commencé au numéro 4, comme j'ai déjà rempli un et trois, et je n'ai pas besoin de l'étape 2. Je vais prendre ma sélection à partir de cette épingle sur les paires de fonds modernes pour squarespace . Alors jetons un coup d'oeil à ça. Donc c'était juste quelque chose que j'ai regardé sur Pinterest. D' autres personnes ont créé les collections, ce qui est une bonne chose à utiliser, et ce sont tous des fonds qui sont dans l'espace carré, donc nous savons qu'ils sont un peu sûrs, utiles, aussi, pour regarder par-dessus et pour mon titre avant, j'aime vraiment l'audace de ce et Bevis New frontier. Donc c'est ce que je vais choisir pour être mon titre avant. Donc pendant que nous sommes ici, je vais changer ce front pour être le bon pour que nous puissions commencer à voir comment ça va changer celui ici aussi. Encore une fois, nous pouvons voir qu'il est utilisé dans d'autres circonstances et commencer à se faire une idée du domaine, puis pour le fonds du corps. Bien que la broche a PT Sands comme la chasse du corps à utiliser avec Bavis nouveau, je vais en fait choisir le front Brandon de bas en bas ici, et j'aime vraiment celui-ci. Je préfère à quel point il est clair et facile à lire. Donc encore une fois, nous allons ajouter ça sur ah, Brendan checklists pour que nous cultivions tout ensemble en un seul endroit et que nous puissions commencer à voir à quoi tout ressemble quand il était assis ensemble. Alors je vais changer celui-ci pour être la bonne option. Vous voyez, c'est très propre, très facile à lire et pour le front du corps sur le site. Donc, si nous avons des messages de bloc ou des choses comme ça, cela aura l'air vraiment simple et vraiment facile. Joli sur le site. Changez celui-là aussi sur C'est déjà Brendan. Donc, ils vont de sorte que vous pouvez commencer à voir comment le bien regarder côte à côte. Suivant est couleurs ont conseillé tricher 3 à 5 options de couleur pour votre marque, comme plus de cinq pourrait être un peu beaucoup, et vous allez appliquer différentes couleurs dans juste pour les utiliser dans votre site Web. Alors essayez de coller dans les 3 à 5 options de couleur si vous le pouvez, juste pour le garder plus facile pour vous plus loin dans la ligne. Revenir à mon tableau Pinterest pour la conception du site Web Inspiration. J' ai enregistré deux images ou deux broches ici pour l'inspiration des couleurs. Je vais choisir celui-ci aujourd'hui parce que j'aime vraiment le genre audacieux de couleurs de style presque primaires , et je pense qu'ils fonctionneront très bien. Donc, je vais juste faire quelques cercles sur la liste de contrôle pour que je puisse faire passer ces couleurs dans ma liste de contrôle. Ok, donc on a cinq cercles prêts à remplir avec les couleurs que je veux utiliser. Donc, je, à partir du début et sur mon éditeur de prévisualisation visite outil très utile dans l'option de choix de couleur que je suis. Je peux ramasser cet outil pipette ici et passer la souris sur la couleur que je veux dans la broche et sélectionner sur. Il remplira sur les lignes directrices de mélange Bryant la couleur que je veux utiliser. Donc, nous avons la première couleur. Donc, je vais juste continuer sur les entrées les cinq couleurs de cette image sur Pinterest à utiliser comme ma palette de couleurs pour mes lignes directrices Brendan. Ok, on y va. J' ai mes cinq options de couleur là-bas, et je pense que ça semble vraiment cool chose qu'ils ont l'air vraiment bien ensemble. Et aussi, je peux commencer à voir comment ils vont regarder aux côtés des traces amusantes que j'ai faites et surtout avec ce bébé est nouveau front. Je pense que ça va être très audacieux et fort, donc je suis très excité à propos de ça. Eso Cette option de compte-gouttes de couleur est vraiment utile. C' est très pratique, car cela signifie que vous n'avez pas besoin de vous soucier des codes de couleur ou d'où vient votre inspiration de couleur. Si une image attire votre attention, vous pouvez en choisir les charbons et simplement se fissurer sur la tête. Donc maintenant, si vous avez déjà eu un aperçu de la définition des couleurs et du squarespace, vous saurez que nous aurons besoin d'une cellule d'arbre ou de codes de couleur RVB pour obtenir la référence de couleur exacte sur notre site Web. Et Mais ne vous inquiétez pas, j'ai un truc pratique pour obtenir des codes de couleur pour les sites Web, alors craignez pas trop, va obtenir ce détail crucial ici à la fin de cette leçon. D' accord, la première étape 7 là. C' est un peu une option bonus, mais cela peut vraiment aider à définir l'ambiance et la sensation de votre marque en incluant des motifs, des images ou des textures. Cela se trouve sous la section style de notre recherche originale. Andi, si on va à mon tableau de Pinterest , , tu peux voir qu'il y a quelques épingles que je n'ai pas encore référencées. Voici donc mes options de bonus pour l'étape 7. J' adore l'esthétique simple et audacieuse du magazine Gentlewoman. Je sens que la palette de couleurs des plateaux et avec le nouveau titre du bébé reflète, est vraiment bien. J' ai également enregistré deux images sur un produit sous affiche de Dita Rams design. Encore une fois, nous avons cette utilisation forte, audacieuse et simple de la couleur avec des formes simples. Je garderai ça à l'esprit pour la dernière étape. Numéro huit, mon logo. Nous allons examiner plus en détail la construction du logo dans la prochaine leçon. Donc j'ai ces épingles sur mon tableau prêt pour eux. Donc pour l'instant, j'ai ma liste de contrôle sur mon tableau Pinterest. J' ai l'impression que tout va dans la bonne direction avec la sensation globale que je veux pour ce site. Donc juste la dernière petite astuce pour obtenir ces codes de couleur pour notre palette de couleurs. Il suffit de diriger vers le sélecteur de code couleur dot com. Eh bien, vous pouvez télécharger, vous savez, plateaux et des images pour choisir les couleurs de cette palette de couleurs. C' est donc un site Web très utile à utiliser aux côtés de Pinterest car nous pouvons faire un clic droit sur l'image Pinterest juste pour enregistrer l'image et le dossier de téléchargements. Et puis nous pouvons télécharger ce code de couleur dentée, plus grand site Web et le succès sur. Ensuite, nous pouvons passer par le processus de planer sur chacune des cinq couleurs individuelles . Onda, nous pouvons bien noter, cela nous donne le RVB le bon hexadécimal sur le code ciseau A, donc si vous voulez les connaître tous vers le bas. Mais oui, encore une fois, un moyen super facile de trouver les codes de couleur d'une image ne l'était pas. C' est génial. Regarde jusqu'où nous sommes allés. Nous avons essentiellement nos propres directives de marque personnelles faites et prêtes à être utilisées sur notre site Web pour en faire notre propre eso. La prochaine leçon que nous allons regarder sur la conception et la création de notre propre logo dans squarespace. 4. Créateur de logo Squarespace: Maintenant que nous avons réduit nos lignes directrices de marque, il est temps de créer un logo pour notre site Web. Comme avec les lignes directrices de la marque, nous allons garder cela simple et réalisable en utilisant le constructeur de logo basé sur des carrés intégrés . C' est un excellent outil qui pleure l'espace. Fournit sur permet aux débutants de créer facilement un logo pour leur site Web sans avoir besoin d'un graphiste. Si vous avez un compte squarespace, vous pouvez télécharger gratuitement le logo final pour qu'il puisse être utilisé ailleurs. Nous allons donc visiter notre site Web Squarespace et naviguer jusqu'à la section design en haut de la page. Nous avons le logo sur le titre en ce moment. Nous venons d'inscrire le nom de notre site dans la section titre du site. Mais si nous faisons défiler vers le bas et sélectionnez créer un nouveau logo, cela nous mènera à une nouvelle page pour le constructeur de logo basé sur les carrés. Cool. Alors, quel grand écran de bienvenue. C' est juste ce qu'on cherche. Le logo est simple. Je vais taper le nom de mon site ici. C' est déjà cela, et cela nous amène à travers la page de conception dentée, qui promet de rechercher un symbole et notre logo, donc je vais juste cliquer sur cela pendant une seconde et jetons un coup d'oeil autour. Nous avons le nom du site Web à l'avant et au centre dans le panneau de conception ici, qui se trouve sur cet arrière-plan quadrillé. Donc, ce serait super utile pour aligner les choses ci-dessous. Ici, Squarespace nous montre quelques simulations d'utilisations réelles de notre logo. Encore une fois, cela va être vraiment utile pour nous aider à visualiser comment le logo va ressembler dans la vraie vie. Nous pouvons agrandir l'écran avec ces heures. Ici, je suis sur modifier quelques-uns des paramètres ici. Je suis un retour sur, Snap to grid on. Retournez à l'écran ici. Nous avons le nom du site Web ici, et cela n'a pas besoin d'être inclus dans le logo. On pourrait juste avoir un symbole, mais je vais le garder ici pour l'instant et voir comment on va. Si je sélectionne le titre du site Web, vous pouvez voir que nous obtenons quelques options supplémentaires pour pouvoir changer la famille avant. La couleur avant, le poids avant sur le devant rassis. Donc, une chose à noter qu'il est quand nous regardons dans la sélection de la famille avant qu'il ya une sélection de fonds beaucoup plus limitée dans le constructeur de logo que sur réelle squarespace lui-même au front du titre que j'ai choisi que les bébés nouveaux. Ce n'est pas en fait dans cette liste de fronts ici, qui signifie que je ne vais probablement pas garder le texte fait partie des factures de logo après tout, parce que je veux vraiment respecter mes directives de marque et créer un look audacieux et fort de mon conseil d'inspiration. Donc je vais juste supprimer le titre alors sélectionné et appuyer sur supprimer, et puis je vais juste me concentrer sur l'icône comme mon logo. J' ai pensé à un travail autour pour obtenir le titre du site Web à l'avant. Je veux à côté de mon logo sur le site, alors nous regardons cela plus tard dans la classe pour l'icône de mon logo. Je veux trouver quelque chose qui représente l'énoncé de mission de mon site Web. Je voulais aussi m'intégrer à mes lignes directrices de marque et à mon tableau d'inspiration pour être audacieux, simple et clair. Donc, ici sur le panneau de recherche, affaiblir le type de manière à rechercher des symboles qui pourraient représenter ce que nous voulons que notre logo soit . Alors regardons d'abord les arbres. Chez Sina. C' est l'une de mes catégories de photographie sur le site. Nous avons ici une sélection d'icônes d'arborescence que vous pouvez voir venir dans la fenêtre. Je n'aime rien de tout cela, surtout je n'ai pas l'impression qu'ils donnent la représentation globale de l' énoncé de mission que je cherchais. Essayons autre chose. Regardons les montagnes à la place. Ok, cool. Donc nous faisons défiler vers le bas. Il y a une bonne sélection d'icônes de montagne ici. Je me sens dans l'ensemble, cela donne plus de ce sentiment de paysage, ce qui est conforme à mon état de mission. Juste en repensant à mes recherches sur le tableau d'inspiration ici et en regardant les lignes propres, solides, solides, simples et les formes que nous avions à partir de ces dessins de grammes de détail ici. Je pense que je vais aller pour celle-là qui est en cercle. Il s'intègre bien avec les lignes audacieuses et fortes et l'élément de cercle s'attache à partir de mon inspiration sur ces grammes de détail ici . Si nous sélectionnons l'icône affaiblir, déplacez-le au centre de l'écran et il est réglé pour s'accrocher sur la grille, ce qui est utile de toute façon. Mais si nous avions quelque chose d'autre ici, il serait utile de pouvoir aligner cela. Nous pouvons le faire glisser pour le rendre un peu plus grand, qui sera heureux de pouvoir voir avec quoi nous travaillons. Et Squarespace est déjà mis à jour les exemples en direct ici afin que nous puissions voir à quoi cela ressemblerait dans une carte de visite sur un site Web et même sur un T-shirt, ce qui est assez cool. Donc, lorsque nous sélectionnons le logo, il vient également avec cette option de couleur ici afin que nous puissions changer leur couleur du noir à l'une des couleurs de notre marque parfaite. C' est exactement ce que nous voulons garder tout en conformité avec nos lignes directrices de marque. Donc, si ce que vous aviez à faire, soit la couleur pourrait choisir un site Web. Si vous toujours que l'ouverture et avec votre image téléchargée, vous pouvez cliquer sur la couleur et il vous amène le RVB, le code hexadécimal et le code de l âges. Donc, le code hexadécimal est symbolisé en ayant ce hashtag devant lui. Donc on pourrait juste prendre ça à partir de là, juste pour copier ça. Andi, dépose-le ici. On y va. Donc si nous avons la couleur pourrait choisir un site web alors. C' est assez facile d'obtenir le code du code couleur dans le constructeur de logo squarespace ici. Ok, donc maintenant on sait comment obtenir nos ex codes juste essayer quelques-unes des autres couleurs juste pour voir à quoi ils ressemblent. Donc je pense que pour l'instant je vais aller avec cette couleur rouge. Ensuite, il semble assez cool dans les exemples ci-dessous, et il correspond bien à cette esthétique audacieuse que je cherchais. Donc, pour sauver cela, allons enregistrer le logo ici. Et il nous dit maintenant que nous pouvons télécharger notre logo gratuitement. Et parce que j'ai un compte squarespace, je peux le télécharger gratuitement. Nous cliquons donc sur le téléchargement. Et donc nous avons maintenant la possibilité de télécharger en couleur des lignes noires ou blanches . C' est vraiment cool, car il y a une chance que vous aurez besoin d'utiliser votre logo en noir ou blanc à différents endroits. Donc c'est un très pratique et astuce, et je vous conseille de télécharger les trois quand vous venez de télécharger votre logo juste pour que vous les ayez là, donc ça va nous donner une violence de téléchargement de PNG, qui est une autre chose vraiment utile que je suis. Donc, cela signifie simplement qu'il n'y aura pas de fond sur le logo. Ce sera juste les lignes comme on les voit ici. C' est donc très utile pour l'utiliser sur le site Web ou sur d'autres endroits, parce que nous mettons le logo sur un autre arrière-plan, ce qui ne pouvait pas nous donner beaucoup d'options cool Plus loin, il est prêt à télécharger une taille de fichier de 2000 pixels par 2000 pixels, et si nous cliquons ici, vous voyez, nous avons des options pour aller plus que cela ou moins que cela, selon ce dont nous avons besoin. Et donc 2000 pixels de large est plus que suffisant pour le moment, je vais m'en tenir à ça. Je vais juste télécharger l'option de couleur pour l'instant. Et comme je l'ai dit, quand vous venez télécharger votre logo, je télécharge les trois et ensuite vous les avez là. Et si vous voulez revenir en arrière, vous savez qu'il clique ici pour revenir en arrière et modifier le logo, puis le télécharger à nouveau. Voici mon logo P et G. Télécharger ici et ce sera dans mon dossier Téléchargements. Je recevrai également un e-mail de Squarespace avec un lien vers mon logo. Donc c'est super utile à nouveau pour l'avenir. Cela signifie que nous pouvons toujours trouver notre logo. Nous n'avons pas besoin de nous soucier de fermer cette fenêtre parce que nous recevrons l'e-mail. Ensuite, je veux ajouter mon logo en plus de mes directives de marque et de mon tableau d'inspiration pour m' assurer qu'il s'inscrit dans le look global que j'ai obtenu pour mon image de marque. En fait, il va être le plus rapide et le plus facile de créer une épingle à partir de mon logo téléchargé. Dossier S. Donc c'est mon tableau ici. Donc, si je vais juste au plus, créer une épingle et ajouter à partir des téléchargements le logo que je veux là-bas et je n'ai pas besoin de m' inquiéter d'écrire quelque chose à ce sujet parce que c'est juste pour moi et il publie sur le bon tableau. Donc je vais juste frapper Publier. Donc c'est le logo maintenant assis avec le reste de mes amis. Et si nous rapprochons le document de référence de la marque côte à côte, donc nous avons cet écran divisé, alors nous pouvons voir comment tout semble ensemble. Si vous avez créé vos directives de marque dans un nouveau document, c'est génial. Vous pouvez y ajouter votre logo. J' essaie juste de garder cela simple et c'est facile que possible, donc c'est accessible à tout le monde. Donc, en utilisant une combinaison de Pinterest sur ma liste de contrôle de marque, j'ai des références pour ma propre marque personnelle. Lignes directrices sur le logo. Eh bien, euh, donc on peut vraiment voir comment tout commence à se lier ensemble et comment ça pourrait commencer à regarder sur le site. Il est cette grande palette de couleurs ici et un beau fonds solide et gardant tout très simple et référençant certains cercles dans le logo et audacieux, forts, lignes propres. Donc, je suis vraiment content de la façon dont tout se passe ensemble. Eso Espérons que tu es à Andi. Vous pouvez prendre le temps de créer votre propre logo. Andi, travaillez ça dans vos directives de marque pour finir votre propre marque personnelle, et c'est un début vraiment génial pour concevoir votre propre site web avec Squarespace 5. Quelle version Squarespace ?: avant de nous rendre à Squarespace pour regarder le créateur de logo. Juste une note sur les différentes versions de Squarespace. Squarespace ont récemment lancé une vierge 7.1 à partir de Janvier 2020. Donc, si vous avez ouvert votre compte après cette date, il est probable que vous serez automatiquement placé sur un site web squarespace 7.1 version. Et donc ma classe ici est sur une squarespace 7.0. Et donc pour vérifier quelle version vos sites Web sur. Si vous vous rendez dans votre constructeur de site Web et que vous deviez aider, alors vous pouvez voir si vous êtes dans la version 7.0 ou 7.1. Donc, comme je l'ai dit mes cours sur la version 7.0, donc si vous avez commencé un site Andi pas allé trop loin, alors il pourrait être préférable de refaire votre site Web en version sept points doit. Vous pouvez le faire en suivant le lien dans la description de la classe et cela vous mènera au magasin de modèles pour la version sept point. Oh, mais si vous avez été assez loin sur la construction de votre site Web et que vous voulez continuer avec 7.1 et je vais faire une classe pour cela à l'avenir. Mais pendant qu'ils trouvent encore des choses, que 7.1 Andi y a apporté des changements ? Je reste avec 7.0, et pour l'instant, et je crois que c'est la meilleure option pour l'instant. Donc, soit craquer comme vous êtes, ou vous pouvez prendre un peu de recul et reconstruire avec 7.0 ici si vous avez des questions, ou si vous êtes coincé avec quelque chose avec 7.1. J' ai utilisé dans construit quelques sites Web avec elle, donc je pourrais être en mesure d'aider. Et si vous posez une question dans la section de discussion ici, je peux vous aider avec ça. Sinon, nous allons craquer avec la construction de notre logo. 6. Astuce sur les flux de travail: Maintenant, nous allons regarder un peu d'un hack de flux de travail. Je promets qu'on va entrer dans Squarespace. Mais comme pour la plupart des choses créatives, il s'agit souvent de la préparation. Donc avant d'aller à Squarespace, nous voulons nous assurer d'avoir tous nos canards d'affilée. Nous avons nos lignes directrices personnelles de marque et nos recherches sur la collection d'inspiration organisée sur Pinterest. Nous avons notre logo, donc nous voulons avoir autant que possible classé dans un facile à trouver un endroit avant que nous devions squarespace. Alors quand ont été enterrés profondément dans la conception de notre site Web. Nous avons tout ce dont nous avons besoin, écrit une main souvent dans la plate-forme de l'espace carré. Si vous cherchez une image à ajouter ou à copier pour la mettre, il peut être un peu frustrant de trouver ce que vous voulez. J' aime donc avoir un dossier sur mon bureau. Je suis organisé dans les informations de marque, toutes les images que je veux sur n'importe quelle copie que j'ai écrite avant d'écrire dans Squarespace. Vous dites que vous commencez à écrire un gros post de bloc dans squarespace et qu'il se bloque. Tu vas potentiellement perdre ce que tu as écrit. Donc, j'aime toujours essayer d'écrire hors ligne dans le mot ou les pages. Et puis je peux le copier et le coller dans squarespace quand je suis sur le site Web et en ligne et qu'il est prêt à partir. Donc, dans les images, je viens d'avoir en ce moment les arbres que nous avons téléchargés dans la section arbres . Andi dans l'image de marque, nous avons notre liste de vérification Brendan sur notre logo prêt à partir. Donc, je vais ajouter un peu plus dans ma section de copie de ma section images, et je vais vous voir dans moins et cinq quand nous allons commencer à squarespace faire notre site notre route. 7. Styles du site: Ok, donc nous allons aller sur notre site Web Squarespace maintenant et travailler dans la section design du constructeur de site Web afin que nous puissions commencer à faire de notre site Web notre propre. Si nous cliquons à partir de l'écran d'accueil dans la section de conception, nous pouvons voir qu'il y a un menu d'options maintenant sur le côté gauche. Nous avons déjà visité la section logo et titre pour créer notre propre logo. Alors revenons là-bas pour qu'on puisse installer ça sur notre site. Donc, si nous descendons ici à l'image du logo et cliquez pour ajouter un logo, si nous nous souvenons dans la dernière leçon, nous avons mis en place notre système de dossiers afin que nous ayons un dossier de site Web sur notre bureau. Joli et facile à trouver et nous pouvons naviguer tout de suite dans le branding et dans le logo que nous avons téléchargé et dans cette dernière classe. Ok, cool. Donc, nous avons téléchargé la couleur PNG du logo I m. Donc, si nous frappons sauver et nous voyons que le logo, comme il est expliqué ici et le logo remplace le titre du site sur le site de sorte que l'icône est maintenant allé à la place de la photographie ressentie le long de là s Donc, si vous vous souvenez quand nous avons construit le logo dans le constructeur du logo Squarespace, je n'ai pas été en mesure d'inclure le nom du site Web à l'avant. Je voulais en tant que partie du logo complet. Donc, ils travaillent autour pour que maintenant est d'utiliser l'option slogan ici le long du côté, l'icône du logo. Donc, si je copie et colle dans leur et juste appuyez sur sauver, donc nous avons besoin de mettre à jour les fonds dans la couleur et ainsi de suite. Mais vous pouvez voir que nous avons maintenant notre icône à côté du titre de notre site Web et nous serons en mesure de mettre cela en avant que nous avons choisi dans le cadre de nos lignes directrices de marque, savoir le nouveau fonds Babys. Donc c'est juste un peu de travail par ici. Si la même chose vous arrive que l'avant n'est pas disponible dans le constructeur de logo squarespace et que vous pouvez l'utiliser dans le cadre du slogan là pour avoir toujours le titre de votre site Web sur le site Web parce que l'utilisation de l'icône remplace le titre du site Web et c'est donc tout à fait individuel. Il peut ne pas être nécessaire pour vous dans votre site Web ou il peut être quelque chose que vous n'êtes pas sûr si vous voulez avoir le titre réel à côté de l'icône, alors faites un jeu. Euh, tu sais, je ne l'ai pas enlevé et vu ce que tu penses. Si vous êtes aux prises avec les orteils, décidez ce que vous aimez. Je trouve souvent qu'il est utile de s'éloigner un peu de l'écran et d'y revenir plus tard avec des yeux frais et de voir comment vous vous sentez quand vous ouvrez cet écran à nouveau. Et quelle est votre réaction immédiate aide souvent à décider si vous aimez réellement quelque chose ou non. Ok, donc on a l'icône du logo en vue. Titre. Heck, eso Maintenant est temps de jouer avec la taille et obtenir l'avant droit sur ce logo. Le slogan ! Ici pour cela, nous devons sortir de la section d'autorisation du logo et dans les sites contes à l'arrière dans le menu de conception. Si vous vous êtes déjà aventuré dans cette section du constructeur de site Web, c'est peut-être là que vous avez fini le plus frustré ou confus. Je sais que je l'étais quand je suis arrivé ici pour la première fois. Ainsi, les styles de site signifie simplement les styles au sein de votre site Web. Donc, à partir d'ici, vous pouvez tout choisir des couleurs des fronts et l'arrière-plan de votre site Web à la taille des choses. Si cela justifie à gauche ou à droite, vous savez que tout est à l'apparence des éléments avec n'importe quel site web, c'est décidé ici, donc cela peut sembler tout à fait un bâtiment pour commencer. Mais je vais simplifier cette section depuis le temps que j'ai passé là-dedans, c' est le menu Tails. Il n'y a vraiment que deux façons principales d'aborder les contes de sites. Donc Option One est avec le menu complet ici pour commencer en haut de ce menu latéral et travailler votre chemin à travers chaque option une à la fois. Ainsi, par exemple, nous pouvons changer la couleur et la couleur de fond du site Web. C' est la première option que nous obtenons ici, et vous pouvez continuer dans le menu, changer les choses une à la fois pendant que vous descendez et voir à quoi cela ressemble. C' est une bonne option pour la simplicité. Tu sais, tu as commencé le sommet, t'es retrouvé. Mais si vous avez une partie particulière du site Web que vous savez que vous voulez commencer et où vous voulez changer le style dessus, ce sera un peu frustrant d'avoir à passer par toutes ces autres décisions d' abord, jusqu' à ce que vous arriviez à la partie que vous voulez réellement commencer et changer. Donc, si nous venons d'annuler et de rejeter ces changements et revenir à l'endroit où nous l'avions et l' autre façon d'aborder les sites contes est d'utiliser l'option de sélection de hover. Donc, si nous prenons la souris sur Dheim pour plus de la section du site Web que nous voulons changer , donc nous voulons commencer avec le logo ici parce que c'est ce que nous venons de mettre, et nous savons que ce n'est pas tout à fait juste pour l'instant. Ensuite, vous pouvez voir une boîte bleue apparaît autour de la zone où nos masses planent. Donc, si je survole ici et recueille les options de menu sur le côté gauche, ne changez que les variables disponibles à éditer pour cette section. Donc tout ce que je peux voir maintenant n'est que ce qui va être pertinent ici. C' est donc juste une autre façon de concentrer ce menu sur la gauche pour vous montrer seulement ce que vous devez voir. Si vous voulez revenir à tout regarder, vous pouvez cliquer, vous pouvez cliquer, afficher tout ou revenir ici et tout changer chaque fois qu'une boîte bleue apparaît. Ensuite, vous pouvez cliquer et il vous donnera les histoires de vues pertinentes à cette section que vous venez de sélectionner. En sélectionnant cette section supérieure ici, il nous donne les queues de sites pour l'en-tête du site Web. Alors commençons à travailler notre chemin à travers cette liste beaucoup plus courte ici maintenant de haut en bas. Une fois que vous vous familiarisez avec les styles de site, il est plus facile de plonger dans et hors des sections que vous souhaitez modifier. Mais pour commencer, je recommande de travailler à travers les menus pour chaque section de haut en bas, en particulier une. Nous sommes au début de la construction de notre site Web. On veut tout mettre en place. Nous devons vérifier toutes les options pour nous assurer que c'est ce que nous voulons. Donc, nous sommes sur la tête de la section du site Web. Je commence en haut avec la taille de l'image du logo, sorte que cela nous permet juste de jouer avec la taille de pixel pour notre logo. Donc juste faire est purement à l'œil et sentir de voir ce que j'aime. Titre du site ici. Si nous nous souvenons, l'icône du logo a remplacé le titre du site. Donc, il n'y a aucun intérêt pour moi d'entrer dans cette option de menu parce que le titre de mon site n'est pas visible , mais pour vous, il se peut que vous n'ayez pas de logo Nikon feel, donc c'est peut-être là que vous allez et vous ajoutez vos fonds, vos couleurs et vos choses comme le titre du site web de trio. Donc, nous avons le sous-titre du site Web parce que c'était notre travail pour obtenir le nom du site Web dans. Donc, si nous allons ici, nous pouvons choisir notre front que nous avons sélectionné dans le cadre de nos lignes directrices de marque et simplement passer par chaque option et vérifier ce qui est disponible. Et si c'est quelque chose que vous voulez modifier et si vous n'êtes pas sûr de ce que la chose fait, il suffit de jouer et de déplacer le curseur et de voir ce qui se passe. Et j'ai trouvé que c'est la façon la plus simple de déterminer ce qui se passe et de ne pas trop m'inquiéter savoir ce que signifie l'option de menu. Il suffit de faire quelques changements et de voir ce qui se passe. Je veux que ça corresponde à peu près au bord du cercle, et puis j'allais à votre dos ici pour ça là-dedans. Répartissez cela un peu plus de sorte que vous pouvez voir sur la gauche ici des options de menu. Si nous avons fait un changement, il y a un grand cercle à côté de l'élément de menu où nous avons fait une modification. Donc, c'est juste une bonne chose à noter pour voir où vous avez bean et voir à quoi vous avez fait un changement. Ça aide juste. Vous ne vous êtes pas perdu dans ce grand menu ici. Donc je veux changer la couleur ici. Je vais donc revenir à nos lignes directrices de marque et le changer pour ce bleu. C' est donc la note que j'ai mise quand nous avons fait notre pdf, et vous pouvez simplement taper dessus pour être RGB. Et puis je les supprime. Et maintenant, le nom du titre d'un site est dans la couleur que nous voulions être. C' est juste un peu plus central de sorte que vous pouvez voir changer l'alignement de l'en-tête de leur logo de rivière . Notre sous-titre sur notre menu à Central fait toute la différence et comment le site se sent. On peut aussi le changer pour être juste, justifié, ce qui n'est pas pour moi. Donc je pense à un bâton avec le centre. Je suis déjà comme si c'est audacieux. Je pourrais même y retourner. Il suffit de pousser la taille vers le haut un peu plus. Juste ainsi. C' est vraiment un impact fort, comme nous l'avons eu à partir de notre tableau d'inspiration ici. C' est très audacieux et un peu dans ton visage et ça jusqu'à Max. C' est donc facile à lire. Ouais, c'est cool. Laissez cette sélection super. Nous avons donc passé en revue chacune des options de menu pour la tête de section là-bas, ce qui n'a pas pris trop de temps et était relativement simple. Une fois que nous avons sélectionné ceci et que nous avons su où nous travaillions, nous avons l'impression que cela commence vraiment à paraître plus personnalisé pour moi et ma marque, ce qui est génial, même si seulement leurs petits changements font déjà une grande différence. Donc pour être sûr que vous ne perdez pas ces changements, il suffit de frapper sauver en haut ici. Et sinon on pourrait. Il reviendrait à la façon dont nous l'avions avant. Il y a de grands cercles sont partis de là aussi, parce que nous avons enregistré ces derniers changements à chaque clic de retour pour montrer tout ce que nous avons l'option de menu complet à nouveau. Trois. Faites défiler l'option de menu complet vers le bas. Nous pouvons le voir lorsque notre souris survole les nombreuses options ici. Une zone bleue apparaît également dans la fenêtre du site Web. Donc c'est juste une autre façon que Squarespace nous aide à voir à quels sites les contes sont liés et ce qui va changer si nous commençons à cliquer autour de notre logo est juste et est-ce que c'est cela. C' est un début de notre site Web qui travaille maintenant de haut en bas pour se référer à nos directives de marque pour nos codes de couleur et nos fonds sur notre tableau Pinterest et juste jouer avec la façon dont vous voulez que les choses ressemblent. n'y a pas de bien ou de mal, et il pourrait être changé plus tard aussi. Si vous décidez que quelque chose que vous n'aimez pas, Si vous êtes dans vos styles de vue et que vous faites un changement et que vous êtes toujours là, vous avez toujours un grand point et vous décidez que vous ne l'aimez pas. Vous pouvez frapper, annuler en haut là, et cela va se débarrasser de la modification sans avoir à vous soucier de l' option de sauvegarde ou d'annulation en haut là. Donc, c'est juste une autre chose utile à retenir est que vous pouvez appuyer sur Annuler pour y retourner, donc je vais travailler mon chemin à travers les sites, dit, dit, se référant à mes directives de marque dans mon tableau Pinterest et assurez-vous que je reçois tout dans que je veux. Les choses les plus importantes à mettre en place à cet âge sont ce que nous avons dans notre liste de contrôle de marque . Donc, nos fonds le front du titre sur le devant du corps et surgissent dans les couleurs où nous les voulons , que nous avons déjà eu notre logo dans. Et pour l'instant, je garde les choses simples. Je n'utilise pas de textures ou de motifs, mais c'est quelque chose que nous pouvons ajouter plus tard. Mais la chose la plus importante pour l'instant est de l'obtenir dans les fronts et les couleurs et juste avoir un peu d'un jeu. Amusez-vous un peu et voyez à quoi ressemblent les choses. Ok, super. Je suis heureux pour l'instant avec la façon dont tout est à l'intérieur, et nous avons encore des tonnes de contenu. Donc, ce n'est pas et certains des changements que nous avons fait inutilement tout à fait pertinents encore. Mais par exemple, je change le corps du texte pour être juste en noir quand et si c'est un lien quand vous pointez dessus , alors il va à la couleur bleue, ce que j'aime beaucoup, et nous avons tout est dans nos fonds, donc vraiment agréable et facile à lire corps avant, puis un grand fort, front titre audacieux, ce qui est génial. Je suis tellement juste quelque chose à noter que pour réellement naviguer autour du site Web. Vous ne pouvez pas faire cela pendant que vous êtes dans les styles de vue parce qu'il pense juste que vous êtes si vous cliquez, il pense juste que vous voulez modifier les ventes de ces sites sur cela. Donc, si vous voulez naviguer sur le site Web, vous avez juste besoin de revenir au menu de conception, puis vous ne pouvez pas aller à chaque page et voir à quoi tout ressemble. Donc je vais laisser ça pour l'instant. Andi, passez à l'étape suivante de notre prochaine leçon, qui porte sur la conception et la mise en page à l'aide des livres Squarespace. 8. Blocs de contenu: Ok, donc nous sommes dans la dernière étape, la dernière pièce du puzzle pour concevoir votre propre site web squarespace et en faire le vôtre . Dans cette leçon, nous allons examiner l'utilisation des blocs de chaque page pour créer une mise en page et un design personnalisés pour votre site Web. Dans notre première classe, où nous avons construit notre site web squarespace, nous avons abordé les blocs de contenu. Donc, juste pour rafraîchir les sont les blocs de construction de votre site Web, vous permettant de déposer facilement sur une page. Différents types de contenu orteil ont un design et une mise en page qui est unique à vous. Donc, si nous ne revenons jamais au menu d'accueil hors de la section de conception et sélectionnez les pages collées avec la page d'accueil ici vous voyez, quand je passe la souris sur la section principale de la page d'accueil, nous obtenons cette boîte de dialogue avec l'option d'édition. Donc, si nous cliquons dessus, nous sommes maintenant dans la fenêtre de l'éditeur de page. Le contenu que nous avons déjà ici peut être déplacé ou supprimé, ou nous pourrions ajouter un nouveau bloc dans la page d'accueil. Pour ce faire, nous devons passer la souris sur le côté gauche de la page pour obtenir l'icône de goutte de pluie. Si nous cliquons sur la goutte de pluie, alors il affiche un menu de tous les différents types de blocs de contenu. L' icône de chaque bloc de contenu donne une bonne indication de ce qu'il est et à quoi il ressemblera . Mais vous aurez également besoin de jouer avec les différents blocs pour voir à quoi ils ressemblent avec votre propre contenu et design. Sur ma page d'accueil ici, je veux ajouter quelques images supplémentaires. Donc, je vais supprimer ce bloc d'image principale parce que ce n'est qu'une image. Il suffit de survoler sélectionner élite et de cliquer sur Oui, um, puis d'aller à l'icône de goutte de pluie sur, Choisir un nouveau bloc. Donc, je veux choisir dans la section de la galerie des blocs car cette option permet d'afficher plusieurs images. Je vais donc choisir l'option de diaporama. Mon plan initial pour ce site est toujours d'avoir les images en pleine largeur sur la page d'accueil du site. J' ai l'option maintenant orteil soit télécharger de nouvelles images pour la galerie Oregon lien à partir de la galerie existante. Sur une autre page, c'est une option tout à fait utile. Andi vous permettra de mettre en avant une galerie particulière sur votre page d'accueil. Si c'est quelque chose que vous vouliez faire, je vais télécharger quelques nouvelles images. Je les ai déjà enregistrés dans ma structure de dossiers. Aller à sélectionner ces complet et voir comment nous allons sur. Donc, pendant qu'ils sont en train de télécharger, si nous cliquons dans l'onglet design en haut ici, nous pouvons voir qu'il y a beaucoup d'options différentes que nous pouvons utiliser pour personnaliser notre diaporama. Ok, maintenant ils sont téléchargés. Si nous venons de cliquer, appliquer Onda avait apparu cliquez sur Enregistrer. On peut voir à quoi ça ressemble. Nous pouvons simplement étendre l'écran là pour avoir une idée de l'apparence de la page d'accueil maintenant que nous y avons ajouté ce diaporama. Donc j'aime qu'ils soient gros. Mais je n'aime pas vraiment ça. Lorsque vous entrez pour la première fois entrer dans le site Web. Vous ne pouvez pas voir l'image complète. Vous n'en voyez qu'un peu. Il semble un peu que je suis donneur, un peu maladroit. Donc, je vais juste revenir en arrière et éditer la page à nouveau. Et si je retourne pour éditer et cliqué dessus, la galerie je peux changer le design en un autre type de sang de contenu dans la baignoire de conception . Nous avons donc sélectionné l'option de spectacle de lumière de thèse d'abord à partir des blocs de contenu de goutte de pluie qui sont apparus avant. Et mais nous pouvons maintenant aussi utiliser un carrousel, une grille ou empilés. Et surtout maintenant que les images sont téléchargées, nous pouvons rapidement voir à quoi cela pourrait sembler une transition entre ces différentes images. Alors jetons un coup d'oeil. Une grille. On va recadrer un carré de 1 à 1, quatre images. Ok, voyons juste. D' accord ? Oui, beaucoup Nieto. J' aime vraiment l'écran principal. Maintenant, si vous imaginez quelqu'un de Londres sur votre site Web atterrissant sur cette page d'accueil, c'est la première chose qu'ils verraient est d'avoir un peu plus d'impact car le spectateur est capable de voir plusieurs images en entier à la fois. Je pourrais aussi avoir un petit chat qui laisse ce contenu Sang en dessous ici sur cette ligne dessous ? Oui. Donc, il est encore plus propre. Donc quelqu'un vient sur mon site. C' est ce qu'ils atterrissent et ils peuvent voir pour mes images préférées le long du haut ici, et ils peuvent voir le menu tout de suite pour voir quels autres types de contenu pourraient être, et ils peuvent voir mon logo devant et au centre. Et puis s'ils défilent vers le bas, ils sont en mesure d'en voir un peu plus sur mon raisonnement derrière pourquoi j'ai lancé ce site Web . Quel est mon énoncé de mission. Oui, bien que mon plan initial était d'avoir une image plein écran sur la page d'accueil en raison des autres décisions de conception que j'ai prises, y compris le grand logo en haut ici sur le menu. Cette idée ne fonctionne plus aussi bien, mais c'est bon. Il est bon d'être flexible tout au long du processus de conception, car vous ne pouvez pas toujours prédire comment quelque chose va chercher du travail lorsque vous faites un brainstorming. Donc tu viens de faire que Teoh soit préparé aussi. Une fois que vous êtes entré dans Squarespace, qu'une idée que vous aviez pourrait ne pas être vraiment comme vous le souhaitez. Vous devrez peut-être adapter et changer l'idée au fur et à mesure, mais c'est tout à fait bien. Tu sais qu'il n'y a ni bien ni mal ni règles. C' est ton site web, et tu dois être content. J' ai donc déplacé cette déclaration de mission au bas de la page, hum, hum, encore une fois pour laisser les images se démarquer et pour donner au spectateur la confirmation de ce qu'est le site quand ils défilent vers le bas. Et je vais juste modifier le funt pour ça parce qu'il semble un peu être dans les capitales et dans le fonds de titre comme celui-ci apparaissent. Donc, si nous revenons aux contes de design et de sites et que je peux le faire rapidement, je n'ai pas besoin de scanner toutes ces options. Mon pointeur de la souris sur cette ligne, j'obtiens cette boîte de fond perdu, et si je clique, cela me donne les options de conception pour juste cela, en direction là pour que je puisse cliquer ici et je vais le changer. Fonds Audie dentée que nous remorquons dès le début. Et, oui, ça a déjà l'air mieux. C' est dans la bonne couleur que je veux sauver ça. Retournez au menu d'accueil en plein écran et oui, ça a l'air un peu plus agréable. C' était un peu sheltie avant avec les capitales, donc comme une page d'accueil. Je suis vraiment content de ça maintenant, et il y a des images pleines d'argile, et si les téléspectateurs défilent vers le bas, ils ne sont pas criés, mais ils peuvent voir mon énoncé de mission là-bas. Donc, il est agréable et simple eso Avant de passer à la prochaine conception de mise en page, je veux vous montrer une autre chose cool que nous pouvons faire avec ces images ici sur l'écran d'accueil. Nous pouvons en fait les transformer en un lien cliquable à travers un autre endroit sur le site Web. Donc, si nous revenons à éditer le contenu de la page, Andi, éditer le bloc de contenu de la galerie, en sélectionnant jusqu'à l'onglet de conception et faites défiler vers le bas. Nous pouvons voir cette vente aux enchères ici pour ouvrir des liens dans une nouvelle fenêtre, donc les images avec des liens s'ouvriront dans une nouvelle fenêtre. Chaque. Sélectionnez cette option et revenez à l'onglet Contenu. Si nous survolons l'image, nous obtenons cette option de menu supplémentaire option de ici. Je suis pour qu'on puisse plier l'image. Nous pouvons éditer l'image ou regarder dans les paramètres de l'image, et ici, nous pouvons cliquer sur orteil, ajouter une URL. Donc, lorsque nous avons cliqué sur l'euro, nous avons trois options, un lien externe vers quelque chose vers un autre site Web et un fichier ou un autre élément de contenu dans le site afin que nous puissions réellement choisir de lier à la page de sang, qui pour ce site Web. Le moment est actuellement une page non liée, donc elle n'apparaît pas dans le menu principal ici. Eh bien, nous pouvons lier à une page de galerie, une de nos collines, rivières ou arbres, pages de galerie. Tout ce que nous pouvons lier à la page à propos et si nous avions d'autres pages là-dedans et ils apparaîtraient ici aussi. Donc, si je sélectionne des arbres parce que cette image contient des arbres, donc au moins c'est pertinent et cliquez, enregistrez et s'applique et enregistrez. Voyez-vous que déplacer la souris sur les images ? Et maintenant, lorsque nous déplaçons de cette image qui a un lien vers elle, la souris change et nous pouvons voir qu'elle n'est pas cliquable. Et si nous cliquons dessus, il faut passer directement à la galerie des arbres afin que nous puissions retourner à la page d'accueil en cliquant sur le logo en haut. Et donc c'est juste une autre façon intéressante. Je voulais vous montrer comment vous pouvez concevoir la navigation autour de votre site Web et encourager les visiteurs à cliquer à travers. Et en cliquant sur ces images, il peut être plus encouragé à se plonger dans votre site Web que s'ils voyaient simplement les mots en haut. Ok, donc il y a une dernière astuce de conception et de mise en page avec Squarespace que je veux vous montrer. Et pour cela, on va se débrouiller sur la page. Donc, notre page à propos est une autre page vierge que nous avons configurée et créée en ajoutant dans nos propres livres de contenu spécifiques. Et donc j'ai un bloc d'image ici sur le bloc de texte. Donc, disons que je veux ajouter un autre contenu. Regardez cette page. C' est un bloc récapitulatif avec des liens vers, disons, certains de mes postes sanguins. Donc, nous allons dans l'édition. Ah, on peut voir que nous avons des résumés ici au résumé. Les blocs sont un autre outil utile pour aider à visiter pour voir ce qui est d'autre sur votre site Web sans avoir à réellement cliquer à travers les menus. Ils sont un peu comme une publicité pour le reste de votre contenu, et donc je vais jeter un coup d'oeil, un sang de résumé de carrousel, et nous avons la possibilité d'afficher le contenu soit de la page de sang, toutes les pages de la galerie I Je vais sélectionner blawg, et le bloc récapitulatif utilise le contenu réservé fourni avec notre thème Squarespace pour afficher le titre des images de prix du sang à la date. Donc, une fois que nous y arriverons, nous pouvons remplacer ce contenu par notre propre contenu sanguin sur qui va mettre à jour dans ce bloc de résumé ici. Mais pour l'instant, je suis heureux de laisser le contenu de remplissage squarespace être utilisé afin que je puisse voir à quoi ça va ressembler jusqu'à ce que je puisse vous montrer ceci et enfin, astuce. Donc, si nous passons à l'onglet de mise en page, nous pouvons voir qu'il y a des options ici sur la façon dont le bloc de résumé va ressembler. Éléments de rapport d'aspect, taille du texte Perot, des choses comme ça. Nous pouvons également sélectionner les différents types de bloc de résumé pour voir comment ils pourraient ressembler à quand nous avions le bloc de galerie sur la dernière page et trois sur la baignoire de lame. Nous pouvons modifier plus de paramètres pour décider quelles informations sont affichées dans le bloc et modifier cette syntonisation. Donc on vient d'avoir le clou du poteau de sang sur le titre, donc je vais juste le laisser à ça, et c'est quelque chose où, encore une fois, c'est à vous de jouer avec les différents paramètres, le piéger à votre propre goût et assurez-vous qu'il vous convient et votre site Web. Eso. Ce que je voulais vous montrer, c'est comment contrôler la mise en page sur les blocs de la page et parce que, comme vous pouvez le voir, nous passons la souris, nous obtenons cette icône de la main, ce qui signifie que nous pouvons faire glisser apparence de contenu. Mais savoir où nous allons le faire glisser et où il va s'asseoir sur la page peut être un peu difficile si vous n'avez pas ce petit truc que j'ai fait. Donc, les blocs sont tous réactifs, et ils vont changer de forme et de taille, en fonction de l'endroit où ils se trouvent dans la page. C' est donc une fonctionnalité vraiment cool de Squarespace. Cela peut être frustrant si vous n'avez pas compris comment cela fonctionne. Donc nous avons nos trois pâtés de maisons. Nous avons notre image, notre texte et notre bloc récapitulatif ici et donc planer sur le bord du bloc pour obtenir l'icône de la main. Cela signifie que je peux maintenant ramasser le bloc et je peux le faire glisser vers un nouvel emplacement autour de la page . Donc, une fois que je le ramasse et commence à le déplacer, et pouvez-vous voir que différentes lignes apparaissent en fonction de l'endroit où j'ai déplacé le bloc. Donc, ces lignes indiquent où le bloc ira une fois que je lâcherai la souris. Donc cette ligne était au-dessus du bloc d'image. Et maintenant que j'ai laissé tomber le livre là-bas, il était assis juste dans cet espace. Donc, si je le fais glisser à nouveau et voir que la ligne est voleur pleine largeur de la page et si je dépose le livre là, il change pour être la pleine largeur de la page. Et pour le remettre à l'endroit où nous l'avions avant, je veux juste cette courte ligne sous l'image toutes les dessous de la zone de texte, et elle la ramène à l'endroit où nous avons commencé. Je peux aussi le faire glisser de cette façon. AM au-dessus de la zone de texte. Andi, on y va. J' ai cette courte ligne à côté des manuels et ils sont assis, assis entre les trois. Donc j'ai toujours, genre, genre, une page de trois colonnes là-bas avec le texte de résumé de l'image Andi. Donc, sachant où vos blocs vont finir, il est particulièrement utile lorsque vous commencez à utiliser des blocs d'espacement pour manipuler la mise en page. Alors remettons-le sous caution ici. C' est ça. Et prenons une goutte de pluie pour obtenir un bloc d'espacement. Donc, cela fait partie de nos looks de contenu de base. C' est comme l'espaceur. Vous pouvez voir qu'on peut redimensionner l'entretoise, donc il y a l'entretoise. Vous pouvez voir qu'on peut redimensionner l'entretoise, Les blocs sont vraiment utiles. Une fois que vous avez vos autres blocs de contenu dans, vous pouvez les utiliser pour ajouter du remplissage autour de vous, du contenu pour lui donner plus d'espace et une esthétique plus propre et plus simple. Mais encore une fois, savoir où ils vont tomber et comment les manipuler est le genre de dernière pièce du puzzle pour moi quant à la façon de rendre le site Web vraiment à quoi vous voulez qu'il ressemble. Donc, si je fais glisser ceci vers le haut et que je reçois la ligne en haut de la page et que je lâche, cet espace de bloc se trouve maintenant tout le haut de la page, donc tout a été renversé par cette quantité. Je peux le faire tomber encore plus. On va le reprendre. Donc, si je fais glisser l'espace un bloc à la fin du bloc de texte pour obtenir cette ligne courte et la déposer là, vous pouvez voir qu'il est juste cogné à côté du bloc de texte là, au-dessus du bloc de résumé je suis, et encore, Je peux faire glisser ça et ça va pousser ça vers le bas et ça donnera à mon petit blurb qu'ils sont un peu plus d'espace. Vous pouvez également faire glisser l'espace de look de cette façon et changer la taille de celui-ci dans les deux sens. Donc, ce n'est pas juste réparé. Une fois que vous l'avez déposé, vous pouvez faire d'autres ajustements. C' est ce que je voulais te montrer. Je suis juste pour répéter lorsque vous déplacez des blocs, assurez-vous que la ligne de placement qui apparaît est l'endroit où vous voulez que le bloc finisse par finir . Parce que c'est ainsi que Squarespace vous indique où votre bloc de contenu va tomber. Et si vous utilisez un espace de bloc pour affecter un autre bloc de contenu, assurez-vous que la ligne de placement est la taille hors et à côté du bloc que vous souhaitez affecter. Donc, par exemple, si je voulais ajouter un bloc dans un autre espace, mais je voulais m'asseoir à côté de ce bloc récapitulatif ici, les Samos, euh, ce que j'ai fait en haut, une drogue thepians du livre et assurez-vous que je reçois cette ligne courte là. Vous voyez, si je vais plus loin, j'ai une longue ligne, et cela signifie que toute la longueur de la page aura l'espace d'un bloc sur elle si je la dépose maintenant. Mais je veux juste que l'espace de look fasse ce bloc de résumé ici. Donc j'ai cette courte ligne là-bas. Lâche-toi. Et on y va. L' espace du bloc est lié avec le bloc récapitulatif. Il était assis à côté, Andi, comme celui-là là-haut, et c'était là que je voulais le laisser tomber. Je savais que ça allait finir là-bas parce qu'à cause de la ligne de placement, et je sais que c'est une nouvelle que ça n'allait pas avoir d'impact sur la page entière parce que ce n'était pas une longue ligne. Donc, le point important que j'essaie de faire et de faire est qu'en sachant comment les blocs fonctionnent et ce que vous pouvez faire avec ce que vous pouvez faire avec l'espace des blocs, vous êtes vraiment capable de créer une mise en page personnalisée sur vos pages avec votre propre contenu et rendre vraiment votre Web unique pour vous. Ok, donc c'est comme ça que nous pouvons utiliser les blocs de contenu squarespace pour concevoir et créer une mise en page de site Web unique à nous. Maintenant, c'est à vous de travailler à travers votre liste de contrôle de marque et de créer votre propre site Web unique . Assurez-vous de partager votre site Web fini dans le projet de coût et faites-nous savoir ce que vous en pensez comme jamais. Si vous avez des questions ou quoi que ce soit d'autre que vous voulez que je couvre, faites-le moi savoir dans la discussion Tab Bilow. 9. Pour conclure: Ok, on a traversé beaucoup de choses dans cette classe. Nous avons mené des recherches pour nous permettre de développer nos propres lignes directrices de marque personnelles. Nous avons créé notre propre logo dans Squarespace, et nous avons appris à utiliser les outils que squarespace nous fournit dans les styles de vue et les blogs de contenu pour nous permettre de créer un site Web qui nous est unique. J' espère que vous avez trouvé cela utile. Andi a apprécié la classe et il vous a permis de développer votre côté, vous agiter et vraiment développer votre site Web. J' oublie d'ajouter votre image d'inspiration sur le site de finition dans le projet de classe ci-dessous sur Daz. Même si vous avez des questions ou des problèmes du tout avec squarespace, je les poserai dans la discussion en haut en bas ci-dessous. Je serai sûr de revenir vers vous. Merci d'avoir regardé.