The homepage banner carousel is the face of the website, which not only attracts the attention of visitors in the first place, but also an important carrier for conveying brand information and promoting core products or services.In AnQiCMS, managing and displaying the home page banner carousel is an intuitive and flexible process, allowing you to easily create an eye-catching visual focus for your website.
1. Manage your Banner content in the background
Manage the Banner Carousel on the homepage, you first need to log in to the AnQiCMS backend management interface.通常，these visual elements are managed under "Page Resources" or "Backend Settings" such as this functional area. Please note if there are options like "Banner ManagementAnQiCMS has designed a flexible mechanism that allows you to create different Banner groups for different display scenarios.This means that you can not only manage the Banner on the homepage, but also create exclusive carousels for specific pages or events, distinguishing them by a 'group name', which will be very useful when calling them later.
In the specific management interface, you can add or edit each Banner image one by one. Here, several key settings need to be completed:
- Upload carousel images:Select the high-resolution image you are ready to use. Make sure all Banner images have the same size so they do not appear to jump or deform during the frontend carousel.
- Set the click-through link after click:This is usually one of the core functions of the Banner, guiding users to the product detail page, event page, or other important pages.
- Fill in descriptive Alt text:This is very important for search engine optimization (SEO) and website accessibility. Alt text should be concise and accurately describe the image content.
- Give it a short title and description:This information can be called in the front-end template to provide more context for the image.
- Adjust the display order:You can easily adjust the display order of Banner images according to operational needs to ensure that the most important information is displayed to visitors first.
Through these settings, you have provided rich and structured data for the front-end carousel, making subsequent display simple.
Second, display the Banner carousel in the front-end template
The content is configured on the backend, and the next step is to display these carefully prepared Banners on the website's frontend template. AnQiCMS uses a simple and efficient template tag system, and you only need to place the tag in the template file where the Banner carousel needs to be displayed (usually the homepage template, for example/template/您的模板目录/index/index.html）中，使用特定的标签来调用数据。
核心的调用标签是{% bannerList banners %}。这个标签会从后台获取您配置的Banner数据，并将其赋值给一个名为bannersThe collection object, for you to iterate over in the template. If your backend has set up multiple Banner groups, such as one for the homepage and another for product features, then you cantype参数来精确调用指定分组的Banner，比如{% bannerList banners with type='首页轮播' %}.
在获取到banners集合后，您可以使用循环结构，如{% for item in banners %}，来逐一渲染每一张Banner图。每个itemObjects all contain rich properties, such asitem.Logo(image address),item.Link(Jump link),item.Alt(Alternative text of the image) anditem.Title(Image title) etc.
Here is a simple template code example that shows how to call and display the Banner image:
<div class="main-banner-carousel">
{% bannerList banners with type="首页轮播" %} {# 假设您的首页Banner分组名为“首页轮播” #}
{% for item in banners %}
<a href="{{item.Link}}" target="_blank" class="banner-item">
<img src="{{item.Logo}}" alt="{{item.Alt}}" title="{{item.Title}}" />
{# 如果后台设置了描述，也可以在这里显示 #}
{% if item.Description %}
<div class="banner-description">{{item.Description}}</div>
{% endif %}
</a>
{% endfor %}
{% endbannerList %}
</div>
{# 提示：实际的轮播效果（如自动切换、过渡动画、分页器等）通常需要结合前端的CSS样式和JavaScript代码来实现。
AnQiCMS主要负责提供数据，您可以集成现有的前端轮播库（如Swiper, Owl Carousel等），
或者根据您的设计需求自定义样式和脚本来控制轮播逻辑。 #}
It is worth mentioning that AnQiCMS is mainly responsible for providing Banner data, and the actual carousel effect (such as automatic switching, transition animations, etc.) usually requires combining the front-end CSS styles and JavaScript code to achieve.You can choose to integrate existing frontend carousel libraries or customize the styles and scripts as needed.
3. Optimize Banner Display and Content Operation
To make the home page banner perform at its best, in addition to the regular settings and display, we can also optimize from multiple dimensions:
- Image quality and loading speed:Ensure the quality of the uploaded image is high, but the file size is moderate.Images that are too large can significantly affect the speed of website loading.You can use the image processing feature provided in the AnQiCMS content settings, such as enabling WebP format conversion or automatically compressing large images, to effectively reduce the size of images.
- Copywriting Attractiveness and Call to Action:The text content on the banner should be concise and forceful, highlighting the core information, and including a clear call-to-action (CTA), such as "Buy Now" or "Learn More", to guide users to the next step.
- Regular updates:A novel Banner can continuously attract users' attention. Regularly update the carousel content according to seasons, holidays, new products, or marketing activities to maintain the vitality and freshness of the website.
- SEO-friendly:Do not ignore the filling of Alt text, as this is not only friendly to visually impaired users, but also an important clue for search engines to understand the content of images and improve the SEO performance of the website.
Through AnQiCMS's flexible Banner management and powerful template tag features, you can easily set up and optimize the website's homepage carousel, effectively convey brand information, and enhance user experience and conversion efficiency.
Common Questions (FAQ)
How to solve the problem that the banner image does not display or displays abnormally?Firstly, check whether the image has been uploaded correctly to the background and set an effective link. Secondly, confirm that the
{% bannerList banners %}The label is used correctly, especiallytypeParameter is consistent with the "Group Name" set in the background.In addition, check if the image path is correct, and whether there are frontend CSS styles or JavaScript code conflicts causing display issues.The image size inconsistency may also lead to visual anomalies.How to implement the automatic scrolling effect and animation of the Banner?AnQiCMS is mainly responsible for providing Banner data, and dynamic effects such as automatic rotation, switching animations, pagination, or navigation arrows usually need to be implemented through front-end technology. You can choose to introduce mature JavaScript carousel libraries (