Transcription
1. Introduction: Bonjour, Karen, co-créative dans ce cours, nous allons créer un site Web Squarespace entièrement
personnalisé. Donc, si vous voulez le site Web
Squarespace, mais que vous voulez qu'il soit un
peu plus soigné et professionnel, et
pas seulement une sorte de mise en page d'emporte-pièce qui vient avec une partie
du contenu de démonstration C'est ce que Squarespace a. Ce cours est fait pour vous. Vous n'avez pas
besoin d'être un expert du site Web pour pouvoir le faire. Squarespace est
très convivial et tant que vous
savez où aller pour personnaliser certains éléments et comment ajouter certains
éléments de votre choix. Tu seras
certainement capable de le faire. Je vous suggère d'
avoir déjà
sélectionné votre copie et vos images pour votre site. Et nous allons commencer
par démarrer votre compte Squarespace,
ajouter vos pages, travailler avec le contenu de
démonstration et personnaliser tout
au long quelques éléments très basiques tels que du code modifications afin que vous puissiez créer le site Web entièrement personnalisé. Je vais te prendre
par-dessus mon épaule et te
montrer quelques options. Il s'agit de sites Web
Squarespace entièrement personnalisés. Je commence
généralement par une mise en page de démonstration, mais je ne m'en tiens pas à eux. Alors oui, laisse-moi me débarrasser de
mes images. C'est coupé. Encore une fois, celui-ci est destiné aux sites de
coiffeurs.
C'est tellement différent. Le premier était le ballet. Celui-ci est un coach santé. Mais ceux-ci ne
ressemblent pas au
contenu dentaire sur lequel ils sont basés, car ils sont
entièrement personnalisés. Je vais donc vous montrer comment procéder dans la prochaine vidéo. Une fois que nous aurons commencé,
nous créerons votre
compte Squarespace et nous commencerons. Très bien, on se voit là-dedans.
2. Démarrage du carré: Très bien, nous
allons donc commencer dans cette courte partie Je vais
vous montrer comment faire fonctionner
votre
compte Squarespace. Allons-y. Vous allez bien
sûr vous rendre sur squarespace.com. Très bien, passons
à ma vidéo ici. Vous allez donc vouloir
soit cliquer sur Commencer. Si vous n'avez pas encore
de compte Squarespace. Cela vous mènera directement
à ce créateur de modèles. Pour moi, je vais me connecter
et vous rencontrer à cette partie. Je suis donc connecté. Même processus, créez un site Web, modèle
vierge ou un
autre modèle. Je vais choisir un autre modèle. Et maintenant je suis de retour là où tu es. Si vous cliquez sur Démarrer, c'est là que vous
choisirez un modèle et, encore une fois, vous serez entièrement personnalisé
. Alors ne t'y accroche pas trop. Il suffit de choisir quelque chose
qui vous
semble agréable et propre. Si c'est ce que vous
recherchez ou si vous avez
un peu plus de
personnalité, ils le veulent. Vous pouvez donc
parcourir et parcourir autant de choses que vous le souhaitez. Je vais y aller. J'ai vu celui-ci par
lequel je veux commencer. Ensuite, vous avez également un
aperçu si vous voulez
voir quelque chose de plus près. Mais encore une fois, je vais
le personnaliser complètement. Alors n'ayez pas l'impression marié,
vous
devez être marié avec lui. Je vais simplement
configurer le contenu de démonstration. C'est donc le titre de votre site. Je recommande généralement que le titre de
votre site soit
descriptif de votre entreprise. Je fais ça pour un client. OK. Et dans le Sud, tu pourras
changer ça plus tard, alors ne
t'inquiète pas trop. Cela vous guidera tout au long
d'un tutoriel très rapide. Vous pouvez passer en revue cela rapidement parce que je vais vous montrer tout ce
que vous devez savoir. Très bien, maintenant vous
avez essentiellement la configuration de votre site. Tout d'abord, j'aime me lancer
dans le marketing, le référencement. Faisons en sorte que le
titre ressemble à ce
que vous voulez, n'est-ce pas ? Et puis c'est vraiment ça. Vous avez configuré votre site. Si vous souhaitez connecter
un domaine immédiatement, vous pouvez le faire ici et suivre les étapes pour
obtenir un domaine, ou cela
signifiera-t-il que vous êtes propriétaire ? Mais à part cela, une fois que vous aurez cliqué
et obtenu ce modèle, votre site sera démarré.
3. Ajouter des pages: accord, donc si
vous avez regardé de mes autres tutoriels de site Web, vous savez que j'
aime d'abord commencer par créer toutes les pages de
mon site Web. Cela me donne la possibilité de
styliser avec précision l'
en-tête
et le pied de page et de simplement
parcourir et personnaliser toutes mes
pages assez rapidement. Cela fait donc partie de mon processus. Vous n'êtes pas
obligée de commencer ici. Mais ce que je viens sur notre site de
démonstration, c'est encore une fois,
je vais de l'avant et je
crée, en je vais de l'avant et je
crée, m'assurant d'avoir toutes
les pages que je veux. Ce sera donc dans
votre onglet Pages. Et tu devras t'assurer
que tu as toutes les pages. Donc pour moi, la page d'accueil, d'accord. Je vais en fait
supprimer ça. Impossible de quitter la page d'accueil et
créons une nouvelle page d'accueil. Et encore une fois, commencez
par la mise en page. Commençons par cela.
Ce sera la page d' accueil en tant que page d'accueil. Vous, cette icône d'engrenage
définie comme page d'accueil. Ok, alors j'ai besoin d'une page de cours. Et vous voulez vous assurer que tout cela ne doit pas nécessairement être pareil. Le titre de la page est
la façon dont la page apparaît ici dans le
titre de la navigation est la façon dont elle apparaîtra dans le menu de navigation. Et la limace est ce que
vous devez taper. Et puis j'ai besoin de ma page « À propos ». Je vais appeler le corps professoral. C'est là qu'il peut être
utile d'avoir déjà cartographié votre café afin
que vous sachiez exactement ce dont vous avez besoin. Les services. Je vais faire en sorte que ce
soit des cours particuliers. Et au fur et à mesure que
vous les modifiez, vous remarquerez que
les petites barres de démonstration qui apparaissent à côté de chaque
page disparaîtront. Tu as un nom en deux mots. Il est préférable de le couper. Je vais juste supprimer tout
ce qui concerne la conduite ici. Et je vais juste le faire. Cela reste ensemble. Démonstration hors de là. J'ai besoin d'une autre page, ce que j'ai dit
ne pas encore faire. Donc pour moi, si j'ai besoin
d'ajouter ces éléments pour aller dans le même dossier. Désolé, ce n'était pas
le dossier en bas. Donc maintenant, ces choses que vous
verrez sont dans une liste déroulante. C'est mon contact qui
n'est pas lié parce
que le bouton
contextuelle je vais vous montrer comment épeler dans la partie
en-tête. Mais essentiellement
écouter pour créer. La prochaine chose dont j'ai besoin,
c'est d'un calendrier des événements. Ça va être
une page de calendrier. Des événements qui seront un peu différents. Je n'en veux pas. Très bien,
c'est donc l'ordre que je veux. Très bien, nous avons donc
nos pages ici. Nous allons les parcourir et les
personnaliser un par un, à
partir de la vidéo suivante.
4. Style de mise à jour (polices, couleurs): Avant de modifier
les pages individuelles, il existe quelques endroits
où vous pouvez ajouter
des modifications de texte, des changements de
couleur et tout cela votre
site Web Squarespace. Je vais donc vous emmener dans l' éditeur de
style et vous le montrer. Car dans notre Squarespace, nous en arrivons au design de la page. Encore une fois, il ne s'agit que de l'
onglet Design et des styles Insights. Et c'est là que vous pouvez faire vos choix de police et de couleur. Je vais m'occuper de
ma palette de couleurs. Donc si nous avons deux couleurs, vous verrez cette palette ici. Vous pouvez ajouter vos propres
couleurs selon vos besoins. Ça va ? Donc, si sur la palette
au niveau des couleurs. Alors attendez, vous allez
probablement
vouloir continuer pour que
nous ayons du blanc ici. Ray, je veux que ça soit un
peu plus gris. Fais ça, c'est
un peu, d'accord. Ensuite, je récupère le code couleur
d' un gars qui n'est pas sur mon écran. Donc si je sélectionne celui-ci, tu veux changer le code ? Tu n'en as qu'un. Ouais. Ensuite, vous voudrez probablement
laisser l'une de vos couleurs comme étant le noir, le noir ou un bleu marine
ou un gris foncé. Quelque chose pour voir F7 pour FDI. suis sûr que ça
ne change pas pour être la couleur que je veux qu'il soit. O à cause de ça. Donc, si quelque chose
ne fonctionne pas correctement, assurez-vous que
vous l'avez noté. Voici donc les
couleurs que je veux. Ensuite, lorsque nous passerons aux polices, je vais faire une pause pendant une minute
pendant que je regarde mes polices. Très bien, donc quand nous sommes
dans la section des polices, vous pouvez voir que nous
avons des options pour modifier les titres
et les paragraphes, puis divers. Je vais donc sélectionner les titres, la famille, puis
parcourir toutes les polices. Vous pouvez également saisir une police si vous savez ce que
vous recherchez. Pro peut danser. Très bien, et vous pouvez modifier la taille des différentes
polices, titres. Ne vous inquiétez pas si vous
ne voyez pas votre police. Ici, tu peux prendre de l'avance. Il existe un guide de code CSS pour ajouter des
polices personnalisées à votre site Web. Mais pour l'instant,
nous allons procéder. Donc, si vous trouvez vos polices ici, vous
pouvez aller de l'avant. Si ce n'est pas le cas, vous pouvez sauter devant. Donc, les paragraphes, c'est pareil. Et les boutons ont également leur
propre police. Dites « standard » pour celui-là. Et assurez-vous que vous voulez
qu'il soit identique sur tous les types de boutons que vous utilisez
et que vous sélectionnez. Ensuite, divers. Je vais également
faire un Myriad Pro. Très bien, maintenant nous avons ajusté toutes nos polices et nos couleurs. Encore une fois, si vous avez besoin
d'ajouter une police personnalisée, vous pouvez le faire. Et vous en verrez deux quand
vous serez ici dans l'éditeur. Si vous sélectionnez, vous avez également
la possibilité de sélectionner une couleur différente ou
d'ajouter une couleur personnalisée. Vous avez donc plus d'options
que ces couleurs. Mais pour le bien de cela, c'est pour la
rapidité et l'efficacité. Vous devez vous
assurer que vous avez un blanc et un gris foncé noir. Blanc pour les fonds,
noir gris foncé pour les polices. Et j'ai tendance à aimer
avoir une couleur plus claire. Je suis gris
ou marron. De cette façon, vous avez d'autres
options comme les couleurs d'arrière-plan. Très bien, donc c'est juste
votre section éditeur de style. Ensuite, avant de passer à
chaque page individuellement, nous allons faire notre en-tête
et nos pieds de page. Alors restez à l'écoute et passez à
la leçon suivante pour
savoir comment les personnaliser.
5. Format d'en-tête: Bon, maintenant que nous avons ajouté
nos couleurs et nos polices, l'étape suivante est de
mettre en forme l'en-tête. Je vais t'emmener
voir ça tout de suite. Très bien, nous
allons donc venir ici pour styliser l'en-tête. Vous avez semblé aller à n'importe quelle page
contenant l'en-tête, qui devrait être toutes
à ce stade. Il vous suffit donc de
cliquer sur Modifier, Modifier l'en-tête du site. Et puis ici, le
titre et le logo du site. C'est ici que vous
pouvez ajouter votre logo. Et ici, vous pouvez
régler la hauteur. Et puis nous
avons ici quelques options de ce que vous souhaitez afficher. Alors pourquoi ne veux-tu pas
le bouton ici ou non ? Donc, si vous ne voulez pas que
le bouton dise cela, alors le style est là. Voici quelques options
différentes. Et j'ai une
vidéo qui explique
cela de manière beaucoup plus détaillée. Mais c'est solide, auquel
cas il vous suffit de
choisir la couleur d'arrière-plan et de navigation. C'est utile si vous
voulez utiliser quelque chose de
différent de votre palette de
couleurs, sinon le thème serait
avec votre palette de couleurs. Vous voyez donc que je peux choisir tout ce qui fait partie de ma palette de couleurs. Si votre logo n'est pas sur un fond
transparent, vous devez vous
assurer qu'il est en blanc. Sinon, le fait d'avoir un logo d'
arrière-plan transparent résout ce problème assez rapidement. Ce sont donc vos options. Alors c'est laissez-moi le faire. C'est donc là que ce
n'est pas basique. Voyons voir ici. Comment est la position fixe. Alors maintenant, allons-y, je ne veux pas
entrer dans Scroll avec moi. Une seconde ici.
Très bien, cette option est donc, elle ne s'affiche pas lorsque
vous êtes en mode édition, mais pour l'en-tête fixe de base. position fixe signifie donc que l'en-tête va
apparaître pendant que vous faites défiler la page. La position fixe est activée
si nous frappons et cetera, vente de base, cela
ressemble à ceci. Où il reste en place. Ou si nous éditons l'en-tête du site et
que nous le faisons défiler vers l'arrière. Cela crée juste un
petit effet où nous ne voyons pas trop
l'en-tête. Alors que je fais défiler, vois qu'il disparaît un peu. Ça va ? Donc, si vous avez votre logo et que vous êtes tous
satisfaits de tout cela, la prochaine chose que vous
voudrez peut-être faire est si ce bouton semble énorme, ce
qui est le cas. Alors vous cliquez dessus, il le fera. C'est donc la largeur,
la hauteur qui me préoccupe. Là encore. C'est pour les boutons principaux, les boutons
secondaires que vous
pourriez avoir à créer. Il s'agit donc de jouer un bouton
secondaire. C'est en fait un bouton très
tertiaire. Voyons voir. Ce n'est pas
juste la page de vos boutons. Il ne s'agit pas de modifier ça. D'accord, mais ça
réduit la
taille de nos boutons ici. Et
c'est ce que je veux faire. Quelqu'un a appuyé sur Enregistrer. Si vous voulez que ce bouton
soit d'une couleur différente. Vous pouvez également en avoir, désolé. C'est là que nous avons
cette option de liens sociaux. Option permettant de
basculer dans la langue. Vous pouvez l'activer si vous
avez une histoire qui souhaite afficher le panier. Ici. Je vais
changer ce style en solide. Et que ça va me
donner les options
pour changer le bouton. Ça ne me donne pas le
choix. Ensuite, vous arrivez au thème. Erreur avec le dernier, mais je vais venir
ici, cliquer sur Enregistrer pour ça. Styles du site, couleurs,
dernier, sélectionnez le dernier. Voilà qui me donne le bouton. Ici. Si je souhaite
modifier la couleur du bouton, je peux choisir une couleur personnalisée ou sélectionner dans ma palette. Voyons ce que je préfère. Je
préfère celui-là. Encore une palette. Très bien, c'est comme
ça que tu
changerais la couleur de ton bouton. L'en-tête est
donc plutôt bon. Si vous consultez le guide du code CSS
personnalisé, vous verrez des options. Personnellement, j'aimerais que
vous supprimiez le soulignement, nous le ferons
vers la fin. Mais si vous voulez aller de
l'avant et le faire maintenant, vous pouvez trouver le guide CSS faire et passer directement
à cette section. Sinon, dans la
prochaine vidéo, nous
ferons avec le pied
de page du site Web, qui est en bas.
6. Mise en page de pied de style: Ensuite, nous allons traiter
du pied de page de votre site Web. Et la raison pour laquelle nous faisons d'abord l'
en-tête et le pied de page est qu'ils se trouvent sur chaque
page de votre site Web. De cette façon, au fur
et à mesure que vous personnalisez votre site Web, le corps de la page, vous pourrez voir tout
correspond à l'
en-tête et au pied de page. Alors allons-y. Porte si pointilleuse en arrière-plan. D'accord, voici le flottement, selon le type de modèle de
démonstration que vous avez sélectionné. Cela peut sembler très différent, mais pas trop inquiet. Vous pouvez donc y aller et tout
changer. Encore une fois, vous allez simplement
aller sur n'importe quelle page contenant
du flou,
appuyez sur Modifier, pied de page. Et ici, nous avons les mêmes
options que celles que nous
aurions sur n'importe quelle section de
page. L'en-tête est légèrement
différent sur la photo de cette façon, mais celui-ci est similaire à
toutes les autres sections de la page. Il suffit donc de modifier
la section. Si tu veux changer
la couleur de fond. Ici. Je préfère que ce soit
ça. Je peux le faire. Je pense que oui. Ça peut être plutôt cool. Mais je veux essayer celui-ci. Ensuite, ce contenu dépend de vous de ce que vous
voulez montrer. Je vais donc
ajouter le nom de la société ici. Espace. Ils ont donc également leur
adresse et leur pied de page. Ils aiment l'avoir. Là-bas. Si vous voulez des icônes de réseaux
sociaux, vous pouvez les mettre n'importe où. Ce serait en ajoutant
un bloc, des liens sociaux. Et vous faites en quelque sorte cliquer-glisser. Il s'agit d'une toute nouvelle fonctionnalité. Je vais donc avoir l'
air cool avec ça moi-même. Mais en gros, il s'agit
du type d'option de grille. Tu es plutôt cool. C'est dans cette boîte bleue que
ça va finir. Squarespace vient de publier ceci et je ne suis vraiment
pas fan, mais il n'y en a pas deux ici. Parfait. C'est bon, tu y vas. Ensuite, si vous voulez la mise en page, le design, voulez
qu'ils soient corrects. Je devrais les mettre en dessous. Ça va ? Ainsi, vous pouvez voir quand
vous pouvez faire glisser quelque chose, ces carrés apparaissent, ce qui vous
permet de déplacer
les éléments un peu plus gracieusement que ce qui était possible dans l'ancien éditeur
Squarespace. Nous voulons ici des liens rapides. Ici. En fait, je vais y
aller. Et voilà, tu verras si je l'ai fait. J'avais cet immense espace. Alors appuyez sur Entrée. Si vous utilisez Shift Enter ou si je crois que
Command Enter sur un Mac, vous aurez moins d'espace. Donc des performances. Qu'est-ce que je veux d'autre ? Faisons des récitals, des événements
spéciaux. Et si j'ai besoin
de le réduire, je l'ai fait vouloir
être dans une nouvelle boîte. Très bien. Donc c'est bon pour moi. Vous pouvez également ajouter une
image si vous voulez ajouter une
version de logo à votre site. Encore une fois, il vous
suffit de cliquer dessus et le
faire glisser où vous le souhaitez. C'est dans cette boîte bleue que
ça va finir. Donc voyez ici que je n'en ai pas
besoin, mais si vous voulez
continuer et garder cela, vous pouvez supprimer ce bloc. Sinon, je
vais aller de l'avant et dire que cette section est terminée. Donc pour ce faire, Done Save. Très bien, maintenant notre
pied de page est terminé.
7. Bases du moteur fluide (bâtisseur): Très bien, maintenant que nous avons résolu notre en-tête et notre pied de page, nous allons aborder les bases de
Squarespace pour créer des modifications de page
et apporter des modifications. Il existe un nouveau constructeur appelé moteur à
fluide dans
Squarespace Seven 0.1. Les choses peuvent donc sembler différentes de la dernière fois
que vous avez créé un site Squarespace ou que vous avez consulté
le tutoriel squarespace. Je vais te montrer, te
mettre par-dessus mon épaule, et te montrer de quoi
je parle. Donc, pour modifier une page, ils vont venir
ici et cliquer sur Modifier. Vous pouvez modifier la vue
Bureau ou mobile. Et le nouveau générateur a
apporté quelques modifications afin que
vous puissiez réellement modifier les éléments séparément afin
que les éléments puissent être plus réactifs si vous
procédez à des modifications. Donc ici, comme dans la section
pied de page, nous devons éditer chaque
section ou ajouter des blocs. Donc, si j'ajoute un bloc, ce que je veux ajouter
plus de texte à cela, vous pouvez voir l'image d'
arrière-plan. C'est un peu plus difficile,
mais là où je déménage, c'est
dans ce rectangle bleu qu'il va
aller . Le texte est maintenant ici. C'est ainsi que vous
ajouteriez n'importe quel élément. Et vous pouvez voir qu'il y
a plein de choses
différentes. Image, bouton, vidéo, texte, modifiez l'arrière-plan d' une section qui se trouve dans
les paramètres de la section. Donc, si vous ne voulez pas une photo
mais juste un arrière-plan, qu'
il s'agisse d'un fond
blanc ou d'un fond de couleur différente, vous devez supprimer l'image. Et je souhaite modifier cette combinaison de
couleurs que vous pouvez sélectionner dans votre palette. Comme ça. Ces
fonds colorés auront
également un
effet de superposition différent sur les images. Cela aura donc probablement
un
effet différent sur une image, puis un effet différent. J'ai donc ajouté une image que vous pouvez télécharger depuis votre ordinateur. Si vous avez besoin d'utiliser
la photographie de stock, vous pouvez parcourir les images
de stock de vos bibliothèques. Si vous avez une image
que vous souhaitez
utiliser à plusieurs
endroits sur votre site, vous pouvez la sélectionner dans la bibliothèque. Pas d'avance et parcourez les images
de stock. J'ai des photos pour le site, mais parce que leurs enfants
et les bourses de cours et pendant qu'ils ont publié pour être sur le site Web que je m'ai publié
dans le cours. Je vais utiliser la
photographie de stock, suivre le cours. Comme vous pouvez le voir ici, ce cercle dicte la mise au point de l'image. Donc si je la déplace vers le haut,
ce sera un peu mieux, d'autant plus pour que son visage ne soit pas coupé. Donc, si vous cliquez sur,
cela se fera. Autre chose à noter, vous pouvez également créer des
incrustations qui créent plus d'espaces blancs
autour des images. Donc j'aime bien ça. Laisse-le à fond. C'est un peu difficile à lire. Je vais m'
en débarrasser. Débarrassez-vous du bouton, supprimez tout ce qui est
en train de cliquer, supprimez-le. Et je vais aborder plus de bases de conception
de page d'accueil. L'alignement, la hauteur
est, cela restera grand. C'est juste beaucoup de
contenu en haut, au milieu. Della le veut au milieu. Mais comme il n'est
toujours pas
centré, il
suffit de cliquer et de faire glisser. Maintenant, cliquez, maintenez, faites glisser. Maintenant, c'est beaucoup plus centré. Les couleurs sont un peu dures, donc je vais voir si
je peux changer ça. C'est toujours difficile. Mais vous pouvez voir que je ne
change pas l'image d'arrière-plan, mais si je change simplement,
cela change. C'est donc un peu plus facile. D'accord, c'est en quelque
sorte vos antécédents. Même s'il s'agit de
la section d'en-tête, le même processus s'appliquera
à toutes les autres sections. Textes que vous pouvez
simplement modifier sur une page. Donc, si je voulais
supprimer tout cela et copier et coller ma copie
, je peux le faire. Je peux également me changer facilement. Je veux donc que ce soit plus petit. Ça doit être plus grand. Donc, l'image, si je sélectionne ceci, me
donnera la possibilité
de le remplacer. Envoyez le bouton par SMS. Si je sélectionne cette option, j'aurai la possibilité
de créer les liens. Si j'appuie sur cette icône d'engrenage, je peux immédiatement la connecter
à une autre page du site. Ceci est juste un aperçu très
rapide de ce à quoi vous êtes prêt
à prêter attention est ce que ce nouveau constructeur.
Nous avons beaucoup de. Laisse-moi y aller. Ouais. Je peux donc mettre du texte sur une image. Mais j'ai beaucoup plus d'
agilité avec le nouveau constructeur en termes de placement d'objets. Donc, si je veux faire cela, je peux également m'assurer que
cela ne dépasse pas cette image. Assurez-vous que c'est
plus proche de ça. Je clique et fais glisser pour rendre
les choses beaucoup plus flexibles. Encore une fois, si c'est trop, vous aurez beaucoup plus de flexibilité
avec le nouveau constructeur. Mais souvenez-vous du cliquer-glisser. Ils placent une image
en arrière-plan. Ce sont vraiment les points
forts de ces sections. J'aborderai certaines choses
plus spécifiques, comme l' inscription à la
newsletter
et les formulaires de contact dans une vidéo ultérieure du cours. Mais pour l'instant, c'est en quelque sorte votre parcours rapide
sur la façon d'utiliser le nouveau. Depuis qu'il s'appelle Fluid Engine, le nouveau constructeur Squarespace. voici donc.
Oui, moteur à fluide. Très bien, le prochain, je vais passer en revue la page d'accueil
quelques mises en page de base et commencer à construire
cette page. Je vais faire la même chose pour une page à propos et
une page de services. Juste pour que vous puissiez voir
différentes pratiques et meilleures pratiques pour créer
ces pages
importantes sur votre site Web.
8. Bases de la mise en page: Très bien, nous
allons maintenant
accéder rapidement à votre page À propos et je vais vous montrer quelques conseils
de mise en page pour cela. Si je suis sur le site Web de
Squarespace, dont celui-ci, la
page À propos est la page du corps professoral. Je l'ai donc renommé. Mais si vous le regardez, c'
est l'un de ces modèles. C'est un peu, je ne sais pas qui a pensé que
c'était un bon design. Cette image est au
milieu de nulle part. Il y a beaucoup de biens immobiliers
inutilisés, ce qui est parfois agréable
parce que cela donne à l'IRS, mais parfois tout simplement inutile. Donc si nous devions l'utiliser, je pense que vous pourriez faire
une chose
si vous n'aviez pas une mise en page comme celle-ci. Vous pouvez donc déplacer
cette image vers le haut. Parce que comme ça,
je peux y aller. Je souhaite faire avancer ce texte
. C'est donc ça. Maintenant c'est sur l'image. Déplacez ça un peu en arrière. Mais je vais
le réduire. Trop petit parce que
maintenant c'est parti. Donc, si vous êtes une entreprise
qui avait juste besoin d'un simple, juste à propos de qui nous sommes un peu de votre énoncé de
mission. Il s'agit d'une mise en page qui
pourrait vous convenir. Vous
voudrez bien sûr supprimer une partie de cet
espace blanc supplémentaire en bas. Pour le site du ventre. Pour le ventre, disons,
nous allons
avoir un tas de personnes
différentes. Ce serait donc
comme un instructeur. Si nous avions besoin d'en
avoir plus, nous pourrions regarder
Section faire de cette section une couleur d'arrière-plan différente
pour un instructeur d'
analyse alternatif. Pour obtenir cette section. Instructeur. Trois. Ce sera une bonne façon de
présenter les
différentes structures. Si vous avez plus de pratique
de coaching, je ne peux pas vous montrer ma
page à propos sur Skillshare, mais c'est un rédacteur
chez un ami à moi. Donc ce qu'elle fait, c'est
encore, présenter qui
elle est et elle veut être très aimable. Elle a donc ce genre
de points de connexion. Et puis elle
expose le rédacteur. Et puis elle a essentiellement
utilisé sa page À propos pour partager pourquoi ses services
sont différents. Et elle a une histoire sur façon dont vous pourriez payer
quelqu'un beaucoup d' argent pour la copie ou si
vous êtes une entreprise nouvelle, ça va changer, les
choses vont changer. Elle a donc une
philosophie différente derrière sa copie. Elle
parle donc de la philosophie. Donc sa page À propos
fonctionne vraiment pour dire pourquoi elle est différente. Ce qu'elle a ici. Il ou elle doit
faire appel à mes services. Le but
de la page À propos est vraiment de vous faire confiance pour ensuite acheter
votre produit ou vos services. Elle donne donc l'option ici. Et il s'agit d'un
site Squarespace dont elle également ce qu'elle a une connexion appelée points de
connexion. Et elle a mis ça en
faisant ce graphique dans lequel elle utilise. Mais vous pouvez faire quelque chose de
similaire sur Canva pour créer un graphique et
le mettre dedans pour créer
des sortes de points de connexion. C'est une solution de contournement. Mais alors elle a cette histoire plus longue. Vous voulez donc avoir une page à
propos de cette longueur. Est-ce une idée de la façon dont vous pouvez
réellement utiliser votre page
À propos pour soutenir
vos services ? Sinon, je suggère
de rester bref et simple. Expliquer ce qui te
différencie ? Qu'est-ce qui
différencie votre produit ? Qu'est-ce qui
différencie votre entreprise ? Ensuite,
faites-les passer et ajoutez un bouton à votre page de services. Donc, pour faire ce bouton de blocage des publicités. Nous aurions donc un bouton pour
chacun d'entre eux qui
ressemble à
Afficher les cours, car nous espérons
qu'ils en ont maintenant
suffisamment appris sur cette personne
en tant que professeur. Ils voulaient suivre les
cours qu'ils enseignaient. La page À propos est donc
vraiment destinée à amener les gens à
accéder à la page des services. Très bien, et c'est ce dont nous
allons parler ensuite.
9. Squarespace 8: Très bien, nous sommes maintenant dans
la section Page d'accueil. C'est ici que nous allons passer revue certaines des sections que votre page d'accueil pourrait
vouloir avoir. Ceci est basé sur une sorte de principes de conversion
et d'expérience utilisateur. Alors je vais te prendre par-dessus mon
épaule et faire certaines choses. Nous sommes donc de retour sur
notre page d'accueil de démonstration. Une option de mise en page courante est cette image
de héros ou de bannière en haut de la page d'accueil. C'est ce qu'on appelle le tiers supérieur. Il a pour but d'attirer l'attention de
vos spectateurs. Donc, pour cette raison
de ce site, il s'agit d'une compagnie de danse qui propose des cours de ballet. Donc, en gros, nous voulons dire aux
gens que c'est à propos du ballet. Nous avons donc ici une image
qui parle de cela. Si vous n'avez pas une
entreprise qui a besoin d'une telle force ou si elle n'a pas quelque chose de très représentatif visuellement
de l'entreprise, l'image de héros n'est
peut-être pas la meilleure chose à
mettre dans le tiers supérieur, vous pouvez plutôt placer
quelques textes de guide au-dessus. Et vous voyez que vous
pouvez ajouter une section au-dessus de cela très facilement. Vous pouvez faire une section vide ou quelque chose comme ceci
est une bonne option. Le texte ici
va se démarquer, surtout qui a réduit un peu cette
image, que je pense pouvoir faire avec
le nouveau constructeur comme celui-ci. Donc, si nous avions
quelque chose comme ça,
cette petite
flèche bleue nous aidera à stocker dans cette section. Je me demande si je
dois obtenir la hauteur de cet espace blanc. Il suffit de cliquer et de faire glisser tout et les médicaments plus près. Ensuite, pour raccourcir cette chose,
ce n'est pas exactement
le style d'invocation d' un site Web ayant ceci
ici au lieu de cela. Mais si vous n'avez pas une très
bonne représentation visuelle, vous avez la possibilité de
conserver une image ici. Mais vous savez, cela n'englobe pas
vraiment ce que fait votre entreprise. C'est peut-être une meilleure solution
, car ce texte veut toujours
se
démarquer davantage que ce texte. Et nous
pouvons même le réduire. De cette façon, nous passons rapidement à la section
suivante. C'est donc quelque chose que j'
encourage les gens à faire. Il n'est pas toujours
nécessaire de faire ce qui est élégant. Vous allez
réfléchir à ce qui est le plus efficace pour transmettre
votre message, en particulier lorsque nous
parlons de l'immobilier
dans la section supérieure de votre site Web. Je vais en fait
déplacer cette section vers le bas. Puisque ça marche. Je vais mettre le logo ici au lieu de ce texte. C'est ici que je
veux prendre une photo. C'est une bonne chose
et cela
facilite vraiment la mise en place d'une image
sur une image. Ça va ? Donc, selon ce que vous
décidez de faire pour ne pas le faire, vous essayez
de le faire en termes d'
option comme celle-ci ou une option comme celle-ci en haut
de votre site. La prochaine chose que vous voulez
faire est de donner aux gens une description concise
de ce que vous faites. Donc, ici, j'
ai et
encore, copiez-collez
cela depuis votre document. Tu en as quelques paires. Je me pose vraiment la question. C'est la capitalisation ici. Là-haut et collez. C'est qu'il nous indique exactement
ce qu'est l'entreprise. La section de texte est assez grande. Je vais le faire petit. Et
donnez-lui également une couleur. Bon ? C'est aussi petit
que je veux qu'il soit. Donc, si vous atteignez cette hauteur, vous pouvez en fait des espaces blancs. Supprimez cette section.
En fait, je vais modifier la section
d'arrière-plan de celui-ci. Donc, ici, je pourrais avoir une description et télécharger un fichier cette fois
depuis mon ordinateur. Ici, nous voyons que ce texte
est maintenant difficile à lire, alors je
vais simplement le faire. Ici. Nous allons faire quelque chose à propos du bouton. Voyez si je veux faire
ce bon alignement. C'est plutôt cool. Je peux
changer ça ici. J'ai effectivement une
citation sur leurs sites. Je vais utiliser cette section. C'est un excellent exemple
de la façon dont vous pouvez réutiliser. Il s'agit donc d'un arrière-plan
qui est inséré. Je vais donc le
remplacer dans la bibliothèque. Je vais le
remplacer depuis mon ordinateur. Vous pouvez également créer plus de superposition, ce qui aidera ce texte à apparaître. Je suppose que nous
allons faire celui-ci. Très bien. Et donc notre citation
est la citation de Joséphine Baker. Très bien, ici encore sur
votre page d'accueil, ce texte est destiné à n'
importe quel exemple succinct j'ai tendance à aimer être
la section À propos. Donc c'est vraiment comme, d'accord, qui sommes-nous en un mot, juste sous le héros
ou la troisième section supérieure, alors nous pouvons avoir
plus d'informations sur. C'est donc notre mission. Nous allons plus loin dans ce domaine. Je
vais nettoyer ce texte. Mais pour le
simple fait de vous montrer un
tutoriel pour les mises en page, je ne vais pas trop me plonger dans les mauvaises herbes et la personnaliser. Mais avoir ensuite une
section À propos. Et voici ça. Un peu de personnalité
est totalement optionnel. La prochaine chose que vous voulez
généralement avoir sur une page d'accueil est une section de
services. C'est ce que nous appelons un panneau indicateur. Il s'agit simplement de donner aux gens un moyen d'accéder facilement aux différentes
parties de votre site. Je cherche, je
vais choisir. Celui-là. La section Peut modifier regarde les différentes applications,
différentes couleurs. Décidez de ce que je veux faire ici. Je ne vais pas faire ça. Peut-être que je veux que
ce soit blanc. Donc ici modifier le contenu, vous pouvez dire que je ne peux pas
modifier ce titre, c'est parce qu'il est
ici. Le titre. Alors nous avons besoin de quelque chose
pour chacun d'entre eux. Donc le titre de cette
petite section, camps
d'été et intensifs. Ensuite, nous avons l'
option d'un bouton. Vous pouvez mettre le lien ici si vous êtes prêt
à le mettre quelque part. Désolé. Et puis pour éditer l'image, vous devez le faire. Je vais donc remplacer cela pour ces sections il
sera important que toutes les images aient
la même taille. Vous devez donc vous assurer que vous les
recadrez à la même taille ou au même rapport hauteur/largeur
avant de les insérer. Très bien, alors Epsilon
Max sort trop tôt. Nous allons donc passer au suivant. Et je n'aime pas trop
en faire pendant le chargement parce que
je l'ai fait perdre ce fil
de pensée si vous
lui donnez trop à faire et que l'
image ne se charge pas. Ensuite, vous mettriez un lien ici. Vous pouvez également modifier le
titre du texte du bouton. Et puis notre troisième option, simplement parce qu'elle est de la même taille. Et encore une fois, j'
utilise simplement des photos de stock pour le mettre en place et le faire fonctionner. Mais c'est comme ça que nous
ferions la liste et je
recommande que c'est
une fonctionnalité intéressante, qui garde tout bien aligné et tout s'empile bien sur mobile. Je suggère donc d'utiliser la fonction de liste pour
créer ce type de section de
panneaux de signalisation
sur votre site Web. C'était mon titre, ce n'est pas juste. Nous avons maintenant notre section
des panneaux indicateurs. C'est donc un bon type
de mise en page
globale, très propre et
accessible, facile pour les
gens de naviguer et de se
rendre là où ils doivent aller. Encore une fois, ce bouton permet d'accéder à une page À propos plus grande. Ensuite, ces boutons
permettront
aux utilisateurs d'accéder aux différentes offres. Voilà la mise en
page de la page d'accueil.
10. Bases de la mise en page des services: Très bien, maintenant nous
allons parler la page des services et c'est là que les gens
vont aller voir tous vos
services ou ce sera
la page de vente réelle
où ils achèteront tous. Revenons donc à
notre site Squarespace. serait plutôt la page d'une classe. C'est ici que vous
voulez présenter. De cette façon, c'est plutôt cool. C'est presque comme un portfolio. C'est ici que vous
pouvez présenter vos différentes options de cours. Voici où nous pouvons
changer nos classes. Et puis un résumé. Écrivez une ligne pour une raison quelconque. D'accord, donc ce
serait peut-être le, donc c'est
encore une section qui est juste l'encart. Donc pour éditer cette photo, je ne vais pas revenir
au fond. Attendons qu'il se charge. C'est donc là que vous
décririez le type de classe un. Et ce devrait être à qui
s'adresse le service ? Et puis ce
serait en savoir plus. C'est donc la section d'édition. Je
souhaite modifier le bouton. C'est là
qu'ils en apprendront davantage sur ce service. La page suivante
serait donc une page de vente plus longue. C'est donc une bonne façon de présenter un tas de classes
différentes. Vous pouvez également revenir en arrière et utiliser section de type de liste
que
nous avions utilisée précédemment. Et si vos services
sont les mêmes, vous
ne pouvez pas avoir peur. Vous avez peut-être un peu
plus d'avance, ici décrivant
vos services globaux, votre style
ou votre approche. Mais vous pouvez en fait utiliser exactement
les mêmes services et les faire revenir à cette page de vente au format plus long,
une page de vente au format plus long. Je vais faire référence à nouveau au site de mon amie Lauren, services. C'est donc ce qu'elle fait. C'est comme ça qu'elle est fondamentalement comme
ça , ce service est. Si cela est utilisé, c'est ce que
vous devez vérifier. Ce service est si c'
est vous qui le consultez. Alors, allez voir les détails. Il s'agit donc d'une page de vente
au format plus long. Encore une fois, nous avons présenté des témoignages et puis
il y a beaucoup de copie, mais elle utilise ces sections
larges. la même façon, je vous
suggérais d'utiliser sections
alternées
sur la page À propos. Vous faites exactement la
même chose ici. Mais c'est là que vous
allez inclure tous ces détails. Ce que quelqu'un va obtenir, quel est le processus, à
qui il est destiné et à qui ce n'est pas le cas. Si vous avez
plus d'un service, votre
page de services correspond davantage à
cette section de signalisation, comme
nous l'avions fait sur la page d'accueil. s'agit donc d'un
bref aperçu de la façon dont ces pages fonctionnent
ensemble. Mais je ne voulais pas partager
cela pour que vous ayez une idée des différentes manières présenter vos
différents types de cours.
11. Blog Squarespace en style: Nous avons maintenant passé en revue
quelques mises en page de base pour vos pages principales. Et vous pouvez appliquer les tactiques individuelles de
création de
Squarespace et également ce que vous m'avez vu faire,
le tutoriel sur la page d'accueil. Vous pouvez l'utiliser pour
créer toutes vos
pages à l'avenir. Mais je voulais
partager un peu à propos la page de blog Squarespace
avec celle-ci qui est différente. Je vais donc aller sur mon site de démonstration, et ce site n'a
pas de blog, mais je vais en ajouter un ici. Dans le but
de démontrer. Pour ajouter une page de blog, allez-y et vous pouvez
réellement collecter, collecter, sélectionner le blog ici. Ensuite, il vous donne
différentes mises en page. C'est donc vraiment
une fonctionnalité intéressante. Vous pouvez sélectionner exactement
ce que vous voulez. Je sélectionne, je recommande
quelque chose comme ceci ou ceci qui
affiche plus de blogs, puis en avoir un en travers. Nous allons donc appeler cela ce blog. Nous allons le faire glisser dans
l'ordre que nous voulons dans notre menu principal. Et puis ici, vous
n'avez peut-être pas grand-chose à faire si vous voulez cacher la date. Donc bon dans ce que je viens
de faire, j'ai cliqué sur Modifier la page du blog et je
prenais une seconde pour charger. C'est bon. Donc, si vous appuyez sur Modifier,
gérez les publications. Désolé, c'était mal. Rubrique. C'est ici que vous pouvez sélectionner
ce que vous souhaitez afficher. Donc, si vous ne voulez pas que
la date s'affiche, par
exemple, les unités en font neuf. Ce serait la même chose sur
un article de blog individuel si vous ne voulez pas que
la date soit affichée. Vous pouvez également créer des
couleurs de la même manière. Donc, si vous voulez faire
un fond assez jambe et le mettre dans
le format le
permettra, vous permettra de
minimiser une partie de cela. Donc, beaucoup d'espacements verticaux. Sectionner à nouveau, augmenter
l'espacement entre les poteaux. Vous pouvez jouer
avec ces numéros et aussi l'option d'incrustation pour vous
rapprocher un peu plus de ce que vous voulez. Pourquoi est-ce que c'est ? Vous pouvez également le modifier
côte à côte, ce que je préfère car cette autre disposition
était un peu plus rigide. C'est donc à nouveau une option, les dates sont à nouveau affichées. Pour que je puisse y retourner. Aucune. Oh, tu y vas. Espacement méta. Mais tout
d'un coup, c'est là que les choses se passent. Je ne vais pas y consacrer
trop de temps
puisque ce sera un goût personnel. Mais en gros, tu viendrais
juste par ici. Ça ne fait pas
une grande différence. Le motif vertical va
être comme ça. Vous pouvez également changer. Pour être comme ça. Vous avez toutes vos options ici. Et encore une fois, si vous
voulez revenir à l' autre style de blog, vous pouvez faire le blog de base en grille. Et vous pouvez jouer avec
l'espacement jusqu'à ce que vous
obteniez quelque chose qui
vous plaît. Plus. Allons-y. C'était mieux. Espacement des titres. Désolée, je ne fais que jouer avec. Alors pourquoi ce n'est
peut-être pas le plus utile, autant plus que le chargement
prend du temps. Mais oui, quelque part
ici, nous aurons l'espace pour resserrer
cette section inférieure. Continuons donc à jouer
avec ces paramètres. D'habitude, j'ai quelque chose
qui te plaît et qui est déjà plus
beau. Et quand tu auras fini, économise. Et puis chaque article de
blog, encore une fois, l'espacement. Vous pouvez jouer avec un peu plus, mais chaque article de blog au
fur et à mesure que
vous le modifiez, vous pouvez parcourir et
supprimer tous ces articles. Vous pouvez également les
remplacer par votre contenu. Encore une fois si vous
ne voulez pas que l'auteur affiche la section d'édition et que vous pouvez sélectionner ou désélectionner
ce que vous voulez. Dans un billet de blog. Vous pouvez facilement ajouter des images dans différents espaces en
procédant comme suit. Très bien, c'est donc un aperçu
très rapide du blog. C'est ainsi que vous allez
configurer votre blog sur votre site d'actualités.
12. Modifier la page de contact: Donc, l'autre page que nous allons mettre en forme et qui est un
peu
différente d'une page d'accueil typique
ou de la façon dont vous
modifieriez le corps de l'une
des pages est la page de contact sur laquelle se trouve le contact. formulaire. Je vais donc vous
montrer une page de contact. Nous avons donc une configuration ici. Ces thêtas doivent être simples et donner des informations
aux gens. Donc je voulais, honnêtement, changer autant de choses à propos de celui-ci. Vous pouvez ajouter une section comme un
héros si vous le
vouliez récemment. Et enlève le bouton. Et il suffit d'
avoir ce contact et nouveau avec ce
constructeur le fera. Avez-vous déjà souhaité donner un titre
à l'une de vos pages ? Tu peux faire quelque chose comme ça. Vous pouvez voir ce style, il apparaît mieux
et l'avoir. Sinon, il s'agit d'une mise en page simple et
agréable. quoi vous devez
faire attention , c'est ce formulaire de contact. Vous pouvez continuer et laisser
les champs du formulaire ici. Si vous n'avez pas besoin de certains de ces éléments, comme
le numéro
de téléphone, vous pouvez
peut-être modifier ceux dont vous avez besoin. Et lorsque vous cliquez
sur chacun d'eux, vous pouvez même ajouter
une description si vous devez modifier le texte de l'espace réservé. Donc ça doit être
Joe, Joe, Joe.com. Vous pouvez ajouter
du texte d'espace réservé si nécessaire, mais c'est ainsi que vous
modifieriez l'un de ces champs. Celui que vous voulez vous
assurer que
vous pouvez mettre en ligne cette page est connecté au stockage. Vous pouvez donc vous connecter
si vous voulez que cela aille dans l'un de ces endroits, Mailchimp, Google Drive, Zapier, nous le connecterons
à d'autres logiciels. Si le logiciel auquel vous
devez le connecter. La chose la plus simple à faire
avec un formulaire de contact est de nous y associer
et d'ajouter un e-mail ici. Il s'agit de l'
e-mail que vous souhaitez. Soumissions de formulaire de contact
à goto pour être averti. Qui n'aime pas ça. Et de cette
façon, cela ira
au bon endroit. Il ne s'agit donc que de votre page de
contact et assurez-vous que ce formulaire est opérationnel. Si vous avez besoin de modifier le
style du format, vous pouvez simplement le
faire à partir des couleurs. La couleur de ce bouton peut donc
changer en fonction de. Mais si cela ne
vous donne pas d'options différentes, nous allons
faire la même chose que nous avons fait pour le bouton dans le menu. Il s'agit de la conception, styles
du site, des couleurs, du dernier. Cliquez ensuite sur l'
élément que vous souhaitez modifier. C'est donc le bouton qui, puis je veux que le texte soit. C'est ainsi que vous
changeriez la couleur de ce bouton. Très bien, et c'est
ce que je veux que vous
sachiez à propos de la page de contact.
13. BONUS Ajout de polices personnalisées avec un code CSS.: Je suis donc sur un site de démonstration et
je vais vous montrer comment installer des polices personnalisées et
utiliser Squarespace Seven 0.1. Cela nous permettra de contourner le
fait que nous n'avons en réalité qu'
une seule option de police de paragraphe
et une option de police de titre. ce faire, cela devient
un CSS personnalisé de conception. Je ne suis rien sur ce site. La première chose à
faire est donc d'ajouter une police. Vous devrez donc identifier
la police que vous aimez. Et vous
aurez besoin d'un fichier T, T, F ou d'un fichier OTF. Vous devrez peut-être acheter une police si ce n'est pas
une police open source, mais laissez-moi voir si je peux la trouver. Donc, en gros
, regardez-le. C'est donc la police dont je parle. Et c'est à vous de voir
si vous pouvez en trouver une version téléchargeable. La police Frida io est
en fait assez bonne. plupart du temps, ils en
ont. Alors allons-y. Ils ont l'OTF
et le CTF et vous pouvez cliquer sur le bouton Télécharger et
vous obtenez les fichiers. Assurez-vous donc que vous êtes
les fichiers avant d'
entrer et de faire tout cela. Mais une fois que vous les aurez,
nous viendrons ici. Et nous
allons gérer des fichiers personnalisés, ajouter des images ou des polices. Et je vais y aller, j'
ai un petit dossier de polices. Allons-y. Hum, donc vous allez l'
ouvrir s'il y a du FDF
pour les décompresser en premier. Donc ici, je vais juste faire
celui-ci pour l'instant. Une fois qu'il est téléchargé, vous
devez cliquer dessus. Et c'est là que vous
obtiendrez l'URL ici. Très bien, alors cliquez dessus. Ensuite, nous avons besoin d'ajouter
le nom de celui-ci, ce code. Vous pourrez donc le copier
et le coller à partir de votre guide, le code de caractère Ajouter une police. Il s'agit donc d'une demande de DRL. Prenez cette URL et
vous allez la couper. Vous allez le mettre
entre ces deux apostrophes, mais c'est un point-virgule entre là, entre
apostrophe, point-virgule. Je suis là-dedans. Vous pouvez donc voir ce
qui est ajouté ici. Ensuite, vous voudrez simplement
nommer cette police. Je vais donc donner un nom à ce fichier. Celui-ci s'appelle
Bodoni bold owning. Ce serait juste, d'accord, donc maintenant que nous avons
la police dedans et maintenant nous devons l'assigner. Ensuite, nous allons venir
ici et obtenir l'assignation. Un code de police. Je verrai ici que c'est pour H1. Si vous voulez que ce
soit pour votre H2, il
vous suffit d'ajouter
H2, H3, H4, H4. Vous pouvez également saisir. C'est un
peu moins intuitif, mais ce trait d'union SQS
RTE point s'agrandit, c'est pour votre police de
paragraphe un. Vous pouvez même
le personnaliser si vous le souhaitez. Tout ce que vous avez à
faire est de vous assurer que cela reflète ce à quoi vous
voulez l'affecter. Ensuite, vous n'
avez qu'à taper ceci. Tu vois, ça vient de changer les choses. C'est donc maintenant la police Bodoni. Vous pouvez donc le faire pour
autant de polices que vous le souhaitez. Je vous recommande d'être un
peu judicieux à ce sujet. Trop de code CSS
finira par ralentir un peu
votre site. Alors allez-y et voyez quelles
sont les polices Squarespace qui vous plaisent, puis choisissez une
ou deux polices d'en-tête. Peut-être que cette police de paragraphe, je dirais que trois max est vraiment ce
que vous voulez y mettre. Je n'en mettrais pas plus
que cela parce que je veux également faire d'autres personnalisations
CSS. C'est donc une façon d'
économiser un peu, mais vous pouvez obtenir ces
polices personnalisées et là, d'accord.
14. BONUS Aller plus en profondeur sur les formats d'en-tête en 7.1: Ce tutoriel vidéo est pour l'en-tête et cette option
transparente, c'
est-à-dire que si vous
avez un site nommé, il était là et maintenant
ce n'est plus au-dessus de mon épaule. Et vous montrer les différentes options d'
en-tête dans les nouveaux carrés, moi 7.1. C'est donc mon saké de démonstration ici. Si nous venons ici, au lieu d'avoir
cet
onglet transparent auquel vous avez peut-être été habitué, nous avons le style
et celui-ci est là. La dynamique est un traitement. C'est le, c'est en fait la même chose
aussi transparente que ce que nous avions auparavant. Donc dynamique bien,
faites-le quelle que soit la
barre de paramètres de couleur ici, thème. Nous le faisons, de cette façon. Nous pouvons le modifier afin de
pouvoir le mettre dans n'importe lequel de nos côtés de couleur. C'est ainsi que vous
lui donneriez sa propre couleur. Et les autres sont en
quelque sorte des traitements. Donc dégradé, ce genre
de choses. Ce dégradé. Et nous avons également du solide et cela, vous pouvez en faire une chose personnalisée. Vous pouvez également créer un flou. Tu vois, je peux m'
amuser avec ça. Désolée, c'est le flou. Donc, si vous diminuez l'opacité, vous allez avoir
cet effet ici. Cela vous donne donc de
nombreuses options différentes. Si simple, dynamique est le thème
transparent. Vous pouvez utiliser vos thèmes
de couleurs, unis. Vous pouvez créer des couleurs personnalisées
ou créer cet effet de flou, ou nous avons un dégradé
comme vous êtes des options. Il s'agit donc de vos nouveaux paramètres
d'en-tête. J'espère que ça t'aidera.
15. Versions de page mobile BONUS: Bon, donc l'une des
fonctionnalités intéressantes du moteur fluide, la dernière version
de Squarespace Builder est qu'
elle facilite vraiment la modification des versions
mobiles de vos pages. Je pense par-dessus
mon épaule et je vais vous montrer comment faire. Donc, si nous sautons
pour obtenir cela, si nous allons sur ce site Web. Il s'agit donc d'un site Web construit
sur la dernière version. Si nous allons éditer l'une
des pages, nous pouvons voir que celle-ci a beaucoup
de superpositions d'images soignées. C'est donc une image, c'est
une image, c'est une image. Quand cela a été ajouté
pour la première fois et que la version de bureau
est vraiment belle. La version mobile
n'était pas si belle. Donc, pour modifier
la version mobile, vous voulez être dans la modification. J'ai donc cliqué sur la page, modifié la page et j'ai
modifié la version mobile. Je vais basculer
vers ça ici, tout ce que je déplace. Donc, si je le déplace ici, par
exemple, je reviens
à la vue Bureau. Cela n'a pas du tout bougé. C'est donc là que
vous devez savoir pour accéder à ce paramètre mobile. Et ici, vous pouvez déplacer n'importe
laquelle de ces options assez facilement et vous assurer qu'
elles sont positionnées, ces options assez facilement
et vous assurer qu'
elles sont positionnées, comme vous le souhaitez sur un appareil mobile par rapport
à un ordinateur de bureau. s'agit donc que d'une
petite vidéo bonus qui vous
montre ce réglage. Cela rend les choses
beaucoup plus faciles. Assurez-vous donc de vérifier les versions
mobiles de vos pages.
16. Conclusion: Très bien, alors
voilà. Avec ces vidéos, vous avez tout ce dont
vous avez besoin pour créer un site Web Squarespace entièrement
personnalisé. Prenez donc votre temps, parcourez
et modifiez tout le contenu. Assurez-vous que vos menus sont bien
organisés. Lancez votre site. Ensuite, vous pourrez
prendre une capture d'écran et la
partager en tant que projet de classe. Très bien, merci beaucoup.
Kara Ferreira, Websites for Creatives & Coaches
