Home Tutos Tutos Wordpress Présentation du customizer et de Cornerstone sur le thème X

Présentation du customizer et de Cornerstone sur le thème X

7

Suite de notre petite présentation du thème X, de son customizer et de son builder de page : Cornerstone. Dans cette petite vidéo, on vous donne un petit aperçu de ce que vous pourrez faire avec ce superbe thème. Ce n’est pas un tutoriel complet, juste un petit tour du propriétaire 🙂

Le Customizer

C’est l’outil de base pour créer son design personnalisé. Le Customizer vous permet de choisir entre 4 « stacks », qui sont en fait des « sous-thèmes ». Présentation rapide des bébés 🙂

Integrity

C’est le thème que j’ai choisi pour créer mon site principal (vous pouvez donc voir ce qu’on peut obtenir avec ce stack sur https://www.gdm-pixel.fr). Désigné comme le stack « corporate » de la gamme, il est polyvalent et décliné en deux versions (light et dark).

integrity-demo

Renew

Renew est une version un peu plus épurée de Integrity. Les plus grosses différences se trouvent notamment au niveau du portfolio et du blog. J’ai monté deux sites avec l’an dernier, et n’ai rien trouvé à redire de particulier.

renew-demo

Icon

Le stack « minimaliste » par excellence. Perso, j’aime pas du tout. Trop simple, mets le contenu en avant, certes, mais le manque de points d’accroches « secondaires » (meta pour les articles, éléments divers en sidebar etc) créé une impression de vide qui peut être interprétée comme un manque de contenu, et pas comme la volonté de mettre le corps de page en avant. Après, les gouts et les couleurs…

icon-demo

Ethos

Le thème « magazine » ou « portfolio » de la gamme. Pour l’instant, c’est le parent pauvre du thème. Ethos n’est apparu que tardivement, environ un an après la sortie de X. Peut convenir pour pas mal de projets, mais Integrity et Renew constituent une meilleure base à mon avis.

ethos-demo

Un détail concernant le thème : pour ma part, je pense que X n’est pas conseillé si vous voulez monter un magazine en ligne. Les images à la une ne sont pas redimensionnées dynamiquement, et on ne peut pas créer de mise en page complexe avec les pages d’archives. Je pense toutefois que c’est à l’étude chez Themeco, car cela devient un étalon maitre dans la sphère wordpress (regardez ce que font Newstube et Extra par exemple).

Si vous pensez pallier à ce manque avec les shortcodes, je vous arrête tout de suite : c’est pas du tout une bonne idée, vous allez vous retrouver avec des pages mega-lourdes. Oubliez. On verra dans quelques mois, je sais que Themeco a de très bons trucs dans les tuyaux… 😉

Comment bien utiliser le customizer ?

Il n’y a pas vraiment de « bonne » ou de « mauvaise » façon de faire. En fait, tout les paramètres que vous allez rentrer vont juste modifier des paramètres qui existent déjà. La seule chose que je vous conseille, c’est de ne pas utiliser les « custom css » et « custom javascript », car cela implémenterait ces scripts dans le head du site. On préférera largement utiliser la feuille de style d’un thème enfant, et mettre les javascripts dans un fichier externe (qu’on chargera grâce à une fonction php ou un plugin). Paniquez pas, je suis en train de créer le tuto :p

tuto-creation-in-progress

Ce que je vous conseille de faire, dans un premier temps, c’est de parcourir toutes les démos qu’on peut trouver chez Themeco. Cela vous permettra de découvrir tout ce que vous pourrez faire avec X, vous donner des idées pour votre futur création, et surtout vous permettre de choisir le stack et la version qui vous serviront de base pour intégrer vos contenus. Une fois que vous savez à peu près comment vous allez procéder, le plus simple, c’est de suivre bêtement le déroulé du customizer : vous partez d’en haut, vous ouvrez chaque onglets les uns après les autres, et vous remplissez au fur et à mesure.

Pour compléter correctement le customizer, comptez une bonne heure.

Cornerstone

C’est la plus grosse partie de la vidéo. Idem, pas un tutoriel complet, mais juste de quoi vous faire découvrir l’idée de base de ce builder de page : intégrer tout ce dont vous avez besoin pour créer un site, sur une seule interface. Cornerstone peut être un excellent moyen de créer des pages en masses, si vous utilisez la puissance complète de cet outil. Mais pour ça, il vous faudra quelques bases en intégration, bien connaitre WordPress, et avoir une vision d’ensemble de la gestion d’un projet web. Et tout ça, ça sera justement l’objet de nombreux tutoriels à venir.

L’idée, ce sera justement de vous montrer comment on devient productif si on pense bien chaque étape de la création, et comment on peut adapter la méthode de travail globale à un thème ou un outil en particulier.

Pensez à vous inscrire à la newsletter pour ne manquer aucune publication, et profiter de contenus exclusifs (démos, template pour Cornerstone etc) !

Télécharger le thème WordPress X

GDM-Pixel / Charles Annoni Charles est chef de projet en marketing web et conception de sites. Formateur en référencement naturel, il est également consultant en webmarketing et propose des tutoriels exclusifs en France.

Les commentaires peuvent donner lieu à un lien dofollow si thématique similaire et ancre clean :)

Comment(7)

  1. Bonjour, tout d’abord, merci pour ce tutoriel, pour une novice comme moi, c’est top!
    Mais j’ai un petit soucis… j’ai intégré a ma page d’accueil une section avec 3 colonnes. Auxquels j’ai intégré des éléments images. Jusque la, pas de soucis… Mais a ces 3 images, je veux ajouter des liens qui me redirigeront sur les pages de mon site (page déjà créé sur wordpress) et lorsque je met les liens, il me redirige toujours sur ma page d’accueil… Pourtant, ils sont bien notés comme sur mes pages. Que dois-je faire? Merci pour votre aide!

  2. Bonjour Charlene, si vous parlez des images sur votre page d’accueil (tout en bas), non, vous n’avez pas bien rédigé vos liens… Je vous laisse chercher un peu, c’est aussi comme ça qu’on apprend, mais je vous laisse quand même un indice : pour qu’un lien soit bien rédigé par votre éditeur de texte, il doit être bien écrit 🙂 S’il y a quelque chose devant, le système rajoutera votre nom de domaine devant… #indice-supplémentaire #hashtagindice #hashtag #regardezlurlausurvolsurvotrenavigateur 🙂

  3. Parfait, j’ai trouvé de moi-même avant de lire votre commentaire 😉 Il y avait en effet un # qui trainait!
    Mais j’ai encore d’autres petit problèmes… Je souhaiterais ajouter mes 3 pages à la suite de ma page d’accueil, j’ai trouvé le fonctionnement avec les enregistrements dans les templates, mais je ne peux à chaque fois réinsérer que ma page d’accueil…
    Je voudrai aussi pouvoir supprimer complètement le header, étant donné que j’insère mes pages avec des liens en page d’accueil, je ne veux pas de menu, mais je ne trouve pas comment faire.
    Et je n’arrive pas non plus à modifier mes polices, elles se modifient bien sur cornerstone ou même sur le personnaliser de ma page, mais pas en ligne… Je sais pas si je dois les modifier aussi sur le CSS ou autres, mais n’y connaissant rien, je préfère ne pas aller mettre mon bazars dedans.
    Avez-vous des tutoriels pour tous ça, car je ne trouve rien en ligne qui correspondrait à ma demande?

    Merci

  4. Bonjour Charlène, je vois que vous avez résolu votre souci de header à supprimer des pages… Pour l’instant, il y a très peu de tutos pour Cornerstone sur le web, mais ça va changer très bientôt 😉 Pour votre souci de police, il faut voir d’abord pourquoi les polices ne chargent pas via Googlefont. Après, il y a toujours la possibilité de forcer le téléchargement avec un import CSS. Jetez un coup d’oeil sur fontsquirrel pour récupérer un package complet (formats de police + code CSS à insérer dans votre thème enfant).

  5. Bonjour et merci Charles pour ce Tuto…Je suis debutant je bricole un peu mais pour moi le mot css ca veut tous de suite dire gros blocage, voir fin de l aventure…bref ce theme X il m interesse mais comment nettoyer le code vous nous ne le dites pas ? Y a t il des plugin qui peuvent s en charger automatquement ou des applications ou bien c est manuel comme les vendanges et a ce moment la comment faire ? Oui mon sote doit etre bien optimiser pour le referencement…merci dav

  6. Bonjour David, pour supprimer le CSS du head, c’est par là : https://blog.gdm-pixel.fr/tutos/wordpress/retirer-css-head-theme-x/
    Pas de plugin pour ça, c’est du nettoyage personnalisé, et donc manuel. Pour avoir un site qui tourne bien, il faudra, à un moment ou à un autre, aller mettre les mains dans le code, dans le serveur etc. Faut pas avoir peur de tester des choses, c’est aussi comme ça qu’on apprend (à ne pas faire sur un site en production par contre, c’est préférable de se faire la main en local ou sur un environnement de test) !

  7. Merci Charles bien anticiper ^^ bon apres vous ca vous prend 5 minutes moi ca va me prendre 1 heure ou 2 mais bon c est ainsi ! Et sans le tuto je n y saurai jamais arriver alors c good !

LEAVE YOUR COMMENT

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *