How to add a 'Learn More' button to the home page Banner?

In website operation, the homepage banner (banner ad) plays a crucial role, it is the first area that visitors see when entering the website, responsible for conveying core information and attracting users' attention.And a well-designed, guiding "Learn More" button is even more effective in enhancing user interaction, converting visitors into potential customers or subscribers.As an experienced user of AnQiCMS, I am well aware of its powerful and flexible content management capabilities.Today, let's delve into how to巧妙地添加a "Learn More" button on the home page banner of an AnQiCMS-driven website to make your site more guiding.

Home Banner: The first impression and guide entry of the website

In AnQiCMS, the management and invocation of the homepage Banner are usually realized through its built-in template tags, which makes the display and layout of content highly flexible.A typical Banner not only includes eye-catching images, but usually also accompanied by a title, a brief description, and most importantly, a link to detailed content.Our goal is to utilize these existing elements, or slightly expand them, to build a fully functional "Learn More" button.

AnQiCMS providesbannerListThe tag used to retrieve the data for the home page banner. Through this tag, you can easily obtain the image address of each banner (Logo), related link (Link），Title（Title), description (Description）and key information. This information is the basis for building the “Learn More” button.

Detailed steps to add a 'Learn More' button to the homepage banner

Add a 'Learn More' button to the AnQiCMS homepage banner, we mainly need to focus on two aspects: the background content configuration and the front-end template code editing.

The first step is to understand the Banner data structure and backend configuration

Although the AnQiCMS documentation does not list the independent module of "Home Banner Management", butbannerListThe powerful function of the tag means that you can configure these Banners in some way in the background.Generally, you can upload Banner images under 'Page Resources' in 'Image Resource Management', and associate images, links, titles, and descriptions in 'Content Management' or 'Single Page Management' to display as the home page Banner content.

Core field:Each one passingbannerListBanner item called by the tag (item) includes the following fields, which are the key to implementing the button:

• item.Logo: The address of the Banner image.
• item.LinkClick the banner or button to go to the link.
• item.TitleBanner title text.
• item.DescriptionBanner description text.

These fields can be set in the corresponding Banner content editing page in the background.For example, when editing a Banner, you can enter the URL of the target page in the 'Link' field, and enter the text content of the Banner in the 'Title' and 'Description' fields.

Step two: Edit the homepage template file, build the button

Next, we need to edit the homepage template file of the website. According to the AnQiCMS template convention, the homepage template is usually located/template/你的模板目录/belowindex.htmlorindex/index.html.

Open your home page template file, find the code block that calls the Banner list. You will see a structure similar to the following.bannerListTags:

{% bannerList banners %}
    {% for item in banners %}
    <div class="your-banner-container">
        <a href="{{item.Link}}" target="_blank">
            <img src="{{item.Logo}}" alt="{{item.Alt}}" class="banner-image" />
        </a>
        <div class="banner-text-area">
            <h3>{{item.Title}}</h3>
            <p>{{item.Description}}</p>
            {# 在这里添加我们的“了解更多”按钮 #}
        </div>
    </div>
    {% endfor %}
{% endbannerList %}

Now, we will be usingbanner-text-areaAdd the 'Learn More' button HTML code in the area. A button is actually a hyperlink with a specific style.<a>tags).

Add button code example:

{% bannerList banners %}
    {% for item in banners %}
    <div class="your-banner-container">
        <a href="{{item.Link}}" target="_blank" class="banner-link-area"> {# 也可以让整个Banner可点击 #}
            <img src="{{item.Logo}}" alt="{{item.Alt}}" class="banner-image" />
        </a>
        <div class="banner-text-area">
            <h3>{{item.Title}}</h3>
            <p>{{item.Description}}</p>
            {% if item.Link %} {# 仅当Banner配置了链接时才显示按钮 #}
                <a href="{{item.Link}}" class="btn-learn-more" target="_blank">
                    了解更多
                </a>
            {% endif %}
        </div>
    </div>
    {% endfor %}
{% endbannerList %}

In this code block:

• {% if item.Link %}This line is very important, it ensures that the "Learn More" button will only be displayed when the background is configured with an actual link for the Banner.This avoids the embarrassing situation where a button appears but has nowhere to jump.
• <a href="{{item.Link}}" class="btn-learn-more" target="_blank">了解更多</a>This line is the core of the button.
  • href="{{item.Link}}": Dynamically obtain the link address configured by the background.
  • class="btn-learn-more": This is a custom CSS class name used to add styles to the button later.
  • target="_blank": Typically opens links in a new tab, enhancing user experience.
  • 了解更多: This is the text displayed on the button, you can modify it according to your actual needs, such as 'Buy Now', 'View Details', etc.

Step 3: Button Style Enhancement

After adding the HTML structure, the button may look plain. To make it match the overall style of the website and be attractive, we need to beautify it with CSS.

In the CSS file corresponding to your template (usually located/public/static/css/in the directory, and in the<head>section reference) of the template, you can add style rules for the.btn-learn-moreclass:

`css /* Example CSS style */