Evidențierea pluginului Divi: conținut intens

Publicat: 2017-10-08

Divi Builder include un modul de blog pentru a afișa postări bazate pe categorii, fie în lățime completă, fie în aspectul grilei. Ați dorit vreodată mai mult control asupra aspectului blogului dvs.? S-ar putea să vă intereseze un plugin terță parte numit Content Intense.

Content Intense este un plugin de la BeSuperfly care adaugă noi machete și funcții de stil pentru a oferi modulului blogului dvs. un aspect nou. Se bazează pe modulul de blog standard, deci include toate caracteristicile familiare.

(Pluginul este disponibil de pe site-ul dezvoltatorului.)

În acest punct de evidențiere a pluginului, vom arunca o privire asupra caracteristicilor și vom vedea cum arată pe pagină. Îl voi încărca și în Extra (dar, desigur, este compatibil și cu Divi).

Instalarea conținutului intens

Încărcare și conținut activ intens ca orice plugin. Odată ce pluginul a fost activat, veți vedea un nou element de meniu în Setări în tabloul de bord numit Activare intensă a conținutului de conținut. Faceți clic pe acesta și introduceți cheia API și adresa de e-mail și salvați modificările.

Modulul de conținut intens

Un nou modul este adăugat la Divi Builder numit Content Intense.

Fila Conținut vă permite să afișați numai postări, numai pagini sau pagini și postări, numărul de afișat, categoriile și numărul de offset. Afișați imaginea prezentată, meta (care vă permite să alegeți un separator), extras, navigare și fundal. După cum veți vedea, simplific serios numărul de opțiuni din setări.

Una dintre cele mai unice caracteristici este că categoriile WordPress sunt adăugate la pagini. Dacă alegeți să afișați paginile, acestea sunt selectate atunci când alegeți categoriile lor.

Fila Proiectare vă permite să selectați una dintre cele 5 machete, să activați suprapunerea, să ajustați textul antetului, textul corpului și meta textul. De asemenea, ajustați marginea, butonul, spațiul și animația.

Avansat decât include funcțiile de relație a butoanelor, astfel încât să puteți specifica valoarea atributului rel al linkului. Acest lucru este minunat pentru crearea de marcaje, setarea unui link către nofollow etc.

Setări implicite intense de conținut

Setările implicite afișează imaginea prezentată, cu Gravatar al autorului care se suprapune în partea de jos a imaginii. Urmează butonul meta, titlul, o linie, extrasul postului și butonul Citiți mai multe, cu animație cu mouse-ul. Am adăugat un fundal în secțiune pentru a-l ajuta să iasă în evidență.

În acest exemplu, am adăugat un asterisc pentru meta-separator, am schimbat numărul de fragmente de la 270 la 100 și am înlocuit butonul Citiți mai multe cu text centrat. În loc de dată, arată cu cât timp a fost publicată postarea. Am dezactivat numărul de comentarii.

Acesta adaugă o anumită culoare fundalului din spatele textului. De asemenea, am mutat butonul spre dreapta și am setat extrasul la 150.

Există cinci machete diferite. Exemplele pe care le-am văzut până acum folosesc Atlas - aspect vertical cu 3 coloane, cu avatar. Să ne uităm la fiecare aspect. Folosesc setările implicite.

Acesta este Alpi. Este un aspect alternativ cu o coloană orizontală. Fundalul textului se potrivește cu culoarea de fundal pe care am ales-o în secțiune. Acestea sunt cărți plate cu efecte de plutire pentru buton.

Acesta este Himalaya, un aspect vertical cu 3 coloane, care folosește imaginea prezentată a postului ca fundal. De asemenea, folosește animația butonului. Acest text este mai greu de văzut fără ajustări. O vom remedia mai târziu cu o suprapunere.

Acesta este Rockies - un aspect vertical cu 3 coloane cu efecte de plutire. De asemenea, plasează imaginea prezentată ca fundal. Efectele hover dezvăluie extrasul complet și butonul de citire mai mult. Vom face câteva ajustări pentru a face textul mai lizibil.

Acesta este Andes - un aspect vertical cu 1 coloană, cu avatar. Folosește o versiune decupată a imaginii prezentate și folosește linii mici pentru a separa meta și linii mai mari pentru a separa postările.

În partea de jos a paginii veți vedea butoane de navigare. Le puteți dezactiva sau adăuga propriul text. Acestea iau stilul celorlalte butoane, așa că, atunci când ați stilat mai multe butoane, le-ați stilat și pe acestea. De asemenea, puteți utiliza text în loc de buton.

Exemplu - Alpi cu Atlas

Am creat acest aspect de blog folosind 2 module Content Intense. Primul folosește aspectul Alpilor fără navigare. Al doilea modul folosește Atlas. Am setat offset-ul la 1, astfel încât să nu afișeze aceeași imagine ca primul modul. Am adaptat culoarea fontului la Arimo (un favorit al meu). Butoanele folosesc un gradient. La plutire, acestea merg la o culoare solidă și măresc spațierea literelor. Butonul de navigare se potrivește.

Exemplu - Alpi

Sunt un fraier pentru alternarea aspectelor. Îmi place aspectul Alpilor fără nicio modificare, așa că tocmai am făcut câteva mici ajustări. Am adăugat o margine roșie, o suprapunere roșie și am schimbat culorile butonului și ale antetului. De asemenea, am schimbat fontul în Dosis și l-am îndrăzneț. Aceasta arată suprapunerea pe hover.

De fapt, îmi place mai bine fără graniță. Acesta afișează butonul pe hover.

Exemplu - Anzi

Acest exemplu folosește 6 module Content Intense diferite - toate folosind Andes și fiecare este compensată cu 1 mai mult decât modulul anterior. Am adăugat un fundal secțiunii cu o suprapunere. Fontul antet este Comfortaa. Ultimul modul utilizează navigarea. Am schimbat butoanele în text.

Iată o privire asupra proiectării normale a unei singure coloane. Am adăugat, de asemenea, o suprapunere cu mouse-ul. Orice altceva este implicit.

Exemplu - Himalaya

Acesta folosește Himalaya cu o suprapunere în spatele textului. Am dezactivat meta, am schimbat textul în lumină, am schimbat stilul butonului în alb și am redus fontul butonului la 12 puncte. Textul antetului este Bitter. Singura animație pe care am inclus-o este pentru trecerea la buton. Acest lucru ar face un CTA excelent sau linkuri către pagini care descriu serviciile dvs.

Exemplu - Rockies

Îmi place aspectul Rockies. Are un efect de umbră frumos, cu animație cu hover, care afișează textul și butonul de citire mai mult. Aș fi putut așeza o suprapunere de text, dar nu am vrut să acopăr imaginea. În schimb, am schimbat textul în lumină. De asemenea, am schimbat culorile meta și butonului și am schimbat separatorul într-o liniuță.

Desigur, o suprapunere arată bine. Am adăugat o suprapunere neagră și am schimbat opacitatea, astfel încât o mică parte din imagine să apară. Data din colțul din stânga sus folosește, de asemenea, suprapunerea. Am schimbat butonul în text și l-am mutat spre dreapta. Îmi plac acele trei puncte și linia din partea de jos a cărților. Este un mic detaliu care adaugă o notă de flare vizuală.

Exemplu - Extra

Content Intense funcționează excelent cu Extra. A trebuit să fac câteva ajustări minore doar acolo unde am folosit Andes. În exemplul meu, așezasem un fundal alb pentru zona de text. Deoarece am folosit text alb, l-am schimbat pur și simplu în întuneric. Exemplul de mai sus este Rockies. Singura diferență a fost culoarea textului pentru linkul de citire mai mult.

Stiluri descărcabile

Animațiile pot fi adăugate prin CSS. Site-ul web al dezvoltatorului prezintă mai multe animații pe care le-au creat, cum ar fi cea de mai sus care mută textul pe hover. Acest stil și alte stiluri pot fi descărcate de la acestea într-un fișier JSON.

Licență și documentație

Alegeți dintre două licențe (nici una nu permite revânzarea):

  • Licență standard: pentru utilizare pe un singur site web. Acesta include 1 pentru proiectul de dezvoltare și 1 pentru proiectul Live.
  • Licență nelimitată: poate fi utilizată în site-uri web nelimitate atât pentru uz personal, cât și pentru client.

Actualizările sunt automate. Content Intense este disponibil de pe site-ul dezvoltatorului.

Documentația este dovedită pe site-ul dezvoltatorului. Vă duce prin ajustări și oferă demonstrații pe parcurs.

Gânduri finale

Content Intense are câteva caracteristici de aspect frumoase și vor fi adăugate și mai multe aspecte în viitor, deci acesta este doar începutul. Fiecare dintre aspectele pot fi stilizate cu ajustările modulului și personalizate chiar mai departe cu CSS. Este intuitiv de utilizat. Dacă sunteți interesat să oferiți blogului dvs. un aspect diferit, Content Intense ar putea fi pluginul pe care îl căutați.

Vrem sa auzim de la tine. Ați încercat Content Intense? Spuneți-ne despre experiența dvs. cu aceasta în comentariile de mai jos.

Imagine prezentată prin LanKoga / shutterstock.com