Skip to main content

Sites Overview

Welcome to Stack's Site Builder! Ready to create an amazing site for your audience? This guide will walk you through the Site Builder, settings, and much more to help elevate your business.

Table of Contents​

What are Sites?​

Sites in Stack allow you to create engaging, client-facing websites. Whether it's a homepage or a landing page to capture leads, the possibilities are endless.

Funnels vs. Websites​

Funnels​

  • Purpose: Funnels consist of a series of web pages designed for a specific goal, such as lead capture or appointment booking.
  • Feature: Only funnels support split testing, allowing you to compare different versions of a page to determine which performs better.

Websites​

  • Purpose: Websites are versatile and can be used for various purposes like creating a business homepage.
  • Feature: Unlike funnels, websites do not support split testing but can utilize eCommerce features.

Getting Started with Site Templates​

When creating a new site, choose from hundreds of templates. After selecting a template, you can customize all parts of it. Navigate into a page by clicking "Edit" to open the site builder.

Site Builder Overview​

The Site Builder in Stack offers a similar hierarchy and functionality for both Funnels and Websites. Let's explore how to use it to create your site.

Site Builder Navigation Bar​

Located at the top, this bar lets you toggle between various features. We'll explore each tab below.

Adding and Managing Elements​

Adding a New Element​

Rows and columns form the foundation of your site, housing elements like images. To add an element, ensure you have a section, row, and column. Click "Add Element" in the top right to see available options, then drag your chosen element to the desired area.

Understanding Element Nesting​

Elements require a structure: Sections (Green) > Rows (Blue) > Columns (Pink) > Elements (Orange). You can't nest sections within sections or rows within rows. However, you can add multiple rows in a section and multiple columns in a row.

Element Settings​

To edit an element, hover over it and click the gear icon. This opens a settings menu where you can adjust padding, margin, visibility, and more.

Padding and Margin​

  • Padding: Adds space within an element, moving inward.
  • Margin: Adds space outside an element, creating distance between objects.

Moving an Element​

Move elements using the up/down arrows or click and drag the move icon to reposition them.

Cloning an Element​

Clone an element by hovering over it and selecting the clone option. This duplicates the element and its settings, placing the copy below.

Deleting an Element​

To delete an element, hover over it and click the trash can icon. Use Undo/Redo if you need to restore it.

Additional Features​

Layers​

Layers show how objects are nested within the site hierarchy, helping you locate misplaced or hidden elements.

Pages​

Navigate between web pages in your Funnel or Website using the pages tab.

Tracking Code​

Add tracking codes to your webpage's header or footer from the Tracking Code page.

Custom CSS​

Add custom CSS to your website via the Custom CSS tab. Consult a developer for specific coding needs.

Typography​

Change default fonts, text, and link colors within the typography settings.

Background​

Set default background images or colors for your webpage in the Background tab.

Pop Up Settings​

Add pop-ups from the Pop Up settings. Configure them to show on exit or after a delay.

SEO Meta Data​

Edit SEO metadata to improve search engine visibility and enhance link sharing.

Preview Custom Code​

Preview custom code within the builder to ensure it functions as expected.

2 Column Mode vs. Auto Mode​

Choose between overlaying the right popout or setting a two-column mode for better layout management.

Undo/Redo​

Use Undo/Redo for changes within your current session. Note that reloading or leaving the page starts a new session.

Versions, Preview, Save, and Publish​

  • Versions: Access previously saved versions of your site.
  • Preview: View your site as if it's live.
  • Save: Save an unpublished version of your site.
  • Publish: Make the current version live on the internet.

Editing the Mobile View​

Mobile Mode​

Toggle between Desktop and Mobile Mode at the top of your editor to adjust the mobile view.

Changing Object Visibility​

Edit visibility settings to make elements mobile or desktop-only, optimizing each view.

Mobile Responsiveness Settings​

Adjust settings unique to mobile or desktop views to enhance user experience.

Pro Tips for Mobile Editing​

  • Finish Desktop Mode First: Complete your desktop view before editing the mobile view.
  • Mobile Navigation Menus: Use Global Sections for consistent mobile navigation.
  • Duplicate and Adjust Visibility: Create mobile-specific sections by duplicating elements and adjusting visibility.

Site Settings & Publishing​

Review backend settings like domain attachment, default paths, and more to finalize your site.

FAQs​

What are Global Sections?​

Global Sections are reusable sections across multiple pages. Changes to a Global Section update all instances automatically.

What are Template Sections?​

Template Sections can be saved and reused but do not update automatically across pages.

What Are Funnels?​

Funnels are a series of web pages designed to guide potential customers through a specific journey, such as booking an appointment.

How to See the Mobile View of a Website on your Desktop?​

Right-click on the webpage, select "Inspect," and toggle the view from desktop to mobile.

With this guide, you're ready to create and manage your site using Stack's powerful tools. Happy building!