The Page Builder in Flawless POS provides a wide range of interactive and functional elements that allow you to design engaging and dynamic web pages. This article will guide you through the essential features of several core elements, helping you create user-friendly, visually appealing, and highly functional pages.
1. Buttons
- Buttons serve as essential interactive elements to guide users toward specific actions on your website. They are versatile and highly customizable.
Key Features:
Control Name:
Allows you to assign a unique identifier for the button, which can be used for custom styling or functionality.Button Style:
Lets you select from predefined styles or create a new one using the Style Manager (accessible by clicking the three-dotted button). Custom styles ensure consistency across your site.Hover Effect:
Adds interactivity when users hover over the button. Options include effects like shimmer, darken, or brighten.Click Action Type:
Determines the button's behavior when clicked. Options are:None: No action is performed.
Open Link: Redirects the user to a specified URL.
Navigate Back: Returns the user to the previous page.
Dimensions:
Height and Width: Customizable to control the button's size.
Width Unit: Allows the width to be defined in pixels, percentages, or other units.
Positioning: Choose between Relative for inline placement or Absolute for custom placement anywhere on the page.
Animations:
Animation Type: Adds visual effects like fade or zoom to the button.
Duration: Sets how long the animation lasts, measured in milliseconds (e.g., 400 ms).
Animation Repeat: Defines if and how many times the animation should loop.
Padding and Margin:
Padding: Adjusts internal spacing between the button's text and its edges.
Margin: Configures the spacing around the button relative to other elements.
Opacity:
Allows adjustments to the button’s transparency, creating subtle effects for layering or focus.Display and Layering:
Layer Index: Determines the stacking order of the button relative to other elements. Higher values place the button above other components.
Visibility: Configurable to show or hide the button based on your design needs.
Position:
X and Y Coordinates: Fine-tune the button’s placement within the design.
SEO:
SEO Title: Add metadata to the button for search engine optimization.
SEO Description: Provide a brief summary to improve indexing when the button links to important pages.
Best Uses:
Call-to-Actions: Create buttons for actions like "Buy Now," "Learn More," or "Subscribe."
Navigation Links: Use buttons to direct users to specific pages or external sites.
Interactive Features: Combine hover effects and animations to grab users' attention.
2. Contact Form
- The Contact Form is designed to facilitate communication between your business and your users.
Key Features:
Name and Identification:
Control Name: Allows you to assign a unique identifier to the contact form.
Classes: Supports adding custom CSS or JavaScript classes for further customization.
Design:
Header: Displays the title of the form, e.g., "Contact Us."
Customizable through Header Style options.
Subtitle: Adds context, such as "Send us a message, and we will get back to you ASAP."
Editable via the Subheading Style settings.
Disclaimer: Includes terms and privacy notices, e.g., "This site is protected by reCAPTCHA..."
Configurable disclaimer styles for consistent branding.
Submit Button Style: Customizable with styles like "Black-Colorless Box" for visual alignment with the website.
Font:
Default and Hover States:
Font Family: Easily set to match the site's typography.
Color, Size, Weight, Letter Spacing, and Line Height are fully adjustable for readability and aesthetics.
Border:
Customizable for both Default and Hover states.
Options for border type, color, and radius to create unique styles.
Animations:
Supports subtle motion effects for form elements.
Options include animation type, duration, repeat behavior, and delay.
Current setup: Animation is disabled.
Padding and Margin:
Padding (Top, Right, Bottom, Left): Adjust spacing inside the form for a balanced layout.
Current settings: 30px padding on all sides.
Margin: Controls external spacing between the form and other elements.
Opacity:
Adjustable for form transparency, creating layered visual effects.
Actions:
Click Action Type: Set to "None" but can be configured for interactions like redirecting users upon submission.
Positioning:
Coordinates (X, Y): Fine-tune the form's placement on the page.
Current position: Centered with (0%, 0%).
Responsive Layout:
Adapts to various screen sizes, ensuring usability on both desktop and mobile devices.
Best Uses:
Customer Inquiries: A simple way for customers to ask questions or request additional information.
Feedback Collection: Gather valuable feedback about your jewelry store's products or services.
Appointment Requests: Enable users to schedule consultations or personalized shopping experiences.
Support Requests: Act as a channel for addressing customer issues or concerns.
3. Subscribe Form
- The Subscribe Form helps you capture leads and grow your email marketing audience.
Key Features:
Header and Subheading:
Header: Customizable header text to attract users, such as "Become an Angelic Relics Insider."
Subheading: Provides additional context to encourage action, e.g., "Subscribe and receive a promo code for your next purchase."
Disclaimer Section:
Allows adding legal text or privacy statements, e.g., "By submitting this form, you agree to receive recurring promotional messages."
Can be styled using a predefined "Disclaimer Style" for uniform formatting.
Submit Button:
Customizable text, such as "Sign Up."
Button styles can be selected or designed in the Style Manager for branding consistency.
Thank You Section:
Includes a "Thank You Title" (e.g., "Thank you for subscribing!") and "Thank You Text" for a user-friendly post-submission confirmation.
Input Fields:
Customizable input styles for Name, Email, and optional Phone fields.
Option to toggle Phone input visibility (e.g., Show or Hide).
Font Customization:
Full control over font family, size, color, weight, and spacing for text elements.
Separate configurations for "Default" and "Hover" states.
Border Styling:
Options to adjust border type and radius for a polished look.
Set border properties for both default and hover states.
Animations:
Animation settings for enhanced visual engagement, including duration and trigger offset.
Option to animate repeat actions or maintain static behavior.
Spacing (Padding and Margin):
Adjustable padding and margins for precise alignment and spacing of the form elements.
Positioning:
Configurable X and Y positioning for exact placement on the page.
Adjustable layout ensures it fits well within any webpage design.
Opacity:
Allows adjustments for background transparency to complement design aesthetics.
Click Actions:
Configurable click actions such as "None" for static forms or custom actions.
Best Uses:
Newsletter Subscriptions: Engage users by collecting email addresses for periodic updates and exclusive offers.
Promotional Campaigns: Offer signup incentives like discount codes or early access to sales.
Customer Loyalty: Create a community by encouraging users to subscribe for insider benefits.
4. Links
- The Links element allows for seamless navigation and resource integration.
Key Features:
Configuration
Link(s): Easily configure individual links. For example, the current setup includes a "Test Link."
Orientation: Choose between vertical or horizontal orientation to suit your design.
Name
Control Name: Assign a unique identifier to reference the element in custom CSS or JavaScript.
Classes: Add custom classes for advanced styling and functionality.
Font
Fully customizable font settings, including:
Font Family: Define the font style for the links.
Color: Customize the link color for better visibility.
Size: Set the font size for readability, currently set to 0.9em.
Weight, Letter Spacing, Line Height: Fine-tune text appearance for design consistency.
Alignment: Align text left, center, or right, as needed.
Dimensions
Set the height and width of the links element.
Width Unit: Choose between pixels or percentage for flexibility.
Positioning: Absolute positioning allows precise placement within the design.
Border
Add or customize borders for visual separation or emphasis.
Border Radius: Set the rounding of corners to enhance aesthetics.
Animations
Add interactive animation effects, such as:
Duration: Customize how long the animation lasts (currently 400ms).
Animation Repeat: Choose repeating or single animations.
Trigger Offset & Delay: Adjust when and how animations activate.
Padding and Margin
Add spacing around the links using adjustable padding and margins to refine the layout.
Opacity
Control the transparency of the links element for subtle or bold design effects.
Actions
Click Action Type: Assign actions such as "None," "Open Link," or other custom behaviors.
Display and Layering
Display: Toggle visibility of the links.
Layer Index: Manage the stacking order of elements for multi-layered designs.
Position
X & Y Coordinates: Precisely position the links element within your page layout.
Best Uses
Call-to-Actions: Use links for key actions, such as "Learn More" or "Buy Now."
5. Map
- The Map element integrates Google Maps functionality into your page to display locations.
Key Features:
Name:
Control Name: Assigns a unique identifier for referencing in custom CSS or JavaScript.
Classes: Can be used for styling and advanced scripting.
Configuration:
Address: Automatically detects the entered location via Google Maps, eliminating errors.
Zoom: Adjustable zoom level (e.g., 5x) to control how close or far the map displays.
Dimensions:
Height: Set to 500px, offering ample space for displaying the map.
Width: Configured to 100%, ensuring the map spans the full width of the container.
Width Unit: Based on percentage for responsive design.
Positioning: Set to "Relative" for proper alignment on the webpage.
Border:
Border Type: Customizable for edge styling; currently set to none.
Border Radius: Adds rounded edges if needed.
Animations:
Animation Type: Options to animate the map during transitions.
Duration and Delay: Adjustable to control animation speed and delay.
Trigger Offset: Defines when animations are activated as users scroll.
Opacity:
Allows subtle transparency adjustments for aesthetic customization.
Display:
Show/Hide Element: Controls visibility.
Layer Index: Adjusts stacking order, ensuring proper placement relative to other elements.
Position:
Configurable X and Y values for precise map placement.
Best Uses:
Displaying Business Locations: Ideal for showcasing your store or office address to customers.
Event Venues: Embed maps to guide attendees to conferences or gatherings.
Directions and Accessibility: Enable users to easily navigate to your location using Google Maps integration.
6. Related Product Views
- The Related Product Views element dynamically showcases related items to enhance discoverability.
Key Features:
Carousel Type
Set to "Simple Carousel," offering an intuitive sliding view of related products.
Item Aspect Ratio
Configurable to maintain visual uniformity. Currently set to "Square (1:1)."
Text Option
Choose to display the product title, price, or description as overlays for each product.
Design Options
Grid Spacing: Adjust spacing between items; currently set to 0px.
Item Padding: Customize padding within product items; set to 0px.
Border: Includes adjustable width, color, and radius for styling. Presently, the border width is 10px with no radius for a clean design.
Item Background
Options for default and hover states, enabling unique background colors, opacity, or zoom effects.
Font Customization
Fully customizable fonts for text overlays, including size, weight, and alignment.
Sizing
Height: Fixed at 300px.
Width: Percentage-based, set to 100%, ensuring the carousel adapts to various screen sizes.
Animations
Enable smooth transitions with configurable animation types, durations, and delays.
Padding and Margin
Adjustable top, bottom, left, and right padding/margin for precise spacing around the element.
Opacity
Modify the transparency of the element or individual items for visual effects.
Actions
Configurable click actions to add interactivity, such as linking to specific product pages.
Display and Layering
Controls the visibility and stacking order of the element, ensuring proper layout integration.
Best Uses:
Cross-Selling
Showcase products that complement the customer's selected item, like matching jewelry sets.
Personalized Recommendations
Display similar items based on browsing or purchase history for a tailored shopping experience.
7. Product List View
- The Product List View is a powerful element for displaying collections of products with advanced filtering and sorting features.
Key Features:
Datasource Options:
Product Filtering: Select specific product types, categories, materials, and designers to display in the list view.
Price Range Control: Configure minimum and maximum prices, currently set from $0.00 to $1,000,000.00.
Stock Option: Option to filter products by availability, currently set to "All available products."
Default Sort: Configure sorting behavior, with the default set to "Recently Modified."
Design:
Gallery Type: Displays products in a grid view for a clean and organized layout.
Item Count and Search Options: Choose to show the item count and enable a search input field for better navigation.
Refinement Panel: Includes configurable filters like collections, types, materials, designers, colors, and price range, accessible through the "Edit Refinement Panel" option.
Items Per Row: Customize the number of items displayed in a row, currently set to 4.
Text Options: Configure to show titles, descriptions, or pricing on product cards. Currently set to "None."
Grid and Item Spacing: Adjust spacing between items, with grid spacing set to 10px and item padding to 0px.
Border Customization: Allows control over border width (10px), color, and radius for a refined appearance.
Image Aspect Ratio: Maintains a consistent square ratio (1:1) for all product images.
Background and Font Settings:
Background: Customizable background type, opacity, and zoom effects for individual product cards.
Font: Adjust font family, size, color, weight, letter spacing, and alignment for text overlays.
Sizing:
Height and Width: Set to a fixed height and 100% width to span the container's full area.
Animations:
Effects and Duration: Configure animations for product card interactions, with a current duration of 400ms. No animations are currently set.
Padding and Margin:
Configurable padding and margins for individual product cards or the entire list view.
Refinement Panel:
Interactive Filters: Allows users to refine the product list dynamically. Filters include collections, types, materials, designers, colors, and price range.
Easy Configuration: Accessible through the "Edit Refinement Panel" option to manage categories displayed in the side panel.
Display and Layering:
Visibility: Controls whether the list view is visible on the page.
Layer Index: Determines the stacking order of the product list relative to other elements.
Best Uses:
Product Showcases: Ideal for presenting large catalogs of jewelry items, organized by type or collection.
Customizable Filters: Perfect for enhancing user navigation with filters like price range, designers, and materials.
8. Product Details View
- The Product Details View provides detailed product information to enhance the shopping experience.
Key Features:
Design Options:
Layout Selection: Choose from pre-defined layouts to organize product details effectively.
Display Preferences: Configure the visibility of product descriptions, designers, SKUs, and special messages (e.g., Klarna, Affirm, or Afterpay).
Custom Fonts: Customize font styles for titles, prices, designers, and SKUs by using the three-dotted button to access the style manager.
Disclaimer Management:
Update Disclaimers: Easily add or modify disclaimers for dimensions, shipping, returns, and special orders through a dedicated window dialog. You may also add in your own custom disclaimer.
Image Design:
Layout Options: Select vertical or horizontal image layouts with or without thumbnails.
Zoom Icon: Enable zoom functionality for a closer view of product images.
Button Controls:
Buy Now Visibility: Toggle the display of "Buy Now" buttons for quick purchases.
Style Customization: Adjust button styles for "Add to Cart," "Buy Now," and "Notify Me" functionalities.
Font and Background Customization:
Default and Hover States: Modify font styles, sizes, and background colors for enhanced visual appeal.
Sizing and Spacing:
Adjustable Height and Width: Define dimensions as fixed or percentage-based to fit the product view seamlessly into your layout.
Padding and Margins: Add spacing around elements to ensure a balanced design.
Interactive Features:
Animations: Add visual effects like entry animations or delays for dynamic transitions.
Action and Display:
Click Actions: Assign specific actions to product interactions.
Layer Index: Set the stack order of the product view relative to other elements on the page.
Best Uses:
Showcase detailed product information, enhancing the customer's understanding of key attributes.
Highlight special product features or promotional messages through disclaimers and customized layouts.
Provide immersive product visuals with zoom-enabled image layouts.
The Page Builder equips you with a versatile set of elements to create functional, visually appealing pages tailored to your business needs. Whether you’re engaging customers with interactive forms, guiding them with buttons and links, or enhancing their shopping experience with product views, these elements ensure a seamless and user-friendly interface.
Troubleshooting
If you encounter any issues when using the different Interactive and Functional Elements in the Page Builder, please reach out to Flawless POS customer support for technical assistance.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article