Cum să adăugați citate evidențiate Divi-Built pe tot postul dvs. Gutenberg

Când scrieți o postare pe blog, veți găsi adesea că doriți să citați pe cineva sau să evidențiați o propoziție utilizată într-un paragraf obișnuit. Acum, în editorul Gutenberg, puteți adăuga un bloc de cotații chiar de pe bat, dar nu vă oferă o libertate de proiectare atât de mare pe cât doriți. Cu blocurile de aspect Divi, asta nu mai este o problemă. Puteți construi cu ușurință un anumit bloc cu Divi, menținând în același timp mediul Gutenberg în altă parte. În acest tutorial, vă vom arăta cum să adăugați citate evidențiate în linie la postările de pe blog folosind Divi. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Exemplul nr. 1

Desktop

Mobil

Exemplul nr. 2

Desktop

Mobil

Descărcați GRATUIT aspectele citate evidențiate Divi-Built

Pentru a vă pune mâinile pe schemele gratuite de citate evidențiate de Divi, va trebui mai întâi să le descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

https://youtu.be/zScpa4-I7-8

Abonați-vă la canalul nostru Youtube

Importul blocului de aspect JSON

Încărcați aspectul în biblioteca Divi

Pentru a importa fișierul JSON pe care l-ați putut descărca mai sus, accesați biblioteca Divi din backend-ul tabloului de bord WordPress și faceți clic pe „Import & Export”.

Apoi, selectați fișierul JSON din folderul de descărcare și faceți clic pe „Import Divi Builder Layouts”.

Adăugați un nou bloc Divi Block în Gutenberg Post

Odată ce aspectul dvs. a fost importat, puteți merge la postarea dvs. Gutenberg și puteți adăuga un nou bloc de aspect Divi.

Importați fișierul JSON din aspectele salvate

Apoi, faceți clic pe „Încărcați din bibliotecă”, navigați la „Aspectele dvs. salvate” și selectați aspectul pentru a importa aspectul citatelor evidențiate în postarea de pe blog. Asta e!

Pași generali

Utilizați șablonul de postare de blog simplu și prietenos cu UX

Descărcați șablonul

Pentru a defini stilul acestui tutorial, vom folosi un șablon de postare pentru un post anterior. Accesați postarea respectivă și descărcați șablonul.

Accesați Divi Theme Builder

Apoi, accesați Divi Theme Builder.

Încărcați șablonul de postare

Faceți clic pe pictograma din colțul din dreapta sus, accesați fila Import și importați șablonul de postare pe care l-ați descărcat în primul pas al acestui tutorial.

Deschideți Postul Gutenberg existent sau creați unul nou

După ce ați setat un șablon de postare, puteți crea o nouă postare Gutenberg sau puteți deschide una existentă.

Adăugați un bloc Divi nou în linie

Adăugați un nou bloc Divi undeva în postarea dvs.

Construiți un aspect nou în interiorul blocului Divi

După ce ați adăugat blocul, veți primi două opțiuni. Alegeți-l pe cel care spune „Construiți un aspect nou”.

Recreați exemplul nr. 1

Setări secțiune

Spațiere

Odată ce vă aflați în editorul de blocuri de aspect Divi, veți observa o secțiune. Pentru a recrea primul exemplu de proiectare, deschideți setările secțiunii și modificați valorile de marjă în consecință:

• Marja superioară: 50 px
• Marja inferioară: 50 px
• Marja stângă: -5%
• Marja dreapta: -5%

Frontieră

Adăugați o margine stângă la secțiunea următoare.

• Lățimea marginii stânga: 2 px
• Culoarea chenarului stâng: # 000000

Animaţie

Și utilizați următoarele setări de animație:

• Stil de animație: Slide
• Direcția animației: Jos
• Durata animației: 1500 ms
• Intensitate animație: 200%
• Animație Opacitate de pornire: 100%
• Curba de viteză a animației: ușurință-intrare-ieșire

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Dimensionare

Deschideți setările rândului și modificați setările de dimensionare în consecință:

• Lățime: 90%
• Lățime maximă: 100%

Animaţie

Completați setările rândului modificând setările animației după cum urmează:

• Stil de animație: Fade
• Întârziere animație: 1500 ms
• Curba de viteză a animației: ușurință-intrare-ieșire

Adăugați un modul de text în coloană

Introduceți conținut H3

Singurul modul de care avem nevoie este un modul de text. Introduceți conținutul citatului evidențiat H3.

Setări text H3

Completați setările modulului modificând setările de text H3 după cum urmează:

• Stilul fontului H3: cursiv
• Dimensiune text H3: 2.1rem (desktop), 1.5rem (tabletă), 1.3rem (telefon)
• Înălțimea liniei H3: 1,5em

Recreați exemplul nr. 2

Setări secțiune

Spațiere

Doriți să recreați în schimb al doilea exemplu de design? Deschideți setările secțiunii și modificați valorile spațierii după cum urmează:

• Marja superioară: 50 px
• Marja inferioară: 50 px
• Marja stângă: -5%
• Marja dreapta: -5%
• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un rând nou

Structura coloanei

Apoi, adăugați un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și permiteți rândului să ocupe lățimea întregului container al secțiunii.

• Lățime: 100%
• Lățime maximă: 100%

Adăugați modulul de text nr. 1 în coloană

Adauga continut

Este timpul să adăugați module, începând cu un prim modul de text. Adăugați o ofertă în caseta de conținut.

Setări text

Treceți la fila de proiectare și modificați setările de text după cum urmează:

• Font text: Playfair Display
• Culoarea textului: #eaeaea
• Dimensiune text: 500 px
• Înălțimea liniei de text: 0em

Spațiere

Adăugăm și niște margini superioare.

• Marja superioară: 150 px

Animaţie

Apoi, vom schimba setările de animație.

• Stil de animație: Flip
• Regia de animație: Centru
• Întârziere animație: 500 ms
• Intensitate animație: 200%
• Curba de viteză a animației: ușurință-intrare-ieșire

Poziţie

Ne vom asigura că cotația este plasată în colțul din stânga sus al containerului de rând, modificând și setările de poziție.

• Poziție: Absolută
• Locație: stânga sus

Adăugați modulul de text nr. 2 în coloană

Adăugați conținut H3

Treceți la următorul modul de text. Adăugați conținutul citatului evidențiat H3 în caseta de conținut.

Setări text H3

Treceți la fila de proiectare a modulului și modificați setările de text H3 după cum urmează:

• Titlul 3 Stilul fontului: cursiv
• Rubrica 3 Dimensiune text: 2.6rem (Desktop), 1.7rem (Tabletă), 1.3rem (Telefon)
• Rubrica 3 Înălțimea liniei: 1.4em

Spațiere

Adăugați și câteva valori de marjă personalizate pe diferite dimensiuni de ecran.

• Marja superioară: 150 px
• Marja inferioară: 150 px
• Marja stângă: 150 px (desktop), 70 px (tabletă), 30 px (telefon)
• Marja dreaptă: 150 px (desktop), 70 px (tabletă), 30 px (telefon)

Animaţie

Și completați setările modulului modificând setările de animație după cum urmează:

• Stil de animație: Fade
• Întârziere animație: 2000 ms
• Curba de viteză a animației: ușurință-intrare-ieșire

Adăugați modulul de text nr. 3 în coloană

Adauga continut

Treceți la următorul și ultimul modul, care este un alt modul de text. Adăugați un simbol de cotație în caseta de conținut.

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text.

• Font text: Playfair Display
• Culoarea textului: #eaeaea
• Dimensiune text: 500 px
• Înălțimea liniei de text: 0em
• Alinierea textului: dreapta

Animaţie

Utilizați următoarele setări de animație în continuare:

• Stil de animație: Flip
• Regia de animație: Centru
• Întârziere animație: 1000 ms
• Intensitate animație: 200%
• Curba de viteză a animației: ușurință-intrare-ieșire

Poziţie

Și asigurați-vă că cotația este plasată în colțul din dreapta jos al containerului de rând.

• Poziție: Absolută
• Locație: în partea dreaptă jos

Salvați aspectele ofertelor în biblioteca Divi pentru reutilizare

După ce ați finalizat aspectul de ofertă la alegere, asigurați-vă că îl salvați în biblioteca Divi, astfel încât să îl puteți utiliza și pentru postările viitoare!

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Exemplul nr. 1

Desktop

Mobil

Exemplul nr. 2

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să deveniți creativi cu blocurile de aspect ale Divi. Mai precis, v-am arătat cum să adăugați citate animate evidențiate în cadrul postării dvs. pe blogul Gutenberg. Posibilitățile de proiectare sunt nelimitate, dar v-am oferit două exemple cu care puteți începe. Ați putut descărca gratuit fișierele JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.