# Image-text list

The **Image-text list block** is used to create multiple column blocks on the page to slide display, 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.
* **Content Settings:**
  * **Number of Columns:**
    * Usage: Select different column numbers to display varying column width ratios. Supports 2-5 columns.
  * **Desktop Slider:**
    * Usage: When enabled, it operates independently of the column number setting and previews the 5th column by default.
  * **Slider Settings:**
    * Usage: Displays navigation buttons and pagination dots.
  * **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.
  * **Mobile Slider：**&#x57;hen enabled, the second column will be pre-displayed and can be scrolled.

### **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:**

* When the slider is enabled, the maximum number of columns will be pre-displayed.
* 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ascent.webvista.studio/sections/image-text-list.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
