如何构建活动专题页(满屏大图)的自定义页面_友好速搭

友好速搭

如何构建活动专题页(满屏大图)的自定义页面

分类: 电商运营 | 发表时间:2015.08.12 18:00
Zeta
·
-
电商运营 2015.08.12 18:00

前言

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

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

#图片名称

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

#图片名称

添加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

#图片名称

分享文章
免费领取15天试用
立即注册
联系客服
微信咨询
微信二维码

领取免费试用资格

姓名 *

电话 *

公司名称

所在地区

意向产品

提交

提交成功

你好, XXX女士/先生 ,你的需求已提交成功,后续会有专门的客户经理与你电话联系。谢谢!