AppSections
Download AppSectionsWebsite
  • HOME
  • GETTING STARTED
    • Get Started Here
    • Installation
    • Themes Compatibility
  • IN-APP
    • Application Overview
    • Library
      • Sections Library
      • Templates Library (Coming Soon)
      • Brand Styles Library
      • Wishlist
      • My Library
        • My Sections
        • My Templates (Coming Soon)
        • My Brand Styles
    • Switching Shopify Themes
    • Switching Pricing Plans
    • Uninstallation
  • Basics
    • Layers
    • Styles
      • Add Brand Style
      • Duplicate Brand Style
      • Hide Brand Style
      • Move Brand Style
      • Remove Brand Style
    • Templates (Coming Soon)
      • Add Template (Coming Soon)
      • Duplicate Template (Coming Soon)
      • Hide Template (Coming Soon)
      • Move Template (Coming Soon)
      • Remove Template (Coming Soon)
    • Sections
      • Add Section
      • Duplicate Section
      • Hide Section
      • Move Section
      • Remove Section
    • Groups
      • Add Group Block
      • Duplicate Group Block
      • Hide Group Block
      • Move Group Block
      • Remove Group Block
    • Blocks
      • Add Content Block
      • Duplicate Content Block
      • Hide Content Block
      • Move Content Block
      • Remove Content Block
  • Settings
    • Layout
      • Sections / Blocks
        • Column Widths Repartition
        • Display Device
    • Content
      • Sections / Blocks
        • Button Content
          • Button Layout
          • Button Style
          • Content
          • Custom Icon
          • Icon Button Presets
          • New Tab
          • URL
        • Color Content
          • Background Fill
          • Pattern Presets
          • Pattern Scale
          • Swap Color Order
        • Headline Content
          • Content
          • Select the Headline Font
        • Image Cover Content
          • Brightness
          • Select Image
        • Image Parallax
          • Brightness
          • Direction X
          • Direction Y
          • Distance
          • Movement
          • Select Image
        • Text Content
          • Content
          • Select the Text Font
        • Video Content
          • Brightness
          • Controls
          • Select Poster
          • Select Video
          • Style
        • YouTube Content
          • Autoplay ?
          • Brightness
          • Select Video
    • Slider
      • Styles
        • Effect
        • Position
        • Infinite Loop ?
        • Autoplay ?
        • Autoplay Delay
        • Pagination
        • Navigation ?
        • Pagination ?
      • Sections / Blocks
        • Type
        • Custom (Coming Soon)
        • Direction
        • Slide Number
    • Colors
      • Styles
        • Primary Color Schema
        • Secondary Color Schema
        • Tertiary Color Schema
        • Neutral Color Schema
      • Sections / Blocks
        • Alpha
        • Color Schema
        • Color Schema Hover
        • Lightness
    • Typographies
      • Styles
        • Body
          • Custom Font
          • Custom Font Choice
          • External Font Weight
        • Button
          • Custom Font
          • Custom Font Choice
          • External Font Weight
        • External Custom Fonts
        • Heading
          • Custom Font
          • Custom Font Choice
          • External Font Weight
        • Overwrite current font
    • Font Scales
      • Styles
        • Body
          • Font Size
          • Letter Spacing
          • Line Height
        • Button
          • Font Size
          • Letter Spacing
          • Line Height
        • Heading
          • Font Size
          • Letter Spacing
          • Line Height
    • Texts
      • Styles
        • Link
          • Custom Underline Thickness
          • Underline Skip Ink
          • Underline Style
          • Underline Thickness
        • Text Case
        • Underline
          • Underline Skip Ink
          • Underline Style
          • Underline Thickness
          • Custom Underline Thickness
    • Icons
      • Styles
        • Icon
        • Icon Custom
    • Design / Shapes
      • Styles
        • Border Width
        • Custom Shape
        • Shape Accentuation
        • Shape Preset
        • Shape Standard Direction
      • Sections / Blocks
        • Design Direction
        • Select Shape
    • Size
      • Styles
        • Button Size
          • Min-Width
        • Sections Width
      • Sections / Blocks
        • Button Size
        • Button Width
        • Full Height
        • Min Height
        • Width
    • Margin
      • Styles
        • Margin Top/Bottom
      • Sections / Blocks
        • Extra Margin Bottom
        • Extra Margin Top
    • Padding
      • Styles
        • Padding Right/Left
      • Sections / Blocks
        • Horizontal Padding
        • Vertical Padding
    • Positionning
      • Styles
        • Buttons Positionning
          • Horizontal Alignment
          • Horizontal Padding
          • Text Align
          • Vertical Alignment
          • Vertical Padding
      • Sections / Blocks
        • Horizontal Alignment
        • Position
        • Text Align
        • Vertical Alignment
        • Z Index
    • Gap
      • Styles
        • Horizontal Gap
        • Vertical Gap
      • Sections / Blocks
        • Gap
    • Slider Gap
      • Styles
        • Gap
      • Sections / Blocks
        • Gap
    • Transform
      • Sections / Blocks
        • Perspective
        • Rotate X
        • Rotate Y
        • Rotate Z
    • Media Adjustment
      • Sections / Blocks
        • Horizontal Adjustment
        • Media Zoom
        • Vertical Adjustment
    • Shadows
      • Styles
        • Alpha
        • Blur
        • X
        • Y
      • Sections / Blocks
        • Shadow
    • Children Alignment
      • Sections / Blocks
        • Align
        • Direction
        • Distribute
        • Relative Behavior
    • Sticky
      • Sections / Blocks
        • Sticky Behavior
        • Sticky Position
    • Animations
      • Styles
        • Appear Animation
          • Amplitude
          • Delay
          • Duration
          • Once?
          • Opacity Start
          • Timing Function
        • Hover Color Animation
          • Animation Duration
          • Hover Primary Color Schema
            • Invert Schema Hover
            • Opacity Lightness Hover
          • Hover Secondary Color Schema
            • Invert Schema Hover
            • Opacity Lightness Hover
          • Hover Tertiary Color Schema
            • Invert Schema Hover
            • Opacity Lightness Hover
          • Hover Neutral Color Schema
            • Invert Schema Hover
            • Opacity Lightness Hover
        • Triggered Animations
          • Amplitude
          • Duration
          • Infinite?
          • Preset & Variant
          • Timing Function
          • Trigger
      • Sections / Blocks
        • Appear Animation
        • Appear Animation Direction
        • Triggered Animation
    • Code Overrides
      • Sections / Blocks
        • Code Overrides / Custom CSS
    • Extra Style
      • Styles
        • Custom Cursor
          • Activate Custom Cursor
          • Icon Custom Cursor
          • Icon Custom Cursor on Click
          • Cursor Background
          • Cursor Size
        • Custom Scrollbar
          • Activate Custom Scrollbar
          • Scrollbar Color
          • Scrollbar Background
          • Scrollbar Width
  • Resources
    • Helpful resources
    • Privacy Policy
    • Changelog
    • Affiliate Program
    • AppSections Shopify Apps
    • AppSections Website
    • BlockLoads Website
    • AppSections Instagram
    • BlockLoads YouTube
    • BlockLoads Threads
    • BlockLoads X (Twitter)
    • AppSections Pinterest
    • AppSections Facebook
    • AppSections Linkedin
    • BlockLoads Linkedin
    • AppSections Tiktok
Powered by GitBook
On this page
  • How to Adjust Distribution in AppSections Groups
  • Distribute
  • Distribution Options
  • Explanation of Distribution in a Flex Environment
  • Steps to Adjust Distribution
  • Ensuring the Right Distribution Application
  • Summary

Was this helpful?

  1. Settings
  2. Children Alignment
  3. Sections / Blocks

Distribute

How to Adjust Distribution in AppSections Groups

The "Distribute" setting in AppSections Groups allows you to control the distribution of child blocks within a group using flexbox properties. This setting provides flexibility in organizing the layout of blocks inside a group by defining how space is distributed among the child elements. Here is how you can adjust the distribution:

Distribute

Purpose: This setting allows you to define the distribution of child blocks within a group using flexbox properties.

Usage: Select from six options to set the desired distribution.

Distribution Options

  1. Center: Centers the child blocks along the main axis.

  2. Start: Aligns the child blocks at the start of the main axis.

  3. End: Aligns the child blocks at the end of the main axis.

  4. Space Between: Distributes the child blocks with equal space between them.

  5. Space Around: Distributes the child blocks with equal space around them.

  6. Space Evenly: Distributes the child blocks with equal space between and around them.

Explanation of Distribution in a Flex Environment

  1. Center:

    • Behavior: Child blocks are centered along the main axis (either horizontally or vertically, depending on the flex direction).

    • Use Case: Useful for centering elements within a group, such as a navigation bar or a row of images.

  2. Start:

    • Behavior: Child blocks are aligned at the start of the main axis.

    • Use Case: Useful for aligning elements to the start of the group, such as a left-aligned menu or a list.

  3. End:

    • Behavior: Child blocks are aligned at the end of the main axis.

    • Use Case: Useful for aligning elements to the end of the group, such as a right-aligned menu or a list.

  4. Space Between:

    • Behavior: Child blocks are distributed with equal space between them, but no space at the start or end.

    • Use Case: Useful for evenly distributing elements with no extra space at the edges, such as buttons in a toolbar.

  5. Space Around:

    • Behavior: Child blocks are distributed with equal space around them, resulting in half-sized spaces on the outer edges.

    • Use Case: Useful for creating evenly spaced elements with some space at the edges, such as icons in a footer.

  6. Space Evenly:

    • Behavior: Child blocks are distributed with equal space between and around them.

    • Use Case: Useful for creating evenly spaced elements with equal space at the edges and between the elements, such as a grid of images.

Steps to Adjust Distribution

  1. Select the Group:

    • Open your Shopify theme editor.

    • Navigate to the specific group where you want to adjust the distribution.

  2. Locate the Distribute Setting:

    • In the settings for the group, find the Distribute option.

  3. Select Distribution Option:

    • Choose one of the six options based on your design preferences:

      • Center: Centers the child blocks.

      • Start: Aligns the child blocks at the start.

      • End: Aligns the child blocks at the end.

      • Space Between: Distributes the child blocks with equal space between them.

      • Space Around: Distributes the child blocks with equal space around them.

      • Space Evenly: Distributes the child blocks with equal space between and around them.

Ensuring the Right Distribution Application

  1. Preview Changes:

    • After selecting a distribution option, preview your store to see how the changes look.

    • Check the group to ensure the distribution setting is applied correctly and enhances the layout.

  2. Check Consistency:

    • Ensure that the distribution setting aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices.

  3. Test Across Devices:

    • Verify the distribution setting on different devices to ensure it looks good and maintains functionality on all screen sizes.

Summary

By using the "Distribute" setting in AppSections, you can control the distribution of child blocks within groups in your Shopify store. This flexibility allows you to enhance the visual organization and layout of your elements, ensuring a dynamic and engaging user experience across all devices. Adjusting the distribution helps create a more structured and visually appealing design.

If you have any questions or need further assistance, please contact our customer support team.

Last updated 9 months ago

Was this helpful?