Widget compte à rebours et horloge pour Squarespace

Compter jusqu’au à , , .

Appuyez sur Échap pour quitter le plein écran

Comment ça marche

  1. Créez le widget

    Réglez le compte à rebours, l’horloge ou le minuteur ci-dessus et choisissez les couleurs.

  2. Copiez le code

    Touchez « Code pour votre site ».

  3. Ajoutez un bloc Code

    Modifiez la page, ajoutez un bloc Code, collez le code et enregistrez.

Une idée pour améliorer cet outil ?

Nous créons des outils aussi simples et intuitifs que possible, avec quelques bonus par-ci par-là. Dites-nous ce qui rendrait celui-ci meilleur.

Pas à pas

  1. Ouvrez la page dans l’éditeur et cliquez sur Modifier.
  2. Cliquez sur Ajouter un bloc (ou sur un point +) à l’endroit voulu, puis choisissez Code.
  3. Cliquez sur le crayon du bloc, effacez le texte d’exemple et collez le code. Laissez le mode sur HTML.
  4. Cliquez hors du bloc, puis sur Enregistrer.

Quelles offres le permettent

Squarespace n’exécute les iframes et les scripts des blocs Code qu’avec les offres Core, Plus et Advanced. Avec l’offre Basic, le bloc reste vide. Si votre site est en Basic, un lien texte ou un bouton vers l’outil sur Clooock est l’alternative la plus simple.

S’accorder au design

Les modèles Squarespace aiment les grands blancs. Un compte à rebours sans fond, en noir, s’y fond souvent mieux qu’un bloc de couleur : choisissez noir sans fond dans la phrase, ou mettez la couleur de votre marque dans la partie c= du code. Dans l’éditeur Fluid Engine, tirez le bloc pour régler sa largeur et sa hauteur : le widget suit.

Sur téléphone

Fluid Engine garde une mise en page à part pour les téléphones. Passez l’éditeur en vue mobile et vérifiez-y le bloc Code : donnez-lui une hauteur adaptée à un écran étroit, un peu moins que sur ordinateur pour un compte à rebours. Les chiffres rétrécissent pour tenir dans la largeur, et les libellés ne disparaissent que si le bloc devient très petit.

Questions

Pourquoi mon bloc Code est-il vide après l’enregistrement ?

Votre offre n’autorise sans doute pas les iframes dans les blocs Code. Squarespace les accepte avec les offres Core, Plus et Advanced.

Puis-je utiliser le bloc Intégration à la place ?

Ce bloc attend des liens de services qu’il reconnaît, comme les sites de vidéo. Pour ce widget, le bloc Code est le choix sûr.

Le widget reprend-il les polices de mon site ?

Non, il garde ses propres polices (Anton pour les chiffres). Vous choisissez ses couleurs, et les parties c= et f= du code acceptent n’importe quelle couleur hexadécimale.