4-1 細かい設定も簡単!DIVIで実際にランディングページを作ってみよう

執筆者 | DIVIでホームページ作成

今回はDIVIで実際にランディングページを作ってみよう、ということで早速操作に入っていきます。

9つのポイントについて、一緒にやっていきましょう。

 

ポイント#1.ヘッダーの写真を入れ替える

ポイント#2.ヘッダーの文字を変更する

ポイント#3.ディバイダーでおしゃれにする

ポイント#4.本文の写真を入れ替える

ポイント#5.本文の文字を変更する

ポイント#6.お申込みフォームを設定する

ポイント#7.フッターのテキストを修正する

ポイント#8.コピーライトを変更する

ポイント#9.ファビコンを設定する

このレッスンではDIVIで実際にランディングページを作ってみます。こちらの項目をひとつひとつ丁寧に解説していきますので、早速一緒にやっていきましょう。

DIVIで実際にランディングページを作ってみよう

ヘッダーの写真を入れ替える

まずこちらはダッシュボードに来ました。WordPressの中のダッシュボードです。先ほどテンプレートを入れた固定ページがありますので、こちらの固定ページを押してください。

 

こちらから一番上に、先ほどテンプレートを入れたものがあるかと思いますので、こちらを押してください。

もし無い方は、また新規追加からテンプレートを追加して操作を始めてください。

 

今回はこちらの方にマウスを持ってきまして、Diviで編集を押します。

 

そうしますとすぐDivi Builderが立ち上がります。このように立ち上がりました。

先ほどまで色々操作を加えていたこのテンプレートから操作をしていきます。早速やっていきましょう。まず最初にヘッダーの写真を入れ替えて行きます。こちらのチョコレートの写真になっていますが、こちらを入れ替えていきましょう。ヘッダーはこちらのセクションに写真が入っているかと思いますので、マウスを持って来ていただきまして、こちらカチッと押していただきます。

 

そうしますとこちらにセクションの歯車が出てきますので、この歯車を押します。押して頂きましたら、背景の所にチョコレートが設定されていたのがわかります。こちらのセクションの設定の中から、背景にいっていただきまます。背景色ではなくその横の横、背景画像にこのチョコレートの画像が設定されていました。

 

ですので、この画像を変更したいと思います。このチョコレートの画像の上でカチッと押してください。

 

そうしますと、あなたのメディアライブラリを見ることができます。

 

まだ写真をアップロードしていない方は左側タブ「ファイルをアップロード」を押してください。4-1-11ランディングページ

 

押していただきましたら「ファイルを選択」を押します。

4-1-12ランディングページ

 

押していただきましたら、あなたの好きな写真を一つ選んでいただきます。このローカルフォルダーで、あなたの写真を見ることができていると思います。そのローカルの中から一つ写真を選んでください。私も一枚選んでみようと思います。こちらを押します。

4-1-13ランディングページ

 

そして右下の青い「開く」ボタンを押します。

4-1-14ランディングページ

 

そうしますと読み込みが開始されました。このように写真が写ったら読み込みが完了しました。

4-1-15ランディングページ

 

今チェックが入っていますので、このまま「画像をアップロードする」という右下の青いボタンを押してください。

4-1-16ランディングページ

 

そうしますとここに先ほど私が選んだ写真が入りました。そしてこれでよろしければチェックを入れます。

4-1-17ランディングページ

 

以上、チョコレートの写真から、自分で選んだ写真に入れ替えることができました。

 

ヘッダーの文字を変更する

そして次にこちらの真ん中の文字を変えていきましょう。ヘッダーの文字を変えていきます。ヘッダーの文字を変更するのはとても簡単です。こちらの真ん中のところをカチッと押して下さい。

4-1-18ランディングページ

 

そうしましたら、もう一度カチッと押していただきますと、ここにカーソルが点滅しています。これで書き換えることができますので、ここを書き換えていきましょう。

4-1-19ランディングページ

 

こんな感じで書き換えることができました。しかしちょっと文字が大きすぎて、うまく入っていません。ですので文字の大きさを変えてみましょう。その場合は今カーソルが点滅してますので、関係ない外側を押します。

4-1-20ランディングページ

 

点滅を消していただきまして、この変更したいパーツのところに来まして、歯車を押します。

4-1-21ランディングページ

 

こちらは文字の大きさを変えていきたいと思います。今、文字が大きすぎて2行になってしまっています。こちらを小さくして、1行に収めたいと思います。

ビジュアルタブの左上を見てください。今、ヘッドライン1という設定がされています。ただの文字やパラグラフではなく、ヘッドライン1、見だしという扱いになっています。

4-1-22ランディングページ

その場合は、コンテンツの隣りにあるデザインタブを押して下さい。そしてテキストではなく、小見出しのテキスト、こちらを押してください。

4-1-23ランディングページ

 

押していただきますとこちらH1、見出し1のことです。これを変更することができるということになってますので、これを押してください。

下の方にスクロールして、文字サイズのバーを左にスライドしていくと、文字が小さくなります。これを変更していただくと、ヘッドライン1のサイズの変更ができます。今このように、文字サイズを変更することができました。理想のサイズになりましたら、右下の緑のチェックマークを押して保存をします。

4-1-24ランディングページ

ヘッダーの文字サイズを変えて、1行におさめることができました。

4-1-25ランディングページ

 

もう一つだけやってみましょう。こちら私の方書みたいなものがDIV CHOCOLATIERになっていますので、こちらも変えたいと思います。

4-1-28ランディングページ

 

その場合はこちらのDIVI CHOCOLATIERの、少し操作しづらいんですが、ここに消えてしまってるんですがここに歯車があるので、これを押します。

4-1-26ランディングページ

 

押して頂きますと新たにボックスが出てきました。こちらがDIVI CHOCOLATIERの変更ができるテキストボックスになります。ここを変えて行きましょう。FUNNEL DESIGNERにしました。4-1-27ランディングページ

 

サイト名の上に肩書を入れました。日本語でももちろん大丈夫ですが、英語で「FUNNEL DESIGNER」に変更しました。これでヘッダーの文字を変えることができました。。

ディバイダーでおしゃれにする

次にヘッダーのディバイダーでお洒落にしましょう。先ほどのこのナミナミはチョコレートになってますので、自分なりのディバイダーを使ってみたいと思います。その場合はこのセクションにディバイダーがかかっていますので、セクションの所にマウスを持ってきていただきまして、歯車を押します。

4-1-29ランディングページ

 

デザインを押していただいてディバイダーを押します。

4-1-30ランディングページ

 

押していただきますと今トップの仕切りスタイルがこのナミナミになってます。

4-1-31ランディングページ

 

ですので、スタイリッシュな感じにしたいと思いますので、押してみて様子を見ていただいても大丈夫です。

4-1-32ランディングページ

 

シャープでスッとしたデザインになりました。

4-1-33ランディングページ

 

そしてちょっと上下を変えてみましょう。少しかくっとしてしまいました。

4-1-34ランディングページ

でこぼこしたものやシャープなものなど、様々なデザインがあります。色々試してみて、こちらから好きなものを選んでいただきたいと思います。今回はゆるやかな曲線を選んでみました。

4-1-35ランディングページ

そして右側に私の写真が表示されているので、バランスを取ります。逆の直線にして、この曲線を緩やかにしてみましょう。「仕切りの太さ」のスライドバーを左にして、細くしました。バランスが良くなったのでこのデザインに決めます。4-1-36ランディングページ

そして下の方も操作して、変えてみようと思います。今は黄色い下の部分がナミナミし過ぎてしまっているので、もっとスタイリッシュにしていきます。この「ボトム」を押して下さい。

4-1-37ランディングページ

そして「仕切りスタイル」を変更して、穏やかな曲線を選んでみましょう。これでチェックマークを押します。これでディバイダーを使って、動きのあるサイトに変化してきました。

4-1-38ランディングページ

 

本文の写真を入れ替える

次に本文の写真を入れ替えていきます。下の方に行っていただきます。例えばこちらのチョコレートの写真が入っていますが、私自身の写真を入れて行こうと思います。こちらの4枚あるチョコレートの写真を変更してみたいと思います。

4-1-39ランディングページ

 

画像の上の黒いタスクバーの歯車を押します。歯車を押していただきますと、開いたタブにチョコレートの画像が表示されています。

4-1-40ランディングページ

 

ですのでこの画像を押してください。またメディアセンターが出てきました。4-1-41ランディングページ

 

写真をアップロードします。「ファイルをアップロード」をクリックします。

4-1-42ランディングページ

押していただきましたら「ファイルを選択」を押します。

4-1-43ランディングページ

 

このように何枚かもうすでに選んでしまうのもいいですね。

4-1-44ランディングページ

 

キーボードの「Ctrl」キーを押しながら写真を選ぶと、何枚か選ぶことができます。何枚か入れると決まっているのでしたら、ここの時点で複数枚選んでしまいましょう。

4-1-45ランディングページ

4枚ほど選びましたので、「開く」を押します。全部縦長の写真を選んでみました。今4枚写真をアップロードしました。そうしましたら1枚選んで頂いて、青枠が囲まれているのを見て、右下の青い「画像をアップロード」ボタンを押します。

4-1-46ランディングページ

 

そうしますとこちらに画像が入りました。

4-1-47ランディングページ

 

そして実際の画面にもうすでに反映されています。同じように他の写真も変えてみたいと思います。チェックをして保存します。

4-1-48ランディングページ

 

こちらを変える時はまたチョコレート上の黒いタスクバーの歯車を押して、先程と同様に違う写真を選んでアップロードしていきます。4-1-49ランディングページ

チョコレートの写真をクリックします。4-1-50ランディングページこちらも選んで歯車を押していただいて、写真を選んで、違う写真を選んでアップロードです。

4-1-51ランディングページ

できました。右2枚が似たような写真になってしまって恐縮です。こちらも歯車を押して、画像を押して、この画像を選んで、選択します。

4-1-52ランディングページ

これだけ少し違う感じになってしまったんですが、4枚の写真ができました。それで、例えばこちら画像を入れた時に、一番左の1枚だけ明るさが足りように思います。

4-1-53ランディングページ

その場合のことを少しだけ補足します。明るさの調整をやってみたいと思います。ここの画像を入れた、この黒いタスクバーの歯車を押します。そしてこの画像の調整ですので、デザインを押します。

4-1-54ランディングページ

 

そしてこちらの中からフィルターを選びます。こちら他の写真と比較して明るさが少し足りないです。ですのでこれを押して、少し明るくしてあげるとどうでしょうか?

4-1-55ランディングページ

先ほどの暗い感じよりも、他の写真と一緒のようになって、整います。こちらも調整してあげると明るさも変わってきます。ここら辺を変えて頂けますと、他の写真と馴染むように操作もできますのでぜひ使ってみてください。チェックマークを入れます。

4-1-56ランディングページ

以上、画像を入れてみました。

本文の文字を変更する

そうしましたら次に本文のテキストを変えてみたいと思います。では例えばこちら。もうテキストを変えるのは簡単です。左から2番目の写真に「Chocolate bars」と書いてありますので、こちらの表記を変えていきましょう。文字の上をカチッとクリックしてあげると歯車が出てきます。この上でも変えられるんですが、狭すぎる場合は歯車を押してください。

4-1-57ランディングページ

テキスト設定の「コンテンツ」の中に、「Chocolate bars」と書いてあります。

4-1-58ランディングページ

 

こちらを「CHALLENGE」など、あなたの表す文言を書いてあげましょう。「FRIENDLY」や「PEACEFULl」など自分の特色を書いてみましょう。

4-1-59ランディングページ

 

こんな感じで簡単ですが文字も変えてみました。日本語でももちろん大丈夫です。一番上の文字もJOB STYLEに変更してみました。

4-1-60ランディングページ

こうしてみると先ほどのチョコレートとは全く別の、私を表すようなサイトに変更することができました。

お申込みフォームを設定する

次にお申込みフォームを設定するというのをやってみましょう。この下に設定しましょう。ではこの下の行を一個追加してみましょう。

4-1-61ランディングページ

 

行を一つ追加しました。追加したら何をやりますかと書いてありますので、お問い合わせフォーム。こちらを押します。4-1-63ランディングページ

 

押していただきましたらこのお問い合わせができましたので、名前は歯車を使ってお名前にしましょう。お名前にしました。

4-1-64ランディングページ

そしてEメールアドレスとメッセージはこのままで大丈夫です。

4-1-65ランディングページ

そしてこちらの送信ボタン、こちらのボタンを変えるためには、一度こちらから出て行きましょう。

4-1-66ランディングページ

この状態にしていただいてから、こちらのデザインを押します。

 

押していただいてここにボタンがありますので、ボタンを押します。

4-1-67ランディングページ

そしてこちらいいえになってますのではいにしていただきます。

4-1-68ランディングページ

そうしますと文字のサイズとかを変えることができます。文字のサイズの大きさなど変えることができました。できましたら完成したのでこちらのチェックマークを入れます。次に行きましょう。

4-1-69ランディングページ

この後は先程練習で入れたものがたくさん入ってしまっているので、例えばこちらはもう要らないので全部一気に消す場合はこのセクションごと全部消してしまいます。

4-1-70ランディングページ

セクションを消します。全部消えました。こちらも全部消してしまいます。下の方のフッターの部分も消しましょう。すごくシンプルなページになったんですが、これがトップページです。ジョブスタイルを紹介して、簡単なお問い合わせフォームを入れてみました。

ここまで編集して、かなりスッキリしたページになりました。この下は他で操作をしているものです。ですのでこの画面では変えることができませんので、右下の保存を押してまずこちらを保存しましょう。チェックマークがついたら保存が完了しました。

一度ページから出て行きます。そのためにはビジュアルビルダーをまず終了しましょう。終了を押します。

4-1-71ランディングページ

そうしますと今現在見えているのは実際のサイトがどんな感じになっているのか見ることができました。そうしましたら最初のダッシュボードに戻っていきましょう。

ダッシュボードに戻っていただきましたら、一度先ほどのページをプレビューで見てみたいと思います。固定ページという所を押していただきます。

そして先ほど、編集していたものはこれですので、編集という所を押してください。

このページで指定できるのはこのURLを指定したり、実際のページを見る、こんなことができます。右上にプレビューがありますので、これを押してみましょう。

押して頂きますとデスクトップなのかタブレットなのかモバイルビューなのか、表示の形式を選ぶことができますので、ここでは新しいタブでプレビューを押します。

そうしますと、すでに公開されているあなたのページの見え方がこんな感じになっていますという風に見ることができます。

フッターのテキストを修正する

 

アニメーションみたいなのもここにかかってました。実際のページを確認したら、今度はこの一番下のフッター。ここがデザインエレガントテーマになってしまってますので、ここを変えたいと思います。

WordPressのページに戻ります。そうしましたらダッシュボードに一度戻りたいと思います。こちらの WordPressのマークを押します。

そうしましたら先ほどのフッターを変えていきたいと思います。それは外観の中からカスタマイズを選んでください。

このカスタマイズはこのサイト全体の設定をするところになりますので、ページの内部ではなく、外側です。WordPressのページからアクセスします。

4-1-90ランディングページ

本当の全体の設定をやるときはここを使ってください。この中からフッターを選んでください。

4-1-82ランディングページ

フッターを選んで頂きますと、この下のデザイン、このクレジットのところを変更したいです。ですのでこれを変更していきたいと思います。

コピーライトを変更する

一番下部ナビを選びます。

4-1-83ランディングページ

 

下部ナビを押していただいて、フッタークレジットを編集とありますので、これを自分の好きなコピーライティングに変えていきたいと思います。

4-1-84ランディングページ

よくあるのがこんな感じです。「下坂栄里子 2022 All rights Reserved」みたいな感じで、こういったクレジットを書いてあったりします。

4-1-85ランディングページ

これを入力することにより、自分のサイトのようになってきました。これでよろしければ公開を押します。

4-1-86ランディングページ

公開できました。上の方に戻っていただいて、この戻るを押しましょう。

4-1-87ランディングページ

以上、こちらのクレジットを変更する方法を解説しました。

ファビコンを設定する

最後にファビコンを設定しましょう。ファビコンというのはサイトを誰かにお渡しした時に、上の方にアイコンが出ます。それのことを言っています。それの設定もできますので、一緒にやっていきましょう。

こちらからひとつ戻っていただきます。

4-1-88ランディングページ

戻っていただけましたら一番上、一般設定の中のサイトアイデンティティを押してください。

4-1-89ランディングページ

そうしますとこちらにサイトアイコンを選択とあります。

4-1-90ランディングページ

これがファビコンのことですので、ここにサイトアイコンをアップデートしましょう。512×512ピクセルの正方形の形にする必要がありますので、画像をアップロードする際はそこにご注意ください。

 

サイトアイコンを選択します。ファイルをアップロードです。ファイルを選択します。

4-1-91ランディングページ

私はこの正方形のロゴがありますので、これをアップデートしてみました。選んで選択を押します。

4-1-92ランディングページ

これでいいですかという感じで出てますので、画像を切り抜きを押します。

4-1-93ランディングページ

そうしますと、ここにイメージが出ました。

4-1-94ランディングページ

ファビコンはこんな感じになりますけどいいですかというのに出てますので、これでよろしければ公開を押します。

4-1-95ランディングページ

これでこのサイトにファビコンが設定されました。設定が完了しましたらこのページからは出て行きたいので、ペケを押します。

4-1-96ランディングページ

ダッシュボードに戻ってきました。

4-1-97ランディングページ

まとめ

今回のレッスンで操作してきた、実際の画面を見てみましょう。こちら今回新たに作ったページですが、私の画像を入れてテキストを変えました。

4-1-98ランディングページ

そして下の方にスクロールしていきます。JOB STYLEの写真も全部変えて、こちらのテキストも変えてみました。

4-1-99ランディングページ

そしてお申し込みフォームを入れました。

4-1-100ランディングページ

最後にこの下のクレジット、フッターを変えてみました。

4-1-101ランディングページ

以上、簡単ではありますが自分のページを細かく設定してみました。このようにしたいとか、もっとこういう風にしたい、長くしたいとか、いろんなテキストを入れたいとかありましたら、ぜひご自身でDIVI Builderを使ってみてください。自由自在に作ることができますので、実際に操作して試して、よりあなたにぴったりのページを作成してみてください。

以上、DIVIで実際にランディングページを作ってみようというところを解説しました。