Funnel/Website Builder(Editor) in Detail

The Funnel and Website Builder tools within Wind Solutions are powerful, intuitive platforms designed to help you create stunning, client-facing web pages tailored to your business needs. Both features are housed within the Sites module, serving as the foundation for building seamless, high-performing websites or step-by-step funnels. Whether you're looking to capture leads, manage e-commerce, or showcase your brand, these tools provide the flexibility and functionality to bring your vision to life. In this article, we’ll dive deep into the Funnel and Website Builders, exploring their unique capabilities and how they empower you to craft exceptional online experiences.

What are Sites?

Sites in Wind Solutions empower you to create professional, client-facing websites tailored to your business needs. Whether you're designing the perfect homepage or crafting a high-converting landing page to capture leads, the possibilities are virtually limitless.

Wind Solutions offers two types of Site Builders, each with distinct functionality. Let’s explore these options:

Funnels: Funnels follow a sequential path, guiding visitors through a series of pages designed for specific goals, such as lead generation or appointment bookings. This linear structure makes them ideal for split testing, allowing you to create variations of a page to identify the best-performing version.

Websites: Websites provide flexibility for building pages like business homepages or informational pages. Unlike funnels, websites do not lead visitors through a structured progression, which is why split testing is not available. However, websites are uniquely suited for broader use cases, including e-commerce. Note that we also offer a Store option specific for Ecommerce usage - this essentially creates Website, which is why we are not mentioning as seperate option.

While you can use both tools for various purposes, they differ in key aspects, making it important to choose the right one based on your objectives.

Should You Choose Funnels or Websites?

Both funnels and websites in Wind Solutions serve as powerful tools for creating and managing online content, sharing several overlapping features. They allow you to organize and house groups of web pages designed for different purposes, such as generating leads, showcasing your brand, or facilitating e-commerce transactions. However, the right choice depends on your specific goals and the functionality you need.

Here’s a detailed comparison to guide your decision:

Split Testing:

• Funnels: Designed for performance-driven campaigns, funnels exclusively offer split testing functionality. This feature enables you to create multiple variations of a single page and compare their performance, helping you determine the best version for achieving your goals. For example, you can test different headlines, calls-to-action, or layouts to maximize conversion rates.
• Websites: While websites lack split testing, they are ideal for broader applications where a structured progression or variation testing isn't necessary.

E-Commerce Integration:

• Stores/Websites: If you’re planning to create an online store, websites are the way to go. They provide robust e-commerce tools, enabling you to set up product pages, shopping carts, and checkout systems, along with seamless payment processing. Note that we offer a “Stores” Tab within the Sites Feature, when creating a Store you are essentially creating a Website (The Store will also be visible from the Websites Tab).
• Funnels: Funnels are not designed for comprehensive e-commerce solutions but can still support targeted sales campaigns, such as one-product offers or limited-time promotions.

Purpose and Structure:

• Funnels: Best suited for guiding visitors through a specific sequence of steps aimed at achieving a focused objective. Examples include lead generation funnels, booking funnels, or sales funnels. Their linear progression ensures a streamlined user journey, making them highly effective for goal-oriented marketing strategies.
• Websites: Offer greater flexibility and are more suitable for providing general information, creating online stores, or establishing a digital presence. Unlike funnels, websites do not follow a strict step-by-step sequence, allowing users to explore pages in any order.

User Interface:

• The user interfaces for managing funnels and websites are tailored to their respective purposes. Funnels feature a more goal-oriented structure, while websites provide a broader, more versatile layout for content organization.

Key Takeaways:

• Choose funnels if you need a structured, goal-driven series of pages with split testing capabilities to optimize performance.
• Opt for websites if you require flexibility, e-commerce functionality, or a general-purpose online presence.

By understanding the strengths of each option, you can select the tool that best aligns with your business objectives and create a seamless online experience for your audience.

Navigate and Use the Funnel/Website Builder(Editor)

Access the Builder(Editor)

First you need to decide if you want to create a Funnel or Website, use the headlines before to get assistance. When decided either navigate to Funnels or Websites (Note that if you want to create a Online/Ecommerce Store you should use our “Stores” section)

Edit existing Sites

Funnels

When you click on an existing funnel, you are taken to the Funnel Overview screen. As shown below, funnels follow a step-by-step approach that guides users or customers through a predefined journey. For example, in the "Plumbing Services" funnel, there are three pages or steps (highlighted in red):

1. Offer: The customer views the available services.
2. Schedule Appointment: The customer selects a service and schedules an appointment.
3. Thank You: After completing the appointment scheduling, the customer is redirected to the "Thank You" page, marking the end of their journey.

This structured process ensures a seamless experience while achieving the funnel’s specific goal.

To edit a specific “Step” or webpage within a funnel, select the desired step. In this example, we’ll edit the "Offer" step. Simply click the "Edit" button (highlighted by the yellow arrow) to open the editor.

Once the "Edit" button is clicked, you will be redirected to the Funnel Builder (Editor), which functions identically to the Website Builder (Editor). Due to these similarities, this guide will cover all functionalities of the Sites Builder (Editor) in a single, comprehensive explanation.

 

 

Websites

When you navigate to an existing website, you are taken to the Website Overview screen. This screen provides a clear layout of all the pages associated with the selected website. Each page serves a specific purpose, offering flexibility to design a comprehensive online presence. For example, in the "Floral Shop Store" website (as shown below), you can see the following pages:

• Home: The main landing page where visitors are introduced to your business and offerings.
• About: A page to share your brand's story, mission, and values with potential customers.
• Events: Highlight upcoming or past events to engage with your audience.
• Products List: Display all available products for customers to browse and explore.
• Product Details: Provide detailed descriptions, images, and specifications for individual products.
• Cart: A page for customers to review their selected products before proceeding to checkout.
• Checkout: The final step where customers can securely complete their purchase.
• Thank You: A confirmation page that acknowledges successful purchases or interactions.

To edit any specific webpage within the website, simply select the desired page and click the "Edit" button (visible beneath each page). This action opens the Website Builder (Editor), allowing you to make customizations to the selected page's layout, content, and design.

Like the Funnel Builder, the Website Builder offers a seamless editing experience, providing all the tools you need to create an engaging, professional online presence.

 

 

Stores

The Stores feature within Wind Solutions functions similarly to a website but is specifically designed to facilitate e-commerce. It provides a streamlined setup for showcasing your products, managing inventory, and processing transactions. With Stores, you can create product pages, shopping carts, checkout flows, and thank-you pages—all tailored to deliver a seamless shopping experience for your customers. Whether you're launching a new online store or enhancing an existing one, the Stores tool equips you with everything needed to manage and grow your e-commerce business.

As yo can see below the Floral Shop Store example is a Store, which is also available from the Websites feature.

 

 

Create new Sites

It doesn’t matter which type of Site you want to create—whether it’s a Funnel, Website, or Store—the process remains consistent. Below, we’ll demonstrate this process using the example of creating a Website:

1: Navigate to the Creation Page:
Go to the Sites module and select the type of site you wish to create. Then click on the "+ New Funnel/Website/Store" button located in the top-right corner.

2: Choose Your Starting Point:
Decide if you want to start with a blank canvas or use one of the professionally designed templates. In this example, we’ll choose a template. After selecting your option, click Continue to proceed.

3: Browse and Select a Template:
Explore the template library, where you can search and filter templates based on your needs. For this demonstration, we’ll use the Marketing Agency Template.

4: Preview the Template:
After clicking on a template, you’ll see detailed information about it. Review the template to ensure it suits your requirements, then click Continue in the top-right corner to confirm your choice.

5: Load the Template:
The selected template will be added to your sub-account and automatically loaded into the Sites Builder (Editor), where you can begin customizing your website.

Navigate and Use the Builder(Editor)

Managing Options (Top Bar)

The top bar of the Site Builder provides quick access to essential controls for managing your website or funnel.

Back / Save / Publish

• Back Button (Red Arrow): Click this to exit the editor and return to the main dashboard.
• Save Button (Yellow Arrow): Save your progress frequently to avoid losing any changes.
• Publish Button (Blue Arrow): Once you're satisfied with your changes, click "Publish" to make the site live and visible to visitors.

 

 

Preview

Previewing your work ensures that your website or funnel looks and functions as expected before publishing.

• Preview Mode (Red Arrows): Click either the button besides the Save Button or the Link in the middle of the Top Bar to open a preview of your site. It simulates how the website will appear to visitors.
• Ensure all buttons, links, and forms are operational during this phase. If you notice any issues, return to the editor to make corrections.

 

 

Add Elements

The Add Elements panel allows you to customize your site with a variety of pre-designed features:

• Accessing Elements (Red Box): Click on the "+" Icon in the top left to open the panel. From here, you can drag and drop features like text, images, forms, and buttons onto your page.
• Organize elements within sections, rows and columns for a structured and professional layout.

 

 

Layers

The Layers Panel provides an organized overview of all the sections, rows, columns, and elements on your page.

• Accessing Layers (Red Box): Click the "Layers" icon in the top bar to open this panel.
• Use this tool to quickly navigate between different parts of your site, especially for complex pages with multiple nested elements.

 

 

Pages

The Pages Tab helps you manage all the pages within your website or funnel.

• Page List (Red Box): View and switch between pages from this panel. 
• To edit a specific page, select it from the list and start customizing.

 

 

Tracking Code

Add custom tracking codes to monitor visitor behavior and improve site performance:

• Tracking Code Settings (Red Box): Insert codes like Google Analytics or Facebook Pixel directly into the header or footer of your website.
• Ensure proper formatting and save your changes to enable tracking functionality.

 

 

Custom CSS

For advanced customization, use the Custom CSS option:

• CSS Editor (Red Box): Add unique styling rules to modify the appearance of your site beyond the default options.
• Ensure that any custom CSS aligns with your brand identity and does not conflict with the existing layout.

 

 

Typography

Typography settings allow you to define the style of your website’s text content:

• Font Selection (Yellow Box): Choose from a variety of Google Fonts to match your brand's aesthetic.
• Text and Link Colors (Red Arrow): Customize colors for headings, body text, and links to ensure readability and visual consistency.

 

 

Background

Set your website's background to complement your content:

• Background Settings (Red Box): Add a solid color, gradient, or image as your background.
• Ensure that the background does not overpower the text or other site elements for optimal readability.

 

 

Popup Settings

Use popups to capture visitor attention or encourage specific actions:

• Popup Customization (Yellow Box): Design your popup with text, images, and forms to align with your campaign goals.
• Configure triggers such as time delays or exit intent to control when the popup appears.

 

 

SEO Meta Data

SEO Metadata allows you to optimize your pages for search engines by providing key information about your content.

• Settings Panel (Red Box): The SEO panel contains fields for content, keywords, author, social image, links, and tags.
• Optimize for Search Engines: Add relevant keywords and descriptions to improve your page’s ranking. Update metadata to ensure accurate previews for social media and search results.

 

 

Preview Custom Codes

The Preview Custom Codes feature enables you to visualize how your custom code changes will appear live.

• Preview Button (Red Arrow): Click this button to render custom HTML or JavaScript directly in the editor.
• Custom Code Section (Red Box): Preview specific parts of your code, ensuring functionality before publishing.

 

 

Cookie Consent

The Cookie Consent tool helps you stay compliant with GDPR and other privacy regulations.

• Enable Consent Banner (Red Arrow): Activate a banner that informs users about the use of cookies and tracking technologies on your site.
• Customizable Options (Red Box): Configure the banner’s appearance and messaging. Provide users with the ability to accept or reject tracking cookies.

 

 

2 Column Mode / Hide Settings

The 2 Column Mode feature lets you adjust your editing workspace, and the Hide Settings help streamline visibility options.

• 2 Column Mode (Left Arrow / Red Box): Toggle between a single-column or two-column editing view for better navigation and layout control. As you can see in the images below this toggles if the right Settings Panel appears over your Website, or as a second column.
• Hide Settings (Right Arrow / Yellow Box): Use the “Hide Settings” button to close or open the right Settings Panel.

 

 

Desktop / Mobile Mode

This feature allows you to tailor your site’s design for both desktop and mobile views.

• View Toggle (Red Arrow): Switch between desktop and mobile views to customize layouts for different devices.
• Visibility Options (Inner Red Box): Adjust element visibility and alignment specific to desktop or mobile views, ensuring optimal responsiveness.

 

 

Version History

The Version History feature tracks saved changes and allows you to restore previous versions of your site. Click on the Clock Icon as highlighted in the first image to access the Version History.

• History Panel (Red Box): View a list of saved versions, including timestamps and version names.
• Restore Button (Red Arrow): Click "Restore Version" to revert to a specific version, useful for correcting errors or reverting changes.

 

 

Undo / Redo

The Undo and Redo buttons let you quickly revert or reapply recent changes in your editor.

• Undo Button (Red Arrow): Use this to reverse your most recent actions.
• Redo Button (Blue Arrow): Use this to reapply an action that was previously undone, ensuring seamless editing.

 

 

Adding a New Element

Rows and columns form the foundation of your site layout and are used to organize and house elements. To add an element, such as an image or text box, you must first create at least one section, one row, and one column. Once these are in place, you can begin adding unique elements to your design.

To add a new element, go to the top-left corner of your Site Builder(Editor) and click on "Add Element". This will open a menu showing all the available elements you can add. Simply select the desired element, drag it to your preferred location on the page, and drop it into place. Or you can directly navigate to the desired location in the website and click on the “+” as highlighted in the following image.

Understanding Element Nesting

Every webpage element is structured within a section. A section must contain at least one row, and each row must include at least one column. By creating this hierarchy—Section > Row > Column—you can then add specific elements like text, images, or buttons.

Hierarchy Overview (from largest to smallest):

• Sections (Green) > Rows (Blue) > Columns (Pink) > Elements (Yellow)

About Sections, Rows and Columns:

• You cannot add a section within a section, a row within a row, or a column within a column. Similarly, elements cannot nest within other elements.
• Sections can contain multiple rows, rows can include multiple columns, and columns can house multiple elements.
• To add an element, ensure you have at least one section, one row, and one column.

Element Settings

To customize a section, row, column, or element, hover over it and click the gear icon that appears. You can also open the settings menu by directly clicking on the element. This action will reveal a pop-out settings panel on the right side of the editor.

Within the settings menu, you can adjust padding, margin, visibility, and other properties to refine your design. Additionally, the "General" and "Advanced" tabs provide access to more in-depth customization options to make your site truly unique.

Padding and Margin

Padding and margin allow you to adjust the spacing of elements on your webpage:

• Padding: Adds space inside a section, row, column, or element, pushing content inward.
• Margin: Adds space outside a section, row, column, or element, creating distance between it and other objects.

To adjust these settings, click on the desired object to open the settings menu on the right.

Moving, Cloning and Deleting Elements

Moving Elements

Elements can be repositioned in two ways:

1. Up/Down Arrows: Hover over an element and use the arrows to shift it up or down relative to other elements.
2. Click and Drag: Hover over the element, click and hold the move icon, and drag the element to a new location. Release the mouse to drop it in place.

 

 

Cloning Elements

To duplicate an element and all its settings, hover over it and click the "Clone" icon. This action creates an identical copy of the element, which is placed directly below the original. Cloning is a useful way to replicate layouts or formats for reuse elsewhere on the page.

 

 

Deleting Elements

To remove an unwanted element, hover over it and click the "Trash" icon. If you accidentally delete something, you can use the Undo/Redo feature to restore it.

 

 

Best Practices

Creating a polished and professional website or funnel requires thoughtful planning and attention to detail. Here are some best practices to follow when using the Site Builder (Editor) to ensure your design looks great and functions flawlessly:

Design for Both Desktop and Mobile Views

• Start with Desktop First or Mobile First: Depending on which view is the primary use case for your audience, prioritize designing and finalizing that layout before transitioning to the other. This approach ensures your primary design is refined and minimizes the need for extensive adjustments later.
• Use Mobile-Only Sections: For mobile optimization, create sections specifically for mobile users by duplicating an element or section and changing its visibility to mobile-only. This allows you to customize mobile elements without impacting the desktop view.
• Preview Both Views: Toggle between desktop and mobile modes frequently to ensure consistency and responsiveness.

Leverage Global Sections for Consistency

• Use Global Sections for repeated elements like headers, footers, or navigation menus in different Pages/Steps.
• Global Sections ensure uniformity across all pages. Any updates to a Global Section will automatically reflect everywhere it is used.

Optimize Navigation Menus

• Mobile Navigation Menus: Create a mobile-specific navigation menu with Mobile-Only Visibility. This ensures users can easily navigate your site on smaller screens.
• For desktop navigation, use larger menus with hover effects for improved user experience.

Keep Design Clean and Simple

• Avoid overcrowding your pages with too many elements or colors. A clean, minimalistic design often performs better and looks more professional.
• Maintain consistent fonts, colors, and styles throughout your site to reinforce brand identity.

Take Advantage of Padding and Margin Settings

• Use Padding to create space within an element, such as text or images, and Margin to add space between elements.
• Proper spacing improves readability and makes your design appear balanced.

Use the Clone Feature for Efficiency

• Duplicate elements or sections that you’ll reuse, such as call-to-action banners or formatted text blocks. This saves time and ensures consistency.

Utilize SEO and Metadata Settings

• Add SEO metadata (titles, descriptions, and keywords) to every page.
• Ensure your site is discoverable by search engines and provides relevant information when shared on social platforms.

Regularly Save Your Work

• Save your progress frequently to avoid losing any changes.
• Use the Version History feature to restore previous versions if needed.

Test Functionality Before Publishing

• Test all links, buttons, and forms to ensure they work as intended.
• For funnels, verify that each step correctly redirects to the next.

Preview Before Publishing

• Use the Preview feature to see your site or funnel as it will appear to visitors.
• This allows you to catch any design or functionality issues before going live.

Optimize Page Loading Speed

• Compress images and use optimized file formats to improve loading times.
• Enable features like Image Optimization and JavaScript Optimization in the settings.

By following these best practices, you’ll create a site that not only looks great but also delivers a seamless experience for visitors. Remember to test and refine regularly to keep your design and functionality up to date! Let me know if you'd like to expand on any specific section.

FAQs

Conclusion

The Funnel/Website Builder in Wind Solutions is a powerful and versatile tool that empowers you to create high-performing websites and funnels tailored to your business needs. From designing visually appealing layouts to customizing functionality with advanced features like SEO metadata, custom code, and mobile responsiveness, the builder provides all the resources you need to establish a professional online presence. Whether you’re crafting a step-by-step funnel to drive conversions or a comprehensive website to showcase your brand, the intuitive interface and robust settings ensure a seamless building process. By leveraging these tools effectively, you can optimize user experiences, drive engagement, and achieve your business goals with ease.