Document Navigation

Button group

Buttons are the most important call-to-action (CTA) element on foreign trade websites. Whether guiding customers to send inquiries, contact via WhatsApp, or download product catalogs, buttons are indispensable.

In the SX-Creval system, you can add up to four buttons to a button group (e.g., a main "Send Inquiry" button + a secondary "Learn More" button), just like building blocks, and freely configure their type, color, and action.

1. Global appearance settings for button groups

Once you add a "Button Group" section to the page, you can first configure the global appearance and layout of the entire button group:

  • Alignment : Supports left alignment, center alignment (default), and right alignment. You can adjust the layout flexibly according to the context.

  • Button Size : Several preset sizes are available. The medium size is recommended by default. If used in a webpage header banner, a larger size can be selected to attract attention.

  • Button rounded corners : Supports setting the curvature of the button edges (such as right angle, slightly rounded corner, full rounded corner, etc.), with slightly rounded corners (rounded-md) as the default, which is more in line with modern business aesthetics.

  • Brand color selection :
    • Primary brand color: Usually used for the most important operations (such as sending inquiries), and is the most visually striking.
    • Secondary brand colors: These are typically used for secondary actions (such as viewing details) to visually differentiate product levels.

2. Basic configuration of a single button

Regardless of the type of button you choose, they all have the following common basic settings:

  • Button Text : The text displayed on the button, which defaults to "Request A Quote". You can change it to "Contact Us", "Download Catalog", etc.

  • Button styles : Supports selection of different design styles (e.g., gradient color style, etc.).

  • Icon settings :
    • Show Icon : You can freely toggle whether to display a small icon on the button (enabled by default).
    • Choose an icon : The system has a rich library of commonly used icons for foreign trade (such as arrows, emails, telephones, etc.) for you to choose from.
    • Icon placement : Icons can be placed to the left or right of the text.

3. Eight button types (core functions)

The SX-Creval system provides you with 8 powerful business button types. After clicking the "Add Button," you can select the desired function from the following list:

Page redirection class

1. Redirect to an internal page.

2. Redirect to an external link (External URL)

Data and Transformation

1. Download materials/documents

2. Pop-up Inquiry Modal 🌟Recommended for Foreign Trade

Instant Messaging

1. WhatsApp Link (WhatsApp) 🌟Instant Communication

2. Make a phone call (Phone)

3. Send email

4. A WeChat QR code will pop up.

💡 SX-Creval Operation Tips

  • Clear hierarchy : When a button group has two buttons, it is strongly recommended to set one to the brand's primary color and the other to the brand's secondary color or a transparent border. This provides visitors with clear visual guidance and avoids selection difficulties.
  • Make the most of inquiries and WhatsApp : In international trade, pop-up inquiry modals and WhatsApp links have the highest conversion rates. It is highly recommended to place one of these two buttons in the banner area on the first screen of the product details page.
  • Top Navigation Bar Button : In addition to the button groups in the main content of the page, the system also reserves a dedicated button for you in the "Top Navigation Bar" (usually fixed in the upper right corner of the webpage). Its configuration is similar to the basic buttons, and it is a golden conversion position that is permanently present throughout the website. It is recommended to set it to "Contact Us".