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

友好速搭

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

分类: 友干货 | 发表时间: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

#图片名称

分享文章
友好速搭与你一起,共赢未来
联系客服
电话咨询
服务热线
0755-83051027
获取报价
QQ咨询
微信咨询
微信二维码
在线咨询

在线获取方案和报价,专人快速响应

所选城市 *

您的称呼 *

联系电话 *

网站类型 *

请选择
展示官网 电商网站 微信商城 小程序 其他类型

您希望我们为您提供哪些服务?(可多选)

B2C商城 跨境解决方案 B2B2C平台电商 网站备案 自营电商培训
获取报价

提交成功

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