How to create and manage multiple home page banner groups in the Anqi CMS backend?

As an experienced website operations expert, I am well aware of the importance of the homepage banner for a website.It is not only the 'first impression' of the website, but also the visual focus that guides users, conveys core information, and achieves marketing goals.In AnQiCMS, the flexible Banner group management feature provides strong support for our refined operations and user experience enhancement.

Steer the homepage visual focus: A guide to creating and managing efficient Banner groups in Anqi CMS

AnQi CMS is an enterprise-level content management system developed in Go language, which is efficient and easy to expand. It performs excellently in content publishing, multi-site management, and SEO optimization.It not only emphasizes technical performance, but also provides many conveniences for users in the details of content operation, such as its fine-grained group management of the home page banner, which is a manifestation of its strength.By reasonably planning and managing these visual elements, we can more effectively capture user attention and achieve marketing goals.

Why is it necessary to manage the homepage Banner in groups?

The traditional Banner management method often involves stacking all Banners together, which can pose many challenges in website operations. However, the multi-Banner grouping capability provided by Anqi CMS can help us tackle these challenges and bring significant operational advantages:

  • Strategic display to cope with diverse marketing activities:Website operation often comes with various promotional activities, such as Spring Festival promotions, summer new product launches, Double Eleven狂欢, anniversary celebrations, etc.By creating different Banner groups, we can easily switch the entire set of Banners based on the theme of the event, avoiding the繁琐 and error-prone process of manual replacement, and ensuring the timeliness and accuracy of information delivery.
  • Content differentiation to meet the needs of different regions or user groups:Imagine a website with multilingual capabilities or one targeting different market regions. The homepage banner content must be customized naturally.By grouping, we can configure exclusive Banners for different language versions or market regions, achieving more precise content delivery.
  • Data analysis and optimization to drive decision-making:We can track the effectiveness of each group of Banners more clearly after grouping them together.For example, compare the click-through rate and conversion rate of the 'New Products Recommended Group' and the 'Time-Limited Flash Sale Group', thereby adjusting design strategies, optimizing copywriting, and even guiding future marketing directions.
  • Keep the website vibrant and enhance users' freshness:Regularly updating and rotating banner content can bring a sense of novelty to users, avoiding visual fatigue.Group management makes this rotation easy, and we can prepare multiple theme Banner groups in advance, going online as needed.

Secondly, create and configure Banner groups in the Anqi CMS backend

In AnQi CMS, creating and managing the homepage banner group is an intuitive and efficient process.Although the specific menu path may vary slightly with version updates, the core logic and operation steps are consistent.“Page Resources”or“Function Management”in the module, look for something similar“Banner Management”/“Carousel Settings”or“Advertisement Placement Management”Entry.”

  1. Create a new Banner group:

    • After entering the Banner management interface, you will see a list used to manage existing Banner groups.Here, look for a button like 'Add Group' or 'Create Banner Group'.
    • Clicking will prompt the system to name a new Banner group. This name is crucial, as it is not only an identifier for backend management, but also the unique "key" (i.e., the only) used when calling this group in the website template.typeThe value of the parameter.Suggest using descriptive names, such as "Home Main Promotion Banner", "New Product Carousel", "Holiday Promotion Banner", etc., for easy distinction and memory.

  2. Manage the Banner image content within the group:

    • After successfully creating a group, enter the details page of the group, and you can start uploading and configuring specific Banner images.AnQi CMS usually provides a convenient image upload tool, allowing you to directly upload new images or select from existing image resources.
    • Set the Banner image details:For each Banner image, you need to complete the following information to ensure its correct display and **effect on the front page:
      • Image (Logo)Select or upload a high-quality Banner image you have carefully designed.
      • Link (Link)This is one of the core functions of the Banner. Set a clear jump link to guide users to the landing page you want to promote, such as product details page, event page, etc.
      • Introduction（Description）: Briefly describe the content of the Banner, which helps you quickly understand the purpose of the Banner in the background.
      • ALT text (Alt)To add descriptive text to the image (e.g., “New version of Anqi CMS released”).This is crucial for SEO optimization and accessibility, allowing users to understand the image content even when it cannot be loaded, and helping search engines better understand image information.
    • Sort and Enable/Disable:Within the group, you can freely adjust the display order of the Banner, usually achieved by dragging or setting numerical weights.In addition, you can flexibly enable or disable a Banner to show or hide it on the front end without deleting it, which provides convenience for A/B testing and content rotation.

3. Flexibly call Banner Group in the website template

In AnQi CMS, to present these carefully prepared Banner groups on the website front end, you need to rely on its powerful template tag system. The core lies in usingbannerListtags, and throughtypeParameter specifies the Banner group to be called.

  1. bannerListTag overview: bannerListTags are used to fetch the home page banner list.It will return an array object containing all the Banner information that meets the conditions, and you can iterate over this array to display each Banner one by one.{% bannerList 变量名称 %}for example{% bannerList banners %}.

  2. Call the default group:If you use tags directly in the template without specifyingbannerLista tag, without specifyingtypeParameter, Anqi CMS will default to calling the Banner group named “default”.Therefore, it is a good habit to ensure that you have at least one group named “default” and place the basic Banner in it.

    {# 调用默认Banner分组的示例代码 #}
{% bannerList banners %}
    {% for item in banners %}
    <a href="{{item.Link}}" target="_blank">
        <img src="{{item.Logo}}" alt="{{item.Alt}}" />
        <h5>{{item.Title}}</h5>
    </a>
    {% endfor %}
{% endbannerList %}

  3. Call a specific group:)PasstypeParameters, you can accurately call any Banner group you created in the background. Just puttypeThe value of the parameter is set to the group name you named in the background. For example, if you create a group named "New Product Release Carousel" in the background and add multiple Banner images to it, you can call it in the template like this: 

    {# 调用名为“新品发布轮播”的Banner分组示例代码 #}
{% bannerList banners with type="新品发布轮播" %}
    {% for item in banners %}
    <a class="banner-item {% if forloop.Counter == 1 %}active{% endif %}" href="{{item.Link}}" target="_blank">
        <img src="{{item.Logo}}" alt="{{item.Alt}}" />
        <div class="banner-title">{{item.Title}}</div>
    </a>
    {% empty %}
    <p>当前“新品发布轮播”分组中暂无Banner图片。</p>
    {% endfor %}
{% endbannerList %}

    A small trickI added in the above code,forloop.Counter == 1judgment, which