Story (HTML5UP)

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

Discussion

9 discussions

  • 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.

    Répondre à ce 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.

    Répondre à ce 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

    Répondre à ce message

  • 1

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

    Répondre à ce 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

    Répondre à ce 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 ...

    Répondre à ce message

  • Je me rends compte que je croyais que mes participations n’étaient pas passées mais elles se sont additionnées en fait :) Si quelqu’un peut enlever les doublons , merci ...

    En fait le lien, bien sûr est le même que celui qu’on trouve sur l’interface privée bien sûr . J’y été allé mais je n’avais pas compris :
    On va sur l’ « article Hero » on clique sur modifier mais ce n’est pas là qu’on crée l’article , on choisit parmi les articles déjà créés . et on enregistre...
    Du coup ça marche , au lieu d’être à droite , mon article est à présent à gauche ...mais mon logo est trop long .
    Je pense qu’il va falloir expérimenter ... s’il y avait une documentation , même en anglais , je suis preneur ...

    Merci beaucoup encore une fois pour ce squelette , navré que je sois aussi maladroit ...

    Répondre à ce message

  • Petit problème :
    http://ll.cilal.net/ecrire/?exec=configurer_html5up_story ---> not found

    Bon je suis vraiment pressé , merci , je regarde ça plus tard ...

    Répondre à ce message

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

    Merci pour le truc pour la configuration , je vais regarder .

    Pour les logos ,je croyais avoir mis trop gros au début et plus je réduisais , moins ça allait ... :)

    Bravo pour ce magnifique squelette , je vais bien y arriver un jour mais il est assez différent de tous les squelettes que j’ai pu tester ...

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom

Dernière modification de cette page le 18 mai 2018