HTML5UP Story

Squelette SPIP “onepage” pour intégrer le thème Story de HTML5UP
https://html5up.net/story

Ce squelette permet de réaliser très simplement des sites de type “one page” sans toucher une ligne de code.

Site de démonstration
https://www.phideco.com/

Installation

A l’activation, le plugin installe aussi les plugins suivants :

Configuration

La page de configuration permet quelques réglages:

  • Couleur principale du site
  • Article “hero”: l’article à la une
  • Article galerie: l’article qui sert pour placer les images en diaporama
  • Un pied de page: Texte libre

Les icônes de réseaux sociaux

En utilisant le plugin “Liens vers les réseaux sociaux”, vous pourrez personnaliser les icônes des réseaux à afficher.

Rédaction

Configuration du site
Dans le menu configuration du site, pensez à renseigner:

  • Le titre du site
  • Son slogan
  • Un logo de site (qui sera repris dans l’article hero)

Les articles
Rédigez vos articles le plus simplement possible:

  • Un titre
  • Un texte court
  • Ajouter un logo à l’article qui servira d’illustration. En général il est préférable d’avoir une illustration carrée. Si aucune illustration n’est trouvée, on prend des images génériques. Utiliser des logos de tailles importantes (1000 à 2000px de large) car ces logos sont affichés en mode plein écran).

Le squelette liste tous les articles du site classés par ordre de numéro en alternant automatiquement les images à gauche puis à droite.

Pensez donc à utiliser la convention suivante:

10. Accueil
20. Savoir-Faire
30. Contact
....

Pour que le thème fonctionne bien graphiquement, il faut éviter d’écrire de longs articles, mais il faut plutôt écrire de nombreux petits articles (1 article = 1 paragraphe).

Article Hero
On affiche:

  • Le logo du site réduit
  • Le texte
  • Le logo de l’article sert pour le fond de page

Le titre de l’article Hero n’est pas affiché.

Article galerie
Cet article sert à créer le diaporama.
Créer l’article et y déposer vos images dans le portfolio.

Personnalisation

Pour les personnes qui veulent ajouter leurs propres styles, vous pouvez créer un fichier CSS personnalisé squelettes/css/html5_story_theme.css.

Une page «patron» est aussi livrée avec le squelette à l’adresse suivante:
http://monsite.tld/spip.php?page=_patron

Les autres squelettes HTML5 UP

Le site html5up.net propose de beaux thèmes dont certains ont été adaptés pour SPIP.
Voir la liste des thèmes html5up portés sur SPIP...

Discussion

13 discussions

  • bonjour
    ce squelette me plait beaucoup, mais je ne vois pas dans la config comment retrouver ce qui est dans l’origine html5up (https://html5up.net/story)... Comment configurer une gallery ? mettre des items en tableau ? avec leurs paramètres.
    Et j’ai l’impression qu’il met tous les articles sur la page sommaire... après le hero

    pour la gallery, on trouve

    Gallery

    This is a Gallery element. It can behave as a lightbox (when given the lightbox class), and you can customize its style and size, as well as assign it an optional onload or onscroll transition modifier (details).

    et pour les items

    Items

    This is an Items element, and it’s basically just a grid for organizing items of various types. You can customize its style and size, as well as assign it an optional onload or onscroll transition modifier (details).

    Ces éléments ne sont pas dans la config du plugin... on peut les utiliser quand même ?

    merci d’avance

    Reply to this message

  • 1

    Bonjour,

    Ce squelette se comporte bien avec la béta de SPIP, sauf sur un point, que je ne parviens pas à régler, malgré mes recherches.
    Lorsque j’insère un document avec un raccourci du type <docxxx|alignement>, l’cône du type de fichier (ex : PDF) apparaît bien mais avec une taille énorme. Comment revenir à une taille “normale” ?

    Merci pour toute aide.

    • Il suffisait de patienter : la version finale 4.0 règle le souci.
      Merci pour travail fourni et partagé.

    Reply to this message

  • Mouais, bon : story ne fonctionne pas… J’ai SPIP 3.7.2.
    Alors, j’ai mis mes nouveaux plugins (crayons, favicon, story, image_responsive, metas +, saisies, sociaux, spip-reset), recommandés avec Story, dans un dossier /plugins/ à la racine du site, Et je me suis débarrassé de html5up hyperspace, qui n’est pas compatible avec SPIP 3.7.2 (pas de regret) : je ne sais pas si c’était vraiment utile (en quoi ?). Ils apparaissent tous dans le gestionnaire de l’espace privé. Tous… sauf story.
    Que faire ?
    Merci de vos suggestions,
    Fred

    Reply to this message

  • Bonjour, est ce que le plugin rôle de document peut fournir les logos requis ? Merci

    Reply to this message

  • 1

    Bonjour,

    Faut-il ajouter un plugin pour pouvoir choisir un style graphique ?

    • Non, les squelettes HTML5up portés par SPIP sont indépendants et chacun a été porté en SPIP de manière différente. Mais avec le plugin zpip, le plugin zengarden permet de choisir parmi un lot de thèmes.

    Reply to this message

  • 1

    J’aimerai recourir à la fonctionnalité des blocs dépliables dans un site avec ce squelette, mais ceci n’est pas pris en compte.

    Y’a t’il des choses à ajouter dans le head pour que le script fonctionne ?

    Cordialement

    • Je reviens car j’ai avancé.

      Dans le fichier inc/inc_head en mettant la balise #INSERT_HEAD après l’insertion des script, le problème a disparu.

      erational, je te laisse juger de l’interet de fixer cette intervertion dans le zip de ce plugin.

    Reply to this message

  • J’aimerai recourir à la fonctionnalité des blocs dépliables dans un site avec ce squelette, mais ceci n’est pas pris en compte.

    Y’a t’il des choses à ajouter dans le head pour que le script fonctionne ?

    Cordialement

    Reply to this message

  • 1

    Bonjour,
    j’ai l’impression que le titre du site ne s’affiche pas ?
    http://amidesk.com/maquette
    Une idée ?
    Merci !

    Reply to this message

  • 1
    Patrick

    Bonjour,
    J’ai fait un spip “onepage” à partir de la dist.
    Pour tester votre plugin, je lai installé en local.
    Merci
    Mais comment supprimer les dépendances aux autres plugins si c’est possible?

    • Patrick

      Trouvé:
      paquet.xml
      lignes 21 etc. “necessite”
      je cherche à faire un site onepage le plus léger possible.
      L’ordre des articles est donné par leur ordre de rédaction.
      Merci

    Reply to this message

  • 5

    Bonjour , ce squelette m’a l’air magnifique mais je ne sais pas pourquoi mais les logos apparaissent extrêmement grossis et inutilisables , trop zoomés .
    De plus , je ne sais pas comment on specifie qu’un article est Hero ou Gallerie et je ne sais pas non plus comment écrire du texte à côté de l’article ...qui apparait à droite .
    Voici ICI mon essai de site , je le laisse tel quel ...

    • Bonjour,

      Votre lien renvoie actuellement une page blanche ...

      Pour choisir les articles hero et galerie, il faut aller sur la page configuration du plugin:
      ecrire/?exec=configurer_html5up_story

      Pour les logos, il faut prendre en effet des tailles suffisantes (au minimum 1000px de large) car ils servent d’illustration et sont affichés en plein écran.

    • Euh non , ce n’est pas une page blanche ...

      Merci pour ce conseils j’irai voir sur la page dès que possible .
      Ok pour les logos , au début je croyais qu’ils étaient trop gros ...

      Merci pour ce magnifique squelette, je vais bien arriver à en faire quelque chose :)

    • Merci mais , sur la page de configuration ,il y a très peu de choses , on peut aller à modifier et là , que fait-on ?
      je regarderai plus tard , merci ...

    • C’est un thème pour créer un site très simple sans coder.
      Le nombre d’options est volontairement limité.

      Si cela ne convient pas, vous pouvez forker le plugin et l’adapter à vos besoins.
      La page _patron est là pour vous donner la syntaxe de thème graphique.

      Merci de ne pas inonder le forum de messages peu utiles du type “Je verrais plus tard ....”

    • Ah , je n’avais pas vu ce message , désolé , mais j’étais navré de ne pouvoir expérimenter immédiatement la proposition .
      Je fais remarquer qu’ajouter des excuses dans un post n’inonde pas le forum , je regarderai le patron ...

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom