Document Navigation

Background Group

In the SX-Creval system, we provide you with an "all-in-one" background canvas. You can freely combine solid colors, images, videos, and even overlay Hollywood-level web page effects such as aurora and fluid gradients for any content block, completely bidding farewell to monotonous and boring displays.

1. Five Background Modes

When you click to edit the "Background Settings" of any section, you first need to determine the "Background Color" type for that section. We offer 5 modes:

Solid Color Background

  • Suitable for scenarios where you can read long passages of text and read standard product parameter descriptions, keeping the interface clean and uncluttered.
  • Instructions : Select the colors you need using the color palette. It's recommended to use white, light gray, or your brand's primary color.

Glow Color Background

  • Applicable scenarios : Suitable for technology, new energy, precision manufacturing and other companies that need to reflect a "modern" image.
  • Operation : No manual color adjustment is required. The system provides you with several preset background light spots with master-level color schemes (such as Midnight Indigo). After selection, the background of the selected area will show a delicate soft light transition effect.

Image background (Image)

  • Applicable scenarios : main visual banner, company real-life display, full-screen poster for best-selling products.
  • Operation : Upload a high-resolution image from the media library.
  • (Note: Once this mode is selected, the system will require you to upload an image to prevent the front end from displaying a blank screen.)

Video Background – A Powerful Tool for Building Trust in Foreign Trade

  • Applicable scenarios : Full-screen display of factory workshop operations, live exhibition footage, and 3D rotating product animations. This is the most effective way to enhance the trust of overseas buyers.
  • Operation (choose one) :
    1. Upload local videos : Upload video files directly from your computer.
    2. Enter the video link : If your video is hosted on an external server, you can directly paste the link.

Transparent/No background (None)

  • Applicable scenarios : Select this option when the block needs to be "integrated" into the background of the previous element, or when it is used as a floating card.

2. Enhance texture: Overlays & Masks

If you write text directly on top of fancy images or videos, visitors often can't read it clearly. SX-Creval addresses this with a professional-grade "masking" feature, ensuring your text is always clear and eye-catching:

  • Image mode: Black mask strength (0-90)
    If you upload a bright factory photo but need a white title, you can increase this value (e.g., set it to 40 or 60). The system will automatically overlay a semi-transparent black layer on the image, darkening it and thus highlighting the text.
  • Video Mode: Video Texture Masking <br/>Simply playing a video might look bland. The system provides three advanced textures that can be overlaid on top of the video:
    • Modern Matrix : Like the pixels of a monitor, it has a strong sense of IT and electronic technology.
    • Cinematic : Adds a cinematic feel to the image.
    • Diagonal carbon fiber : Adds an industrial feel, making it ideal for hardcore industrial websites such as those featuring machinery and automotive parts.

3. Cool Enhancement: Background Animations Overlay

This is a unique feature of SX-Creval! You can not only set a static background, but also overlay a dynamic "light and shadow magic" layer on top of the background color.

  • Aurora animation : Like the Northern Lights, it slowly moves in the background.
  • Spotlight effect : It's like a spotlight slowly moving in the background, suitable for emphasizing the centered core slogan.
  • Mesh : A very soft color blending effect, commonly seen on the official websites of various top design agencies.

Customize animation colors :
Once you've selected any of the above animations, you can use the "Animation Element Color" palette to determine the color of the light. For example, if you're selling environmentally friendly equipment, you can set the aurora to "fluorescent green"; if you're selling medical devices, you can set it to "tech blue".

💡 Operations and Design Pitfalls Avoidance Guide (Pro Tips)

  1. Intelligent cleanup mechanism : Feel free to try different modes. As you switch between "Images," "Videos," and "Solid Colors," the SX-Creval system will automatically clean up unnecessary redundant data in the current mode, ensuring your website database remains lightweight and fast.
  2. Video size control : Although the video background is impressive, in order to accommodate the loading speed of overseas customers (especially those in Africa, South America and other regions with poor internet access), it is recommended that the background video be kept under 15 seconds, the file size not exceed 5MB , and it must be muted (the system will automatically mute the playback in the foreground).
  3. The contrast rule : Always remember "dark background, light text; light background, dark text." If you're using a very dark image or a black background, make sure the text is set to white or a light color; and vice versa. Utilize "black mask intensity" to salvage photos that lack contrast.