Drupal - Temi e layout

In questo capitolo, studiamo Themes and Layouts. Drupal verrà installatoBartiktema come tema predefinito durante l'installazione. Puoi selezionare temi a pagamento o gratuiti dal sito ufficiale di Drupal. In generale, il layout è una disposizione di testo e grafica. È una buona idea scegliere un tema, tenendo presente quali diversi layout utilizzare sul tuo sito.

Step 1- Vai al sito ufficiale di Drupal e fai clic suGet Started.

Step 2 - Fare clic su All Themes come mostrato nella schermata seguente.

Step 3- Otterrai un elenco di temi. Seleziona il tema che preferisci (lasciaci selezionareAdaptive theme come consiste Layout & General Settings, che verrà trattato più avanti in questo capitolo) e fare clic su Version come mostrato nella schermata seguente.

Step 4 - Quindi, fare clic con il tasto destro Download file e copiare l'indirizzo del collegamento come mostrato nella schermata seguente.

Step 5 - Puoi anche scaricare il tema direttamente facendo clic su archive file e il modulo verrà scaricato localmente sul tuo computer come mostrato nella schermata seguente.

Step 6 - Vai a Appearance e fare clic Install new theme come mostrato nella schermata seguente.

Step 7 - Puoi incollare l'indirizzo del link che hai copiato step (4) e fare clic sul pulsante di installazione come mostrato nella schermata seguente.

Step 8 - Puoi anche caricare l'archivio del tema, invece di copiare l'indirizzo del collegamento, se l'hai scaricato e fai clic Install come mostrato nella schermata seguente.

Step 9 - Viene visualizzata la seguente schermata, attendere il completamento dell'installazione.

Step 10 - Quindi, fare clic su Enable newly added themes come mostrato nella schermata seguente.

Step 11- Per impostazione predefinita, i temi sono disabilitati. Per abilitarli, fare clic suEnable and set default come mostrato nella schermata seguente.

Step 12 - Fare clic su Settings come mostrato nella schermata seguente per impostare l'aspetto del tuo sito.

Step 13 - Il Layout & General Settings opzione si apre sullo schermo, in questo Adaptive theme consiste di Standard layout, Tablet Layout, Smalltouch layout e Panels & Gpanels. Queste opzioni controllano le impostazioni di visualizzazione per il tema AT Admin corrente che è già in uso. Quando il tuo sito visualizza il tema, verranno utilizzate queste impostazioni. Ora, discutiamo questi layout uno per uno.

Step 14 - In Standard layout puoi scegliere il layout per desktop, laptop e altri dispositivi con schermo di grandi dimensioni.

  • Choose sidebar positions - Puoi scegliere la posizione della barra laterale facendo clic sul pulsante di opzione.

  • Set the width of each sidebar - Puoi impostare la larghezza della prima barra laterale e della seconda barra laterale e unità in% o px o em.

  • Set the page width - È possibile impostare la larghezza della pagina.

  • Set a max width −È possibile selezionare o deselezionare per impostare la larghezza massima.

  • Media query for this layout - La query multimediale definisce regole di stile diverse per diversi dispositivi multimediali e per impostazione predefinita per questo layout sarà 1025px.

Step 15 - Quindi, fare clic su Tablet Layoutcome mostrato nella schermata seguente. I dispositivi tablet avranno due orientamentiLandscape e Portrait. È possibile configurare un layout diverso per ogni orientamento.

Sotto Landscape tablet e Portrait tabletpuoi scegliere la posizione della barra laterale, la larghezza di ciascuna barra laterale e la larghezza della pagina. Media query perLandscape tabletsarà la larghezza minima: 769 px e la larghezza massima: 1024 px. PerPortrait tablet sarà larghezza minima: 581 px e larghezza massima: 768 px

Step 16 - Ora, fai clic Smalltouch Layout come mostrato nella schermata seguente. Smalltouch layout avrà anche due orientamenti Landscape e Portrait. È possibile configurare un layout diverso per ogni orientamento.

In Landscape Smalltouchpuoi scegliere la posizione della barra laterale e impostare la larghezza. IlPortrait Smalltouchviene sempre visualizzato in una colonna con le barre laterali impilate orizzontalmente sotto il contenuto principale. Media query perLandscape Smalltouch sarà min-width: 321px e max-width: 580px e per Portrait Smalltouch sarà di larghezza massima: 320 px.

Step 17 - Quindi, fare clic su Panels & Gpanelscome mostrato nella schermata seguente. Il tema adattivo supporta pannelli reattivi e layout Gpanel. Per utilizzare questa funzionalità, è possibile utilizzare il modulo Pannelli , Display Suite (con pannelli) o layout nativi di Gpanels a temi adattivi .

È possibile selezionare le opzioni per ciascun intervallo di dispositivi e il layout del tipo. Vediamoli uno per uno.

  • Sotto Standard layoutè possibile selezionare i layout che si desidera utilizzare quando il sito viene visualizzato in layout standard. Cliccando suTWO, THREE, FOUR, FIVE, SIX or INSET, è possibile selezionare la disposizione delle colonne come mostrato nella schermata seguente.

  • Segui lo stesso passaggio per TABLET LANDSCAPE, TABLET PORTRAIT e SMALLTOUCH LANDSCAPE layout.

Step 18 - Una volta terminate tutte le configurazioni, fare clic su Save configurations come mostrato nella schermata seguente.