Flux Product Docs
  • What is Flux?
  • Guides
    • Creating a Premium Video
    • Creating Your First Site
    • Creating a Countdown
    • Creating a Navigation Bar
    • Creating a Group
    • Custom 404 Page
    • Adding a Favicon to Your Site
    • Adding Videos to Your Site
    • Managing Your Guest List
    • Asset Management
    • Creating Sites from Site Templates
    • Publishing Site Versions
    • Advanced Debugging
  • Fundamentals
    • Key Concepts
    • Sites
    • Guests
    • Environments
      • Show Variables
    • Flows
      • Anatomy of a Node
      • Connecting Nodes and Building Flows
      • Passing Data
      • Scope
      • Interpolation
    • Keyboard Shortcuts
      • Keyboard Shortcuts - Page Editor
    • Animation States
    • Local Variables
    • Groups
  • Use Cases
    • For Designers
    • For Engineers
      • Custom CSS
      • Custom Modules
    • For Event Manager
      • Intercom Integration
  • Documentation
    • FAQ
    • Glossary
    • 🚀Show Controller
      • Modes
    • Domains and Subdomains
      • Hover
      • AWS Route 53
    • Premium Live Channels
    • Basic Video
    • Premium Video
      • AI Generated Subtitles
      • Supported Input Codecs and Containers
      • Supported Language Labels
      • Serverside Forensic Watermarking
    • Flow Nodes
      • Middleware
  • Modules
    • Access Code
    • Audio
    • Button
    • Carousel
    • Chat
    • Checkbox
    • Container
    • Countdown
    • Date
    • Embed
    • Image
    • Intercom
    • Link
    • Lottie
    • Page
    • Meter
    • Modal
    • Photobooth Gallery
    • Open Login
    • QR Code
    • Radio
    • Rich Text
    • Stack
    • Style
    • Spline
    • Switch
    • Text Input
    • Video
  • Template Guides
    • NatGeo FYC
      • Adding a Panel
    • Meow Wolf All Shrimps
  • 🚀Change Logs
    • July 12, 2024
    • June 08, 2024
    • April 26, 2024
    • April 12, 2024
    • March 29, 2024
    • March 15, 2024
    • March 1, 2024
    • September 2022
    • August 2022
    • July 2022
    • June 2022
Powered by GitBook
On this page
  • Overview
  • Creating the Group
  • Overview
  • Creating the Group
  • Applying Groups to New Pages
  • Editing Module Properties in a Group
  • Adding New Modules to a Group
  • Deleting Modules from a Group
  • Ungrouping Modules

Was this helpful?

  1. Guides

Creating a Group

Last updated 2 years ago

Was this helpful?

Overview

The advantage for creating groups is allowing a content author to reuse grouped modules on other pages while also being able to do a single edit to effect all instances or make overrides to make individual changes per instance.

For this case we have created two pages with navigation bars. Lets say we wanted to create third page with a navigational bar. You can see how it would be useful to convert the Navigational bar into a group that can be edited once and all instances are effected.

Creating the Group

In the layout editor, select and right click on the parent containing the navigational bar. Select "Convert into a group"

Overview

Creating groups provides several benefits, including the ability to reuse modules that have been grouped together on multiple pages. This grouping allows for efficient updates to content, as a single edit can affect all instances of the grouped modules. Additionally, individual overrides can be made to each instance of the grouped modules, allowing for tailored modifications to specific pages as needed.

In this particular scenario, we have developed two web pages featuring navigation bars. Should we intend to generate a third page that also features a navigation bar, it would be advantageous to convert the navigation bar into a group. By doing so, we can achieve the ability to modify the group once and apply changes to all instances of it across multiple pages. This approach can notably streamline the content authoring process and ensure consistency throughout the entire website.

Creating the Group

In the layout editor, select and right click on the parent Stacked Layout containing the navigational bar. Select "Convert into a group". You'll be prompted to give your group a name.

Upon clicking the "OK" button, you will receive confirmation that the group creation process is complete when the group is visually distinguished by a green outline. You can verify this by navigating to the "Groups" section in the side bar, where you will find your newly created group available for use in the layout editor.

Applying Groups to New Pages

Lets open up our login page now and delete the header we previously created. Once deleted we can now drag in our Navigation bar group to replace.

The navigation bar has been modified to utilize the group that was previously created. As a result, any subsequent changes made to this group will be uniformly reflected across all instances where the group is utilized.

Editing Module Properties in a Group

When selecting a group in the layout editor, In the properties panel you will see two options

Edit Default

When adjustments are made to the settings in the "Edit Default" mode, such modifications will be universally applied to all instances of the group.

Add Overrides

If changes are made to the settings in "Add Overrides" mode, these alterations will be solely applicable to the specific instance of the group that is being edited. This capability enables tailored modifications to be made to individual instances of the group, while preserving consistency across other instances.

Lets add an Override to one of the button modules in the navigation bar.

Click "Button" module and select "Add Overrides". This will open the properties panel. Lets change the button color to orange and save.

Preview both Home & Login page to see that only one is reflecting our button color change.

Adding New Modules to a Group

To make changes to our navigation bar we must right click on our group and select "Enter Group Context". You'll see the tab turn yellow indicating we are in edit mode.

Now we can drag in another "Button" module. I gave it the name "Visit us" and linked "/visit". Click the submit button and that will save changes and close out edit mode.

Visit the preview of your Home & Login pages to see that both now have the new button.

Deleting Modules from a Group

To delete a module from a group, simply right click on the module you want to delete within the group and select "Unlock Module", select the module again and hit the delete key.

Ungrouping Modules

In certain circumstances, it may be necessary to ungroup modules that have been grouped together. This can be accomplished by right-clicking on the specific group in the layout editor and selecting the "Detach Group" option. By doing so, the previously grouped modules will become independent, individual modules that can be modified or reorganized as needed.