Twentig – Gutenberg Blocks, Templates, Patterns, Theme Customization

Description

Le moyen le plus simple de créer votre site web.

L’extension Twentig vous aide à personnaliser votre thème basé sur des blocs et à construire des pages magnifiques — aucune compétence en codage et en design n’est nécessaire.

Avec des blocs Gutenberg magnifiés, des modèles de page préconçus, des compositions de blocs, des styles globaux supplémentaires et des Google Fonts, vous avez tout pour créer un superbe site web qui s’affiche parfaitement sur tous les appareils.

Allez plus loin avec les blocs Gutenberg.

Twentig améliore les blocs Gutenberg de base, amenant l’éditeur de blocs WordPress à un niveau supérieur de design et de créativité.

Fonctionnalités de blocs Gutenberg puissantes. Twentig propose des styles supplémentaires, des réglages de blocs avancés, et des classes CSS. Du style des colonnes aux formes de séparation des groupes en passant par les réglages typographiques, vous disposez des meilleurs outils pour personnaliser les blocs Gutenberg.

Personnalisation des blocs facilitée. Nous avons ajouté la quantité optimale de fonctionnalités aux blocs Gutenberg de base. Ainsi, vous pouvez facilement personnaliser vos blocs en fonction de vos besoins en quelques clics.

Créez votre site web avec des modèles prêts à l’emploi.

Twentig propose des centaines de compositions et de modèles de pages préconçus avec des blocs — il est donc plus facile et rapide que jamais de créer de belles pages.

Templates flexibles. Choisissez parmi une variété de compositions et de modèles de page polyvalents que vous pouvez combiner et adapter à votre projet. Notre bibliothèque de templates de blocs permet un large éventail d’utilisations et des possibilités de design infinies.

Design professionnel. Nos modèles de page sont optimisés pour les appareils mobiles et apportent instantanément à vos pages un aspect professionnel.

Personnalisez Twenty Twenty-Two ou tout autre thème basé sur des blocs.

Grâce à ses puissantes fonctionnalités, Twentig vous aide à personnaliser le thème Twenty Twenty-Two ou tout autre thème conçu pour l’édition complète du site.

Styles globaux avancés. Changez facilement l’apparence de votre site web grâce à nos styles globaux supplémentaires. Personnalisez les polices à l’aide de notre sélection de Google Fonts et modifiez la mise en page du site en éditant la largeur du contenu.

Blocs de thème améliorés. Twentig étend les blocs Gutenberg qui structurent l’ensemble de votre site avec des paramètres avancés comme le point de rupture responsive de la navigation, la largeur du logo sur mobile, l’icône du menu, la longueur de l’extrait, la proportion de taille de l’image mise en avant et bien d’autres encore.

Compositions de blocs supplémentaires. Twentig vous permet de créer rapidement votre blog, votre en-tête et votre pied de page avec des compositions de blocs prédéfinies.

Vous utilisez le thème Twenty Twenty-One ou Twenty Twenty ?

Si vous préférez utiliser l’outil de personnalisation, Twentig propose des options avancées pour personnaliser les thèmes Twenty Twenty-One et Twenty Twenty.

Personnalisation avancée du thème. De l’affichage des articles du blog en grille à la colonne latérale, en passant par le menu fixe, la mise en page de l’en-tête et du pied de page, notre extension vous offre des possibilités infinies pour améliorer votre thème WordPress. Changez l’apparence de votre site web en personnalisant les polices (Google Fonts), la mise en page du site, les styles globaux, la page 404, et plus encore.

Modèles de pages personnalisés. Contrôlez entièrement l’apparence de votre page avec nos modèles de pages. Retirez le titre de la page, l’en-tête, le pied de page ou définissez un en-tête transparent. Vous pouvez désormais utiliser les blocs Gutenberg pour créer une bannière, une page de destination, une page « coming soon », et plus encore.

Sites web de démarrage. Au lieu de partir de zéro, vous pouvez rapidement importer l’un des sites web de démarrage Twentig.

Liste des fonctionnalités de Twentig

Consultez les captures d’écran pour voir comment Twentig peut transformer votre thème et les blocs Gutenberg.

STYLE GLOBAUX SUPPLÉMENTAIRES DU THÈME

  • Sélection de Google Fonts
  • Famille des polices de titre
  • Largeur du contenu
  • Grande largeur
  • Styles d’espacement prédéfinis pour faciliter la conception de pages

RÉGLAGES DE BLOCS DE THÈME SUPPLÉMENTAIRES

  • Navigation : point de rupture responsive, icône de menu, taille de l’icône de menu, style au survol, style actif, styles de bouton
  • Logo du site : largeur de l’image sur mobile
  • Boucle de requête : alignement vertical, espacement des blocs, largeur de colonne responsive
  • Titre de la publication : options typographiques
  • Extrait de la publication : nombre maximum de mots
  • Image mise en avant de la publication  : styles (arrondi, ombre, cadre), proportion de taille de l’image, filtre noir & blanc
  • Étiquettes d’articles et Catégories d’articles : styles (contour, pilule, hashtag, simple)
  • Auteur de la publication : lien vers les archives de l’auteur, texte inline, forme de l’avatar
  • Titre d’archive : option pour masquer le préfixe

RÉGLAGES DE BLOCS GUTENBERG SUPPLÉMENTAIRES

  • Blocs Gutenberg : marge supérieure et marge inférieure, visibilité responsive
  • Groupe : ombre, forme de séparation
  • Colonnes : disposition responsive, style des colonnes (carte, bordure), alignement du texte, lien étiré
  • Média & texte : styles (ombre, chevauchement), disposition responsive, ordre d’empilement inversé, lien étiré, pleine hauteur
  • Bannière : styles (ombre, bordure intérieure, arrondi), proportion de taille, lien étiré, effet au survol
  • Titre : options typographiques, décoration
  • Paragraphe : options typographiques
  • Liste : styles (tiret, coche, flèche, bordure, sans puce, en ligne), espacement
  • Image : styles (arrondi, ombre, cadre, bordure), formes, filtre noir & blanc
  • Galerie : variante empilée, styles (arrondi, cadre), colonnes à largeur fixe, proportion de l’image, alignement vertical, disposition responsive, taille de légende, bordure, filtre noir & blanc
  • Blocs YouTube, Vimeo, SoundCloud, et Vidéo : style (cadre)
  • Icônes de réseaux sociaux: effet au survol
  • Citation et Citation en exergue : styles supplementaires
  • Tableau : style (bordure, bordure intérieure), alignement vertical
  •  Nuage d’étiquettes : style (pilule)
  • Recherche : style (souligné)

BIBLIOTHÈQUE DE MODÈLES

Des centaines de compositions de blocs Gutenberg et modèles de page regroupés selon les catégories suivantes :

  • Colonnes
  • Texte et Image
  • Texte
  • Section de titre de page
  • Bannière
  • Appel à l’action
  • Liste
  • Nombres, statistiques
  • Galerie
  • Vidéo, son
  • Contact
  • Équipe
  • Témoignages
  • Logos, clients
  • Tarifs
  • FAQ
  • Evènements, programme
  • Requête (pour les thèmes basés sur des blocs)
  • En-têtes (pour les thèmes basés sur des blocs)
  • Pieds de page (pour les thèmes basés sur des blocs)
  • Pages (Page d’accueil, À propos, Services, Contact)
  • Page unique

Et plus encore

Vous aimez Twentig ?

Captures d’écran

  • Twentig. Le moyen le plus simple de créer un site web adapté à votre projet — aucune compétence en codage et en design n’est nécessaire.
  • Personnalisez votre site web avec des Google Fonts. Modifiez vos polices avec notre sélection de Google Fonts.
  • Créez vos pages en un rien de temps. Utilisez la bibliothèque de modèles de page Twentig pour construire de magnifiques pages.
  • Créez avec des compositions de blocs Gutenberg. Choisissez parmi des centaines de compositions prêtes à l’emploi que vous pouvez combiner et adapter.
  • Personnalisez les blocs Gutenberg. Transformez les blocs Gutenberg de base avec des réglages et des styles supplémentaires.
  • Créez un superbe blog. Personnalisez le design de votre blog comme bon vous semble.
  • Personnalisez l’en-tête. Changez la mise en page et le style, affichez des icônes de réseaux sociaux ou un bouton d’appel à l’action.
  • Personnalisez votre pied de page. Modifiez la mise en page et le style, modifiez le copyright, retirez « Propulsé par WordPress », et plus encore.

Installation

Installer Twentig

Pour installer et activer Twentig :

  1. Connectez-vous à votre tableau de bord WordPress.
  2. Cliquez sur Extensions > Ajouter.
  3. Tapez Twentig dans la boîte de recherche.
    Vous pouvez également cliquer sur « Téléverser une extension » pour téléverser le fichier .zip de l’extension.
  4. Cliquez sur « Installer maintenant ».

Une fois l’installation terminée, cliquez sur Activer.

Installer le thème par défaut de WordPress

Pour tirer pleinement parti de Twentig et de l’éditeur de blocs Gutenberg, nous vous recommandons d’utiliser le thème Twenty Twenty-Two (ou Twenty Twenty-One si vous préférez utiliser un thème classique avec l’outil de personnalisation).

Pour installer et activer le thème Twenty Twenty-Two :

  1. Connectez-vous à votre tableau de bord WordPress.
  2. Cliquez sur Apparence > Thèmes.
  3. Recherchez le thème Twenty Twenty-Two et cliquez sur Activer.

Après l’installation

Les fonctionnalités de Twentig apparaissent dans l’éditeur de blocs Gutenberg et l’éditeur de site (ou dans l’outil de personnalisation pour les thèmes classiques).

  • Dans l’éditeur de blocs Gutenberg, trouvez les compositions Twentig en cliquant sur l’icône « + ».
  • Dans l’éditeur de blocs Gutenberg, trouvez des réglages de blocs supplémentaires dans l’onglet « Bloc » de la colonne latérale de réglages (panneaux Style, Réglages Twentig et Avancé) — en fonction du bloc sélectionné.
  • Pour les thèmes basés sur des blocs tels que Twenty Twenty-Two, dans l’éditeur de site (Apparence > Éditeur), vous pouvez trouver des options de style supplémentaires (Google Fonts, largeur du contenu, grande largeur) dans les sections Styles et Styles Twentig.
  • Pour les thèmes Twenty Twenty-One et Twenty-Twenty, dans l’outil de personnalisation du thème (Apparence > Personnaliser), trouvez nos options supplémentaires dans les panneaux Identité du site, Couleurs et Options Twentig.

Pour plus de détails, consultez notre guide de démarrage rapide.

FAQ

Quels sont les prérequis pour utiliser Twentig ?

Nous vous recommandons d’utiliser la dernière version de WordPress pour tirer pleinement parti de Twentig et de l’éditeur de blocs.

Dois-je installer l’extension Gutenberg ?

Non, l’utilisation de l’extension Gutenberg sur un site en ligne n’est pas recommandée car certaines fonctionnalités sont expérimentales et instables. De plus, Twentig n’est pas entièrement compatible avec l’extension Gutenberg.

Twentig est-il facile à utiliser ?

Avec Twentig, aucune compétence en codage ou en design n’est nécessaire. Vous pouvez personnaliser les thèmes WordPress basés sur des blocs et les blocs Gutenberg en quelques clics. Nos compositions et templates préconçus sont optimisés pour les appareils mobiles et facilitent la création de pages de qualité professionnelle.

Avez-vous un guide de démarrage rapide ?

Oui, vous pouvez le trouver sur notre site web.

Comment insérer un modèle préconçu ?

Pour insérer une composition ou une mise en page :

  1. Dans l’éditeur de blocs Gutenberg, placez votre curseur à l’endroit où vous souhaitez insérer la composition.
  2. Cliquez sur l’icône « + » pour ajouter un nouveau bloc.
  3. Cliquez sur l’onglet « Compositions ».
  4. Parcourez les catégories et cliquez sur la composition de blocs que vous souhaitez insérer.

Comment personnaliser le thème Twenty Twenty-two et les thèmes basés sur des blocks Gutenbeg avec Twentig ?

Pour personnaliser votre thème basé sur des blocs, ouvrez l’Éditeur de site (Apparence > Éditeur). De là, vous pouvez voir l’icône Styles dans le coin supérieur droit. Dans la section Styles, Twentig ajoute des Google Fonts aux panneaux Typographie.

À côté de l’icône Styles, vous pouvez trouver l’icône [tw]. Dans la section Twentig Styles, vous pouvez modifier la famille des polices des titres (avec des Google Fonts), la largeur du contenu et la grande largeur.

Twentig fournit également des paramètres supplémentaires aux blocs Thème et aux blocs Design qui vous permettent de personnaliser votre site web comme bon vous semble.

Comment personnaliser les thèmes Twenty Twenty-One et Twenty Twenty avec Twentig ?

Pour personnaliser votre thème, lancez l’outil de personnalisation (Apparence > Personnaliser). De là, vous pouvez facilement apporter des modifications à votre site web et les prévisualiser avant de les publier. Vous trouverez nos options supplémentaires dans les panneaux Identité du site, Couleurs et Options Twentig.

Pour vous permettre de contrôler entièrement l’apparence de votre page, Twentig propose 4 modèles de page personnalisés. Pour changer le modèle d’une page :

  1. Ouvrez la page que vous souhaitez modifier.
  2. Dans la colonne latérale de réglages, ouvrez l’onglet Page.
  3. Dans le panneau « Modèle », sélectionnez le modèle souhaité.
  4. Mettez à jour la page pour appliquer la modification.

Twentig supporte-t-il les écritures de droite à gauche ?

Oui ! Twentig prend en charge les écritures de droite à gauche (RTL).

Avis

18 juin 2022
One of the most useful, handier, time-saving plugins that make things easier to work with the default WordPress themes (Twenty Twenty, Twenty Twenty-one, Twenty Twenty-two).
8 juin 2022
Wonderful for both, twentytwentyone and the new blocktheme twentytwentytwo. You can set up a brand new FSE website and customize many things in minutes.
Lire les 126 avis

Contributeurs & développeurs

« Twentig – Gutenberg Blocks, Templates, Patterns, Theme Customization » est un logiciel libre. Les personnes suivantes ont contribué à cette extension.

Contributeurs

“Twentig – Gutenberg Blocks, Templates, Patterns, Theme Customization” a été traduit dans 4 locales. Remerciez l’équipe de traduction pour ses contributions.

Traduisez « Twentig – Gutenberg Blocks, Templates, Patterns, Theme Customization » dans votre langue.

Le développement vous intéresse ?

Parcourir le code, consulter le SVN dépôt, ou s’inscrire au journal de développement par RSS.

Journal

1.4.5

Release date: June 20, 2022

For block themes:

  • New: Adds block spacing, responsive column width, and vertical alignment settings to the Query Loop block.
  • New: Adds button styles to the Navigation Link block.
  • New: Adds hover and active style settings to the Navigation block.
  • Fix: Make Twentig global styles compatible with style variations.

For Gutenberg Blocks:

  • New: Adds “Highlight padding” CSS class to the Paragraph, Heading, and List blocks.

Pour Twenty Twenty-One :

  • Fix: Updates malformed CSS.

1.4.4

Release date: June 6, 2022

For Gutenberg Blocks:

  • New: Adds responsive width setting for the Logo block.
  • New: Adds backdrop blur filter CSS class to the Group block.
  • New: Adds style (plain) to the Post Categories and Post Tags blocks.
  • New: Adds responsive justification CSS classes to the Buttons and Social Icons blocks.

For Twenty Twenty-One & Twenty Twenty themes:

  • Fix: Updates Quote and Pullquote CSS to make them compatible with typography options.
  • Code Quality: Merges Twenty Twenty-One and Twenty Twenty patterns files.
  • Code Quality: Uses CSS logical properties and removes RTL files.
  • Code Quality: Moves the classic theme’s files to a separate folder.

1.4.3

Release date: May 24, 2022

For block themes:

  • New: Adds vertical block spacing setting to the Columns block.
  • New: Adds Roboto Flex as a font-family option.
  • Compatibility: Updates block patterns for WordPress 6.0.

For Twenty Twenty-One and Twenty Twenty themes:

  • Compatibility: Adjusts CSS to make columns layout compatible with WordPress 6.0.

1.4.2

Release date: May 19, 2022

For the Gutenberg block editor:

  • New: Adds aspect ratio setting to the Cover block.
  • New: Adds new hover effect options to the Cover block.
  • New: Adds new styles (rounded and rounded corners) to the Cover block.
  • New: Adds vertical alignment setting to the Gallery block.
  • New: Adds « Caption on hover » CSS class to the Gallery block.
  • New: Adds « + » menu icon option to the Navigation block.
  • New: Adds letter spacing CSS class to the Navigation block.
  • New: Adds new styles (rounded, subtle border) and « Black & white » CSS class to the Featured Image block.
  • New: Adds « Text shadow » CSS class to the Paragraph, Heading, and Post Title blocks.
  • New: Adds « Link no underline » CSS class to the Post Date, Post Terms, and Post Author blocks.
  • Compatibility: Adjusts CSS to make Gallery and Cover settings compatible with WordPress 6.0.

For block themes:

  • New: Adds style (underline) to the Search block.
  • New: Adds styles (outline, pill, hashtag) to the Post Categories and Post Tags blocks.
  • New: Adds style (pill) to the Tag Cloud block.
  • Compatibility: Deprecates the Twentig gutter setting in favor of the new block spacing setting for Columns, Gallery, and Navigation blocks (for WordPress 6.0).
  • Compatibility: Makes Twentig Styles panel compatible with WordPress 6.0 and 5.9.

For Twenty Twenty-Two theme:

  • Compatibility: Adjusts CSS for full-width blocks inside the editor for WordPress 6.0.

Pour le thème Twenty Twenty-One :

  • Enhancement: Updates the Google Fonts .json file.

For Twenty Twenty theme:

  • Enhancement: Updates the curated Google Fonts list.

1.4.1

Release date: March 22, 2022

For the Gutenberg block editor:

  • Fix: Unloads editor-related assets in the block-based widget editor to prevent error notice.
  • Fix: Adjusts spacing for the pattern preview.

For Twenty Twenty-Two theme:

  • Fix: Adds font preset for Extra Extra Large size.

For Twenty Twenty theme:

  • Fix: Restores the content width inside the Gutenberg block editor.
  • Fix: Restores layout and color for the privacy page (fixes the latest theme’s update).

1.4

Release date: March 11, 2022

Twentig 1.4 brings powerful features to supercharge Twenty Twenty-Two, the new default WordPress theme, and all block themes. Build a beautiful website with advanced style options, enhanced Gutenberg blocks, block patterns, and more.

This release adds support for the Twenty Twenty-Two theme and all block themes:

  • New: Adds style options (Google Fonts for Font family settings, Heading font family, Content width, Wide width).
  • New: Adds settings to Theme blocks (Navigation, Post Excerpt, Post Featured Image, Archive Title, Post Date, Post Author).
  • New: Adds Headers, Footers, and Query patterns.
  • New: Makes Twentig patterns compatible with block themes.

For the Gutenberg block editor:

  • New: Adds Shape setting to the Image block.
  • New: Adds Hard shadow style for Group, Columns, Media & Text, Image, and Cover blocks.
  • New: Adds Responsive visibility settings to Gutenberg blocks.
  • New: Moves Twentig page layouts inside the block inserter.

Pour le thème Twenty Twenty-One :

  • Fix: Restores the style inside the pattern preview.
  • Enhancement: Update block patterns to match the latest versions of core blocks.

For Twenty Twenty theme:

  • Fix: Restores the style inside the pattern preview.
  • Enhancement: Update block patterns to match the latest versions of core blocks.
  • Fix: Restores the outline button border.

Voir le journal des modifications de toutes les versions.