Sites Squarespace Superstyle avec 6 fragments CSS simples

1. Introduction: Salut, je suis Kyle. J' ai essayé de passer autant de temps que possible à faire le tour du pays avec ma femme et mes chiens. Prendre tout ce qu'il y a à voir, manger des beignets végétaliens et boire beaucoup de bon café. Mais quand je ne fais pas cela, je passe mon temps à construire des sites web pour les petites entreprises sur Squarespace. En fait, j'ai construit plus de 100 sites Squarespace trois dernières années seulement pour des clients dans une grande variété d'industries, allant de la construction au mobilier commercial, boulangeries, et même les organismes de sauvetage d'animaux. Au cours de la construction de ces nombreux sites Squarespace, j'ai trouvé un ensemble d'extraits de code CSS que j'installe dans tous mes sites depuis le début pour m'assurer que je reçois tout comme je l'aime. Je ne suis pas un développeur, mais j'ai trouvé quelques CSS mineurs pour aider à nettoyer certains des éléments dans Squarespace qui pourraient être mieux et je vais vous montrer comment le faire aussi. Cette classe s'adresse à tous ceux qui conçoivent ou gèrent sites Web Squarespace et qui veulent qu'ils soient de premier ordre. Vous n'avez pas besoin de savoir comment coder, vous n'avez même pas besoin de savoir ce qu'est CSS. Je vous donne tout le code dont vous aurez besoin dans un document PDF téléchargeable. Tout ce que vous avez à faire est de suivre les instructions pour obtenir le look que vous voulez. Pour votre projet de classe, je vous encourage à ajouter au moins trois de ces extraits à un site Squarespace que vous construisez ou que vous gérez et partagez un lien vers le site sur la page de la classe afin que nous puissions tous voir votre travail. Ces extraits CSS fonctionnent sur tous les plans Squarespace. À ma connaissance, tous les modèles Squarespace. Tout ce que vous aurez besoin pour commencer est un site Web Squarespace, y compris un essai gratuit serait bien et le téléchargement PDF que j'ai fourni qui contient les extraits de code que vous allez installer. Une fois que vous aurez ces articles prêts à partir, commençons. 2. Styling de règles horizontales: Le premier extrait CSS que nous allons insérer sera pour le style de règle horizontale, ou comme Squarespace aime l'appeler, un bloc de ligne. blocs de ligne ou les règles horizontales sont couramment utilisés pour séparer le texte ou la section des en-têtes, ou simplement créer de l'espace sur un site Web. Vous pouvez aller de l'avant et aller à n'importe quelle page de votre site, insérer un bloc. Ça va être le bloc de ligne. Je vais les mettre deux ici pour que vous puissiez voir. Maintenant, les blocs de ligne Squarespace vous permettent seulement d'avoir remplissage complètement horizontal à 100 pour cent et ils sont généralement assez fins, environ un pixel ou deux, et donc nous allons insérer un petit extrait de code où vous pouvez changer la couleur, l' épaisseur et la largeur. Dans de nombreux modèles sur Squarespace, vous pouvez déjà changer la couleur, mais certains d'entre eux, vous ne pouvez même pas le faire. Une fois que vous avez ces blocs de ligne dans votre page, passez au téléchargement CSS que j'ai fourni, style de règle horizontale. Allez-y et mettez en surbrillance ce code, copiez-le, revenez à Squarespace, vous voulez aller à l'onglet Création, allez à CSS personnalisé, puis collez-le simplement. Là, vous voyez ce qui s'est passé quand nous avons collé ce CSS là-dedans. Maintenant, vous pouvez changer l'épaisseur de celui-ci en changeant cette hauteur de première ligne. Si vous voulez faire vraiment épais, vous pouvez le mettre jusqu'à, disons, 15. Ou comme je l'ai dit, vous pourriez passer à un troisième standard. La largeur ici peut être faite en pourcentage ou en pixel. Tu pourrais aller le mettre à quelque chose comme 200px. Maintenant, il est important de noter que lorsque vous faites cela, certains modèles le rendront automatiquement justifié, sorte que vous pouvez modifier cette dernière commande de marge en fonction de cela. Vous pouvez l'enlever complètement. voyez, je travaille avec un modèle qui ne l'a pas laissé justifié donc quand vous le mettez dans une commande de marge, cela le justifie en fait plus loin à gauche. Mais si vous avez un modèle avec lequel vous travaillez qui le justifie quand vous réduisez la largeur, vous aurez besoin de garder cette dernière marge dedans, puis margin-gauche 25 pour cent le rendra ainsi centré. Mais pour le mien, je vais garder ça dehors. Cette couleur d'arrière-plan est l'endroit où vous pouvez choisir une couleur hexadécimale ou vous pouvez simplement taper une couleur standard si vous le souhaitez, comme le rouge. Voilà, tu y vas. Vous pouvez l'utiliser à, eh bien, chaque fois que vous mettez ceci dans votre site maintenant, vous pouvez aller en ajouter un autre. Ce sera exactement la même chose. On va en mettre un ici, au-dessus de ça, et voilà. C' est ainsi que vous allez styliser vos blocs de ligne de règle horizontaux dans Squarespace avec cet extrait simple CSS personnalisé. 3. Entraînement de la grille: Le deuxième extrait CSS que nous allons ajouter au site afin de super style n'importe quel site Squarespace générique est la commande pour envelopper les titres de la grille. Maintenant, si vous avez ajouté des galeries de grille à un site Squarespace et que vous avez sous-titres ou des titres qui sont plus longs que la largeur de la photo elle-même, vous vous rendrez compte que vous obtenez rapidement ces ellipses ici et qu'elles coupent. Ce que nous allons faire, c'est que nous allons entrer un petit extrait de CSS qui enroulera ceux autour et montrera comme n'importe quel ancien titre plein. Vous allez dans l'onglet Création sur Squarespace, allez dans CSS personnalisé. Accédez au téléchargement CSS. J' ai fourni, envelopper les titres de la grille. Allez-y et mettez en évidence ce code. Retournez à Squarespace et collez-le simplement. Tu verras ce que ça fait. Ensuite, il ajoute la commande, qui avec le blanc normal lui permet d'envelopper et vous obtenez de voir la légende complète là. Titre complet. Vous pouvez changer la hauteur de la ligne ici si vous voulez rendre ces lignes un peu plus serrées, peut-être 1.2 ou aller jusqu'à 1.8 si vous pensez qu'il semble plus propre. Mais d'une façon ou d'une autre, vous avez maintenant toutes vos légendes qui s'affichent. Cela se produira quelle que soit la taille d'écran que vous choisissez. Si vous allez à un chèque mobile, vous le verrez toujours. Cela fonctionne vraiment bien.Il convient de noter que si vous regardez sur mobile ici, vous pouvez avoir un problème si vous avez ces lignes où il y a deux images en ligne et l'une descend à deux lignes et l'autre ne le fait pas. Il va jeter l'espacement ici pour heurter cela à une autre ligne.J' ai en fait un extrait CSS différent à venir plus tard qui prendra soin de cela ainsi et rendre les choses vraiment propres sur mobile. ce moment, nous allons le remettre sur le bureau. Vous pouvez voir que maintenant vous pouvez voir tous vos titres. Assurez-vous de l'enregistrer. 4. Largeur de boutons cohérents: Notre troisième extrait CSS, nous allons ajouter va être une ligne de code rapide afin de normaliser les largeurs de boutons. Si vous utilisez des boutons sur votre site, quelle que soit leur taille, vous remarquerez que le paramètre automatique des espaces carrés pour les boutons est de les avoir par défaut à une largeur de quelle que soit la longueur du texte que vous y mettez, donc, à part si vous avez des entretoises autour elle ou si c'est vraiment long et qu' il descend à une deuxième ligne, ce sera la largeur du texte qui se trouve à l'intérieur et vous pouvez le voir ici. Lorsque vous en avez deux sur la même ligne ou même sur la même page qui varient en longueur, cela peut sembler un peu bâclé comme nous l'avons ici. Donc, tout ce que nous allons faire est d'ajouter une ligne de code rapide qui standardisera cela. Comme d'habitude, nous allons entrer dans le terme CSS personnalisé ici. On va voir le document que j'ai fourni. Nous allons aller à « Button Width » ici, copier et coller ce code. Retournez à « Squarespace » et saisissez-le et vous verrez qu'ils sont maintenant standardisés. Vous pouvez faire ce code en fonction d'une largeur de pourcentage comme nous avons ici, 80, ou vous pouvez le changer en une quantité de pixels telle que 400 disent. Maintenant, vous verrez que lorsque vous modifiez la quantité de pixels, il sera statique à cela. Ainsi, vous pouvez avoir un chevauchement ici en fonction de la taille de votre écran, ce qui n'est pas idéal. Donc, je recommande d'utiliser un pourcentage et je recommande également de le garder plus près ou au moins moins moins de 90 pour cent. Sinon, vous aurez quelques problèmes d'espacement lorsque vous venez sur mobile et autres. Vous pouvez l'utiliser sur n'importe quel bloc, n'importe quelle taille de bouton, mais si vous voulez le faire seulement pour une taille, vous pouvez ajouter un double tiret après l'élément, puis la taille du bloc, si petit et vous remarquerez que je suis en utilisant des blocs moyens ici de sorte que vous remarquez quand je mets le petit, cela les change en fait à la normale parce que nous appliquons seulement au petit mais si j'entre dans le milieu ici, vous verrez qu'il remontera là-bas. C' est donc un excellent moyen de standardiser tous vos blocs de boutons sur votre site et de rendre tout agréable et propre. 5. Supprimer la hybride: Pour notre quatrième extrait CSS, nous allons entrer un peu de code qui va se débarrasser de ces traits d' union embêtants que Squarespace fait sur des écrans plus petits. Vous verrez souvent ceci si vous utilisez une police de grande taille, une police H1 ou H2 que vous avez stylisée pour être grande souvent sur la page de destination ou l'en-tête. Lorsque vous essayez vraiment d'avoir un impact sur le lecteur avec une grande police et de courtes phrases simples, ce qui est super commun ces jours-ci, et semble généralement assez bon. Le problème avec Squarespace est quand vous avez de gros textes comme celui-ci avec l'exécution de votre vision architecturale, ce qui est quelque chose que j'ai utilisé sur le site Web d'un client. Vous allez à la vue mobile, vous verrez qu'il tient des mots naturellement et vous n'avez pas vraiment l'occasion de choisir où cela se passe évidemment. C' est quelque chose que fait Squarespace. Mais j'ai un code simple ici. Nous allons juste aller à Design comme d'habitude, section CSS personnalisée. Nous allons aller au téléchargement que j'ai fourni, aller à Supprimer la césure, copier ce code, revenir ici, coller dans le CSS, et regarder ça. Voilà votre césure. Il a disparu. Tu peux le faire. Vous verrez que c'est pour la police régulière, le H1, le H2, les H3. Si, pour une raison quelconque, vous vouliez qu'ils soient coupés dans certains types de polices et non dans d'autres, vous pouvez éliminer certaines de ces polices, mais pour l'instant, vous avez tout effacé afin de ne plus voir cette césure dans les écrans plus petits. 6. Force de simples images sur des galeries de grille mobiles: Le cinquième extrait de CSS que j'ai fourni et que, où aller styliser nos sites Squarespace avec, va être un extrait que je pense est une fonctionnalité qui est super nécessaire dans monde d' aujourd'hui où nous sommes tellement habitués à faire défiler verticalement sur nos téléphones pour afficher les produits et les images, et c'est une commande pour forcer toutes les galeries de grille en lignes d'image unique sur mobile. Si vous avez déjà travaillé dans Squarespace, vous saurez que lorsque vous avez une galerie de grille ici comme telle, lorsque vous accédez à la vue mobile, vous serez automatiquement forcé d'avoir deux images par ligne, et si vous utilisez le extrait de code que j'ai fourni en moins de deux pour envelopper vos titres à la deuxième ligne ou à la troisième ligne, qui peut libérer un peu d'espacement ici sur mobile. Mais nous avons une solution pour les deux, et c'est de forcer une image par ligne afin que chaque image ait le plus d'espace possible et fournisse une belle image claire à vos spectateurs. Nous avons ceci, nous allons revenir à la vue Bureau parce que Squarespace ne l'aime pas quand j'ajoute le code dans la vue mobile. Mais on va aller au document que j'ai fourni. Pour les lignes d'image unique sur les galeries de grille mobile. Allez-y et copiez et collez cela. J' avais déjà une copie et je vais y aller et le coller. Vous ne verrez rien ici lorsque vous êtes dans la vue Bureau parce que j'ai cette requête multimédia définie à 640 pixels donc elle commencera à fonctionner lorsque vous êtes inférieur à 640 pixels. Vous pouvez changer ça comme bon vous semble. Mais je vous recommande probablement de rester à environ 640. Si vous vouliez descendre sur de très petits écrans, vous pourriez faire quelque chose comme 320. Si vous vouliez aller jusqu'à englober encore plus petits comprimés, vous pouvez aller à quelque chose comme 960. Mais j'aime ça à 640, je pense que c'est un bon point de rupture. Maintenant que vous avez cela là-dedans, si vous allez juste regarder la vue mobile, vous verrez que ce sont maintenant toutes des lignes d'image uniques et que vous avez donc des photos plus propres, plus grandes, vos légendes sont plus belles, et vous avez j'ai tout mis. C' est vraiment génial pour toutes les photos de produits, ainsi que pour les photos que vous avez. 7. Les titres d'images de centre: Le sixième et dernier extrait de CSS que nous allons insérer dans notre site Squarespace est une ligne de code très simple conçue pour centrer les légendes d'image, Squarespace utilise par défaut les légendes d'image alignées à gauche. Comme vous le verrez ici, j'ai deux images sur la page. Vous pouvez voir les petites légendes d'image ici sont alignées à gauche et cela semble juste un peu funky, surtout lorsque vous avez des images avec des fonds blancs et que vous ne pouvez pas dire à quel point elles vont. Comme dans ce cas, ici, il semble un peu hors de l'endroit où il devrait être. Donc, je vais aller à nouveau dans l'onglet Design, CSS personnalisé, au même endroit que nous les avons tous fait. Accédez au document téléchargeable que j'ai fourni. Légende de l'image centrale, c'est la dernière. Allez-y et copiez ça. Collez-le directement dans CSS et vous verrez qu'ils se sont déplacés au centre là-bas. C' est tout ce que vous devez faire pour le garder centré. Si vous vouliez l'aligner correctement pour une touche de style, vous pouvez juste remplacer ce centre juste ici par la droite, et voilà. Mais je recommande seulement que si vous le faites pour une certaine raison, cela fonctionnera mieux si vous n'avez pas de fond blanc. Comme vous pouvez le voir, cela le jette un peu si vous allez aligné à gauche ou à droite. Donc, comme je l'ai dit, allez avec le centre. C' est un excellent moyen de faire en sorte que tout soit cohérent dans toutes vos images et là vous l'avez. C' est tout ce que nous en avons parlé dans nos six extraits CSS pour les sites Squarespace qui vous aident à super style ou site générique. Si vous avez apprécié cela, appris quoi que ce soit, s'il vous plaît appuyez sur le bouton Suivre de mon profil car je vais enseigner plus de cours Squarespace à venir. Merci d'avoir regardé.