Cum se exportă un aspect de pagină Divi care are cod personalizat

Îmi place să pot exporta și importa un aspect de pagină Divi. În doar câteva clicuri, pot avea toate elementele de design într-un fișier json pachet convenabil, care poate fi stocat pentru un alt proiect. Dar dacă aspectul paginii dvs. depinde de codul extern personalizat (CSS sau Javascript)? Desigur, veți dori să includeți acel cod în exportul aspectului paginii pentru a menține stilul și funcționalitatea elementelor paginii la locul lor.

În acest tutorial, voi arăta cum să includ cod personalizat (extern) în aspectul paginii dvs., astfel încât designul și funcționalitatea aspectului să rămână la exportarea și importarea aspectului pe un alt site.

Să începem!

Ideea de bază explicată

Dacă ați adăugat CSS personalizat (fie în Theme Customizer, fie în Setări pagină) care este utilizat pentru a stiliza un aspect specific paginii Divi, CSS este stocat extern într-un fișier diferit. Același lucru este valabil pentru orice javascript care ar fi putut fi adăugat la antetul dvs. sub opțiunile temei. Deoarece acest cod este stocat extern, acesta nu va fi exportat automat cu aspectul paginii Divi.

Pentru a exporta cod personalizat împreună cu aspectul paginii Divi, putem utiliza modulul Cod Divi pentru a stoca codul în conținutul paginii dvs. În acest fel, codul din modulul Cod va fi exportat cu aspectul paginii. Acest lucru este util pentru stocarea aspectelor personalizate pe propriul computer. În acest fel, ori de câte ori importați aspectul pe un alt proiect, veți avea la dispoziție funcționalitatea și stilul personalizat al paginii. De asemenea, puteți utiliza această tehnică pentru a salva și exporta secțiuni individuale, rânduri sau module care folosesc și cod personalizat.

Această metodă are sens doar pentru pagini individuale sau elemente ale unei pagini pe care doriți să le salvați pentru o utilizare viitoare. Acesta nu ar fi cel mai bun mod de a salva machetele pentru un întreg site. Ar avea mai mult sens să profitați de opțiunile de portabilitate ale Divi, care vă permit să exportați setările Customizerului tematic și / sau Opțiunilor temei.

Abonați-vă la canalul nostru Youtube

Cum se exportă un aspect de pagină Divi care are cod personalizat utilizând module de cod Divi

Să presupunem că aveți un aspect de pagină Divi care utilizează CSS și Javascript personalizate și doriți să includeți acel cod personalizat în fișierul dvs. de export (.json). Mai întâi va trebui să deschideți pagina pe care doriți să o exportați și să implementați constructorul Divi.

Pentru acest exemplu, am o pagină care folosește aspectul paginii de destinație a panificației. Am adăugat câteva CSS și Javascript personalizate pentru a comuta un formular de contact când fac clic pe un buton.

CSS personalizat a fost adăugat la setările de pagină CSS personalizate în fila avansată.

Javascript-ul personalizat a fost adăugat la eticheta antet din Opțiunile temei Divi din fila Integrare.

Adăugați CSS personalizat la pagină folosind un modul de cod

Pentru a exporta CSS cu aspectul paginii, trebuie să-l adăugăm la un modul de cod din pagină. Pentru a face acest lucru, deschideți setările paginii copiați CSS personalizat în clipboard.

Iată CSS-ul personalizat pe care îl copiez pentru acest exemplu:

#toggle-container {
  display:none;
}
.toggle-active {
  display: block !important;
}

Apoi adăugați un modul de cod pe pagina dvs. Puteți adăuga modulul Cod oriunde doriți. De exemplu, dacă doriți să îl adăugați în partea de sus a paginii, ar putea fi mai ușor de găsit și editat mai târziu. Sau puteți plasa modulul de cod lângă elementul pe care știți că îl vizează CSS. În acest caz, CSS este utilizat pentru a ascunde și a afișa modulul meu formular de contact. Deci, voi adăuga modulul de cod direct sub modulul Formular de contact.

În setările modulului Cod, lipiți CSS-ul personalizat extern pe care l-ați copiat și apoi lipiți-l în conținutul modulului de cod. Deoarece adăugați CSS la conținutul paginii, va trebui să înfășurați CSS într-o etichetă de stil. Iată cum va arăta codul CSS în modulul de cod:

<style>
#toggle-container {
  display:none;
}
.toggle-active {
  display: block !important;
}
</style>

După ce ați terminat, este o idee bună să adăugați o etichetă de administrator la modulul de cod pentru referință ulterior. De exemplu, i-ai putea da numele „cod CSS”, astfel încât să știi ce este atunci când privești aspectul în vizualizarea wireframe.

După aceea, salvați setările modulului de cod și ați terminat.

Adăugați Javascript la pagina folosind un modul de cod

Apoi, veți dori să faceți același lucru pentru Javascript-ul personalizat, care este antetul sub Opțiuni teme. Copiați codul în clipboard și apoi reveniți la pagina dvs. cu Divi Builder activ. Apoi adăugați un alt modul de cod oriunde pe pagină. Am pus-o pe a mea direct sub modulul Formular de contact pentru că știu că acest javascript se aplică doar acelui element, dar îl puteți adăuga oriunde.

După ce adăugați modulul de cod, lipiți codul Javascript pe care l-ați copiat în caseta de conținut. Asigurați-vă că codul este înfășurat într-o etichetă de script, deoarece este Javascript.

<script>
jQuery(document).ready(function(){
 jQuery(".toggle-trigger").click(function(){
 jQuery("#toggle-container").toggleClass("toggle-active");
 });
});
</script>

Dă modulului de cod o etichetă de administrator (cum ar fi „Cod JS”) pentru o referință ușoară.

Deoarece aceste două module de cod nu au niciun cod care să adauge conținut real paginii, modulele nu vor rupe designul paginii, așa că nu este nevoie să vă faceți griji acolo.

Cum se exportă aspectul paginii

Acum sunteți gata să exportați aspectul paginii. Pentru a exporta un aspect de pagină utilizând Divi Builder, deschideți meniul de setări și faceți clic pe pictograma portabilitate. În fereastra popup de portabilitate, introduceți un nume („Aspect personalizat de pagină”) și faceți clic pe butonul Export Divi Builder Layout.

Aceasta va exporta fișierul json pe computer.

Acum, fișierul dvs. json este gata pentru un alt proiect cu codul personalizat complet funcțional.

Cum să importați aspectul paginii

Pentru a încărca fișierul json într-o pagină nouă, deschideți pagina în care doriți să importați aspectul. Asigurați-vă că Divi Builder este activ. Apoi, tot ce trebuie să faceți este să glisați și să fixați fișierul json pe pagină. Modul de portabilitate apare automat, permițându-vă să alegeți opțiunea de a înlocui conținutul existent sau să creați o copie de rezervă în prealabil. Deoarece nu este nevoie să înlocuiți niciun conținut, tot ce trebuie să faceți este să faceți clic pe butonul de importare și acesta este încărcat instantaneu pe pagină.

Puneți codul înapoi acolo unde aparține

Odată ce ați importat cu succes aspectul paginii în pagina dvs., poate fi necesar să repuneți CSS și JS acolo unde îi aparține. Dacă doriți ca CSS să modeleze doar pagina curentă, puteți adăuga CSS la setările paginii CSS personalizat, unde era înainte de a începe. Și, dacă doriți ca CSS să fie disponibil pe toate paginile de pe site-ul dvs., puteți adăuga CSS la CSS suplimentar în setările Personalizator temă.

De asemenea, vă recomandăm să adăugați codul Javascript înapoi la antetul temei dvs. din Opțiuni temă> Integrare acolo unde a fost inițial. Sau vă puteți gândi să lăsați codul în modulul de cod, astfel încât scriptul să se aplice numai acelei pagini.

Gânduri finale

Când stocați aspectele paginii pentru o utilizare ulterioară, este important să stocați orice cod personalizat necesar și pentru pagină. Trucul este să folosiți modulul Cod Divi pentru a stoca codul în pagina însăși. Apoi, codul va rămâne în fișierul json exportat. De asemenea, vă ajută să etichetați aceste module de cod pentru a fi ușor de găsit ori de câte ori importați aspectul ulterior.

De asemenea, îmi dau seama că există și alte modalități prin care s-ar putea să găsești o muncă mai bună pentru tine. De exemplu, puteți decide să vă salvați codul ca fișiere separate. Folosind un editor de cod, puteți insera codul personalizat și puteți salva un fișier .css și un fișier .js. Apoi le puteți stoca într-un folder împreună cu fișierele dvs. JSON.

Oricum, sper că vă va fi util și aștept cu nerăbdare să vă aud gândurile în comentariile de mai jos.

Noroc!