Visual GuideHow to Build Engaging Pages with the Website Builder
Creating a functional and visually appealing website doesn’t have to be a daunting task. The Members Village Website Builder app empowers administrators, designers, and content creators to design engaging pages with ease. This guide will walk you through the app’s key features, using screenshots to illustrate how each tool works, why it matters, and tips to maximize its potential.
What Are Pages and Blocks?
Pages provide the foundation for your website’s structure, while Blocks are the modular components that let you add functionality and design. Together, they allow you to create engaging, professional pages tailored to your organization’s needs.
- PAGES - The foundation of your website's structure
- BLOCKS - Modular components to customize pages
Real-World Applications for Pages and Blocks
Pages and Blocks can be applied to many types of content. Whether you’re promoting services, creating a blog, or managing membership sign-ups, the same tools we’ll use today can help you achieve professional results.
Event Pages
Promote events with registration forms and CTAs.
Service or Product Pages
Highlight features, benefits, and testimonials.
Blog/Article Pages
Organize content and add multimedia.
Sign-Up Pages
Showcase tiers, benefits, and FAQs.
A good page layout balances usability, aesthetics, and functionality while ensuring the content is engaging and easy to navigate.
Best Practices SETTING UP A PAGE Members Village has built-in key features!
1. Clarity in Structure & Hierarchy
- Use a Clear Heading Structure: H1 for the main title, H2 for sections, and H3 for subsections.
- Prioritize Information: The most important information should appear first (above the fold).
- Keep It Scannable: Use bullet points, short paragraphs, and bolded key phrases.
2. Consistent Branding & Design
- Align with Brand Colors & Fonts: Ensure consistency across all pages.
- Whitespace is Key: Avoid clutter; use padding and margins to separate sections.
- Readable Font Sizes & Styles: Ensure text is legible on all devices.
3. Intuitive Navigation
- Easy-to-Find CTA (Call-to-Action): Buttons should stand out with clear wording.
- Logical Flow: Each section should naturally lead to the next.
- Breadcrumb Navigation: Helps users understand where they are on your site.
4. Engaging & Relevant Content
- Concise Yet Informative Copy: Avoid jargon and fluff & use conversational lanuguage with the growth of AI & voice prompt searches.
- SEO-Optimized Text: Use keywords naturally in headings and body content.
- Use of Visuals: Incorporate images, videos, or icons to break up text and to ensure accessibility compliance add ALT text descriptions.
5. Mobile Responsiveness
- Optimized for All Devices: Use a responsive design framework.
- Clickable Elements are Large Enough: Ensure buttons and links are easy to tap on mobile.
6. Page Speed & Performance
- Optimize Images: Use compressed formats (JPEG, WebP) for faster loading.
- Minimize Plugins & Scripts: Reduce the number of elements that slow down the page.
- Use Caching & CDN: Improves speed for users in different locations.
7. Accessibility & Compliance
- Alt Text for Images: Helps visually impaired users.
- High Contrast for Readability: Ensure text is easily distinguishable from the background.
- Keyboard Navigability: Users should be able to navigate the page without a mouse.
8. Strong CTAs & Next Steps
- Action-Oriented CTAs: “Start Your Free Trial” instead of “Click Here.”
- Strategic CTA Placement: Above the fold, at the end of sections, and in a sticky header/footer.
- Multiple Entry Points: Offer buttons, links, and forms to capture user engagement.
Creating and MANAGING PAGES
Controls and Toggles
CONTROLS FOR MANAGING PAGES
Control Visibility and Status:
The toggles allow quick updates to the visibility (menu presence) and status (live or not live) of the pages.
IN MENU Toggle (orange and gray options) is shown.
- Clicking the toggle activates (Yes - orange) or deactivates (No - gray) a page's visibility in the navigation menu.
ACTIVE toggle indicates whether the page is live (Yes - orange) or inactive (No - gray).
- Clicking the toggle changes the status, controlling whether the page is publicly accessible.
Simplify Page Management:
By toggling these options, admins can efficiently control which pages are accessible to visitors without needing to open individual settings.
GETTING STARTED | PAGE Options TabCustomizing Page Settings
The Options Tab acts as the command center for page settings, allowing you to manage titles, banners, visibility, templates, links, and metadata.
Why It Matters:
- Centralized settings simplify page management for administrators.
- Metadata and SEO options ensure your page is optimized for search engines.
Pro Tip: Regularly update your metadata to reflect your content’s focus, helping improve search rankings.
GettING STARTED | Blocks TabDESIGNING PAGES WITH BLOCK TEMPLATES
The Blocks Tab lets you populate your page with text, media, CTAs, and more using templates.
Why It Matters:
- Makes page building accessible to users of all skill levels.
- Organized tags, apps and favourite blocks make design faster and easier.
Pro Tip: Save frequently used blocks in the "Faourites" section to speed up future design projets.
