Basic Guide

Step 1: Go to the Preload / Loading Section

To customize the preload behavior, first navigate to the Open-Home section in your project settings or page structure.

This section controls what appears on the screen while the page is loading.

Step 2: Find the “Heading / Custom” Element

Inside the preload loading section, you’ll see a Heading Load element.
This element is flexible and can be used in two ways:

This section controls what appears on the screen while the page is loading.

• As text (for brand name or loading message)
• As an image (for logo)

Step 3: Use Text as a Loading Name

If you want to display a brand name or custom text:

1. Select the Heading Custom element
2. Edit the text content
3. Replace it with your desired loading name (e.g. brand name, product name)

This option is best if you want a lightweight, fast-loading preload.

Step 4: Replace Text with a Logo (Image)

If you prefer using a logo instead of text:

1. Select the Heading Custom element
2. Change the element type to Image (or replace it with an Image component)
3. Upload your logo image
4. Adjust the size and alignment as needed

Make sure the logo is optimized (SVG or compressed PNG) for better loading performance.

Step 5: Preview and Adjust

After making changes:

1. Preview the page
2. Check the preload animation
3. Adjust spacing, size, or alignment if needed

This ensures the loading screen matches your brand identity perfectly.