|Multi-Purpose Joomla Template

Table of Contents

1. Introduction
2. Requirements
3. Installing Template Only
4. Installing Quickstart Package
5. Installing Extensions
6. Basic Settings
   • Page Preloader
   • Boxed Layout
   • Logo
   • Body Background Image
   • Footer
   • Social Icons
   • Contact Information
   • Coming Soon
   • Error 404 Page
   • Offline Page
7. Header Settings
   • Header
   • Sticky Header
8. Layout Manager Settings
9. Menu Settings
   • Select Menu
   • Menu Type
   • Offcanvas icon
   • Dropdown Width
   • Dropdown Animation
   • Off Canvas Menu
10. Typography Settings
    • Custom Font
11. Custom Code Settings
    • Before </head>
    • Before </body>
    • Custom CSS
    • Custom JS
12. Advanced Settings
13. Blog Settings
14. Presets Settings
15. Virtuemart
16. General Data Protection Regulation (GDPR)
17. Source and Credit
18. Support

---

If you haven't decided yet, and you're starting to believe that Flex is the right choice for your next project, you can:

Get Flex Now

Join 6,400+ satisfied users worldwide

1) Introduction

Flex is a versatile, responsive Joomla template designed for modern websites. It combines user-friendly customization options with retina-ready graphics, making it the perfect solution for businesses, portfolios, and e-commerce sites.

You can use this template for Business, Company, Onepage, Online Store (E-Commerce), Corporate, Creative, Fashion, Agency, Photo Studio, Freelancers, Portfolio Theme, and much more.

Flex is built with responsive design, meaning your new site will adapt to fit any screen size, from desktops down to mobile phones. All pages and features have been optimized to work on every device.

Most Powerful Features:

---

• Drag & Drop Layout Builder and SP Page Builder Pro Integration (Save $59). Flex comes with a fantastic page builder that's very easy to use and edit. Only with drag and drop you can create complex layouts. With SP PageBuilder Pro extension you can easily customize your website just in few clicks. The most powerful drag & drop builder available.
  
  72+ Addons Included:
  • Carousels, Slider, Buttons, Gallery, Team, Tabs, Accordions, Animated headlines, Animated Number, Pricing, Pie Progress, Google Maps and Ajax Contact forms, Call to Action, Buttons, Testimonials and more.
  • 9 custom addons, carefully built specially for Flex:
    1. Animated Headlines
    2. Plyr - HTML5 Media Player
    3. Slick Slider / Carousel
    4. Lightbox Gallery
    5. Bootstrap Modal
    6. PrettyPhoto Modal
    7. Icons
    8. Testimonials Flex
    9. Latest Posts
• Newsletter Integration. We also added support for AcyMailing newsletter, because we know that email works a lot better than any other online marketing tool.
• Fully Responsive Design with 4 Unique Home Layouts.
• Portfolio component with different styles and lightbox gallery included. Outstanding portfolio solution for designers, photographers, artists, professionals and all kinds of creative business.
• VirtueMart 4.6.0 Integrated. VirtueMart turns your Joomla! site into a powerful and full-featured e-commerce system. Create online shops and online catalog with ease. Configure the extension to handle multiple products and categories and support a wide range of shipping and payment options.
  • Payments, shipments, coupons, calculation rules, ...
  • Real multi currency with auto updating rates
  • Ajax Off-Canvas shopping cart module
  • Ajax navigation between products
  • SEF/SEO integrated
  • Multilingual
• Multiple Headers. Flex comes with several header layouts to match your personal taste. Classic header with navigation, centered or inline, transparent, with video background, white, colored or something more complex and place your ads and banners inside header.
• Responsive Layout - This template is responsive to give a perfect user experience on all devices
• SP Page Builder Pro (Save 59$) - Number #1 Page Builder for Joomla CMS. A simple to use page builder that help you build a complex Joomla layout in a few minutes without coding knowledge.
• Bootstrap 5.3.8 - Flex uses Twitter Bootstrap. This means that a range of shortcodes are automatically supported.
• Font Awesome Free 7.1.0 (2,089+ Icons) + 202 Thin Pixeden Icons (v1.2)
• Megamenu Builder - Take full control over appearance of menu (size, width, align), choose icons for menu items and then use drag & drop to add any Joomla! modules into current menu.
• Off Canvas Menu (Separate Mobile Menu)
• Fluid and Boxed Layout - Use wide (default) or boxed layout variant.
• Sticky Header with Mainmenu - Improve your website usability using Sticky Header feature.
• CSS and JS compression options
• Support for RTL languages - Flex supports middle eastern languages such as Hebrew and Arabic.
• Page Builder Integration - Flex is deeply integrated with Page Builder.
• 1,500+ Google Fonts with update button - Typography based on Google Fonts.
• Unlimited Colors - Six template styles allows you to choose your own colors. Beyond that using custom CSS allows you to override all used color presets.
• Retina Ready - You can upload and use a double size of your logo image.
• Built With HTML5, CSS3 & Less - Flex is based on Less preprocessor (Helix3).
• CSS & Javascript Compression - Improve speed of your website.
• Quickstart Package with demo data installer
• Logo Option - From template settings you can choose logo type, logo position, logo image.
• Custom Code - Use your own custom code for CSS, JS, metatags.
• Social Icons
• Social Share
• Integrated Social Comments
• 404 Error Page
• Coming Soon Page
• Offline Page
• Full documentation
• + More features coming in next release...

---

2) Requirements - top

Joomla System Requirements

Most hosting providers and personal installations on Unix/Linux/Windows systems should be able to host Joomla 6.x under very common configurations. We recommend checking the following settings before issues appear.

Server:

• Software: PHP 8.3.0 (minimum), PHP 8.4+ (recommended) for Joomla 6
• Apache mod_rewrite module (for short URLs)

Note: MySQL 8.0.13 or MariaDB 10.4 is required for Joomla 6 installation.

Database:

• MySQL 8.0.13 minumum (8.4 recommended) for Joomla 6
• MariaDB 10.4 minimum (12.0 recommended) for Joomla 6
• PostgreSQL 12.0 minimum (17.6 recommended)

Web Server:

• Apache 2.4
• Microsoft IIS 10
• Nginx 1.26 minimum (1.29+ recommended)

The values for PHP.ini (PHP settings):

• memory_limit = 128MB (but 256MB or more is recommended)
• upload_max_filesize - Minimum: 16M (32M or more recommended)
• post_max_size - Minimum: 20M
• max_execution_time = 180 (but 300 or more is recommened)
• cURL library - your server must work with curl or url_fopen.
• OpenSSL Libraries - must be enabled.
• PHP file_get_contents() function - must be available/unlocked.

* Those values can be changed in php.ini or .htaccess file. Please contact your web hosting service provider to be sure that your server complies with the requirements or to ask them where/how to change PHP settings. There are some less demanding situations where Template and SPPB will perform quite well in weaker PHP settings.

In addition, some features of the modules and components used in a template may require:

• GD library support
• cURL library support
• Support for mb_* functions in PHP to use multibyte strings

Remember to restart Apache (localhost only) after configuration changes.

Browser: (minimum)

• Firefox 29+
• Google Chrome 30+
• Opera 10+
• Safari 5+
• IE 11+

Notice: Microsoft will no longer provide security updates or technical support for older versions of Internet Explorer. Using older versions of the browser may expose you to potential security risks. Also, the IE11 browser graphics engine was not updated since 2015.

Development Environment:

We recommended the following local configurations on development machine.

Windows:

• WAMP server for Windows
• XAMPP for Windows
• Jamp for Windows

Linux:

• XAMPP for Linux
• Lamp Server

Mac OS:

• MAMP and MAMP Pro
• XAMPP for Mac OS

---

3) Installing Template Only - top

To install only the Flex template (without demo content), follow these steps:

Step 1: Log into your Joomla administrator panel (www.your-site.com/administrator/)

Step 2: Navigate to System → Extensions

You'll see the "Install" section with four installation methods:

1. Install from Web - Browse extensions from the Joomla Extension Directory
2. Upload Package File - Upload a template package from your computer (recommended)
3. Install from Directory - Install from a directory already on your server
4. Install from URL - Install directly from a URL (requires proper server configuration)

For most users, we recommend Option 2: Upload Package File.

Step 3: Click the Or browse for file button and select the template file: flex_4.3_template_only.zip

Step 4: If the installation is successful, you'll see a confirmation message:

Verifying Installation:

Go to System → Site Template Styles. The Flex template should appear in the list. You can then assign it to your site or set it as the default template.

Alternative: FTP Installation

You can also install the template via FTP by extracting the template folder and uploading it to /templates/ directory on your server. Then use Joomla's Discover feature in Extension Manager to complete the installation.

Note: Do not try to use FTP to install Components, Modules and Plugins if you are a beginner/novice. These items need database entries which have to be inserted manually if you bypass the package installer.

---

4) Installing Quickstart Package - top

Flex includes two Quickstart package options:

• flex_4.3_quickstart_with_virtuemart.zip - Full demo with VirtueMart e-commerce
• flex_4.3_quickstart.zip - Demo without VirtueMart (recommended if you don't need online store features)

Recommended Development Environment:

We strongly recommend installing Quickstart on a local server first for testing. Popular options include:

• Windows: WAMP or XAMPP
• Mac: MAMP or XAMPP
• Linux: XAMPP or LAMP stack

Quickstart Installation Steps:

1. Create an empty database on your server (MySQL 8.0.13+ or MariaDB 10.4+)
2. Upload the Quickstart package to your web root directory
3. Extract the package (if your hosting doesn't auto-extract zip files)
4. Navigate to your domain to start the Joomla installer
5. Follow the standard Joomla installation process with the provided demo data

The installation follows the standard Joomla process. Click the images below to see detailed screenshots:

---

---

5) Installing Extensions - top

Don't update extensions via Joomla’s updater, because some of the extensions are "Pro" versions or "Advanced" versions and if you update them, you will downgrade extenson to "free" version, with limited features. Best example of that is SP Page Builder, "pro" version. If you update "automatically" using Joomla updater, you will downgrade it to "free" version. You probably don't have this license key from developer (Joomshaper) and it is not a Themeforest license.

"Advanced" version, meaning "custom" version, with some features added and developed specially for Flex template. Best example of that is SP Simple Portfolio, which is far more advanced then original version from developer. Custom fields are added, along with "lightbox gallery" feature for lightbox (popup window). Virtuemart has also added feature to show images in Ajax off-canvas cart, so it is also "custom" version, even though it is a matter of few lines of code.

The best way is to update extensions using Joomla’s installer (System → Install → Extensions, in back-end administrator). Again, do not update "automatically" using update feature, but rather choose required extension from "Extensions" folder of your downloaded package from Themeforest.

• SP Page Builder - update only via Joomla’s installer (System → Install → Extensions).
• SP Simple Portfolio - update only via Joomla’s installer (System → Install → Extensions).
• Virtuemart - update only via Joomla’s installer (System → Install → Extensions).

These three extensions should be updated this way, from "Extensions" folder of your downloaded package. SP Page Builder, for example is "pro" version and you cannot update it automatically, because you don't have license key. That is why we included SP Page Builder in "Extensions" (required extensions) folder of your downloaded package.

Acymailing (newsletter) extension is the only one which can be updated "automatically" using Joomla updater.

---

6) Basic Settings - top

Page Preloader

You can enable the Page Preloader from the template settings.

The Page Preloader displays a loading animation while your page content is loading. This provides a better user experience for visitors, especially on content-heavy pages or slower connections. Once the page fully loads, the preloader smoothly transitions away.

Favicon - Upload an ICO, GIF, or PNG file to replace the default Joomla favicon. A favicon is the small icon that appears in browser tabs, bookmarks, and address bars. For best compatibility, we recommend using a 16x16 pixel or 32x32 pixel image format.

Boxed Layout

Flex supports both wide (default) and boxed layout variants.

The wide layout uses the full browser width without visible edges, while the boxed layout constrains content within a defined width with optional background elements around it. Choose boxed layout if you prefer a contained design with custom background colors or images.

Logo

The logo settings control how your site's main logo appears.

• Logo Type - Choose between image-based or text-based logo
• Logo Position - Place your logo in any available module position
• Image - Upload your logo image (PNG, GIF, or JPG format)
• Retina Logo - Upload a high-resolution version for retina displays (2x size of standard logo)
• Mobile Logo - Use a separate, optimized logo for mobile devices (typically smaller for better display on small screens)

Body Background Image

When using Boxed Layout, you can set a background image for the page without custom CSS.

• Select Image - Choose a background image (JPG, PNG, or GIF format)
• Background Repeat - Control how the image repeats: No Repeat, Repeat, Repeat Horizontally, or Repeat Vertically
• Background Size - Choose how the image scales: Cover (fills entire area) or Contain (fits within area)
• Background Attachment - Set whether the image scrolls with content or remains fixed
• Background Position - Set the starting position of the background image

---

Footer

Customize your footer content directly from template settings. Add copyright information with HTML formatting for links. By default, the footer uses the "footer1" module position, but you can also publish custom modules in this area for more advanced layouts.

Social Icons

Social icons appear in the top-left corner of the template, displaying links to your social media profiles. Supported platforms include Facebook, Twitter, LinkedIn, YouTube, Pinterest, and more. These icons use the "top1" module position.

To hide any social icon, simply clear its URL field in the template settings.

Contact Information

Display contact details in the top-right corner without creating a custom module. This feature supports phone numbers and email addresses for quick visitor access.

Coming Soon

Replace Joomla's default offline mode with a custom Coming Soon page. This feature displays a countdown timer and custom message to visitors while your site is under construction, instead of showing the standard login module.

This is ideal for businesses that have registered a domain but haven't launched their website yet. It informs potential visitors that you're working on something exciting and builds anticipation for your launch.

---

Error 404 Page

Customize the 404 error page that visitors see when requesting a page that doesn't exist. Flex includes a dedicated "404" module position specifically for this page.

A 404 error occurs when a visitor tries to access a URL that no longer exists or was never created. This commonly happens after changing menu aliases, during site migrations, or when search engines index old URLs. With Flex's custom 404 page, you can help "lost" visitors find their way back to relevant content.

You can also add modules specifically to the 404 page by publishing them to the "404" position, such as search modules, navigation menus, or custom HTML content.

Also, you add module using "404" position...

All you have to do is add new module(s) and publish it on "404" position. It can be very useful, because you can add there search module, menu or custom code module.

---

Offline Page

Customize Joomla's offline page with a background image and optional countdown timer. This is perfect for scheduled maintenance or planned launches where you want to show visitors when your site will be available.

You have an option to upload background image for your "Offline Page" and also to enable Countdown (timer), which could be very practical if you want to make final date for "release" of your website.

---

7) Header Settings - top

Header

The Header Settings tab provides complete control over your website's header appearance and behavior. You can customize background colors, text colors, link colors, and header dimensions without editing CSS code.

Key header customization options include:

• Background Colors - Set custom colors for header background
• Text & Link Colors - Control color scheme for header text and navigation links
• Custom Height - Adjust header height to match your design needs
• Sticky Header - Enable fixed header that remains visible while scrolling

The built-in color picker makes customization easy - simply click on any color box to access a full color palette and select your preferred colors without needing to remember HEX or RGBA codes.

Header Styles Integration: These settings work alongside the template's preset styles. Custom header colors will override preset colors for more precise control over your website's appearance.

---

Sticky Header

Enable the Sticky Header feature to improve website navigation and user experience. When activated, your main menu and logo remain fixed at the top of the screen as users scroll down the page.

Benefits of using Sticky Header:

• Improved Navigation - Users can access main menu from anywhere on the page
• Better User Experience - No need to scroll back to top for navigation
• Enhanced Professionalism - Creates a modern, polished website appearance
• Increased Engagement - Easy access to navigation encourages exploration

You can easily enable or disable the sticky header feature in the Sticky Header options section. This setting works seamlessly with all header styles and layouts.

---

8) Layout Manager Settings - top

The Layout Manager provides a visual interface for building flexible and customized layouts using module positions. This powerful feature allows you to customize your template's structure without any programming knowledge.

The Layout Manager divides your page layout into 6 columns that span the entire width. You can create any column configuration by combining these blocks. For example, to create a 4-column layout, you would use wider blocks for each column.

Key Features and Controls:

• Make Component Area - Designate a column as the main content area where Joomla components and system messages will display. Only one column in the entire layout can be set as the component area.
• Module Position - Assign a module position to each column. Each position should have a unique name, and you should avoid using the same position name in multiple columns.
• Hide on Mobile / Tablet / Desktop - Control where each layout block appears. You can hide specific elements on certain devices, such as hiding complex modules on mobile devices while keeping them visible on desktop.
• Custom CSS Class - Add custom CSS classes to individual layout blocks for advanced styling. This allows you to apply unique styles to specific content elements without affecting the overall template.

Best Practices:

• Before making significant changes, create a backup of your current layout by making a copy. This allows you to restore the original layout if needed.
• Plan your layout structure before building. Consider how your content will flow across different screen sizes.
• Use the device visibility options strategically to optimize user experience across all devices.
• Test your layout on different screen sizes after making changes to ensure proper responsiveness.

The Layout Manager makes template customization accessible to users of all technical levels, providing a visual way to create professional layouts that adapt perfectly to any device or screen size.

---

9) Menu Settings - top

Flex provides comprehensive menu customization options through the template settings. While basic menu configuration is available here, advanced settings are managed within Joomla's Menu Manager for individual menu items.

Select Menu

Choose which menu from your Joomla installation will be used as the main navigation. This setting is particularly important for multilingual websites, where you may need to create separate template styles for each language and assign the corresponding menu.

Menu Type

Flex supports two menu systems that can be used independently or together:

• Mega Menu - Advanced dropdown menu with support for multi-column layouts and module integration
• Off Canvas Menu - Mobile-friendly sidebar menu that slides in from the side

Off Canvas Icon

Customize the appearance of the Off Canvas menu toggle icon. The default "Animated" icon provides a modern hamburger menu experience, but you can choose from several alternative icon styles to match your design preferences.

Dropdown Width

Set the width of dropdown submenus in pixels. The default width is 240px, but you can adjust this value to accommodate your menu content. Wider dropdowns are useful for menus containing extensive content or multi-column layouts.

Dropdown Animation

Choose from eight transition effects for dropdown menu appearances:

• No Animation
• Fade
• Zoom
• Fade In Up
• Fade In Down, Fade Out Up
• Slide Down
• Drop In
• Twist

These animations enhance user experience by providing smooth visual transitions when submenus open and close. Select "No Animation" if you prefer submenus to appear instantly without transition effects.

---

Off Canvas Menu

The Off Canvas menu serves as the primary mobile navigation menu, appearing as a vertical sidebar that slides in from the edge of the screen.

Setting Up Off Canvas Menu:

1. Create a menu module and assign it to the “offcanvas” position in the module manager.



2. “Accordion” Alternative Layout - For menus with many items and sub-items, enable the accordion layout under the “Advanced” tab in the module settings. This creates a collapsible menu structure that improves mobile navigation for complex menus.
   

   ×Close

   Close

   

   ×Close

   Close

---

10) Typography Settings - top

Flex provides comprehensive typography controls that allow you to customize fonts throughout your website with precision and ease.

Google Fonts Integration

The template includes seamless integration with Google Fonts, offering access to over 1,500+ web fonts. A unique "Update Font List" feature allows you to refresh the available font selection with a single click, ensuring you always have access to the latest font additions from Google.

Key Typography Features:

• Live Font Preview - See font samples in real-time while browsing the font selection
• Comprehensive Font Controls - Adjust font family, weight, size, and line height for all major HTML elements
• Character Subsets Support - Access extended character sets for international languages and special characters
• Element-Specific Styling - Customize fonts separately for body text, headings (H1-H6), and navigation elements

Well-chosen typography significantly enhances your website's appearance, readability, and professional credibility. The integrated Google Fonts system makes it simple to implement beautiful, web-optimized fonts without technical expertise.

Custom Font

For advanced typography needs, Flex includes a Custom Font feature that allows you to apply Google Fonts to specific CSS selectors beyond the standard HTML elements.

Using Custom Fonts:

1. Enable the Custom Font option in the typography settings
2. Configure your desired font family, weight, size, and other properties
3. Enter the CSS selectors (class names or element identifiers) in the provided field, separated by commas
4. Save your settings to apply the custom font to the specified elements

This feature is particularly useful for:

• Styling custom elements created by extensions or modules
• Applying unique typography to specific sections of your site
• Creating consistent typography across custom CSS classes
• Maintaining brand consistency with specialized font treatments

The typography settings in Flex provide complete control over your website's textual presentation, enabling you to create visually appealing and highly readable content that aligns with your brand identity.

---

11) Custom Code Settings - top

The Custom Code section allows you to add your own code snippets without modifying core template files. This ensures your customizations remain safe during template updates.

Custom Code Fields

Flex provides dedicated fields for different types of custom code:

• Before </head> - Add code that should appear in the HEAD section of your HTML (meta tags, verification codes, additional CSS/JS links)
• Before </body> - Add code that should appear just before the closing BODY tag (analytics scripts, additional JavaScript)
• Custom CSS - Add custom CSS rules that override template styles
• Custom JS - Add custom JavaScript code for enhanced functionality

Google Analytics Integration

To add Google Analytics tracking to your website, insert your tracking code in the Before </head> field. This ensures the tracking script loads properly on all pages.

Custom CSS and JavaScript Files

For more extensive customizations, Flex automatically recognizes and loads custom files:

• custom.css - Create this file in the templates/flex/css/ directory to add comprehensive CSS customizations. This file loads after all template CSS files, making it ideal for style overrides.
• custom.js - Create this file in the templates/flex/js/ directory to add custom JavaScript functionality. This file loads with your template's JavaScript files.

Benefits of using custom files:

• Customizations are preserved during template updates
• Better organization for larger code additions
• Separation from core template files maintains clean code structure
• Easier to manage and backup custom code

Best Practices for Custom Code

• Always test custom code on a development site before applying to production
• Use the custom.css file for styling changes rather than modifying template CSS files directly
• Keep custom JavaScript in the custom.js file for better maintainability
• Comment your custom code to document changes and their purposes
• Regularly backup your custom files when making significant changes

The Custom Code settings provide a safe and organized way to extend Flex's functionality while maintaining update compatibility and code integrity.

---

12) Advanced Settings - top

The Advanced Settings section provides technical controls to optimize your website's performance, compatibility, and customization capabilities.

LESS Compiler

Flex is built using LESS, a CSS preprocessor that extends CSS with dynamic behavior. The Compile LESS to CSS option processes your LESS customizations into final CSS files.

When to use LESS compilation:

• When modifying template colors through presets or custom color settings
• When making structural changes to template styles
• When developing custom child templates based on Flex

After enabling this option, any changes made to LESS files will be compiled into CSS files located in the templates/flex/css/ directory, overwriting previous versions.

Lazy Loading for Images

Enable lazy loading to improve page load performance by deferring the loading of non-critical images until they enter the viewport.

How Lazy Loading Works:

• Images initially load with lightweight placeholder content
• As users scroll, images within the visible area load progressively
• This reduces initial page load time and bandwidth usage
• Particularly beneficial for image-heavy pages and blogs

Lazy loading is automatically implemented across blog pages, SP Page Builder addons, and other content areas without requiring manual configuration.

Smooth Scrolling

Enable smooth scrolling to create a more polished user experience when navigating within the same page. This feature replaces the default instant scrolling with a smooth, animated transition.

Smooth Scroll Options:

• Disabled - Use default browser scrolling behavior
• Standard Version - Basic smooth scrolling compatible with most browsers
• Alternative Version - Enhanced smooth scrolling for improved compatibility

Smooth scrolling enhances user experience for:

• Anchor link navigation within long pages
• One-page websites with multiple sections
• Back-to-top buttons and internal navigation

Export and Import Settings

Easily transfer template settings between different Flex installations using the Export/Import feature.

How to use:

1. Click "Export Settings" to generate a configuration file
2. Save the generated text file for backup or transfer
3. On another installation, paste the configuration text into the Import field
4. Apply the settings to replicate your template configuration

Mootools Removal

Disable Mootools JavaScript library to resolve potential conflicts with jQuery and modern JavaScript frameworks.

When to remove Mootools:

• If experiencing JavaScript conflicts with extensions or custom code
• When using jQuery-heavy components that conflict with Mootools
• To reduce JavaScript file size and improve performance

Performance Optimization

These advanced settings work together to optimize your website's performance:

• Lazy Loading reduces initial page load times
• Mootools Removal minimizes JavaScript conflicts and file size
• LESS Compilation ensures efficient CSS delivery
• Smooth Scrolling enhances user experience without performance cost

Use these settings strategically based on your specific website needs and performance goals. Always test changes on a development environment before applying to your live website.

---

13) Blog Settings - top

Flex provides comprehensive blog customization options that enhance your content presentation and reader engagement.

Blog Layout Options

Choose between two distinct blog layout styles:

• Masonry Layout - Creates a dynamic, Pinterest-style grid where blog posts arrange in optimal position based on available space. Ideal for visual content and creating an engaging, modern appearance.
• Classic Layout - Displays blog posts in a traditional vertical stack with consistent widths. Perfect for text-heavy blogs and readers who prefer linear content consumption.

Post Formats

Flex supports eight specialized post formats that enhance different types of content:

• Standard - Traditional blog post with featured image and text
• Video - Embedded video content with optimized display
• Gallery - Image galleries with lightbox functionality
• Audio - Audio player integration for podcasts and music
• Link - Highlighted external link presentations
• Quote - Prominent quote displays with styling options
• Status - Short status updates and micro-blogging
• Custom - Extended content with modules, iframes, and custom HTML

The Custom format provides advanced flexibility, allowing you to incorporate Joomla modules, iframes, custom HTML, and specialized content directly into your blog posts without requiring additional extensions.

Post Format Icons

Enable visual indicators that show the content type of each blog post. Each format can display a distinctive icon that helps readers quickly identify the type of content they're about to view.

You can customize the default icons for each post format in the template settings. Leave the icon fields empty to use the predefined default icons, or specify custom icon classes to match your design preferences.

Social Engagement Features

Enhance reader interaction with built-in social features:

Comments Integration

Choose from multiple social commenting systems to encourage discussion and engagement:

• IntenseDebate Comments - Professional commenting system with moderation tools
• Facebook Comments - Leverage Facebook's social graph for authenticated comments
• Disqus Comments - Popular third-party commenting platform with community features

Configure your preferred system by entering the required credentials (Facebook App ID, IntenseDebate Account, or Disqus Username). Only one commenting system can be active at a time.

Social Share Buttons

Enable social sharing buttons that appear below each article, making it easy for readers to share your content across their social networks. The current version includes improved alignment and will be expanded with additional social platforms in future updates.

Image Size Configuration

Control how images display throughout your blog with predefined image dimensions:

These size settings ensure consistent image presentation across different blog layouts and are particularly important for the thumbnail images used in blog listings and featured content areas.

The thumbnail image size setting also controls featured images in the "Helix Blog Options" section when editing articles:

Best Practices for Blog Configuration

• Choose Masonry layout for visual-heavy blogs and Classic layout for text-focused content
• Use appropriate post formats to enhance different content types
• Enable social features to increase engagement and content distribution
• Configure image sizes consistently for optimal display across devices
• Test different commenting systems to find the best fit for your audience

These blog settings work together to create an engaging, professional blogging experience that encourages reader interaction and content sharing.

---

14) Presets Settings - top

Flex includes 8 carefully designed preset color schemes that instantly transform your website's appearance. These presets provide professionally coordinated color combinations for quick styling.

Using Color Presets

Simply select any preset to apply its complete color scheme to your website. Each preset includes coordinated colors for:

• Background elements and layout sections
• Typography and text colors
• Navigation and link styling
• Button and interactive element colors
• Header and footer areas

Custom Color Options

Beyond the preset choices, you can create completely custom color schemes by modifying the default background color and main typography colors for the body section and other elements.

Choosing Between Presets and Custom Colors

• Use Presets for quick, professionally designed color schemes that work well together
• Use Custom Colors for precise brand matching or unique design requirements
• Start with a Preset and then customize individual colors for a balanced approach

The preset system provides both convenience for quick setup and flexibility for detailed customization, ensuring your website reflects your unique brand identity.

---

15) Virtuemart - top

Flex provides seamless integration with VirtueMart, transforming your Joomla website into a powerful e-commerce platform with professional shopping cart functionality.

VirtueMart Integration Features

Flex enhances VirtueMart with specialized styling and functionality:

• Custom product display layouts optimized for conversion
• Responsive shopping cart that works perfectly on all devices
• Enhanced product image galleries and lightbox functionality
• Styled checkout process with improved user experience
• Integrated AJAX cart updates and navigation

Quickstart Package Considerations

Why Fresh Installation is Recommended:

• Quickstart inherits demo vendors, users, and sample data
• Production stores require clean product catalogs and customer data
• Fresh installation ensures optimal performance and security
• You maintain complete control over store configuration

Recommended VirtueMart Setup

For production e-commerce websites, we recommend:

1. Install a fresh copy of VirtueMart from the Extensions folder in your Flex package
2. Configure your store settings, payment methods, and shipping options
3. Create your product categories and add your actual products
4. Set up your tax rules, customer groups, and pricing structures
5. Test the complete shopping experience before going live

Getting Started with VirtueMart

If you're new to VirtueMart or need assistance setting up your online store, begin with the official VirtueMart documentation:

VirtueMart Official Documentation

Flex's deep VirtueMart integration ensures your online store will be visually appealing, user-friendly, and optimized for sales conversion across all devices.

---

16) General Data Protection Regulation (GDPR) - top

The General Data Protection Regulation (GDPR) is a comprehensive data privacy law that protects the personal data of individuals within the European Union and European Economic Area. As of May 25, 2018, all websites serving EU visitors must comply with these regulations.

SP Cookie Consent Plugin

Flex includes the SP Cookie Consent plugin to help you implement GDPR-compliant cookie notifications on your website.

Plugin Features:

• Customizable cookie consent banner
• Multiple display styles and positions
• Automatic cookie policy detection
• Multi-language support
• Easy configuration through Joomla plugin settings

Installing the Cookie Consent Plugin

The SP Cookie Consent plugin is included in your Flex package. Follow these steps to install and activate it:

1. Navigate to System → Install → Extensions in your Joomla administrator
2. Upload the plugin package from the Extensions → SP Cookie Consent folder in your Flex download
3. After installation, go to System → Plugins
4. Find "System - SP Cookie Consent" in the plugin list
5. Enable the plugin by clicking the status icon (it should turn green)

Configuring the Cookie Consent Banner

Once enabled, the cookie consent banner will appear on your website:

Customize the banner appearance and message through the plugin parameters to match your website's design and communication style.

GDPR in Contact Forms

Flex's integrated contact forms include GDPR-compliant features to ensure proper data handling:

Contact Form GDPR Features:

• Optional consent checkboxes for data processing
• Customizable consent messages
• Integration with privacy policy pages
• Clear data processing explanations

Additional GDPR Considerations

While Flex provides tools to help with GDPR compliance, website owners are responsible for full compliance. Additional considerations include:

• Privacy Policy - Create a comprehensive privacy policy page
• Data Processing Records - Maintain records of data processing activities
• User Rights - Implement procedures for data access and deletion requests
• Third-Party Services - Ensure external services (analytics, payment processors) are GDPR compliant

Resources and Further Information

For complete GDPR information and official guidance, refer to these resources:

• Official GDPR Regulation Text - Complete regulation documentation
• European Commission Data Protection - Official EU guidance
• SP Cookie Consent Documentation - Plugin-specific guidance

Flex's built-in GDPR tools help you create a foundation for compliance, but ongoing attention to data protection practices is essential for maintaining compliance as regulations evolve.

---

17) Sources and Credits - top

We've used the following images, icons or other files as listed.

Extensions:

• jQuery - http://jquery.com/
• Bootstrap 5.3.8 - https://getbootstrap.com/docs/5.2/getting-started/introduction/
• Helix 3 framework - http://www.joomshaper.com/helix
• Virtuemart 4 - http://virtuemart.net/
• SP Page Builder - https://www.joomshaper.com/page-builder
• SP Simple Portfolio - https://www.joomshaper.com/joomla-extensions/sp-simple-portfolio

Fonts / Icons:

• Open Sans (free) - https://www.google.com/fonts/specimen/Open+Sans
• Font Awesome 7.1.0 - https://fontawesome.com
• Pixeden Icons (Stroke 7 Icon Font Set v1.2.0) - http://www.pixeden.com/icon-fonts/stroke-7-icon-font-set

Images:

• High quality photos from pixabay.com. Free for commercial use. No attribution required. - https://pixabay.com

---

18) Support - top

Need More Help? Click here

If you couldn't find an answer for your question in this documentation, feel free to contact us . For technical support you can contact us via support contact form here.

We’re in GMT +1 (equal to Central European Time (CET)).

---

Once again, thank you so much for choosing this theme. As said at the beginning, we'd be glad to help you if you have any questions relating this theme.

Go To Table of Contents

---