Sections management - Page Layouts

Adding a pre-filled section template

Pre-filled sections offer a quick way to create your page layout, similar to a wireframe. These templates simplify the design process, allowing you to easily replace images and text.

To add a pre-filled section:

1. Click the 'Add section' button on an empty page, or the + icon at the center bottom of any section.
2. The sections panel will open, showing pre-filled sections by default.
3. Select a section type from the list to find a suitable template.
4. Click on the desired section to apply it to your page.
5. Customize the section as needed.

Watch the help video to see how to create sections within your page.

Adding an empty section

Empty sections provide flexibility to design your page layout as you wish.

To add an empty section:

1. Click the 'Add section' button on an empty page, or the + icon at the center bottom of any section.
2. In the sections panel, click the 'Empty sections' tab.
3. Choose the desired width and number of columns.
4. Click on the desired section to apply it to your page.
5. Customise the section by adding elements and adjusting the layout.

Watch the help video to learn how to create and modify sections within your page for optimal design.

Deleting a section

To delete a section:

1. Hover over the section to display the icons at the bottom.
2. Click on the X icon.
3. A warning will appear asking for confirmation. Click 'OK' to confirm or 'Cancel' if you change your mind.

Note: Once a section is deleted, it cannot be retrieved.

Section Settings

Section settings are part of the content sections (excluding the header and footer). These settings allow you to customise the design of each section.

Editing section settings

1. Click the coloured wheel icon to access the settings.
2. Update any desired settings.
3. Save your changes.

The numbers in green in the screenshot correspond with the numbers in bold in the table below.

Background gradient colour

Each section allows you to create a gradient background colour.

To setup a gradient:

1. Open 'Choose your own colours'.
2. In the background colour row, click the gradient swatch to expand the gradient options.
3. Select the 'Starting colour'; the 'Ending colour' will be set automatically to match.
   • Tip: This simplifies creating a slight colour variant.
4. Adjust the 'Starting location' (0% for a soft, gradual gradient).
5. Adjust the 'Ending location' (100% for a soft, gradual gradient).
6. Set the gradient angle.
7. Mobile Options: Switch between desktop and mobile views to ensure the gradient looks good on all devices.
   • Tip: Mobile views can differ significantly from desktop, so make necessary adjustments for each.

Design Tip: Setting both the starting and ending locations at 50% creates a distinct line, useful for sharp design effects.

Shape divider

Shape dividers let you create visually interesting designs within a section. You can set a shape at the top, bottom, or both, and adjustments can be viewed in real-time.

Settings:

1. Shape Colour: Change the colour of the selected shape.
2. Shape Height: Adjust the height of the shape.
3. Mobile Options: Ensure the shape looks good on all devices by switching between desktop and mobile views and making necessary adjustments.

Using these options, you can enhance the visual appeal of your sections effectively.

Saved sections

Saved sections allow you to save and reuse sections across your site. Each saved section can be used only once per page. Once used, it won't appear in the sections panel for that page, but you can duplicate sections if needed.

When a saved section is deleted from the panel, it remains in existing pages but is no longer connected.

Watch the help video below for a detailed example of working with saved and duplicate sections.

Modifying a saved section

To use and modify a saved section without affecting other instances:

1. Insert the Saved Section: Add it to the new page where you want to make changes.
2. Option 1:
   • Delete the section from the saved sections panel to break the connection.
   • Edit the text on the page as needed.
   • Note: This breaks the link with all other instances.
3. Option 2:
   • Duplicate the saved section to create an independent copy.
   • Remove the original saved section.
   • Modify the duplicated section as needed.

Watch the help video below for a detailed example of working with saved and duplicate sections.

Duplicating sections

Duplicating sections saves time when creating similar content on your page.

• Creates a copy of the section and its elements.
• The duplicated section is independent, allowing edits without affecting the original.
• You can duplicate a section on an individual page multiple times, unlike saved sections which can only be used once per page.

Watch the help video to learn how to duplicate sections within a page.

Extra image and animation

You can add an additional image to the background of a section to give your page design an improved feel, like this section shows.

To active this feature:

1. Open section settings
2. Towards the bottom look for 'Other image' and switch it to 'On'
3. Upload your image, and adjust the settings to give it the effect you want.

Flex sections

Flex Sections are a new feature in Limecube that provide advanced control over column layouts, spacing, and the ability to hide columns on mobile devices. This feature is ideal for users seeking greater flexibility while maintaining a grid-based design.

Adding a Flex Section

1. Accessing Flex Sections: Hover over an existing section on your page and click the "+" icon on the outer border. This will open the section types menu.
2. Selecting Flex Sections: In the top left, you'll see "Pre-filled Sections" and "Empty Sections." Click on "Empty Sections," then select "Flex" from the options. Click on the Flex Section to insert it into your page.

Configuring Flex Sections

• Column Control: By default, the Flex Section has two columns. Hover over the empty elements to see a slider control. Use this to adjust the width of each column.
• Adding Columns: To add more columns, go to the section style options (represented by a colour wheel icon). Under "Section Width," you can adjust the overall width of the section and set the number of columns.
• Gaps: You can also control the gap between columns to fine-tune the spacing.
• Mobile Options: If you want to hide specific columns on mobile, select the columns and apply the "Hide on Mobile" setting.

Switch to mobile view to confirm your settings if you have chosen to turn any off.

That's all you need to know to get started with Flex Sections, as you can then use them with elements like any other sections!

Troubleshooting and Tips

Common Issues:

1. Section Won't Save: If you can't save a section, it might be a saved section that cannot be saved again. Convert it to a normal section or duplicate it to make changes.
   • Note: the save icon colour for duplicating will be a black colour instead of white when it already is a saved section.
2. Misaligned Elements: Ensure you are using the correct alignment and spacing settings. Check mobile and desktop views to adjust as needed.

Tips:

1. Organise Sections: Use clear naming conventions for sections to keep your page organised.
2. Optimise Images: Use optimised images to improve load times and overall site performance.
3. Preview Changes: Always preview changes on different devices to ensure responsiveness and consistency.
   These tips and troubleshooting steps can help you effectively manage sections and improve your site's functionality.

Header Layout

To learn about changing header layouts click here.

Footer Layout

To learn about working with footers click here.