JOOMLA!
Informazioni utili prima di iniziare a lavorare con T4 Joomla template framework.
Accedi al pannello di lavoro
Su Joomla 4
Per accedere al pannello di lavoro del modello T4 Blank (o di qualsiasi modello creato con T4 Framework), dal back-end del tuo sito, vai a Stili del modello del sito di sistema.
Enable Dark Mode
T4 Framework working panel supports light theme and dark theme. To enable the Dark theme, from the setting panel, enable the Dark Mode option on the toolbar bottom.
Crea un nuovo stile modello T4
Per ogni modello T4, puoi creare più stili di modello con impostazioni diverse e assegnarli a voci di menu specifiche.
Per creare un nuovo stile modello, puoi duplicare lo stile predefinito o puoi salvarlo come copia nel pannello delle impostazioni di qualsiasi stile.
Duplicate a template style in Joomla 4
Abilita la modalità di sviluppo
Quando stai sviluppando il tuo sito, dovresti abilitare questa opzione in modo che qualsiasi aggiornamento che hai apportato venga visualizzato immediatamente, senza cache.
Per abilitare o disabilitare questa opzione, vai su Sistema di configurazione globale del sistema e trova l'opzione Modalità sviluppo.
E quando non stai sviluppando il tuo sito, dovresti disabilitare l'opzione per attivare la cache T4 e migliorare le prestazioni del tuo sito.
SETTAGGIO DEL SITO
Impostazioni del sito
Le impostazioni del sito includono la configurazione per il nome del sito, il logo e la visualizzazione della pagina.
Profilo di impostazione del sito
Il pannello Impostazioni sito include la configurazione per il nome del sito, lo slogan del sito, l'immagine del logo, la favicon personalizzata e altro ancora. Ora puoi creare più profili di Impostazioni sito con diverse configurazioni per le impostazioni menzionate e assegnare il profilo per diversi stili di modello. Pertanto, potresti avere loghi, favicon, nome del sito diversi per pagine diverse.
In quali casi puoi utilizzare il profilo delle impostazioni del sito?
Vuoi avere un logo diverso, favicon su pagine diverse
Vuoi avere un nome del sito diverso, uno slogan del sito su pagine diverse
Configura tutte le impostazioni disponibili nelle Impostazioni del sito
Ripristina le impostazioni predefinite del profilo Impostazioni sito predefinito
Clona qualsiasi profilo Impostazioni sito
Elimina profilo (solo elementi clonati)
Il pannello di configurazione include le impostazioni per il nome del sito, lo slogan del sito e il logo. Le impostazioni possono essere diverse da diversi profili.
Slogan del sito: aggiungi lo slogan per il sito. Quando viene utilizzato il logo di testo, lo slogan verrà mostrato sotto il logo di testo.
Immagine del logo: sfoglia l'immagine del logo o carica l'immagine del logo.
Logo su mobile: l'immagine del logo verrà mostrata su layout mobile. Se non è impostato, utilizzerà il logo globale.
Altre impostazioni
Per ora, il pannello include 2 impostazioni per la favicon personalizzata e il pulsante Torna in alto.
- Cambia favicon: sfoglia l'immagine per la favicon del sito. Puoi sfogliare qualsiasi immagine, verrà generata automaticamente in un file .ico e verrà archiviata nella cartella: media/t4/t4_blank/
- Mostra pulsante Torna in alto: abilita questa opzione per mostrare il pulsante Torna in alto.
Le impostazioni globali includono la configurazione per l'ottimizzazione CSS e JS, il codice personalizzato e la gestione dei componenti aggiuntivi.
Che cos'è l'ottimizzazione JavaScript (JS) e CSS?
In breve, l'ottimizzazione JS e CSS è il processo per rendere il tuo sito web più piccolo e veloce da caricare minimizzando i codici JS e CSS.
L'ottimizzazione JS e CSS include:
Combina T4 Framework JS e file CSS e relement Joomla JS, file CSS.
Rimuovere i codici JS, CSS non necessari e ridondanti
Ottimizza/accorcia i modelli di programmazione dei commenti.
Abilita l'ottimizzazione CSS e JS in T4
Il nuovo framework T4 moderno è dotato di opzioni di ottimizzazione CSS e JS integrate che rimuoveranno i codici non necessari e ridondanti in CSS, i file JS per ridurre le dimensioni del file e combinare i file CSS e JS per ridurre le dimensioni del file il numero di richieste verrà ridotto e il caricamento della pagina la velocità sarà più veloce.
Per abilitare questa opzione, dal pannello delle impostazioni dello stile del modello T4, apri l'ottimizzazione delle impostazioni globali e attiva le opzioni di ottimizzazione CSS e JS, quindi salva.
Le opzioni di ottimizzazione CSS e JS aiutano a comprimere quasi tutti i CSS e Javascript del modello e i file Joomla rilevanti per migliorare le prestazioni del sito web.
Quando l'ottimizzazione CSS e JS è ABILITATA
Il caricamento della pagina ti aiuta a offrire un'esperienza migliore ai visitatori e anche a migliorare il tuo punteggio SEO. Puoi testare la velocità di caricamento della pagina utilizzando diversi strumenti online. Consigliamo 2 strumenti popolari: Google PageSpeed Insights e Pingdom.
Quando abilita l'ottimizzazione CSS e JS
Come escludere dalla compressione file JS e CSS specifici?
Il framework T4 ti darà il pieno controllo dello strumento di ottimizzazione e compressione. Se uno qualsiasi dei file CSS e JS non si desidera comprimere, è possibile escludere i file dall'ottimizzazione aggiungendo i file nel campo di esclusione file.
Puoi aggiungere il percorso completo ai file JS, CSS
templates/t4_blank/js/scripts.js
oppure aggiungi solo il nome del file. custom.css
Codice personalizzato
Puoi inserire qualsiasi CSS, JS, meta tag, link e codici di verifica utilizzando l'opzione codice personalizzato. Con più opzioni per aggiungere tag personalizzati a specifici.tags
After <head>: il codice aggiunto a questo campo verrà inserito dopor <head> tag
Before </head>: il codice aggiunto a questo campo verrà inserito primae </head> tag
After <body>: il codice aggiunto a questo campo verrà inserito dopo <body> tag
After </body>: il codice aggiunto a questo campo verrà inserito prima </body> tag
In alcuni casi è possibile utilizzare la funzionalità del codice personalizzato:
Google Analytics: puoi aggiungere velocemente il codice di Google Analytics per il tuo sito web nel campo: Before </head>
Live chat integration: il fornitore di servizi di chat dal vivo normalmente fornisce script da aggiungere a tag specifici per incorporare la chat dal vivo.
Addthis: se utilizzi la condivisione social, puoi aggiungere gli script nel campo Before /body
Gestione dei componenti aggiuntivi
Il pannello Componenti aggiuntivi include impostazioni per abilitare o disabilitare le icone dei caratteri come Font Awesome, Iconmoon. Quando un componente aggiuntivo è disabilitato, i suoi CSS e JS non verranno caricati nel tuo sito Web, questo per aiutare a mantenere il tuo sito pulito e caricare più velocemente.
Puoi aggiungere i tuoi componenti aggiuntivi personalizzati per caricare file CSS e JS specifici.
Ad esempio, se desideri utilizzare Owl Carousel, puoi scaricare la libreria, aggiungere alla cartella dei modelli:
Costruttore di layout
T4 Framework viene fornito con uno strumento di creazione layout super potente, che rende facile e divertente creare da un layout di base a un layout complicato senza alcuna codifica.
La sezione ti aiuta a capire di più su T4 Joomla template framework layout builder, come funziona e come gestire completamente i layout del tuo sito web.
Introduzione al generatore di layout T4
Il generatore di layout è una delle straordinarie funzionalità di T4 Framework per aiutarti a creare facilmente da layout semplici a complicati in base alle posizioni dei moduli e per personalizzare il modello esistente in quasi tutte le forme senza personalizzazione del codice.
Un layout è un insieme di sezioni (righe), ogni riga può avere impostazioni diverse e includere una o più colonne.
Panoramica rapida sul generatore di layout T4:
- Un layout è un insieme di sezioni (righe).
- Ogni riga ha le proprie impostazioni e può includere una o più colonne.
- Supporta più tipi di contenuto da assegnare alla colonna
- Trascina e rilascia per spostare una sezione
- Aggiungi una nuova sezione in qualsiasi posto desideri
- Supporta 2 stili di intestazione per impostazione predefinita
Griglia di layout
T4 integra Bootstrap 4 e il suo layout si basa sul layout a 12 colonne di Bootstrap 4 con una potente griglia flexbox mobile first per creare layout di tutte le forme e dimensioni grazie a un sistema a dodici colonne, cinque livelli reattivi predefiniti, variabili Sass e mixin e dozzine di classi predefinite.
Quando crei una sezione, puoi utilizzare il numero impostato di colonne e configurare la larghezza per ciascuna colonna (basata su una griglia a 12 colonne). Il sistema a griglia è reattivo per impostazione predefinita in cui le colonne vengono riorganizzate in base alle dimensioni dello schermo. Puoi anche personalizzare la larghezza di ogni colonna su un layout reattivo specifico.
Gestisci layout
Assegna il layout per uno stile modello
Nel pannello delle impostazioni del layout, ci sono più layout predefiniti, l'utente può selezionare rapidamente un layout per qualsiasi stile di modello dalla selezione a discesa del layout.
Crea un nuovo layout clonando qualsiasi layout
Per ogni layout selezionato, l'utente può scegliere di modificare o clonare il layout ed eseguire aggiornamenti per il layout.
Ripristina impostazioni layout (solo per layout predefiniti)
Dopo la modifica, la personalizzazione di un layout predefinito, l'utente può ripristinare tutte le impostazioni alle impostazioni predefinite del layout utilizzando il pulsante di ripristino.
Elimina layout clonato
Per il layout clonato, l'utente può eliminare se non desidera utilizzare il layout, selezionare il layout e premere il pulsante elimina.
Configurazione della sezione (riga).
Per ogni riga/sezione, include 3 pannelli di configurazione: Generale, palette colori e overlay
Impostazioni generali
Le impostazioni generali includono:
- Titolo della sezione: aggiungi il titolo per la sezione, la sezione verrà generata in ID sezione e CSS. Ad esempio, se aggiungi Main Body, verrà generato: < div id='t4-main-body' class='t4-section t4-main-body' > per aiutarti ad aggiungere più facilmente uno stile personalizzato per ogni sezione. Quindi il titolo della sezione dovrebbe essere breve e semplice.
Contenitore: configura il contenitore della sezione in modo che sia fisso, a larghezza intera o nessuno (impostazione predefinita).
Layout della sezione: questa impostazione consente di aggiungere più colonne a una sezione. Puoi definire la larghezza per ciascuna colonna su un layout reattivo specifico o selezionare di utilizzare la funzione automatica in cui tutte le colonne avranno la stessa larghezza.
Impostazioni reattive: puoi personalizzare la larghezza di ogni colonna su un layout reattivo specifico e anche selezionare di mostrare o nascondere le colonne sui dispositivi selezionati, in relazione alla risoluzione dello schermo:
Hidden on Smartphone - larghezza dello schermo inferiore a 576px
Hidden on Largen Smartphone - screen width equal to or greater than 576px
Hidden on Tablet - screen width equal to or greater than 768px
Hidden on Smaller Desktop - screen width equal to or greater than 992px
Hidden on Desktop - screen width equal to or greater than 1200px
Altre impostazioni:
Add Custom CSS Class Name
Set section padding
Set section margin
Sticky setting: Sticky top, sticky botton or none
Le tavolozze dei colori sono progettate per aiutare l'utente a personalizzare lo stile in modo più semplice e veloce durante la creazione del layout. Ciascuna tavolozza dei colori è un insieme di impostazioni di colore: colore di sfondo, colore del testo, colore del collegamento, colore del passaggio del mouse del collegamento.
Seleziona le tavolozze dei colori per la sezione corrente
Modifica qualsiasi tavolozza di colori
Clona qualsiasi tavolozza di colori
Elimina le tavolozze dei colori (solo elementi clonati)
Ripristina l'impostazione predefinita per le tavolozze dei colori predefinite
Sfondo di sovrapposizione di immagini e video
Il modello T4 Framework ti consente di creare sovrapposizioni di immagini o sovrapposizioni video per qualsiasi sezione. Per ogni sezione nel generatore di layout, è presente il pannello di configurazione Overlay in cui è possibile selezionare il tipo di overlay di immagini o video, configurare la visualizzazione per il tipo di overlay selezionato in base alle impostazioni corrispondenti.
Sfondo di sovrapposizione dell'immagine
Puoi selezionare qualsiasi immagine da mostrare come sfondo di sovrapposizione per una sezione.
Sfoglia l'immagine sovrapposta
Configura le impostazioni per lo sfondo: ripetizione dello sfondo, dimensione dello sfondo, allegato dello sfondo e posizione dello sfondo.
Imposta l'opacità per l'immagine di sfondo sovrapposta
Sfondo di sovrapposizione video
Per ora, T4 Framework supporta 2 sorgenti video per lo sfondo video sovrapposto: Youtube e Vimeo.
Seleziona il tipo di video: youtube o vimeo
Aggiungi ID video
Opzioni della colonna
La colonna viene utilizzata per mostrare il contenuto della sezione assegnando il tipo di colonna supportato: componente, posizione del modulo, modulo, blocco ed elemento. Puoi aggiungere una classe CSS personalizzata per ogni colonna se desideri dare uno stile a un particolare elemento di contenuto in modo diverso.
- component: Puoi assegnare un componente per una colonna per rendere la colonna un'area di contenuto principale del componente Joomla.
- module position: Selezionare qualsiasi posizione del modulo adatta. I moduli pubblicati nella posizione verranno visualizzati nella colonna
- module: Seleziona un modulo da mostrare nella colonna.
- block:Block è un tipo di contenuto speciale supportato per il generatore di layout T4 Framework per aiutare l'utente a creare un blocco di contenuto più velocemente utilizzando il proprio mockup HTML personalizzato.Nel generatore di layout, quando modifichi il blocco di contenuto, puoi modificare il mockup HTML del blocco direttamente nel pannello. L'editor è facile da aggiungere e aggiornare il codice HTML
- element: Element è anche un blocco di contenuto speciale definito dallo sviluppatore.
Quando si lavora sul generatore di layout, è possibile visualizzare tutte le posizioni nel layout utilizzando la funzione Anteprima posizione layout. Questo ti darà una migliore panoramica della struttura del layout, delle posizioni con contenuto assegnato e delle posizioni vuote.
Layout FAQs
Dove sono archiviati i file di layout modificati e clonati?
Questi file di layout sono archiviati nella cartella 'locale'.
templates/t4_blank/local/etc/layout/
Dove sono archiviati i file di layout predefiniti?
Puoi trovare i file di layout predefiniti nella cartella 'layout':
templates/t4_blank/etc/layout/
Che cos'è il formato del file di layout?
Ogni layout è un file .json che include le impostazioni del file di layout.
L'utente può eliminare il layout predefinito nel pannello del generatore di layout?
No, i layout predefiniti sono importanti e vengono utilizzati per aiutare l'utente a ripristinare le impostazioni quando qualcosa va storto.
I layout modificati e i layout clonati si perdono dopo l'aggiornamento del modello?
No, tutti i layout modificati e i file di layout clonati vengono archiviati nella cartella 'locale' che non è inclusa nella cartella del modello per impostazione predefinita, quindi quando si aggiorna il modello, la cartella non viene sovrascritta.
