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.
What are Sites?
Section titled “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
Section titled “Funnels vs. Websites”Funnels
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “Adding and Managing Elements”Adding a New Element
Section titled “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
Section titled “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
Section titled “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
Section titled “Padding and Margin”- Padding: Adds space within an element, moving inward.
- Margin: Adds space outside an element, creating distance between objects.
Moving an Element
Section titled “Moving an Element”Move elements using the up/down arrows or click and drag the move icon to reposition them.
Cloning an Element
Section titled “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
Section titled “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
Section titled “Additional Features”Layers
Section titled “Layers”Layers show how objects are nested within the site hierarchy, helping you locate misplaced or hidden elements.
Navigate between web pages in your Funnel or Website using the pages tab.
Tracking Code
Section titled “Tracking Code”Add tracking codes to your webpage’s header or footer from the Tracking Code page.
Custom CSS
Section titled “Custom CSS”Add custom CSS to your website via the Custom CSS tab. Consult a developer for specific coding needs.
Typography
Section titled “Typography”Change default fonts, text, and link colors within the typography settings.
Background
Section titled “Background”Set default background images or colors for your webpage in the Background tab.
Pop Up Settings
Section titled “Pop Up Settings”Add pop-ups from the Pop Up settings. Configure them to show on exit or after a delay.
SEO Meta Data
Section titled “SEO Meta Data”Edit SEO metadata to improve search engine visibility and enhance link sharing.
Preview Custom Code
Section titled “Preview Custom Code”Preview custom code within the builder to ensure it functions as expected.
2 Column Mode vs. Auto Mode
Section titled “2 Column Mode vs. Auto Mode”Choose between overlaying the right popout or setting a two-column mode for better layout management.
Undo/Redo
Section titled “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
Section titled “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
Section titled “Editing the Mobile View”Mobile Mode
Section titled “Mobile Mode”Toggle between Desktop and Mobile Mode at the top of your editor to adjust the mobile view.
Changing Object Visibility
Section titled “Changing Object Visibility”Edit visibility settings to make elements mobile or desktop-only, optimizing each view.
Mobile Responsiveness Settings
Section titled “Mobile Responsiveness Settings”Adjust settings unique to mobile or desktop views to enhance user experience.
Pro Tips for Mobile Editing
Section titled “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
Section titled “Site Settings & Publishing”Review backend settings like domain attachment, default paths, and more to finalize your site.
What are Global Sections?
Section titled “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?
Section titled “What are Template Sections?”Template Sections can be saved and reused but do not update automatically across pages.
What Are Funnels?
Section titled “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?
Section titled “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!