Evidențierea pluginului Divi: Divi SuperTabs

Publicat: 2023-01-02

Divi SuperTabs este un plugin terță parte pentru Divi care adaugă un modul de tab la Divi Builder. Deși Divi Builder are deja un modul de file, acest plugin oferă câteva opțiuni de design și caracteristici unice care vă permit să creați file mai complexe pentru site-ul dvs. Divi. În această evidențiere a pluginului, vom vedea ce poate face Divi SuperTabs și vă va ajuta să decideți dacă acesta este pluginul potrivit pentru site-ul dvs.

Să ajungem la asta!

Instalarea Divi SuperTabs

Instalarea Divi SuperTabs este simplă și simplă. Navigați la pagina pluginului din tabloul de bord WordPress, apoi faceți clic pe încărcați pluginul. Încărcați fișierul ZIP pentru plugin, apoi activați pluginul odată ce este instalat.

Pluginul Divi Evidențiați Instalarea Divi SuperTabs

Modulul Divi SuperTabs

Un nou modul este adăugat la Divi Builder numit SuperTabs. Acest modul vă permite să adăugați file complexe și personalizabile la aspectul dvs. Divi. Să ne uităm la principalele caracteristici.

Pluginul Divi Evidențiați Divi SuperTabs Adaugă modul

Setările filei Divi SuperTabs

Sub fila de conținut pentru setările SuperTabs, puteți adăuga file. Fiecare filă are, de asemenea, propriul meniu de setări, permițându-vă să personalizați designul fiecărei file individuale.

Pluginul Divi Evidențiați Fila nouă Divi SuperTabs

Setări filei – Conținut

În setările fiecărei file, puteți adăuga conținutul filei, cum ar fi titlul, subtitrarea și conținutul filei.

Pluginul Divi Evidențiați conținutul filei Divi SuperTabs

În secțiunea Aspect, puteți selecta dintr-o varietate de aspecte pentru conținutul din fila dvs. În exemplul de mai sus, am folosit aspectul Image Left, Text, Button.

Pluginul Divi Evidențiați aspectul filei Divi SuperTabs

Alternativ, puteți selecta opțiunea bibliotecă pentru a utiliza orice aspect al Bibliotecii Divi într-o filă, permițându-vă să creați modele mai complexe folosind alte module Divi.

Pluginul Divi Evidențiați Aspectul bibliotecii Divi SuperTabs 2

Pentru a utiliza un articol din bibliotecă cu Divi SuperTab, salvați aspectul dorit în Biblioteca Divi și asigurați-vă că îl adăugați la categoria „Conținut filelor”.

Pluginul Divi Evidențiați Divi SuperTabs Adaugă la bibliotecă

Apoi, selectați Bibliotecă sub setările de aspect al filei și adăugați aspectul Bibliotecii Divi.

Pluginul Divi Evidențiați Aspectul bibliotecii Divi SuperTabs

De asemenea, în fila de conținut a setărilor filei, puteți adăuga o pictogramă la fila dvs. SuperTab vă permite să utilizați pictogramele implicite ale Divi, pictogramele FontAwesome și chiar să încărcați propriile pictograme personalizate.

Pluginul Divi Evidențiați pictograma filei Divi SuperTabs

De asemenea, puteți seta o filă pentru a trimite la o adresă URL, astfel încât linkul să se deschidă atunci când fila este selectată. Acesta este o modalitate utilă de a crea linkuri către site-uri web externe alături de conținutul filei. De asemenea, puteți seta un link pentru întregul modul, precum și în setările Link.

Pluginul Divi Evidențiați linkul Divi SuperTabs Tab

În cele din urmă, puteți seta un fundal unic pentru fila dvs. Setările de fundal includ toate opțiunile de fundal implicite ale Divi (culoare, gradient, imagine, video, model și mască). În acest exemplu, am adăugat un fundal de culoare simplă la această filă.

Pluginul Divi Evidențiați fundalul filei Divi SuperTabs

Setări filă – Design

Sub fila Design a setărilor filei, puteți găsi multe opțiuni pentru a personaliza complet aspectul filei. Când personalizați designul în acest fel, modificările sunt aplicate numai filei individuale pe care o editați, nu și restului filelor. Opțiunile de design din setările individuale ale filei sunt aceleași cu opțiunile de design din setările SuperTabs, deci diferența principală este dacă doriți ca designul dvs. să se aplice la fiecare filă sau doar la o singură filă.

Cu setările de design, puteți edita aspectul navigației, al filei, al conținutului, al aspectului, al textului, al dimensiunii, al spațiilor etc. Vom trece peste toate opțiunile de design în detaliu mai târziu în acest articol.

Pluginul Divi Evidențiați Setările de proiectare a filei Divi SuperTabs

Setări filă – Avansat

În fila Avansat, aveți toate opțiunile implicite Advanced Divi, inclusiv CSS personalizat, Condiții, Vizibilitate, Tranziții, Poziție și Efecte de defilare.

Pluginul Divi Evidențiați Fila SuperTabs Divi Setări avansate

Fila Conținut Divi SuperTabs

Acum că am acoperit setările pentru filele individuale din modulul Divi SuperTabs, haideți să explorăm setările generale pentru modulul SuperTabs, începând cu fila de conținut. După cum am abordat deja, aici este locul în care adăugați fiecare dintre file.

Săgeată

Cu această opțiune, puteți adăuga o săgeată la filele dvs. care se va afișa în fila activă. Puteți vedea un exemplu în acest sens mai sus. Culoarea săgeții poate fi personalizată în fila de design.

Pluginul Divi Evidențiați săgeata Divi SuperTabs

Legătură

Această opțiune este o opțiune implicită a modulului Divi, care vă permite să conectați modulul la o adresă URL.

fundal

Puteți adăuga un fundal la modul cu opțiunea Fundal. Când adăugați un fundal în acest fel, culoarea se întinde pe fila de navigare și în zona de conținut. În acest exemplu, am adăugat un fundal galben la modul. Există și alte opțiuni de fundal în fila Design, care vă permit să adăugați culori diferite pentru file și zona de conținut. Vom trece peste aceste opțiuni de design în secțiunea următoare.

Pluginul Divi Evidențiați fundalul Divi SuperTabs

Fila Design Divi SuperTabs

Fila de design este locul în care acest plugin strălucește cu adevărat. Există multe opțiuni pentru a personaliza fiecare aspect al modulului SuperTabs. Hai să aruncăm o privire.

Setări de navigare

În setările Nav, puteți modifica plasarea navigației, alinierea și plasarea subtitrarilor. În exemplul de mai sus, plasarea de navigare este setată la Stânga. De asemenea, puteți face filele lipicioase, astfel încât să se lipească de partea de sus a paginii în timp ce derulați prin conținutul filei.

Pluginul Divi Evidențiați Setările Nav Divi SuperTabs

De asemenea, în setările de navigare, puteți personaliza complet distanța de navigare prin modificarea lățimii de navigare, a marginii, a umpluturii și a jgheabului. În acest exemplu, am eliminat căptușeala din stânga și am schimbat lățimea de navigare la 20%. În cele din urmă, puteți personaliza culorile și designul general al barei de navigare schimbând culoarea de fundal, adăugând colțuri rotunjite sau adăugând un chenar. Am schimbat fundalul barei de navigare în verde.

Pluginul Divi Evidențiați Setările Nav Divi SuperTabs 2

Setări filei

În setările filei, puteți personaliza umplutura filelor, culoarea de fundal a filei active și culoarea de fundal a filei inactive. De asemenea, puteți modifica plasarea pictogramei, alinierea, marginea și dimensiunea. În cele din urmă, puteți alege să ascundeți pictograma sau titlul, să adăugați colțuri rotunjite sau să adăugați un chenar.

În exemplul de mai jos, am schimbat culoarea de fundal a filei active într-un verde mai deschis și am schimbat plasarea pictogramei la stânga și am adăugat o marjă a pictogramei.

Pluginul Divi Evidențiați fundalul filei active Divi SuperTabs

Setări săgeată

În setările săgeții, puteți schimba culoarea săgeții. L-am schimbat într-un verde mai deschis pentru a se potrivi cu culoarea de fundal a filei active.

Pluginul Divi Evidențiați Setările săgeții Divi SuperTabs

Setari de continut

Aici puteți personaliza designul general pentru conținutul din file. Puteți adăuga căptușeală, colțuri rotunjite și un chenar. Am adăugat câteva umplutură la secțiunea de conținut pentru a aduce un echilibru mai bun designului general.

Pluginul Divi Evidențiați Setările de conținut Divi SuperTabs

Aspect

În setările de aspect, puteți seta bara de navigare să fie inserată, afișată în cadrul filei.

Divi Plugin Evidențiați Divi SuperTabs Inset

Textul articolului de navigare

Aici puteți personaliza fontul elementului de navigare, greutatea fontului, stilul, culoarea, dimensiunea, spațierea, înălțimea liniei și umbra. Aici am schimbat culoarea fontului elementului de navigare în alb, aceasta schimbă și culoarea pictogramei.

Pluginul Divi Evidențiați fontul Divi SuperTabs Nav

Textul elementului de navigare activ

Setările Active Nav Item Text au aceleași setări ca și setările pentru textul elementului de navigare, dar aceste opțiuni se aplică numai elementului de navigare atunci când este activ (selectat). Aici am schimbat culoarea textului elementului de navigare activ în portocaliu.

Pluginul Divi Evidențiați culoarea textului de navigare activă a Divi SuperTabs

Subtitlu text

Aici puteți personaliza designul textului subtitrării. Opțiunile sunt aceleași cu opțiunile textului de navigare.

Pluginul Divi Evidențiați textul subtitrarilor Divi SuperTabs

Text subtitlu filă activă

Și în această secțiune puteți personaliza designul activ al textului de subtitrare. Din nou, avem aceleași opțiuni de personalizare ca ultimele trei secțiuni, dar aceste setări se aplică doar subtitrarii atunci când este activă.

Alte setări de design

Pe lângă setările unice pe care le-am acoperit, există și alte opțiuni implicite, cum ar fi dimensionarea, chenarul de spațiere, umbra casetei, filtrele, transformarea și animația.

Pluginul Divi Evidențiați Setările de design Divi SuperTabs

Fila avansată Divi SuperTabs

Fila Avansat pentru Divi SuperTabs este destul de standard. Puteți adăuga CSS personalizat pentru a personaliza și mai mult modulul și puteți utiliza celelalte setări, cum ar fi condiții, vizibilitate, tranziții, poziție și efecte de defilare pentru a aduce designul SuperTabs la nivelul următor.

Pluginul Divi Evidențiați Divi SuperTabs Advanced

Exemple Divi SuperTabs

Iată câteva exemple despre cum puteți utiliza Divi SuperTabs.

Tabelul de prețuri

Primul exemplu este un tabel de prețuri. Conținutul provine din pachetul de layout Reparare dispozitiv. Am salvat fiecare dintre tabelele de prețuri în Biblioteca Divi și am folosit caracteristica de aspect Bibliotecă pentru a adăuga conținutul în fiecare filă. Acest lucru facilitează adăugarea unor aspecte de conținut mai complexe în file.

Pluginul Divi Evidențiați Divi SuperTabs Exemplul 1

Cum functioneaza

Al doilea exemplu folosește filele pentru a organiza diferiți pași ai unui proces. Acest aspect a fost realizat folosind pachetul de layout Estate Planning. Am folosit setările individuale ale filei pentru a seta o culoare și un fundal diferite pentru fiecare dintre file.

Pluginul Divi Evidențiați Divi SuperTabs Exemplul 2

Caracteristici

Exemplul final folosește pachetul Divi Home Staging Layout. Am folosit SuperTabs pentru a organiza unele dintre caracteristicile evidențiate pe pagină. În plus, am folosit pictograme personalizate pentru a adăuga un oarecare interes vizual filelor.

Pluginul Divi Evidențiați Divi SuperTabs Exemplul 3

Cumpărați Divi SuperTabs

Divi SuperTabs este disponibil pe Divi Marketplace. Piata de desfacere. Costă 29 USD pentru utilizarea nelimitată a site-ului web și 1 an de asistență și actualizări. Prețul include și o garanție de rambursare a banilor de 30 de zile.

Gânduri finale

Divi SuperTabs este un plugin plin de caracteristici pentru Divi Builder, care vă permite să creați file complexe pentru site-ul dvs. Divi. Punctul forte al acestui plugin este cu siguranță abilitatea de a importa machete din biblioteca dvs. Divi ca filă, permițându-vă să adăugați conținut complex de file care conține alte module Divi. În plus, personalizarea pluginului este excelentă. Cu toate setările disponibile, puteți personaliza și ajusta filele pentru a obține aspectul exact pe care îl doriți.

În general, Divi SuperTabs este foarte ușor de configurat și utilizat și puteți crea file grozave pentru a organiza informațiile de pe site-ul dvs. Dacă vă simțiți limitat de modulul de file nativ al Divi sau doriți să utilizați conținutul Bibliotecii Divi în filele dvs., acest plugin ar putea fi o opțiune excelentă pentru dvs.

Ne-ar plăcea să auzim de la tine! Ați încercat Divi SuperTabs? Spune-ne în comentarii ce părere ai despre asta!