前言

日常生活中，店家会运用各种营销方案促进顾客消费，如果这时再配上一张满屏的活动页面，既有视觉冲击，又能充分的描绘活动的详细内容，能让促销达到事半功倍的效果。

但由于友好速搭的 预装主题自定义页面 对于图片的边距和间隔有预定格式的限制，如下图所示，

所以这种活动还需要代码调试，今天小编来教大家一个一劳永逸的方法制作满屏幕的活动宣传页面，最终效果如下图。

添加Pc模版

在 主题风格 --> 应用中的通用主题 --> 代码编辑 --> 模版/Templates 中选择添加模版，模版名自拟。

将全部代码清空，替换为如下的代码段。

<div class="wrapper-1920">
      {% for page_snippet in page.snippets %}
        {% if page_snippet.type == 0 %}
        <div class="wrapper-1920">
            {{ page_snippet.content | content_html }}      
        </div>
        {% else %}
        <div class="wrapper wrapper-proList">
            <div>
                <div class="proList">
                  <div class="proList-inner">
                    {% if page_snippet.products.size != 0 %}
                    <ul class="proList-ul clearfix proList-count-{{ settings.list_productlist_count }} lazyload_scope">
                      {% for product in page_snippet.products %}
                      {% include 'product_grid_item'%}
                      {% endfor %}
                    </ul>
                    {% endif %}
                  </div>
                </div>  
            </div>
        </div>
        {% endif %}
      {% endfor %}
</div>

<style>
.wrapper-1920 img{ vertical-align: bottom;width:100%;}
</style>

演示

新建的活动页面选择相应的全屏模版即可

添加移动端模版

与Pc端原理类似

选择手机端的代码编辑，新建模版，题目自拟。

将全部代码清空，替换为如下的代码段。

<div class="wrapper wrapper-customPage">
      {% for page_snippet in page.snippets %}
        {% if page_snippet.type == 0 %}
        <div class="wrapper-768">
            {{ page_snippet.content | content_html }}
        </div>
        {% else %}
        <div class="wrapper wrapper-proList">
            <div>
              <div class="proList-inner">
                {% if page_snippet.products.size != 0 %}
                <ul class="proList-ul clearfix proList-count-2 lazyload_scope">
                  {% for product in page_snippet.products %}
                  {% include 'product_grid_item'%}
                  {% endfor %}
                </ul>
                {% endif %}
              </div>
            </div>
        </div>
        {% endif %}
      {% endfor %}
</div>

    <style>
        .wrapper-768 img{ vertical-align: bottom;width:100%;}
    </style>

新建的活动页面也不要忘记了选择相应的全屏模版哦

最后补一张手机版的体验图XD