Lesson6-1 3.募集ページLP

制作内容

■ 商材
「世界一わかりやすい Elementorの授業」参加募集ページ

■ 制作内容
・レスポンシブファースト(携帯表示のみの制作)
・ボタンリンク
https://forms.gle/d9J5nmXx3MSNeVh48

■ タイトルとパーマリンク
タイトル：L2-1課題
リンク：lp1

まず、皆さんのお手元に、LPの素材とテキストをお渡ししていますので、
ファイルを解凍して開いてください。

素材一覧

■ LPテキスト
https://docs.google.com/document/d/15P9z-0PsaY52cf0IPM81KFBKo3ALCDFgNxYiK9nrLWA/edit?usp=sharing

■ 素材

制作手順

制作方法を決める

今回作成する募集ページのLPは、レスポンシブファースト(携帯表示のみ)を実装していきます。
実際の作業は動画をみて、そのまま制作してください。
それではWordPressの管理画面から、実装の準備に入ります。

実装の準備

■ 画像の切り出し
LPの制作ということで、画像を切り貼りしていきます。
今回は全て素材が用意されているので、ファイルの解凍のみでOKです。
Photoshopで作ったカンプも添付していますので、切り出した位置を確認してください。
また、特典2の見出しとボタンのみ透過の画像になっています。
これは背景と重ねるためです。
小さなブロックごとに画像を切り取っています。
色々な方法がありますが、平原はPhotoshopに縦幅の小さい部品.psdを用意して、そこで切り出しています。

■ WordPressの設定
今回はありません

実装

いよいよ実装していきましょう。
PC・タブレット・モバイルと順番に解説します。

実装

PC版の実装

いよいよ実装していきます。

タブレット版の実装

続いてタブレット版を設定していきます。
すぐ終わりますので、サクッといきましょう。

モバイル版の実装

最後にモバイル版の実装をしていきます。
携帯表示は修正箇所が一部存在します。
でも大事な設定なので確認していきましょう。

実機での確認

表示やリンク設定がおかしくなっている場所がないか確認しましょう。
この時必ず実機(実際に持っているデバイス)で確かめます。
タブレットがない方は仕方ないですが、PCと携帯は必ず確認しましょう。

今回のLPの実装時間の目安は、1時間です。

ぜひ何度も実装に挑戦して、目指してみてください(^^)