# Multicolumn

The **multi-column block** is used to create multiple column blocks on a page, with each block displaying an image, title, descriptive text, and a button. It is suitable for showcasing products, services, or blog content. Users can customize the content and layout of each column block.

### **Configuration Options:**

* **Block Title Settings:**
  * **Show Block Title**：
    * Usage: Choose whether to display the title at the top of the multi-column block.
  * **Title**:
    * Usage: Enter the title for the block.
  * **Description**:&#x20;
    * Usage: Add descriptive text to introduce the main content or purpose of the block.
  * **Watermark Background Text:**&#x20;
    * Usage: Add watermark text to the block background for enhanced visual effect.
  * **Button Text:**&#x20;
    * Usage: Set the text for the button at the bottom of the block.
  * **Button Link:**&#x20;
    * Usage: Set the link address that the button redirects to upon clicking.
  * **Button Style:**&#x20;
    * Usage: Choose the button style, either primary or secondary.
* **Content Settings:**
  * **Image Ratio:**&#x20;
    * Usage: Select the display ratio of the image, adapt、either square、portrait、landscape.
  * **Text Alignment:**&#x20;
    * Usage: Set the alignment of the text within the column block; options include left, center, or right alignment.
  * **Show Content Wrapper:**&#x20;
    * Usage: Choose whether to add a wrapper effect around the column block content for enhanced visual separation.
  * **Color Scheme:**&#x20;
    * Usage: Choose the color scheme of the column block content to match the overall page style.
* **Mobile Settings**
  * **Columns**: Set the number of columns per row on mobile devices.

### **Individual Column Block Configuration Options:**

* **Image**:
  * Usage: Add an image to the column block, which will serve as the primary visual element.
* **Title**:
  * Usage: Set a title for the column block to highlight the main theme.
* **Description**:&#x20;
  * Usage: Add descriptive text to provide further details or additional information.
* **Button Settings:**
  * **Button Text:**&#x20;
    * Usage: Set the text for the button within the column block.
  * **Button Link:**&#x20;
    * Usage: Set the link address that the button redirects to upon clicking.

### **Usage Notes:**

* Maintain a consistent style across multiple column blocks by selecting the same color scheme and text alignment.
* Set clear link paths for buttons to guide users through the next steps.

### **Common Issues:**

* **Inconsistent content display**: Ensure that all column blocks have the same image ratio and text alignment to keep the page layout clean and organized.
* **Button not displaying**: Check whether the button text and link are filled in. The button may not display if the content is incomplete.
