WordPressのテーマビルダープラグイン「Elementor」のファンブログ

【連載】Elementorでホームページを作ろう!#3

Share on facebook
Share on twitter
Share on pocket
Share on pinterest
series_thumbnail

【連載】Elementorでホームページを作ろう!とは?

このシリーズでは、ゼロからホームページ完成までの基本の流れを紹介していく連載企画です!順番に記事をご覧頂き、作業して頂くだけホームページが出来てしまう!(・・・を目標に)皆さんと一緒に実際にホームページを作って行きたいと思います。途中寄り道もあるかもしれませんが、気長にお付き合い頂けると幸いです。

バックナンバー

さぁ次は何を作る?ちょっとその前に・・・

前回ホームページの顔とも言えるヒーロー部分を作成しました。ここからは以下のセクションについては、人によって「お知らせ」が良いのでは?「会社詳細」が!など、意見が分かれるかと思います。ですが、ここで重要なのは、自分が「1訪問者」だった視点がポイントとなります。

例えば、今作っているホームページが自身のお店(パン屋さん)のホームページだとします。ヒーロー部分で一番売りとしている事「美味しい天然酵母パン」と書いたとします。一お客さんになったつもりで想像して下さい。次に知りたい事は何ですか?おそらく「どんなパンがあるの?」と実際のパンやパンの種類をご覧になりたいかと思います。または、「価格」という意見もあるかと思います。ここで重要なのは「お客様視点」という事です!

なので、本日は商品紹介コーナーを作ってみたいと思います!

サービス業であればサービスの種類。クリニックなどの場合は対応可能な治療方法などが該当するかと思います。

今日は商品(サービス)紹介コーナーを作る!

まず、商品の画像や情報を事前に用意しておきましょう。きちんと整理する事で見る人も分かりやすく伝わるはずです!サービス業であればイメージ画像、物品であれば商品画像などですね。

準備(セクションの追加と設定)

1)前回同様にセクション「+」で追加し、構成は1カラムを選択します。
section_plus
2)右上の項目名部分に「セクションを編集」と表示されている事を確認し、「レイアウトタブ」内の高さで「最小の高さを選択」を選びます。

商品(サービス)の種類分カラムを作る

1)灰色のアイコンを「右クリック」
column_plus1
2)新しいカラムの追加
column_plus2
3)2つのカラムの出来上がり
column_plus3

今回はこのウィジェットを入れます!

表現の自由なので、どのウィジェットを入れても良いのですが、一般的視点で今回は「画像ボックス」を使いたいと思います。画像とテキストが一体となった便利なウィジェットです。(ウィジェットマニュアルは別途後日記事化します)
pb_icon

1)ドラッグ&ドロップ
pb_1

先ほどのカラム内に、画像ボックスを掴んで設置!

2)まずは画像を設置しよう!
pb_2
Choose Your Imageをクリックすると、メディアライブラリ(ワードプレスにアップロードされた画像一覧)が表示されます。まだアップロードしていない場合は、アップロードして選択しましょう。

pb_3
いかがでしょうか?入りましたでしょうか?

3)画像の調整
pb_4
画像位置:タイトルや説明に対し、画像をどこに配置するかを設定出来ます。デフォルトでは中央配置になっていますので、上の画像を入れた直後の配置となります。

(左寄せにした場合)
pb_5
(右寄せにした場合)