EC-CUBE4にLPページ作成

作業環境
レイアウト作成
ページ作成
ブロック作成
レイアウト設定
ブラウザで確認

作業環境

EC-CUBE 4.0.5
php 7.2.24
MariaDB 10.5.13

レイアウト作成

管理画面　＞　コンテンツ管理　＞　レイアウト管理
「新規作成」

レイアウト名：LP01
端末種別：PC
「登録」

ページ作成

管理画面　＞　コンテンツ管理　＞　ページ管理
「新規作成」
ページ名：LP01
URL：https://example.com/user_data/ lp01
コード：

{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends 'default_frame.twig' %}

{% set body_class = 'front_page' %}

{% block stylesheet %}
    <style>
        .slick-slider {
            margin-bottom: 30px;
        }

        .slick-dots {
            position: absolute;
            bottom: -45px;
            display: block;
            width: 100%;
            padding: 0;
            list-style: none;
            text-align: center;
        }

        .slick-dots li {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            padding: 0;

            cursor: pointer;
        }

        .slick-dots li button {
            font-size: 0;
            line-height: 0;
            display: block;
            width: 20px;
            height: 20px;
            padding: 5px;
            cursor: pointer;
            color: transparent;
            border: 0;
            outline: none;
            background: transparent;
        }

        .slick-dots li button:hover,
        .slick-dots li button:focus {
            outline: none;
        }

        .slick-dots li button:hover:before,
        .slick-dots li button:focus:before {
            opacity: 1;
        }

        .slick-dots li button:before {
            content: " ";
            line-height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            width: 12px;
            height: 12px;
            text-align: center;
            opacity: .25;
            background-color: black;
            border-radius: 50%;

        }

        .slick-dots li.slick-active button:before {
            opacity: .75;
            background-color: black;
        }

        .slick-dots li button.thumbnail img {
            width: 0;
            height: 0;
        }
    </style>
{% endblock %}

{% block javascript %}
    <script>
        $(function() {
            $('.main_visual').slick({
                dots: true,
                arrows: false,
                autoplay: true,
                speed: 300
            });
        });
    </script>
{% endblock javascript %}

{% block main %}


{% endblock %}

レイアウト設定：PC「LP01」

「登録」

ブロック作成

管理画面　＞　コンテンツ管理　＞　ブロック管理

「新規作成」

ブロック名：LP用トップブロック01
ファイル名：lp_top_01
コード：

<div id="lp-img"> 
<h1>
<picture>

<!-- 縦画像 -->
<source media="(max-width: 991px)" srcset="＜画像リンク＞" alt="＜画像の説明＞">
<!-- 横画像 -->
<img src="＜画像リンク＞"  alt="＜画像の説明＞">

</picture>
</h1>
</div>

「登録」

レイアウト設定

管理画面　＞　コンテンツ管理　＞　レイアウト管理

「LP01」選択

未使用ブロックから「LP用トップブロック01」をドラッグ＆ドロップ

「登録」

ブラウザで確認

https://example.com/user_data_lp01