When you need to showcase how your products are applied in various fields such as medical, automotive manufacturing, and electronic communications to overseas buyers, traditional text and image layouts often appear cramped and tedious. The SX-Creval system offers four interactive "industry solution" display engines tailored to your needs. These engines present the richest and highest-definition industry application case studies in the most space-efficient way, allowing customers to feel as if they are strolling through your online industry showroom.
1. Four Advanced Interactive Showcases
When adding this module, you can choose any of the following premium layouts based on your content style and available resources:
Style 1: Side Tabs Showcase
- Visual Features : The most classic and efficient B2B sourcing model. The left side displays a list of industry names (e.g., Medical, Automotive, Aerospace), and the right side features a large, high-resolution industry background image.
- Interactive magic : When a visitor's mouse hovers over the industry list on the left, a high-definition image on the right will instantly and seamlessly switch to display a detailed description of the industry and "small tags" (such as: ISO 13485 Certified ).
- Masking Control : To ensure absolute text clarity, the system will automatically overlay a dark mask on the image. You can freely set the mask color (such as black, dark blue) and transparency (0.4 is recommended).
- Suitable for : businesses with 4-8 different industry applications, short text descriptions, and a desire for customers to quickly get an overview.
Style 2: Pinned Scroll Parallax
- Visual Features : The most immersive long-form text and image narrative experience! The entire section is divided into left and right halves.
- Interactive magic (GSAP pinning effect) : When a visitor scrolls down, the main title and introduction on the left are **pinned** to the screen and remain stationary, while the industry cards (images + detailed text) on the right slide upwards like a waterfall. This highly dynamic parallax scrolling illusion is often only seen on top international industrial design websites.
- Dark Mode Adaptive : If you have set a dark, shimmering background for the entire section, please check the **"Card Color Inversion"** option! The white cards that slide on the right will instantly transform into deep, translucent frosted glass, blending perfectly with the background.
- Applicable scenarios : Suitable for scenarios where there are very detailed case descriptions for each industry, requiring clients to immerse themselves in the reading.
Style 3: Hero Slider
- Visual features : A massive slideshow that occupies the entire width of the screen.
- Layout control : You can set the text to left alignment (suitable for long text descriptions and multiple action buttons), or center alignment (suitable for extremely concise and powerful brand image promotion).
- Ultimate text settings : You can not only freely change the color of the title and body text, but also give the title a huge visual impact far beyond the norm through the system's **[Large Font Layout System]**.
- Suitable scenarios : It is strongly recommended to place it on the homepage or the first screen of the "Custom Solutions" page as the absolute visual showcase.
Style 4: Folding Accordion Panels
- Visual features : This is the divine layout favored by Apple's official website and top SaaS companies! Multiple large industry images are arranged side by side and merged together in the form of "thin strips".
- Interactive magic : When a visitor hovers their mouse over or clicks on a "bar," the bar will gracefully unfold to both sides like an accordion, revealing a full high-definition image, a detailed description, and a "Learn More" button.
- Forced Aesthetics in Layout : To ensure the most perfect proportions and interactive experience on the front end, the system imposes strict constraints at the underlying level: you must add a maximum of 3 to 6 panels. This rigorous restraint is what creates a top-notch visual experience.
- Suitable scenarios : If you have 3-5 high-definition images of the industry that are highly impactful (such as: a huge wind turbine, a high-precision operating table), this is the layout method that can best anchor the layout.
2. Call-to-Action buttons and links that drive conversions.
The ultimate goal of the solution module is to guide customers to a deeper understanding, therefore we have embedded multiple conversion points within the components:
- Smart Button Generation : In Style 1 and Style 2, you only need to fill in the link (URL) and link text (e.g., "View Case Study"), and the system will automatically generate a beautiful button on the front end. If you don't fill in the link, the button will automatically hide, keeping the interface absolutely clean.
- Full-featured button group : Style 3 is equipped with a full-featured button group engine at the same level as the [CTA Module]. You can add two buttons (one primary color and one secondary color), for example, placing "Download White Paper" and "Online Consultation" simultaneously.
💡 SX-Creval Industry Showroom Setup Guide (Pro Tips)
- A picture can determine life or death :
Because these components rely heavily on large background images to support their visual quality, please do not upload images with white backgrounds or blurry cutouts! Please use high-quality full-frame real-world photographs (such as panoramic views of car assembly lines or hospital operating rooms) to give the "accordion" or "tabs" Hollywood-level visual impact when they come to life. - The "Law of Restraint" in copywriting :
In Style 1 (left tab) and Style 4 (accordion), space is extremely limited. Please keep the "Detailed Description" to around two sentences . Too much dense text will not only obscure the beautiful background image but will also deter impatient overseas buyers. Please save the lengthy descriptions for the "Details Page" after the customer clicks the button. - A clash of colors :
In style four (accordion), if you feel the image is too bright and the text is not clear, do not edit the image! Simply select a dark color (such as pure black #000000) in the background color palette. The system will automatically lay a soft dark gradient protective layer on the lower half of the image, instantly highlighting the white text.