"The homepage is the face of a website and determines the customer's first impression of your capabilities."
The SX-Creval system provides you with the highest-spec banner engine currently available in the international trade website building field. Whether it's a grand factory scene video or a detailed product rendering, you can easily create top-notch full-screen scrolling posters through intuitive settings.
Once you add two or more slides to this module, the system will automatically upgrade it to a "carousel" with beautiful transition animations.
The system provides you with two mainstream banner structures; simply choose the one that suits your needs:
- A. First-screen banner (classic centered version) : Background + plain text/buttons. Suitable for showcasing a company's overall strength, brand slogan, or a panoramic view of the factory.
- A. First-screen banner with left and right side images and text (product close-up version) : background + foreground product image + text/button. Suitable for showcasing a single key product or equipment details, with a strong sense of spatial depth.
1. Slide Content Configuration
You can configure the content text for each slide independently:
- Main title and description : Directly highlight your core selling points to overseas buyers (e.g., Supply Solutions for Global Buyers). The system will automatically handle multi-platform adaptation to prevent text from breaking the screen on mobile devices.
- Button Group : Add "Send Inquiry" or "View Details" buttons with one click (see the [Button Group] manual for details) to guide customers to take substantive conversion actions.
- Foreground Image (Text and Image Version Only) : If you are using the "Text and Image Banner," please upload a transparent PNG product image with its background cut out here. It will create a beautiful left-right column layout with the text, significantly enhancing the spatial hierarchy of the page.
- Maximum text box width : This prevents you from writing too much text on a large screen and making it difficult to read. It is recommended to keep the default setting, or flexibly adjust the width of the text area according to your layout needs.
2. Layout and Interaction
You can completely control the overall layout and user interaction of the homepage, just like a seasoned web designer:
- PC screen height (30~100vh) : 100vh represents occupying 100% of the computer screen height (i.e., full-screen first screen); if you place it on an inner page as a regular advertising banner, you can adjust it to 50 or 60. (Note: The mobile system will automatically and intelligently adapt the height for you, without manual intervention) .
- Image and text layout direction (only available in the image and text version) :
- Text on the left, image on the right: a classic layout that best suits the human eye's reading habit from left to right.
- Left image - Right text: Breaking with convention, suitable for scenarios where product images are highly dynamic.
- Carousel indicator styles : If multi-image carousel is enabled, you can freely choose the appearance of the controller: bottom dot, numbered pagination, minimalist bottom arrow, or large arrows on both sides of the screen.
- Show scroll down arrow : When enabled, a floating, bouncing arrow will appear at the bottom of the screen, prompting and guiding the user to scroll down to see more content.
3. Visuals & Aesthetics 🌟
This is the soul of the SX-Creval Banner engine. Enable advanced visual effects with a single click, without writing a single line of code:
Full-screen mask overlay
If your background image or video is too flashy and bright, making the text on it illegible, please enable this feature.
You can apply a semi-transparent overlay of black, white, or dark blue and freely adjust its transparency (%) . This instantly makes the background appear deeper and more sophisticated, while making the white title stand out even more.
Apple-style frosted glass text box (Glassmorphism)
If your background is too complex and the text is still difficult to read even with a mask, please turn on the "frosted glass" effect!
The system generates a semi-transparent glass card with a dynamic blur effect below the text (blur and transparency can be adjusted). This not only perfectly solves the text readability problem, but also represents a cutting-edge, top-tier web design style.
Carousel Effect
- Horizontal swipe: Classic sliding, with a strong sense of rhythm.
- Vertical sliding: Breaking with convention, giving people a stronger sense of spatial depth.
- Fade: An extremely soft and sophisticated gradual appearance, suitable for high-end corporate websites that emphasize brand image.
Background micro-motion effect (Ken Burns Effect)
Don't let your background image look lifeless! SX-Creval features cinematic Ken Burns zoom effects:
- Slow zoom-in : The background image zooms in extremely slowly, drawing the viewer's eye involuntarily to the center of the screen.
- Slowly zooming out : This creates a grand and expansive view, suitable for aerial photography of large areas of factories.
- Horizontal inspection : The background image slowly pans to the right, creating a dynamic illusion of "assembly line operation".
- Black and white to color gradient : The image is initially black and white and retro, then it is instantly "lit up" into full color, creating a visually stunning effect.
Typography & Animations
- Text color and font size : You can freely modify the color of the title and description using the color palette, and choose the most suitable size from the preset font sizes.
- Text enters animation :
- Fade in from left to right: a conventional and elegant way to enter the scene.
- Typewriter Effect : Highly recommended! Your main headline will appear as if you're typing on a keyboard, letter by letter. This dynamic process instantly grabs the buyer's attention, compelling them to read the entire slogan.
- Foreground image enters animation (only available in the text and image version) :
Your transparent background product image can be slid in from right to left, popped in from small to large, or zoomed in and focused. When text appears from the left and the product image slides out from the right, the entire screen is filled with a Hollywood-style futuristic dynamism!
💡 SX-Creval Designer's Homepage Avoidance Guide (Pro Tips)
- Banners are not for lengthy text : keep the main title to 5-8 English words and the description to 2-3 lines . Too many words will not only make the layout look cluttered, but overseas buyers will also lack the patience to read it.
- The background must be high-definition and clean : if the background has too many cluttered mechanical parts, be sure to make good use of the [full-screen mask] or [frosted glass] function. Always remember: "If the text is not visible, the design is worthless."
- The Golden Rule of Banners (Banner 2) (with Images and Text) :
When using the image and text version, the foreground image must be a transparent PNG image with the background removed (or a WebP image with a built-in alpha channel). Avoid uploading a photo with a white square background, as that will ruin the overall premium feel of the module! - Combining movement and stillness : If you have enabled the "Typewriter Effect" and "Foreground Image Flying In," it is recommended to set the "Background Micro-motion Effect" to slowly zoom out or remain still to avoid everything on the screen moving erratically, which can cause visual dizziness for buyers. A sense of sophistication comes from "restraint."