Evidențierea pluginului Divi: Divi Accordions Plus

Publicat: 2023-01-30

Divi Accordions Plus este un modul terță parte pentru Divi Builder care adaugă un nou constructor de acordeon. Folosiți mai multe module Divi Accordions Plus împreună pe o singură pagină și funcționează ca un singur acordeon, așa că atunci când unul se deschide, altul se închide. Stilați acordeoanele împreună sau individual, afișați pictograme și imagini și multe altele. În această postare, vom analiza Divi Accordions Plus, vom vedea ce poate face și cât de ușor este de utilizat pentru a vă ajuta să decideți dacă este produsul potrivit pentru nevoile dvs. Vom folosi Poke Restaurant About Page Layout ca fundal pentru acest tutorial. Deci, dacă nu l-ați descărcat deja, îl puteți lua acum cu abonamentul Divi.

Modulul Divi Accordions Plus

Divi Accordions Plus adaugă un nou modul la Divi Builder. Pur și simplu adăugați modulul oriunde doriți în layout-urile dvs. Divi.

Adăugarea Accordions Plus la aspect

Submodule de acordeon

Submodulele creează acordeoane individuale. Adăugați câte doriți făcând clic pe Adăugați un articol nou. De asemenea, le puteți clona, ​​rearanja și șterge. Acestea urmează setările din modulul principal, dar au setări specifice de conținut și design pe care va trebui să le utilizați.

Adăugați un articol nou

Conţinut

Adăugați un titlu, un subtitrare (pe care le puteți dezactiva dacă doriți) și conținutul corpului. Acestea sunt elementele principale ale acordeonurilor.

Conținut de acordeon

Stare articol

Item State setează starea deschisă sau închisă a acordeonurilor atunci când pagina se încarcă. Este dezactivat implicit, deci acordeoanele sunt închise. Nu am deschis acordeonul în acest exemplu. S-a deschis automat când am activat Item State.

Stare activă a acordeonului

Divi Accordions Plus Accordion Submodules Design Settings

Fila Design pentru submodule controlează setările pentru acel acordeon. Le puteți personaliza în setările modulului principal dacă doriți să arate la fel, dar va trebui totuși să utilizați aceste setări pentru a alege imaginile și pictogramele. Să ne uităm la setările care sunt unice pentru submodul.

Pictograma din stânga

Pictograma Stânga controlează elementul grafic care apare în stânga acordeonului. Activați-l sau dezactivați-l, lăsați-l să se rotească deschis, alegeți o pictogramă sau o imagine și stilați-o cu instrumentele standard Divi. O imagine sau o pictogramă, cum ar fi un logo, funcționează excelent în partea stângă. În acest exemplu, am selectat o imagine și am activat Rotire pictogramă stânga (Open Toggle), astfel încât imaginea sa rotit când am deschis acordeonul.

Activarea pictogramei din stânga

Pentru acest exemplu, am ajustat culoarea de fundal și pictogramă.

Stilul pictogramei din stânga

Pictograma dreapta

Pictograma dreapta controlează elementul grafic care apare în partea dreaptă a acordeonului. Activați-l sau dezactivați-l, lăsați-l să se rotească deschis, alegeți o pictogramă sau o imagine și stilați-o cu instrumentele standard Divi. O pictogramă care indică starea deschisă sau închisă a acordeonului funcționează excelent în partea dreaptă.

Adăugarea pictogramei din dreapta

În acest exemplu, am selectat o pictogramă diferită, am schimbat culoarea pictogramei, culoarea de fundal și am adăugat un chenar cu stil.

Stilul pictogramei din dreapta

Setări de conținut Divi Accordions Plus

Fila Conținut include setările de bază Divi și câteva setări care sunt specifice Divi Accordions Plus.

Viteză

Viteza controlează cât de repede se deschid și se închid comutatoarele. Este setat în milisecunde.

Setarea vitezei de comutare a acordeonului

Modul

Modul schimbă modul în care funcționează acordeoanele.

Modul acordeon

Modul acordeon vă permite să alegeți între mai multe comutări active și o singură comutare activă. Comutarile active multiple lasă toate comutatoarele deschise până când utilizatorul le închide. Exemplul de mai jos arată comutări active multiple.

Un exemplu de comutare multiple active

Comutare unică activă permite doar o comutare deschisă la un moment dat. Închide comutatorul deschis când utilizatorul selectează un comutator nou. Acest exemplu arată comutări active unice.

Modul de comutare activ unic, modul standard al modului în care funcționează acordeoanele

Modul global acordeon

Modul global acordeon este o nouă caracteristică interesantă. Permite o singură comutare deschisă, indiferent de numărul de module Divi Accordion Plus de pe pagină. Activați modul global acordeon în fiecare modul Divi Accordions Plus de pe pagina în care doriți să utilizați modul global acordeon. Orice module care nu au acest mod activat nu vor fi afectate de mod. Acest lucru este deosebit de grozav pentru a crea acordeoane cu mai multe coloane în același rând.

În exemplul de mai jos, am adăugat un alt modul Divi Accordions Plus și am activat Modul Global Accordion pentru ambele. Când deschid un acordeon într-unul dintre module, acordeonul deschis din celălalt modul se închide.

Comutare globală

Setări de design Divi Accordions Plus

Setările Design controlează stilurile implicite pentru toate acordeoanele. Aceste setări sunt suprascrise de setările individuale ale submodului.

Antet

Antetul controlează culoarea de fundal, culoarea de fundal de comutare deschisă, spațierea, chenarele și umbra casetei. În acest exemplu, am schimbat culorile de fundal pentru comutatorul deschis și închis.

Culori de fundal pentru antetul articolului

Pictograma din stânga

Pictograma din stânga controlează culoarea pictogramei, culoarea de comutare deschisă a pictogramei, culoarea de fundal, culoarea de fundal de comutare deschisă, spațierea, chenarul și umbra casetei pentru întregul modul de acordeon. Dacă doriți să aveți uniformitate în stil, cel mai bine este să setați aici culorile pictogramei și apoi să selectați individual pictograma pentru fiecare comutare din acordeon. În acest exemplu, am adăugat și am stilizat un chenar în jurul pictogramelor pentru a le face mai perfect cu culoarea de fundal.

Stilizarea pictogramei din stânga

Pictograma dreapta

Pictograma Dreapta controlează culoarea pictogramei, culoarea de comutare a pictogramei deschise, culoarea de fundal, culoarea de fundal de comutare deschisă, spațierea, chenarul și umbra casetei. În exemplu, am ajustat culorile de comutare deschisă, chenarul și am schimbat culoarea pictogramei pe comutatorul deschis.

Stilizarea pictogramei din dreapta

Titlu

Titlul controlează culoarea de fundal a titlului, deschideți comuta culoarea de fundal, spațierea, chenarul și umbra casetei.

Setarea culorii de fundal a titlului

Corp

Corpul controlează corpul articolului, spațierea, chenarul și umbra casetei. Am ajustat chenarul în acest exemplu.

Stilul corpului la acordeon

Antet

Textul antetului controlează textul de comutare deschis și vă permite să controlați titlul și subtitrarea independent din același meniu. Include toate controalele standard de text. Am ajustat culorile titlurilor și subtitrarilor, am schimbat dimensiunea fontului titlului și am setat-o ​​la aldine în exemplul de mai jos.

Stilul textului antetului

Titluri de corp

Titluri de corp include toate controalele standard de text pentru titlurile de corp pe care le-ați specificat în zona de conținut. În exemplul de mai jos, am adăugat atât o etichetă de titlu H2, cât și H3 la conținutul corpului. Am schimbat greutatea fontului și culoarea pentru ambele titluri din conținutul corpului.

Stilizarea titlurilor corpului

Corpul textului

Textul corpului include toate controalele standard pentru textul textului din zona de conținut. În acest exemplu, am schimbat fontul, l-am făcut italic, am schimbat culoarea și am schimbat dimensiunea fontului.

Stilul textului corporal

Demo finală cu Divi Poke Restaurant

Așa arată acordeonul final în aspectul paginii Despre noi pentru pachetul de aranjament al restaurantului Divi Poke.

Rezultatul final cu antet, subsol și aspectul paginii

Divi Accordions Plus Demo

Divi Accordions Plus vine cu șapte demonstrații pentru a începe.

Demo 1

Prima demonstrație include un acordeon cu mai multe coloane cu pictograme multicolore. Acordeoanele au un singur chenar, iar conținutul este mărginit pe toate părțile.

Divi Accordions Plus Demo

Demo 2

Al doilea nostru demo prezintă acordeonul într-o singură coloană cu lumini albastre și umbre de casetă. Pictogramele au fundal albastru.

Divi Accordions Plus Demo

Demo 3

Al treilea nostru demo folosește un aspect cu două coloane și utilizează culori diferite pentru fiecare acordeon.

Divi Accordions Plus Demo

Demo 4

Al patrulea demo folosește un acordeon cu o singură coloană, cu culori calde și margini luminoase.

Divi Accordions Plus Demo

Demo 5

Demo five folosește titluri și pictograme roșii și include fundaluri bronzate pentru corp și fundaluri verzi pentru anteturi. Acordeoanele sunt așezate pe două coloane.

Divi Accordions Plus Demo

Demo 6

A șasea demonstrație folosește fundaluri de antet albastru deschis cu un albastru mai închis pentru textul titlului și fundalul pictogramei pentru acordeonul deschis.

Divi Accordions Plus Demo

Demo 7

Demo Seven afișează fiecare dintre elementele acordeonului în mod independent, cu umbre casete pentru fiecare element.

Divi Accordions Plus Demo

Cumpărați Acordeoane Divi Plus

Divi Accordions Plus este disponibil pe Divi Marketplace pentru 9 USD. Include utilizare nelimitată, o garanție de rambursare a banilor de 30 de zile și un an de asistență și actualizări.

Gânduri de sfârșit

Acesta este aspectul nostru asupra Divi Accordions Plus. Acesta este un modul simplu, dar include o mulțime de funcții pentru acordeoane. Îmi place mai ales că funcționează cu mai multe module pe aceeași pagină. Mi s-au părut că setările sunt intuitive și fiecare setare pe care am vrut să o ajustez era acolo. Dacă sunteți interesat de un constructor de acordeoane puternic, ușor de utilizat, Divi Accordions Plus merită să vă uitați.

Vrem sa auzim de la tine. Ați încercat Divi Accordions Plus? Spune-ne în comentarii ce părere ai despre asta.