Nota: Sebbene le nostre guide più popolari siano state tradotte in italiano, alcune guide sono disponibili solo in inglese.
Adirondack structure and style

Questa guida descrive le opzioni per regolare l'aspetto del tuo sito Adirondack. Queste opzioni sono disponibili nel riquadro Stili sito.

This is a supplement to the guide Making style changes, which we suggest you read first if you're new to Squarespace.

Suggerimento: nel Menu Home, clicca su Design, quindi su Stili sito. Per accedere a tweak specifici di una pagina, passa al riquadro Stili sito quando questa è attiva.

Supported pages

Add pages to your site to create your site's underlying structure. Pages can appear as links in your site's navigation.

The Adirondack template supports these page types:

  • Layout Page - An open page you can customize with blocks.
  • Album - Create a page with playable music tracks and cover art.
  • Blog - The list-style Blog Page stacks posts vertically.
  • Events - Create a calendar or list of events.
  • Galleria (standard) - Organizzala come uno slideshow o una griglia.
  • Products (Classic) - Sell goods and services with our integrated Commerce features. Products Pages in Adirondack support a category navigation bar.
  • Cover Page - A unique landing page styled separately from your template.

Layout and background

The main content area of your site has a fixed maximum width of 1118 pixels. On narrower browsers, the template’s responsive design adjusts to fit the width. There isn’t a way to change the maximum fixed width.

Note: The maximum width refers to the width of the content area when you're logged out of your site.

Adirondack supports a background image, background color, and drop shadow. These elements display on either side of the main content area.

Use these tweaks to adjust the background:

  • Site Drop Shadow - Add a shadow effect behind the content area.
  • Site Background Image - Add a background image. We recommend an image width between 1500 pixels and 2500 pixels. Background images should never be larger than 2500 pixels, as this can cause issues on mobile.
  • Site Background Color - Choose a solid background color.
Note: The background image may scroll with the page on certain mobile devices, including iOS.

Utilizza il tweak Colore di sfondo del contenuto per regolare il colore di sfondo dell'area del contenuto principale e del piè di pagina. Utilizza il tweak Colore di sfondo nella sezione Navigazione di Stili sito per regolare il colore di sfondo delle barre di navigazione del tuo sito.

Intestazione

The header has a minimal aesthetic, with an optional Main Navigation link on the left, a site title or logo in the middle, and an optional information link on the right.

  • Nella sezione Intestazione sito di Stili sito, scegli il colore di sfondo dell'intestazione e il tipo di carattere del titolo del sito o l'altezza del logo.
  • Use the Header Icons tweak to choose whether the navigation and information links display as text or icons.
  • Use the Contact, Location, or Search Dropdown tweak to choose whether the information link displays as Contact, Location, or Search. Choose None to hide the link.
  • If you choose Always Show Nav, the menu ("hamburger") icon disappears and the navigation displays below the header. When Always Show Nav is unchecked, the menu icon displays, and the navigation links only appear when a visitor hovers over the header.

The site title, menu, and information links are automatically set to black or white based on the header’s Background Color.

When you click the navigation or information link, the content displays as a drop-down below the header.

When visitors scroll down the page, the header collapses to a fixed menu bar at the top.

Note: Logos don’t display on mobile or in the fixed menu bar. The site title displays instead.

Information drop-downs

An information link can display on the right side of the header, creating a contact, location, or search drop-down below the header on click. Clicking the X icon collapses the drop-down.

  • Use the Contact, Location, or Search Dropdown tweak to choose which element displays, or to hide it.
  • Use the Header Icons tweak to choose whether it displays as text or an icon. The menu and information link always display as icons on mobile.

The Contact drop-down contains a Text Block and a Form Block. You can edit these blocks, but they can't be removed. To edit the blocks, open the contact drop-down, then hover over it and click Edit. No additional blocks can be added to the header.

Nota: il pulsante Invia del Blocco modulo dell'intestazione è nero o bianco, a seconda del colore di sfondo dell'intestazione. Non è possibile modificare questo pulsante in Stili sito.

To update the information in the Location drop-down, open the Business Information panel and update the Physical Location, Contact Phone Number, and Contact Email. Adjust the contact information font with the Text tweak. The color is automatically set to black or white based on the header’s background color. 

Note: We recommend removing or replacing the demo content in the contact and location drop-downs. Otherwise, the demo text may display when you share your site on social media, even if it’s hidden on your site. For detailed steps, visit Adirondack troubleshooting.

Navigation bars

Adirondack supports multiple navigation bars:

  • Main Navigation - The Main Navigation displays below the header.
  • Folder - When you're viewing a page within a folder, a navigation bar will appear below the banner (or below the header if there is no banner) displaying all the pages in the folder. The folder navigation bar doesn't display on mobile unless mobile styles are disabled
  • Navigazione per categoria - Questa barra di navigazione viene visualizzata su una Pagina prodotti una volta aggiunte le categorie per uno o più prodotti. Se la navigazione per categoria è nascosta, seleziona Visualizza navigazione per categoria in Stili sito.
  • Footer - Links from your Footer Navigation appear in a bar above the footer.

Styling the navigation bars

I tweak nella sezione Navigazione di Stili sito interessano tutte le barre di navigazione:

  • Font - Set the font and size
  • Background Color - Set the background color of the bars
  • Nav Active Color - Set the color of active navigation links. The color of non-active navigation links is automatically set to black or white based on the navigation bar’s Background Color.
  • Always Show Nav - Hide or show the Main Navigation bar.
  • Header & Nav Borders - Add a border above and below each navigation bar.

Organizing with navigation bars

Here are some ways you can use your navigation bars: 

  • Create multi-tiered organization for your store by adding multiple Products Pages to a folder. Dedicate each Products Page to a different product type. For example, you could have two Products Pages labeled "Women" and "Men." Add categories to each item to help customers filter within each Products Page. 
  • The folder structure also works well for multilingual sites

nav-bars.png

Main Navigation

The Main Navigation links display in a navigation bar below the header.

  • When the Always Show Nav tweak is unchecked, a menu link displays in the header. Use the Header Icons tweak to choose whether it displays as an icon or text. When visitors click the link or hover over the header, the navigation links appear below the header.
  • When Always Show Nav is checked, the Menu link disappears from the header, and the links always display below the header.
  • Folders display with a + icon. A menu overlay with the folder links appears on hover. When you go to one of the pages in the folder, the folder's navigation links display in a second navigation bar.

Page banners

Layout, Event, Blog, Album, and Products Pages can display banner images or banner videos above the page content. As you scroll, the banner fades away as the page content moves over it.

Use the Banner Height tweak to adjust the height of all banners across your site in desktop view. On mobile, banners have a fixed height.

I banner non supportano effetti di dissolvenza sul dispositivi mobili. I video banner a volte non vengono visualizzati su dispositivi mobili, a seconda della versione del browser e della velocità di connessione a disposizione degli utenti. Imposta un'immagine di fallback su dispositivi mobili da visualizzare quando non è possibile caricare il banner video.

Gallery Pages don’t support banners.

Blog posts, products, and events display their collection item thumbnails as banner images at the top of their individual pages.

Page titles and descriptions

Check the Show Page Titles & Descriptions tweak to display the page title and description above the page content on Events, Products, and Layout Pages. They don’t display on Album, Blog, and Gallery Pages.

Usa i tweak nella sezione Titoli pagine e descrizioni di Stili sito per definire tipi di carattere e colore.

  • Il tweak Decorazione titolo aggiunge un elemento decorativo al titolo della pagina (Sottolineato, Sopralineato, 3 stelle, 3 asterischi o Nessuno). Questo tweak interessa anche i titoli sui post del blog.
  • Deseleziona Mostra titoli pagine e descrizioni per nasconderli.
Suggerimento: per utilizzare un testo diverso nei risultati di ricerca, aggiungi un titolo e una descrizione SEO.

Fonts

Utilizza la sezione Contenuto principale di Stili sito per regolare tipo di carattere, dimensioni e colore del testo del sito. Adirondack propone anche opzioni di stile per il Blocco citazione.

Piè di pagina

Adirondack supports a site-wide footer. This means the same content displays on the bottom of every page.

The footer is divided into left and right content areas. Add content directly to either footer area using blocks. When viewing the page, hover over the footer and click Edit to open the editor. To learn more, visit Editing footers.

By default, the left footer contains a Text Block, and the right footer contains a Social Links Block.

The footer takes the same color as the main content area. Adjust this with the Content Background Color tweak.

The Footer Navigation displays in a navigation bar above the footer content areas.

Icone social

Adirondack doesn't support built-in social icons. Instead, add a Social Links Block to the footer or to your page content.

Dispositivo mobile

Because Squarespace templates are built with responsive design, your site will adjust on mobile devices to better fit the format of that device. You can use Device View to see how your site will look on different devices. For general information, visit How will my site appear on a mobile device?

Header elements have unique mobile styles on smartphones and other narrow browsers:

  • The navigation displays as a menu icon. When tapped, the navigation appears as an overlay. Folders display with a + symbol and drop down when tapped.
  • The background color of the navigation overlay is the same as the navigation bar.
  • The information link always displays as an icon.
  • Logos don’t display. The site title displays instead.
  • Header banners don't fade on scroll.
  • Folder navigation doesn't display on mobile. Category navigation displays as a Filter link, which drops down when tapped.

To display your background image on mobile, set your Content Background Color tweak to transparent or semi-opaque. This also affects how your site appears on desktop.

Mobile banners have a fixed height, and don't support fade effects or banner videos. Add a mobile fallback image to replace the banner video on mobile.

Next step

Learn about Adirondack's Blog Page.

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 2 su 11
Adirondack structure and style