How to set up image or video resources for the home page Banner in Anqi CMS backend?
As an experienced website operations expert, I am happy to provide you with a detailed explanation of how to set up image or video resources for the home page banner on the Anqi CMS backend, and offer some practical content operation suggestions.AnQi CMS, with its simple and efficient design philosophy, provides users with powerful and flexible content display capabilities, and the home page Banner is a key element that attracts users' attention.
Optimize the website facade: Set the homepage Banner image and video resources in the Anqi CMS backend
The homepage banner is the 'face' of the website, not only carrying the display of the brand image, but also an important area to attract users, convey core information, and guide user behavior.Our CMS is well-versed in this field, providing an intuitive and feature-rich Banner management function, allowing you to easily configure captivating image or video sliders for the homepage of your website.
Anqi CMS Banner feature overview
In Anqi CMS, the settings of the home page Banner mainly revolve around its powerfulTemplate tag systemExpanding, especiallybannerListThe tag allows you to flexibly call the Banner list configured in the background template. It is worth mentioning that AnQiCMS supports the operation of BannerGroup ManagementThis means you can create independent banner groups for different display scenarios (such as home page banners, event page banners, sidebar advertisements, etc.) andtypeParameters are called. Each Banner item can not only be static images but also more attractive video resources, and can be configured with jump links, descriptions, and Alt text for better content marketing and SEO optimization.
Back-end operation process: easily configure the home page Banner
To set a Banner for your Anqi CMS website home page, you can follow the following steps:
Step 1: Prepare high-quality image or video materials
Before setting up the banner, make sure you have prepared beautiful and clear images or video files.Please note that the size and proportion of the image should match your website design and avoid stretching or blurring.For videos, it is recommended to choose a lightweight and compatible format (such as MP4) and control the file size to ensure loading speed.
These materials can be accessed through the Anq CMS backend’s “Page Resources" menu under the "Image Resource ManagementThe function for uploading and unified management. Here, you can create different categories to organize your media files, making it convenient for future search and use.
Step two: Enter the Banner management area and create (or edit) a Banner group
Based onbannerListlabel'stypeParameter design, the Anqi CMS backend usually provides a specialBanner ManagementorAd Space ManagementModule. You can find similar entries under the following menusContent ManagementorBackend settingsetc.
After entering this module, you will see the existing Banner group list, which may contain one nameddefaultThe default group. You can choose to edit this default group or create a new Banner group as needed (for example, named “homepageTo clearly manage the home page Banner. When naming Banner groups, it is recommended to use concise and meaningful English or pinyin, which will correspond tobannerListin the labeltypeParameter value.
Step 3: Add and configure a single Banner resource
Under the selected Banner group, you can start adding specific Banner items. Each Banner item's configuration is very critical:
- Logo/Photo/Video AddressThis is the core resource of the Banner display. You can associate the prepared image or video file with the current Banner item by clicking the upload button or selecting it from the existing 'Image Resource Management'.
- Link AddressSet a URL for the Banner to redirect to after clicking.This can be an in-site page (such as a product detail page, event page) or an external link.Reasonably guiding users to click is the key to Banner operation.
- Description: Briefly describe the Banner content, which is usually used for screen readers or as a tooltip, enhancing the user experience.
- Alt text (Alt)This is a brief description of the image content, which is crucial for image SEO and accessibility. Search engines read the Alt text to understand the image content, and it is recommended to include keywords.
After completing these settings, save your configuration.
How to call the Banner in the home page template
Configure the Banner resources on the back-end, the next step is to display them on the homepage template. The template files of Anqi CMS are usually stored in/templateIn the directory, the homepage template is generally namedindex/index.htmlorindex.htmlThe specific organization mode of your template can be referenceddesign-director.mdthe document).
You need to edit the homepage template file and usebannerListTag to call the Banner group you configured in the background:
`twig {% bannerList banners with type=“default” %} {# If you have created other groups, please replace ”default” with your group name, such as ”homepage” #}
<div class="homepage-banner-slider"> {# 假设您有一个轮播容器 #}
{% for item in banners %}
<div class="banner-item">
<a href="{{item.Link}}" target="_blank" title="{{item.Description}}">
{% if item.Logo %} {# 假设 Logo