Content & Display Elements in the Page Builder

The Page Builder provides robust tools to create and manage website elements that enhance content display and overall user experience. In this article, we will explore three essential elements—Image, Text Paragraph, and Header Navbar—focusing on their key features, functionality, and best practices.

1. Image Element

• The Image Element is designed to showcase visual content dynamically and effectively, enhancing the aesthetics and functionality of your page.

Key Features:

1. Background Options:

   • Add either images or videos as the background.

   • Configure Background Type to set an image or video.

   • Adjust Video Position (manual or automatic) and scale the content to fit seamlessly.

2. Customizable Overlay:

   • Add overlays with adjustable opacity to enhance text readability over images.

   • Use color overlays to create contrast or match your brand palette.

3. Lazy Load Media:

   • Improve page performance by enabling lazy loading for images and videos.

4. Dimensions & Positioning:

   • Customize height, width, and positioning for perfect alignment.

   • Scale images using the Zoom/Scale slider.

5. SEO Enhancements:

   • Add SEO Titles and Descriptions to improve search engine visibility for images.

6. Product Tagging:

   • Use the "Configure Product Tags" option to tag products in images.

   • Highlight items (e.g., clothing or jewelry) by tagging them, helping users identify and purchase products directly.

Best Uses:

• Showcase high-quality product images or promotional visuals.

• Use video backgrounds for dynamic landing pages or banners.

• Tag products within images to create interactive shopping experiences.

2. Text Paragraph Element

• The Text Paragraph Element provides a reliable and consistent way to add written content to your page.

Key Features:

1. Styling Options:

   • Customize fonts, colors, and text alignment.

   • Adjust font weight, letter spacing, and line height for better readability.

2. Consistent Placement:

   • Unlike text labels, the Text Paragraph Element offers fixed positioning, ensuring the text remains consistent across different layouts and screen sizes.

3. Background and Effects:

   • Add a background color or gradient to make text stand out.

   • Utilize hover effects for interactive designs.

4. Dimensions & Positioning:

   • Set precise dimensions and positioning for exact placement on the page.

   • Use padding and margin controls to refine spacing.

Best Uses:

• Use for larger blocks of text, such as descriptions, articles, or detailed product information.

• Create uniform and well-aligned content sections that integrate seamlessly with other elements.

• Maintain visual consistency across multiple devices and screen sizes.

3. Header Navbar Element

The Header Navbar Element is a crucial component for website navigation, offering customizable menus and seamless integration of branding elements.

Key Features:

1. Logo Integration:

   • Upload your brand logo and adjust its width.

   • Select from layout options like "Center Logo - Navigation Below."

2. Navigation Menu Design:

   • Edit menu items with the Edit Menu Items button to manage links.

   • Customize hover effects, including line color, width, and padding.

   • Add top and bottom borders for additional styling.

3. Submenu Design:

   • Choose background types (e.g., color or gradient) and adjust opacity.

   • Modify font styles, including size, weight, and alignment.

   • Align submenu text and columns for an organized layout.

4. Account Links:

   • Configure links for user accounts, search, wishlist, and cart options.

   • Adjust font colors, sizes, and padding for each link type.

5. Search Functionality:

   • Add suggested search terms using the "Search Results" feature.

   • Open a dialog window to manage terms for enhanced search accuracy.

6. Responsive Design:

   • Optimize dimensions and positioning to ensure compatibility across devices.

Best Uses:

• Provide intuitive navigation for websites with multiple pages or categories.

• Integrate a search bar and account management links for better user experience.

• Customize submenus to highlight product categories or featured sections.

The Image, Text Paragraph, and Header Navbar Elements are integral to building visually engaging and user-friendly websites. By leveraging their key features, you can create dynamic content displays, maintain consistency, and ensure seamless navigation.

Troubleshooting

If you encounter any issues when using the different Content & Display Elements in the Page Builder, please reach out to  Flawless POS customer support for technical assistance.