Thèmes pour WordPress

Design avec Acoustic


Création de portfolios WordPress avec le thème Acoustic

Share on Facebook
Share on Twitter
Le thème WordPress Acoustic permet la création d’un type de page particulier dédié aux portfolios. Sur une telle page, il est possible de montrer de façon élégante différents items pouvant mener vers des pages dédiées à chacun des items. En général, chaque item sera représenté par une image, et éventuellement un titre ou commentaire. C’est par exemple un excellent moyen de créer une gallerie de projets pour exposer vos  réalisations professionnelles ou personnelles (travaux photographiques, vidéo, …). Le grand nombre d’options disponibles rend l’outil très puissant!


Le thème propose deux manières de présenter les portfolios: le Showcase et la Gallery (Cliquez sur les mots pour aller sur le site de démo du thème vous faire une idée d’à quoi ceux-ci peuvent ressembler. D’autres exemples se trouvent dans le menu « portfolio » du site de demo).

Le Showcase présente les items sous forme d’une colonne de miniatures à gauche, et fait apparaître les infos de l’item à droite. Plusieurs colonnes sont possibles, l’internaute passant de l’une à l’autre en cliquant sur les points situés sous la colonne.


portfolio showcase

La Gallery forme une gallerie d’images ordonnées (le nombre de colonnes se paramètre, comme le fait d’afficher des sous-titres, descriptions,…). En cliquant sur une image, le visiteur est mené vers la page de l’item, ou voit s’afficher en surimpression l’image, vidéo, etc.


portfolio gallery



Egalement, il est possible de choisir quelle(s) catégorie(s) de portfolios on veut afficher sur une page (showcase ou gallery) donnée, ce qui permet d’avoir un pool global d’items de portfolios, et de les classer par genre. Regardez encore sur le site de démo du thème, vous pouvez cliquer sur des catégories (on peut aussi choisir de ne pas les afficher) en face de « show me », et restreindre l’affichage à la catégorie choisie. Dans ce cas, toutes les catégories sont affichées par défaut dans la gallery, et le visiteur peut filtrer ce qu’il voit. Nous verrons qu’on peut aussi limiter l’affichage à une ou des catégories lors de la configuration de la page, ce qui permet par exemple de créer plusieurs portfolios pour des thématiques différentes!

Voyons la procédure générale pour créer des portfolios avec le thème Acoustic.

 

Procédure générale de création de portfolios

création portfolioL’organisation des items au sein d’un portfolio va dépendre de la gestion des catégories. Imaginons que vous souhaitiez créer deux porfolios, l’un de photos et l’autre de vidéos. Pour chaque portfolio, il faudra créer une arborescence de catégories correspondant à ce que vous désirez montrer. Par exemple, la catégorie « photos » pourrait avoir les sous-catégories « paysages », « portraits » et « autres ».

Puis nous créerons les items les uns après les autres en les assignant à leur(s) sous-catégorie(s)!

Enfin nous créerons une page WordPress pour chaque portfolio, en lui faisant correspondre la catégorie principale voulue (donc dans notre exemple nous créerons deux pages, une pour « photos » et l’autre pour « vidéos »). Cette page pourra être paramétrée de différentes manières, et afficher les items en mode « Gallery » ou « Showcase ».

 

Réglages généraux des portfolios dans le pexeto panel

Avant de commencer, allons faire un tour dans le pexeto panel (dans le back-office de WordPress). Nous pourrons y régler les premières généralités concernant les pages de portfolios et d’items. Cherchez la section « page settings » => « portfolio » dans le pexeto panel.
  • portfolio-setting-pexetoPage Layout permet de choisir si vous désirez afficher une sidebar sur les pages dédiées des items, et de quel côté vous la voulez (gauche ou droite).
  • Show Comments active les commentaires des visiteurs sur les pages d’items.
  • Content Sidebar sert à choisir quelle sidebar afficher (si vous avez choisi d’en afficher une!). Voir la section dédiée aux sidebars.
  • Portfolio carousel max item number définit le nombre d’items à montrer dans l’éventuel caroussel portfolio affichable au bas des pages.
  • Two column image width modifie la largeur type des images affichées dans les pages du type portfolio gallery en 2 colonnes.
  • Two column image height modifie la hauteur type des images affichées dans les pages du type portfolio gallery en 2 colonnes.
  • Three column image width modifie la largeur type des images affichées dans les pages du type portfolio gallery en 3 colonnes.
  • Three column image height modifie la hauteur type des images affichées dans les pages du type portfolio gallery en 3 colonnes.
  • Etc.


A priori, vous n’avez pas besoin pour l’instant de modifier ces valeurs types de largeur et hauteur de images, puisqu’elles sont calibrées sur la largeur type de la zone content (980 pixels). Il vaudra mieux adapter la taille de vos images à ces valeurs.

 

Création de l’arborescence des catégories de portfolios

Reprenons l’exemple ci-dessus: je désire créer deux grands porfolios principaux : un de photos, l’autre de vidéos. Chacun aura 3 thèmes (par exemple pour le portfolio « Photo »: « portraits », « paysages », « autres »). Je vais donc créer deux catégories principales (respectivement « Photo » et « Video »), auxquelles je vais ensuite ajouter des sous-catégories.

Allons, dans le back-office, dans la section « Portfolio Categories« .

creer-categorie-portfolioPour ajouter une catégorie:

  • Saisir son nom dans le champ « Name« 
  • Saisir le nom qui sera utilisé dans l’URL de cette catégorie (donc sans accent!)
  • Cliquer sur « Add new category« 



creer-sous-categorie-portfolioPour ajouter une sous-catégorie:

  • Saisir son nom dans le champ « Name« 
  • Saisir le nom qui sera utilisé dans l’URL de cette sous-catégorie
  • Choisir la catégorie parente avec le menu déroulant « Parent » (ici: « Photo »)
  • Cliquer sur « Add new category« 


Le champ description n’est pas utile ici, nul besoin de le remplir.

Voici le résultat de mon exemple de création d’arborescence:

creer-categorie-portfolio-resultat

 

Création d’items de portfolios

L’arborescence des catégories étant faite, il s’agit ensuite de créer les items de nos futurs portfolios.

Allez, dans le back office, dans la section « portfolio« => »Add New Item« . Nous retrouvons là un éditeur assez proche de celui des pages et posts, mais avec des fonctions dédiées aux items de portfolio. Voyez les détails dans les deux onglets ci-dessous:

  • creer-portfolio-item-1En haut de page, on retrouve une zone pour nommer l’item (comme pour les pages et posts une URL dédiée sera automatiquement créée), non loin de celle pour publier/mettre à jour celui-ci.
  • En dessous, le même éditeur de contenus en WYSIWYG que pour les pages/posts traditionnels. Dans cette zone vous pourrez saisir et mettre en forme ce que l’internaute trouvera dans la zone « content » de la page dédiée à cet item.
  • La section « Portfolio Categories » sera très utile pour grouper vos items par thèmes. Vous retrouverez là les catégories et sous-catégories créées auparavant.
  • Juste en dessous, vous pourrez donner un rang (« order« ) dans la section « Attributes« . L’intérêt est de pouvoir classer les items au sein d’une page Showcase ou Gallery.


creer-portfolio-item-2Vient ensuite la section « ITEM SETTINGS« , qui comporte diverses options pour votre item:

  • When clicked on the image open » définit ce qui se passera lorsque l’internaute cliquera sur l’image dite de « Preview » de l’item dans une page du type « Portfolio Gallery » . Les choix sont variés; il sera possible d’afficher l’image preview en grand et en surimpression, mais aussi d’aller vers la page de l’item, ou bien même d’aller vers une autre page au choix (« Custom Link »), ou encore de jouer une vidéo Youtube ou Viméo! Et vous aurez ce choix pour chaque item! Vous pouvez d’ailleurs tester les diverses options sur la page de démo de ces Portfolios Gallery.
  • « Thumbnail URL » n’est utile que si vous affichez les items dans un portfolio du type Showcase. Il permet de charger (bouton « Upload« ) une image miniature qui sera affichée dans la colonne de gauche du portfolio showcase. Je vous conseille de laisser cette option de côté, le thème étant capable de créer automatiquement la miniature à partir de l’image « Preview ».
  • « Preview image URL« : il s’agit de charger (bouton  »upload« ) ou d’indiquer l’URL de l’image qui servira de « Preview » dans les pages Portfolios (Showcase et/ou Gallery) qui afficheront cet item. Si vous n’avez pas chargé de « Thumbnail », le thème génèrera également automatiquement une miniature pour les pages Showcase.
  • Item Description: description courte de l’item, que l’on pourra choisir d’afficher sur les pages de portfolio Gallery.

Attention! Pour éviter de ralentir le chargement de vos pages d’items et de portfolios, il faudra bien gérer et optimiser les dimensions et le poids de vos images! Si vous choisissez d’afficher vos items sur une page de « Portfolio Gallery », adaptez les dimensions de vos images à celles mentionnées dans les réglages généraux de portfolios du pexeto panel. Si vous utilisez le « Portfolio Showcase », prévoyez une largeur de 620px pour la « Preview Image« .
Si tout ceci est nouveau pour vous, vous devriez jeter un sérieux coup d’oeil à la page : Gestion des Images

Une fois l’item terminé, cliquez sur « Publish/Update » (ou sur « Preview » pour pré-visualiser l’item). Une fois l’item publié, vous pourrez recommencer la boucle pour attaquer le suivant en cliquant sur « Add New« !

 

Création de pages de portfolios

Les items étant prêts, nous pouvons créer les pages de portfolios qui afficheront les miniatures des items en question! Celles-ci se gèrent comme des pages WordPress standard, à quelques détails près…

Dans le Back-Office, rendons nous dans la section « Pages » => « Add New« . Nous retrouvons l’éditeur de pages et son éditeur Wysiwyg classiques de WordPress. Si vous ne connaissez pas encore cette section, allez voir la page sur la création de pages WordPress pour un peu de lumière…

Je crée ici d’abord la page qui affichera le portfolio « Photo ».

  • Création page portfolio 1Je nomme donc cette page « Photo » dans le champs « Title« . WordPress me propose automatiquement une URL incluant le mot « photo » (voyez la section « Permalinks » sur cette page si ce n’est pas le cas sur votre site), avec une arborescence qui dépendra du fait que j’ai choisi ou non une page parente (section « Page Attributes » => « Parent« ).
  • Justement, dans cette section « Page Attributes« , nous allons pouvoir choisir le type d’affichage global que nous désirons voir pour cette page de portfolio: cliquez sur le bouton sous le mot « Template« ; vous y trouverez, entre autres, les templates « Portfolio Gallery » et « Portfolio Showcase« .
  • La zone Wysiwyg permettra d’ajouter tous contenus qui précèderont la l’affichage des miniatures d’items sur la page.
  • Il est aussi possible d’afficher ou non un slider en haut de page.
  • Vous pourrez choisir d’afficher ou non le titre de la page sur la page.
  • Enfin, une option pour insérer un carrousel d’items de portfolios en plus en bas de page (en choisissant la catégorie que vous souhaitez voir défiler).

La zone Portfolio Settings est importante. Nous y trouverons diverses options d’affichage des miniatures d’items:

Création page portfolio 2

  • Choix de la catégorie d’items à afficher sur la page. Logiquement, j’ai choisi « Photo« .
  • Nombre de colonnes d’images preview d’items à afficher. Ne concerne que le template « Portfolio Gallery« .
  • Ordre d’affichage des items. Soit par date de création, soit en suivant les rangs (order) que vous aurez attribué à chaque item.
  • Show Categories: afficher ou non les choix catégories/sous-catégories sur la page.
  • Show Item Descriptions: afficher ou non la description courte de chaque item (pour template Portfolio Gallery).
  • Show Item Title: idem pour le titre de l’item.
  • Number of Post per Page: nombre de miniatures à montrer dans la colonne de gauche de la page si vous utilisez le template Portfolio Showcase.

Il ne reste plus qu’à publier cette page de portfolios, puis à créer la deuxième pour la catégorie « vidéo », et voilà! Chaque nouvel item que vous créerez pourra être assigné à l’un et/ou l’autre des portfolios simplement en lui choisissant la ou les catégories correspondantes.




Copyright © comment-creer-un-site-internet.net