WordPress Débutant : Personnalisation de niveau intermédiaire

Pour aller au- delà des bases simples dans mon dernier blog WordPress Beginner, au cours des deux dernières semaines, j'ai travaillé pour recréer l'une de nos pages de démonstration ProteusThemes. La démo du thème Auto pour être précis. Comme avant, mes collègues m'ont défini des tâches étape par étape pour me mettre sur la bonne voie. Ce sont les leçons les plus importantes que j'ai apprises jusqu'à présent.

Boîtes à icônes

Les widgets Icon Box sont un élément de langage visuel très pratique. Cela peut sembler évident, mais avoir le numéro de téléphone de votre entreprise à côté d'une icône de téléphone est un moyen simple mais efficace d'améliorer l' expérience utilisateur de votre site .

Ma tâche consistait à ajouter les boîtes d'icônes dans l'en-tête de la page d'accueil. Pour ce faire, dans votre tableau de bord, vous devez vous rendre dans Apparence -> Widgets , puis dans ' Barres latérales thématiques ', sélectionnez ' En- tête '.

Une fois que vous avez localisé ' Header ', dirigez votre attention vers la gauche de l'écran, où vous verrez une liste de ' Available Widgets '. ProteusThemes : IconBox est le widget que vous recherchez.

Maintenant, vous avez deux options . Vous pouvez soit faire glisser et déposer le widget à droite de l'écran et le placer dans l'en-tête, soit lorsque vous cliquez sur le widget, vous verrez un menu déroulant de ses emplacements applicables, vous pouvez simplement sélectionner "En- tête " à partir de ce liste et cliquez sur le bouton bleu ' Ajouter Widget ' :

Vous verrez maintenant qu'il y a beaucoup d'icônes à choisir dans le widget, pour les besoins de cet exercice, j'ai choisi le téléphone. Tout ce que vous avez à faire est de donner un titre à la boîte à icônes et de décider quelles informations vous souhaitez voir apparaître à côté.

Sous toutes les icônes du menu du widget, vous verrez une option pour « mettre en surbrillance ce widget ». Cochez cette case si les informations contenues dans la boîte à icônes sont très importantes et que vous souhaitez qu'elles se démarquent davantage.

Curseur de la page d'accueil

Recréer la démo automatique a nécessité l'ajout d'un curseur en tant que fonctionnalité sur la page d'accueil. Pour ce faire, sélectionnez Pages -> Toutes les pages -> Accueil ; une fois que vous êtes dans l'éditeur de votre page d'accueil, vous devez trouver le menu déroulant « Attributs de page » sur le côté droit de l'écran. Trouvez cela et changez le ' Modèle ' en ' Page d'accueil avec curseur '.

Une fois que vous êtes passé à ' Front Page With Slider ', il y aura une nouvelle méta en bas de l'écran intitulée ' Front page slider ', cliquez ici pour ajouter vos images et votre texte au slider :

Codes abrégés

Recréer le curseur de la page d'accueil nous amène bien dans les shortcodes . Pourquoi? Parce que sur la démo automatique que je recrée, il y a des boutons dans le curseur .

À ce stade, il est important de souligner que vous devez vraiment installer les plugins recommandés . L'erreur que j'ai commise a été d'insérer le shortcode dans le 'texte de la diapositive' sans avoir activé le plugin ProteusThemes Shortcodes . Si vous n'avez pas activé le plugin, le code lui-même apparaîtra dans le curseur, plutôt que le bouton que vous essayez de créer.

Il existe une section "Shortcodes" dans toute la documentation de nos thèmes qui vous offre de nombreuses options disponibles pour le style et la fonctionnalité du bouton que vous pouvez insérer. Tout ce que vous avez à faire est de copier et coller ce code dans la section "texte de la diapositive" du curseur. Modifiez simplement le texte du bouton dans le code en fonction de vos besoins et il est prêt à fonctionner.

Vous pouvez bien sûr utiliser des shortcodes à d'autres endroits que le curseur. Par exemple, si vous avez écrit un article de marketing de contenu pour essayer de vendre quelque chose, utilisez les codes abrégés pour créer un bouton CTA efficace au bas de votre article de blog.

Générateur de pages

Se familiariser avec le plugin Page Builder de SiteOrigin était absolument essentiel pour recréer la démo automatique. La première tâche pour laquelle j'ai dû l'utiliser a été de créer cette section IconBox avec Popover sous l'en-tête de la page d'accueil :

Pour cela, rendez-vous sur la page que vous souhaitez modifier, dans mon cas la page d'accueil. Ensuite, vous devez localiser le menu du générateur de pages , il ressemble à ceci :

À partir de là, sélectionnez « Ajouter une ligne ». Vous verrez alors les options relatives aux colonnes de cette ligne. Vous pouvez sélectionner le nombre de colonnes que vous voulez, leur rapport de taille et si vous les voulez dans l'ordre de taille allant de gauche à droite ou vice versa. Pour mon IconBox Popover, j'ai sélectionné 3 colonnes de taille paire.

Maintenant que vos colonnes sont prêtes, vous pouvez commencer à leur ajouter des fonctionnalités en ajoutant des widgets. Pour ce faire, cliquez sur la colonne que vous souhaitez ajouter, une fois la colonne sélectionnée, cliquez sur le bouton « Ajouter un widget » dans le menu ci-dessus.

Selon le widget que vous sélectionnez, vous pouvez ajouter d'autres fonctionnalités à la colonne. Dans mon Popover IconBox 'Open Times ' par exemple, il a fallu ajouter le widget ProteusThemes Opening Time au sein de l'IconBox Popover, afin que les informations pertinentes soient affichées dans le popover si la colonne était cliquée.

Un problème que j'ai rencontré après la création de cette rangée de popovers IconBox était que la rangée n'était pas de la même couleur que la démo automatique, et qu'elle ne s'étendait pas sur toute la largeur de ma page. Il est facile de résoudre ce genre de problèmes. Tout d'abord, passez votre curseur sur la petite icône de clé au-dessus de votre ligne, puis sélectionnez " Modifier la ligne ". Pour changer la couleur, l'étape suivante consiste à sélectionner ' Design ' dans le menu ' Row Styles ', ici vous pouvez changer la couleur et d'autres options de conception.

Pour modifier la taille de votre ligne, sélectionnez d'abord ' Mise en page ' dans le menu ' Styles de ligne '. Cela vous donnera la possibilité d'ajouter un rembourrage à la ligne. Ensuite, si vous souhaitez que la ligne s'étende sur toute la largeur de votre page, sélectionnez le menu déroulant ' Disposition des lignes ' et choisissez ' Pleine largeur '.

J'ai utilisé Page Builder exactement de la même manière pour créer ces colonnes de page en vedette :

Pour ce faire, au lieu d'ajouter le widget Iconbox with Popover à la colonne, j'ai choisi le widget ProteusThemes: Featured Page . Vous devriez avoir un bon jeu en plaçant différents widgets dans des colonnes pour vraiment avoir une idée de l'utilité du constructeur de pages.

Ce sera tout pour le moment. Jetez un œil à mon post précédent pour quelques conseils de base. Cliquez ci-dessous pour vous abonner à notre newsletter et recevoir ce type de contenu, et bien plus encore, directement dans votre boîte de réception…

ABONNEZ-VOUS MAINTENANT