Comment créer des sections de site Web Hero à Gutenberg avec le thème Total

Le thème Total WordPress est livré avec toute une gamme d'outils dont un site Web d'entreprise pourrait avoir besoin.

Le thème vous offre une édition visuelle via WordPress Customizer et une importation rapide de données de démonstration, qui sont particulièrement utiles pour créer une page d'accueil exceptionnelle.

Comme vous le voyez, la version gratuite de Total ne vous enferme pas avec des constructeurs de pages WordPress supplémentaires, mais offre plutôt un moyen WordPress natif de concevoir votre site Web.

Avec l'arrivée de Gutenberg, l'éditeur WordPress basé sur des blocs, n'importe quel thème WordPress, y compris Total, peut être personnalisé beaucoup plus loin. Le choix des éléments de contenu (blocs) nous donne la liberté de personnalisation que nous n'avons jamais vue auparavant dans le noyau WordPress, difficile de le nier.

Cependant, certains paramètres de style de bloc sont encore très limités dans l'éditeur par défaut. Donc, si vous utilisez le nouvel éditeur Gutenberg et que Total cherche à créer et à concevoir un meilleur contenu, vous trouverez quelques conseils utiles dans ce didacticiel.

Pour être plus précis, dans cet article, nous aimerions montrer quelques exemples de la façon de créer et de personnaliser des éléments de site Web aussi cruciaux que les sections héros, sous-héros et appel à l'action dans Gutenberg. Ceux qui aident habituellement les entreprises :

• Créer des sections de site Web d'introduction/de bienvenue
• Promouvoir des produits ou des événements clés
• Concentrez-vous sur des éléments ou des services spécifiques du portefeuille, etc.

Pour renforcer les possibilités de personnalisation de Gutenberg, nous utiliserons le plugin Getwid WordPress Blocks que nous recommandons aux utilisateurs du thème Total. Nous sommes sûrs que certains utilisateurs de Total ont déjà essayé Getwid.

Mais pour ceux d'entre vous qui se demandent ce qu'est Getwid, voici une brève description.

En quelques mots, il s'agit d'un module complémentaire gratuit natif de Gutenberg qui comprend à ce jour la plus grande bibliothèque de blocs de type premium et une collection de conceptions sur mesure pour Gutenberg . Ce n'est pas la seule raison pour laquelle nous le recommandons.

Nous aimons particulièrement ce plugin car il se marie bien avec le style Total par défaut, vous permet de désactiver tout bloc dont vous n'avez pas besoin et est vraiment riche en fonctionnalités.

Le plugin apparaît comme recommandé lorsque vous activez Total - c'est une solution temporaire pour voir s'il convient à nos clients.

Mais bon, vous devez l'essayer vous-même pour voir si c'est votre solution. En attendant, passons en revue les exemples que nous avons réussi à créer.

Exemples de section de héros et d'appel à l'action créés avec Getwid dans Total

Nous avons effectué ces tests dans une version gratuite du thème Total et pouvons dire en toute sécurité qu'il n'y avait presque aucune limitation.

Cependant, les options de largeur totale du conteneur de site Web sont limitées, donc si vous recherchez des mises en page immersives en plein écran, vous voudrez peut-être penser à Total Plus.

Tout d'abord, vous aurez presque toujours besoin d'utiliser le bloc Section par les blocs Getwid WordPress. C'est un conteneur qui peut gérer n'importe quel nombre d'autres blocs. Ainsi, vos sections héros peuvent afficher tout type de contenu.

Une autre chose importante à propos du conteneur Section est qu'il vous offre de nombreux types d'arrière-plan : une image, une couleur, une vidéo (de votre bibliothèque multimédia WP ou YouTube), un dégradé multicolore, etc.

Ainsi, vos principales tâches lors de la conception de zones de site Web avec le bloc Section sont :

• Choisissez et personnalisez le type d'arrière-plan afin que le contenu dessus reste lisible et clair.
• Insérez les blocs nécessaires dans l'ordre préféré.
• Ajustez l'espacement (il existe des angles déplaçables comme dans les constructeurs visuels pour définir les espaces intérieurs et extérieurs).
• Facultatif : ajoutez une animation, des séparateurs de forme et d'autres éléments de décoration.

Passons maintenant aux exemples.

Exemple 1. La vitrine du produit

Tous les blocs de cet exemple sont placés à l'intérieur du bloc Section :

1. Titre avancé
2. Titre avancé
3. Titre avancé
4. Groupe de boutons
5. Arrière-plan de la section : une image (Positionnement > En haut à droite ; Taille > Auto)

Le bloc de titre vous permet d'utiliser n'importe quelle police Google, taille de texte, épaisseur de police, etc. Il existe également plusieurs styles de boutons (remplissage ou contour).

Le plus grand défi qui peut survenir est de trouver la bonne image d'arrière-plan et de choisir la bonne position d'image car elle est redimensionnée automatiquement en fonction de la fenêtre d'affichage.

Exemple 2. Extrait de portefeuille

Tous les blocs sont placés à l'intérieur du bloc Section :

1. Titre avancé
2. Titre avancé
3. Trois colonnes (Paragraphe, Image, Image, Image)
4. Arrière-plan de la section : dégradé

Vous pouvez également placer un bouton d'appel à l'action pour créer un lien vers la page complète du portfolio.

Exemple 3. Caractéristique ou carte d'événement

Dans une telle section de héros, vous pouvez présenter un produit, un événement, un service, une chose, une personne, etc.

Le bloc Advanced Heading vous permet de choisir n'importe quelle police :

Dans cet exemple, nous avons utilisé un arrière-plan dégradé et un séparateur de forme inférieure d'arrière-plan (Waves Multilayered).

1. Deux titres avancés
2. Paragraphe
3. Bouton
4. Image
5. Arrière-plan de la section : dégradé + séparateurs de forme

Exemple 4. Section d'incitation à l'action

Encore une fois, vous devez commencer par le bloc Section. Pour placer des en-têtes comme dans l'exemple ci-dessous, vous pouvez utiliser un modèle de la bibliothèque de modèles Getwid ou créer un modèle à partir de rien.

C'est une section très simple avec l'image de fond, quelques rubriques et un bouton centralisé.

1. Trois blocs de titre avancé
2. Le bloc Bouton
3. Fond de section : une image avec opacité (Taille > couverture)

Vous apprécierez également la facilité avec laquelle vous pouvez ajuster l'alignement du contenu avec les angles déplaçables :

C'est aussi une tendance de créer des mises en page décalées en mettant des titres sur les images :

Dans Getwid, vous pouvez y parvenir en définissant une image d'arrière-plan appropriée avec un espace vide pour la ligne de texte.

Exemple 5. Sections sous-héros

Très souvent, les sections de sous-héros fournissent plus d'informations sur un projet ou une personne. Il convient pour présenter votre biographie, votre histoire ou vos objectifs clés.

Comme élément visuel, nous avons utilisé le bloc Image Stack Gallery de Getwid, qui est livré avec plusieurs styles. Vous pouvez cependant le remplacer par une image, une vidéo ou tout autre élément de contenu.

1. Deux titres avancés
2. Paragraphe
3. Bouton
4. Le bloc Image Stack Gallery
5. Fond de section : couleur unie

Exemple 6. Accents visuels

Les galeries d'images, les curseurs et les vidéos sont des outils visuels très courants pour créer des sections qui attirent l'attention.

Par exemple, vous pouvez utiliser le bloc Media & Text Slider de Getwid pour créer un diaporama avec un contenu texte optionnel :

1. Curseur média et texte
2. Arrière-plan de la section : dégradé + séparateurs supérieur et inférieur avec hauteur personnalisée

Il existe également de nombreux blocs Getwid post-basés qui peuvent être présentés dans un slider (ils proviendront automatiquement du contenu de votre site Web). Vous souhaitez présenter certains articles les plus récents ou sélectionnés manuellement sous forme de curseur ou de grille/liste ? Il y a un bloc pour ça.

Exemple 7. Bannières

Getwid est livré avec un bloc de bannière pratique qui propose des conteneurs d'image et de texte par défaut. Il dispose également d'un choix d'effets d'animation vous permettant de rendre les sections avec des bannières plus dynamiques.

Le bloc est un match parfait pour les ventes temporaires et les temps forts constants.

1. Bannière
2. Fond de coupe : dégradé monochrome

Exemple 8. Sections informatives

Si vous souhaitez afficher plus d'informations de manière structurée et compacte, Getwid propose trois blocs dédiés à cet effet : Tabs, Accordion et Toggle.

Voici une mise en page à deux colonnes avec le bloc Accordéon et une image à côté :

La caractéristique unique de ces blocs est la possibilité de contenir n'importe quel bloc à l'intérieur des widgets à onglets. Cela signifie qu'en plus du texte, vous pouvez ajouter des images, des listes, des vidéos, des galeries, des curseurs aux onglets.

Il existe de nombreux autres blocs qui peuvent ajouter des fonctionnalités uniques à vos sections marketing, par exemple Image Hotspot pour créer des sections d'images informatives, Icon Box pour les services, un flux de galerie Instagram en temps réel, etc.

Vous pouvez créer et concevoir des sections similaires à partir d'une page Gutenberg vierge, en optant pour la mise en page nécessaire dans les paramètres de page Total.

Envelopper

Savez-vous quelle est la meilleure chose à propos de l'utilisation de la combinaison Gutenberg et Getwid dans le thème Total gratuit ? Non, ce n'est pas seulement le nombre de blocs qui compte.

Plus important encore, vous n'avez pas besoin d'avoir l'œil d'un concepteur (ou les compétences d'un développeur) pour créer un contenu attrayant. Il y a tellement de skins préfabriqués, de motifs de blocs et de designs prêts à l'emploi qui sont là pour vous aider. Les blocs WordPress Getwid sont également une bonne alternative aux constructeurs de pages pour ceux d'entre vous qui restent avec la version gratuite de Total.

Jusqu'à ce que l'éditeur de blocs ne soit pas suffisamment mature, un module supplémentaire natif de Gutenberg peut être un excellent point de départ.

Avez-vous essayé Gutenberg ou Getwid ? Faites le nous savoir dans les commentaires.