Comment inclure une zone de liste Divi Layout Block dans un billet Gutenberg

Il faut du temps et de l’énergie pour créer un billet de blog valable. En plus de trouver le meilleur sujet d’écriture dans votre segment de marché, il est important d’attirer les lecteurs et de leur permettre de trouver rapidement l’information qu’ils veulent. Une bonne façon de se rapprocher de cette expérience utilisateur est maintenant de partager une boîte de résumé visuelle à la fin d’un billet de blog, avant de penser à la fin. Avec les nouveaux blocs de mise en page de Divi, vous pouvez maintenant facilement créer des zones de liste en utilisant les options intégrées de Divi. Dans ce tutoriel, nous vous guiderons tout au long du processus et vous pourrez télécharger gratuitement le fichier json pour la mise en page!
On y va. Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats sur différents écrans de taille. Bureau Mobile Téléchargement gratuit bloc de mise en page Divi pour obtenir le bloc de mise en page Divi de la zone de liste des héros gratuits, vous devez d’abord le télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire. Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout.
Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et accéder aux paquets de mise en page Divi Seventh
Finale gratuite! Pour importer un fichier json que vous pouvez télécharger ci – dessus, allez à la Bibliothèque Divi à l’arrière du tableau de bord WordPress et cliquez sur importer et exporter. Ensuite, sélectionnez le fichier json dans le dossier de téléchargement et cliquez sur importer la mise en page Divi Builder. Une fois que vous avez ajouté un nouveau bloc Divi à votre poste Gutenberg, vous pouvez aller au poste Gutenberg et ajouter un nouveau bloc Divi. Importez le fichier json à partir de la mise en page enregistrée, puis cliquez sur télécharger à partir de la bibliothèque, allez à la mise en page que vous avez sauvegardée, et sélectionnez la mise en page pour importer la zone de liste dans le journal. C’est tout! Commençons à recréer! Utilisez le sixième modèle de post pour le paquet de création de thème pour télécharger le sixième paquet de création de thème la zone de liste que nous allons recréer dans ce tutoriel correspond exactement au modèle de post pour le sixième paquet de générateur de thème gratuit. Allez sur le blog post et téléchargez le paquet complet. Allez à Divi Theme Builder, puis allez à Divi Theme Builder. Téléchargez le modèle de message cliquez sur l’icône en haut à droite, puis téléchargez le modèle de message pour le paquet de création de sujet. Assurez – vous de changer toutes les modifications apportées au générateur de thème plus tard. Ouvrez un billet Gutenberg existant ou créez un nouveau billet Gutenberg. Maintenant, une fois que vous avez ajouté le modèle de billet approprié, vous pouvez créer une zone de liste. Utilisez Gutenberg pour ouvrir ou créer un nouveau billet. À la fin du billet de blog, nous ajouterons un nouveau titre H2. Ajoutez un nouveau bloc Divi en ligne, puis nous ajouterons un nouveau bloc de mise en page Divi. Lorsque vous créez un nouveau bloc d’ajout de mise en page dans le bloc Divi, il y a deux options. Sélectionnez construire une nouvelle mise en page. Configuration de la section couleur de fond
Dans l’éditeur de blocs de mise en page Divi, vous remarquerez une section. Ouvrez la section et utilisez un fond blanc. Couleur de fond: # FFFFFF L’espacement passe à l’onglet conception de section et ajoute des marges personnalisées et des valeurs de remplissage. Marge supérieure: 100 Px marge gauche: – 10% (bureau), 0% (tablette et téléphone) Marge droite: – 10% (bureau), 0% (tablette et téléphone) Marge supérieure: 0px marge inférieure: 0px La bordure ajoute également un rayon de bord. En bas à gauche: 16px en bas à droite: 16 px Boîte d’ombre plus une mince boîte d’ombre. Shadow Fuzzy force Frame: 60 Px Shadow diffusion Force: 10 Px Shadow color: rgba (0,0,0,0,08) Ajouter une nouvelle ligne de structure de colonne continue en ajoutant une nouvelle ligne à la section en utilisant la structure de colonne suivante: Sans ajouter de module, ouvrez le réglage de ligne et laissez la ligne occuper toute la largeur du conteneur de section. Utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 hauteur de colonne équilibrée: Oui largeur: 100% largeur maximale: 100% Espacement ensuite, supprimez le remplissage par défaut en haut et en bas de la ligne. Remplissage supérieur: 0px remplissage inférieur: 0px La colonne définit la couleur de fond 1, puis ouvre les paramètres de la colonne 1 et utilise la couleur de fond blanche pour elle. Couleur de fond: # FFFFFF L’espacement ajoute également des valeurs de remplissage personnalisées. Remplissage supérieur: 70px remplissage inférieur: 70px remplissage gauche: 70px remplissage droit: 70px La boîte d’ombre continue, ajoutant une ombre mince en utilisant une couleur d’ombre différente par défaut pendant que vous passez le curseur.
Boîte d’ombre floue forcée: 50 Px couleur d’ombre par défaut: rgba (0,0,0,0) couleur d’ombre lorsque la souris se déplace: rgba (0,0,0,0,15) Échelle de transformation