• Accueil
  • Info
  • Publicité
  • Privacy & Policy
  • Nous Contacter
No Result
View All Result
Technique de pointe
  • Actualité
  • Technologies
  • Jeu vidéo
  • Mobile
  • Astuces
  • HTML5 / CSS
  • Java Script
  • PHP
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Nous Contacter
MYCAMER
  • Actualité
  • Mobile
  • Jeu vidéo
    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Quelle est la durée idéale d’un jeu vidéo ?  –

    Quelle est la durée idéale d’un jeu vidéo ? –

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    10 tropes de jeux vidéo qui n’ont aucun sens

    10 tropes de jeux vidéo qui n’ont aucun sens

    Dead Space Remake – Dans le vide (Chapitre 7)

    Dead Space Remake – Dans le vide (Chapitre 7)

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    10 boss de jeux vidéo les plus hilarants involontairement

    10 boss de jeux vidéo les plus hilarants involontairement

  • Developpement web
    • All
    • Java Script
    • Language HTML5
    Arrêtez d’appeler les langages de programmation HTML et CSS |  de Christophe Lam |  L’Albatros FOSS |  février 2023

    Arrêtez d’appeler les langages de programmation HTML et CSS | de Christophe Lam | L’Albatros FOSS | février 2023

    Vous voulez devenir UI/UX Designer ?  Consulter la liste des stages

    Vous voulez devenir UI/UX Designer ? Consulter la liste des stages

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière |  Nouvelles de Bombay

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière | Nouvelles de Bombay

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

    Analysis of dog breed diversity using a composite selection index

    Nouvelles FE |  Avez-vous les compétences que rechercheront les employeurs en 2023?

    Nouvelles FE | Avez-vous les compétences que rechercheront les employeurs en 2023?

  • Astuces
    4 villes en plein essor en 2023 à considérer pour une vie abordable

    4 villes en plein essor en 2023 à considérer pour une vie abordable

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    6 Best WordPress SEO Plugins for 2023

    6 Best WordPress SEO Plugins for 2023

    Amorcer un document Quarto {ojs} avec un bloc-notes observable

    WordPress Password Protection – A Complete Guide

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Microsoft dévoile le nouveau plugin IndexNow pour les sites WordPress

    Comment créer un site Web WordPress

  • Nous contacter
No Result
View All Result
MYCAMER
No Result
View All Result
Home Astuces

Comment construire un en-tête Post Hero avec des blocs – WP Tavern

Caleb by Caleb
juin 19, 2022
in Astuces
0
0
Comment construire un en-tête Post Hero avec des blocs – WP Tavern
367
SHARES
2.2k
VIEWS
Share on FacebookShare on TwitterRedditLinkedinWhatsappTelegram


Je suis obsédé par la direction artistique sur le web depuis aussi longtemps que je me souvienne. Le terme est souvent utilisé pour décrire l’acte de concevoir des pages individuelles autour du contenu lui-même. C’est le contraire de la façon dont la plupart des utilisateurs fonctionnent généralement lorsqu’ils écrivent des messages. Le modèle ou le design est déconnecté du mot écrit.

Jason Santa Maria site Internet est probablement la vitrine la plus citée de ces messages. Je recommande fortement de naviguer, en particulier de regarder le Articles de Candygram.

Il y a des moments où les histoires demandent plus d’emphase visuelle. La conception du contenu peut peindre une image qui n’est pas possible par le texte seul. Parfois, il s’agit de mises en page élaborées d’une page entière. Dans d’autres, c’est l’insertion d’images et d’autres éléments qui attirent l’attention du lecteur.

C’est une des raisons pour lesquelles j’ai aimé utiliser le thème Archeo par Automattic dernièrement. Ses motifs évoquent les premiers souvenirs d’Internet pré-maison de la lecture de magazines, chaque histoire en vedette avec sa propre mise en page.

Au fil des ans, j’ai essayé de développer plusieurs systèmes de conception par publication, mais ils n’ont toujours pas répondu à mes attentes. Une partie du problème était que je n’avais pas un cadre solide qui se sentait suffisamment à l’épreuve du temps pour que je ne résous pas encore ses problèmes une décennie ou plus plus tard.

Lorsque WordPress a lancé son éditeur de blocs, ces vieilles idées ont commencé à remonter à la surface. Cela pourrait-il permettre aux gens de raconter leurs histoires visuellement et offrir une certaine assurance que les mises en page ne se briseraient pas quelques versions plus tard ?

Aujourd’hui, je suis convaincu que WordPress rend cela plus possible qu’auparavant. Il y a certaines choses qu’il pourrait faire mieux, comme étendre sa boîte à outils CSS partagée et apporter sa gamme de contrôles de conception à plus de blocs. Mais, au fond, l’éditeur de blocs est un langage de conception qui permet aux utilisateurs finaux de raconter leurs histoires à travers des éléments visuels et textuels. Cela ne fera que s’améliorer avec la version 6.0 et au-delà.

Je voulais offrir un petit aperçu de la façon dont les utilisateurs pourraient utiliser ces outils pour créer des histoires plus visuellement uniques. Cette entrée dans le Construire avec des blocs série est censée fournir un point de départ.

Pour ceux qui suivent, nous allons créer une section d’en-tête/d’introduction pour une histoire fictive sur Gotham City :

Grande section de héros violet sur un site Web avec un titre en gras, une image pleine largeur et du texte.

Ce n’est pas une conception pleine page, mais j’espère que cela aidera les gens à commencer à expérimenter davantage leur contenu. WordPress a une tonne d’outils de conception solides avec lesquels travailler maintenant.

En fait, j’ai reconstitué deux modèles différents pour ce tutoriel. Cependant, je ne me sentais pas à l’aise avec les méthodes utilisées pour l’original:

Section héros pleine largeur avec fond d'image traversant.  Sur la gauche, le titre du message, la signature et le contenu sont placés dans une colonne.

En particulier, l’alignement du contenu à gauche et dans un conteneur de largeur maximale pose des problèmes. Il y a au moins deux façons de procéder. La méthode la plus utilisée consiste à insérer un bloc Colonnes 50/50, en utilisant la première colonne pour le contenu et en laissant la seconde vide. Cela a la plus grande compatibilité entre les thèmes, mais cela peut être désordonné à certaines tailles d’écran.

La seconde consiste à s’appuyer sur le contrôle de positionnement du bloc Cover pour aligner un bloc Group intérieur vers la gauche. C’est la meilleure option pour une mise en page réactive pure. Cependant, sa sortie était incohérente lors des tests sur plusieurs thèmes de blocs.

En fin de compte, j’ai mis la première mise en page de côté. Cependant, je voulais au moins le partager avec ceux qui voulaient essayer.

Construire le héros de l’en-tête de message

Pour ce patron, j’ai travaillé avec la version 12.9 du plugin Gutenberg. J’ai essayé de m’en tenir aux fonctionnalités disponibles pour les utilisateurs de WordPress 5.9, mais l’ancienne interface semble plus lente et plus volumineuse que les mises à jour plus récentes du plugin.

J’ai également utilisé un thème de bloc personnalisé. N’importe lequel devrait fonctionner, mais il devrait avoir un modèle “vierge” ou une option équivalente pleine largeur et ouverte. Sinon, vous pouvez en créer un à partir du éditeur de modèles intégré. Il n’aurait besoin que du bloc Post Content à l’intérieur.

Étape 1 : Création de l’arrière-plan

Éditeur de publication WordPress avec bloc de couverture inséré.  Sur la droite, le panneau Couleur de superposition apparaît avec un dégradé sélectionné.
Ajout d’un bloc de couverture avec image de fond et superposition de dégradé.

Le bloc Cover est mon choix de prédilection lors de la création de nombreuses mises en page. C’est l’une des options les plus polyvalentes de WordPress, ouvrant la voie à de nombreux types de conceptions. Ce n’est pas une surprise que j’ai commencé ici.

La première étape consiste à insérer un nouveau bloc de couverture et à sélectionner une image pour celui-ci. Ensuite, réglez-le sur pleine largeur et activez l’option pleine hauteur.

En fonction de l’image choisie, vous pouvez personnaliser l’option de superposition en fonction de celle-ci. J’ai sélectionné le dégradé “bleu cyan vif à violet vif” avec une opacité de 70%. Je voulais que l’image d’arrière-plan soit suffisamment visible pour la voir, mais pas au point de submerger tout le reste.

Étape 2 : Spacers et un groupe

Éditeur de publication WordPress avec deux blocs Spacer et un groupe imbriqué à l'intérieur d'une couverture.  Sur la gauche, la vue de liste est ouverte, montrant la hiérarchie.
Ajout d’un Group entre deux blocs Spacer.

À ce stade, nous sommes encore en train de construire la mise en page globale du contenu. À l’intérieur du couvercle de l’étape 1, ajoutez un espaceur, un groupe et un autre espaceur.

Réglez chaque espaceur sur 2rem ou votre valeur préférée. C’est juste pour montrer un peu plus l’image d’arrière-plan en haut et en bas du motif. Alternativement, vous pouvez ajuster l’option de rembourrage sur le bloc de couverture externe pour obtenir le même effet.

Pour le bloc Groupe, je n’ai modifié que les paramètres de bordure. j’ai sélectionné 3px pour la largeur, définissez le style sur solide et choisissez le blanc pour la couleur.

Noter: le bloc Groupe à cette étape ne sera plus nécessaire à l’avenir. Idéalement, nous pourrions simplement coller la couverture de l’étape 3. Cependant, il ne prend pas encore en charge les bordures personnalisées. Il y a une ouverture ticket pour ajouter la fonctionnalité. Il n’est pas clair si WordPress proposera cela pour les couvertures dans la prochaine version 6.0. Pour l’instant, nous devons ajouter un wrapper supplémentaire.

Étape 3 : Couverture intérieure

Éditeur de publication WordPress avec un bloc Cover imbriqué dans un bloc Group, qui est imbriqué dans un autre Cover.
Ajouter une couverture à l’intérieur d’un groupe à l’intérieur d’une couverture.

Ajoutez un nouveau bloc de couverture à l’intérieur du groupe à partir de l’étape 2. Réglez-le sur l’alignement pleine largeur et activez la pleine hauteur. Ensuite, sélectionnez une couleur d’arrière-plan de votre choix et ajustez l’opacité à quelque chose qui correspond à votre conception. Ce calque doit être suffisamment sombre pour que votre texte soit lisible. Vous pouvez choisir de modifier cela plus tard, en fonction de l’apparence de tout.

Pour ceux qui testent avec la dernière version de Gutenberg, consultez la note à la fin de l’étape suivante.

Étape 4 : Groupe de contenu

Un bloc de groupe à l'intérieur d'une couverture à l'intérieur d'un groupe à l'intérieur d'une couverture dans l'éditeur de publication WordPress.
Encore une autre couche de conteneur.

Je promets que c’est la dernière couche de conteneurs imbriqués pour que ce modèle fonctionne. Pour cette étape, insérez un nouveau bloc de groupe à l’intérieur de la couverture de l’étape 2.

Le seul paramètre nécessaire est d’activer l’option “Hériter de la disposition par défaut” dans le panneau de la barre latérale du bloc. J’ai ajusté le paramètre “espacement des blocs” à 4rem pour donner au contenu beaucoup de marge de manœuvre, mais cela peut changer d’un thème à l’autre. Vous devez également sélectionner le blanc ou une autre couleur claire pour les options de couleur du texte et des liens.

Noter: c’est, encore une fois, un scénario où WordPress 5.9 n’offre pas les outils dont nous avons besoin pour réduire une partie du cruft. Le bloc Cover de l’étape 3 était nécessaire pour un fond transparent. Cependant, WordPress 6.0 permet aux utilisateurs de ajuster l’opacité de n’importe quelle couleur. Pour ceux qui testent avec le plugin Gutenberg, vous pouvez simplement utiliser le bloc Groupe dans cette étape et y mettre un arrière-plan transparent.

Étape 5 : Titre accrocheur

Éditeur de publication WordPress avec un titre de publication de grande taille et en gras.
Allez grand ou rentrez chez vous avec le titre du message.

Maintenant, nous arrivons à la partie amusante – le contenu réel. N’oubliez pas qu’avec WordPress 6.0, il pourrait être possible de réduire de moitié les étapes précédentes.

Voulant plus d’espace entre le titre et son conteneur, j’ai inséré un bloc Spacer avec un 2rem hauteur à l’intérieur du bloc Groupe à partir de l’étape 3. Après cela, j’ai ajouté le bloc de titre du message et l’ai défini sur l’alignement pleine largeur. N’oubliez pas que nous utilisons un modèle “vierge” pour cet article, nous devons donc ajouter le titre quelque part.

C’est là que les choses deviennent risquées, et j’ai presque choisi de ne pas partager ce tutoriel spécifique à cause de cela. La taille des polices dans WordPress est aussi bonne que votre thème actif. La plate-forme principale n’a pas de gestion réactive pour eux et leurs hauteurs de ligne associées, et chaque thème peut être extrêmement incompatible avec les choix qu’il propose.

La meilleure option consiste à choisir une taille de police raisonnablement grande si elle est proposée par le thème du bloc de titre de la publication. Une conception bien équilibrée fournira une gamme de choix et gérera leur redimensionnement pour les écrans plus petits. S’il n’est pas disponible, vous devrez ajouter une taille de police et une hauteur de ligne personnalisées. Les valeurs utilisées dans ma configuration sont 6rem et 1respectivement.

Ensuite, sélectionnez l’option “Noir” pour les options Apparence ou Poids, selon ce qui est disponible.

Étape 6 : Ajouter une image

Éditeur de publication WordPress avec une image pleine largeur avec une légende de démonstration et une bordure noire.
Ajout d’une image pleine largeur pour la publication.

Vous avez deux options pour cette étape : le bloc Post Featured Image ou Image. Le premier n’a pas autant de paramètres dans WordPress 5.9. Votre thème actif peut également rendre certains styles personnalisés disponibles pour l’un et pas pour l’autre.

J’ai opté pour le bloc Image principalement parce que je voulais ajouter une légende à la photo. Je l’ai ensuite réglé sur l’alignement pleine largeur et j’ai sélectionné un style “Bordure” disponible par mon thème pour le séparer un peu de l’arrière-plan.

Étape 7 : Conclure

Éditeur de publication WordPress avec une image suivie d'un paragraphe et d'un espaceur à l'intérieur d'un ensemble de conteneurs avec un fond violet.
Ajout de blocs Paragraphe et Espacement.

À partir de maintenant, amusez-vous avec les choses. J’ai ajouté un lede pour mon histoire fictive et un autre bloc Spacer, mais vous pouvez bricoler avec d’autres options comme l’affichage de l’auteur du message et de la date.

Cela ressemblait à beaucoup de travail d’assemblage. Cependant, WordPress 6.0 devrait rendre les choses beaucoup plus simples.

Catégorie: Construire avec des blocs

— to wptavern.com

Get real time update about this post categories directly on your device, subscribe now.

Unsubscribe
Caleb

Caleb

Stay Connected

  • 87k Followers
  • 172k Subscribers

Articles populaires

  • 10 problèmes courants de l’iPhone 13 et comment les résoudre

    10 problèmes courants de l’iPhone 13 et comment les résoudre

    5603 shares
    Share 2241 Tweet 1401
  • Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

    1702 shares
    Share 681 Tweet 426
  • GOLDEN FARM BIZ: earn unlimited money online

    347 shares
    Share 139 Tweet 87
  • Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

    513 shares
    Share 205 Tweet 128
  • Comment réparer le décalage d’Instagram sur iPhone et Android

    711 shares
    Share 284 Tweet 178

Follow Our Page

Follow Us

    Go to the Customizer > JNews : Social, Like & View > Instagram Feed Setting, to connect your Instagram account.
Facebook Twitter Youtube Vimeo Instagram

Informer et distraire les internautes en toute indépendance avec un grand souci de la qualité et de contenu.

Category

  • Actualité
  • Article Sponsorisé
  • Astuces
  • Developpement web
  • Featured
  • Java Script
  • Jeu vidéo
  • Language HTML5
  • Mobile
  • portrait
  • Technologies
  • Uncategorized

Recent News

Les spin-offs de la NASA présentent les technologies développées par Stennis de la NASA – Picayune Item

Les spin-offs de la NASA présentent les technologies développées par Stennis de la NASA – Picayune Item

février 5, 2023
La panne généralisée d’eftpos devrait maintenant être terminée

La panne généralisée d’eftpos devrait maintenant être terminée

février 5, 2023

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

No Result
View All Result
  • Actualité
  • Mobile
  • Jeu vidéo
  • Developpement web
  • Astuces
  • Nous contacter

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

Welcome Back!

Sign In with Facebook
Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
fr French
ar Arabiczh-CN Chinese (Simplified)en Englishfr Frenchde Germanit Italianru Russianes Spanish

Add New Playlist

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.