【WordPress】無料の「Elementor」を使ってLPの背景に画像を挿入する手順【実践編①】

【WordPress】無料の「Elementor」を使ってLPの背景に画像を挿入する手順【実践編①】

LPとは、広告費をかけたキャンペーン、新しい商品・サービスの訴求、アフィリエイトのペラサイトなど様々な場面で使える形式のウェブサイトページのことをいいます。

Webで集客や商品の販売をするには「非常に効果的」な方法なので、出来るだけ簡単に作る方法は覚えて損のないスキルです。

私はコードの知識はほとんどありませんが、下記のようなページを作ることが出来ました。

完成図サンプル


https://www.liberta-corp.jp/lp-sample/

今回はこのようなLPをWordPressでオシャレに作る方法についてご紹介します。

 

Elementorで画像の上に文字を書く

このような画像の上に文字を書いたり、ボタンを設置するのもCSSでコードを書かなければできませんが、Elementorを使えば非常に簡単に対応できます。

画像のサイズも指定できるので、解像度の高い大きめのサイズでも大丈夫です。

 

セクションの背景設定を行う

①セクション上部の四角が六つ重なった部分をクリック
②セクションの編集画面が開くので、「スタイル」から背景に画像を挿入する。

このような手順で画像を背景に挿入することが可能です。

 

背景画面の表示設定をする

背景画像の設定がデフォルトだと、上記の画像のように画面が繰り返しになってしまったり、画像がズレてしっまたりしているので設定を加えます。

画像を画面いっぱいに表示するなら

  • 【位置】中央の中
  • 【繰り返し】繰り返しなし
  • 【サイズ】カバー

に設定すると良いでしょう。

 

テキストエディターでテキストを挿入する

画像が上手く背景に挿入できたら、いよいよテキストを入力します。

テキストエディターというウィジットを使えばテキストを通常の固定ページと同じように入力することが可能です。ここではテキストリンクや、文字の大きさ指定も出来るので色々試しながら書き込んでみてください。

 

背景オーバーレイを設定する

今回のような明るい画像を背景にしたとき、文字が読みづらくなってしまいます。

そこで背景オーバーレイを使い画像全体を少し暗くすることで文字を目立たせます。

背景オーバーレイ前

 

背景オーバーレイ後

このように画面全体を暗くしたり、色を加えることで文字を目立たせることが出来ます。

 

LP作成には画像の配置が大切

通常のサイトよりも文字情報の少ないLPサイトでは、画像の使い方が非常に大切になってきます。逆に言えば、同じ情報でも画像の配置や選び方、配色でサイト全体のデザインを良くすることが出来るんですね。

私はシャッターストックという画像サイトに登録して、著作権フリーの画像を常に集めています。

シャッターストック
URL:https://www.shutterstock.com

是非、参考にしてみてください。

次回はスマートフォンでの表示最適化(レスポンシブ)についてご紹介します。