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

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

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

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

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

1回目のテーマは「ヘッダーを作る」

ホームページなどを作るとき、人によってどこから作り始めるかは色々だと思います。今回の企画テーマは「ホームページを作る」ですから、上から順に作って行きたいと思います。という訳で、今回はヘッダーの作り方を一緒に見て行きましょう!

※この記事を最初に見た方は下記の0回目の記事も是非ご覧下さい。

テーマを「Twenty Seventeen」に設定しよう!

Elementorの公式サイトでも下記テーマを推奨しております。Sydney/GeneratePress/Hestia/Astra/OceanWP/Zakra/Phlox/Tesseract/Sonaar/Neve/Ashe/そしてTwenty Sixteen今回はWordPressにデフォルトで入っている「Twenty Sixteen」を使ってみます。

teema_screen
1)テーマの変更は、WordPress管理画面の右にある「外観」を選択します。上の様なテーマを選択出来る画面が表示されます。

teema_select
2)「Twenty Sixteen」を見つけ「有効化」をクリック

teema_select2
3)有効になれば成功です。

固定ページを作って編集準備!

1)固定ページ>新規追加
elemento

2)タイトルをトップページにし、「Elementorで編集」をクリック
koteipage_elementor
これが、Elementorの編集画面です。
elementor_monitor

3)画面右したのギアアイコンをクリック
elementor_menu

4)ページレイアウトで「Elementorキャンバス」を選択
elementor_layout

すると・・・

elementor_monitor2

これで準備は完了です!

レッツ!!エレメンター(セクションの追加)

1)セクションを追加しよう!画面中央の+のアイコンをクリック

section_Insert

2)構造を選択します。(後で変更可能なので、とりあえず1列を選択)エクセルで言う列の追加
section_Insert2

3)右のライブ画面に青枠が出現!これを「セクション」と呼びます。
エクセルで言う行です。
section_Insert3
section_Insert4
(補足)分かりづらいのですが、グレーのアイコン枠が「カラム」と呼びます。

 

レッツ!!エレメンター(サイトタイトルやアイコンの追加)

1)サイトタイトルを「文字」にするか、「ロゴ(画像)」にするかは好みです。入れたい方を掴んで先程のセクション(青枠)へ置きます!<見出しの場合>
elemento

text_Insert
あとは、サイトタイトルを入力して出来上がりです。
(今回は画像の場合で進めたいと思います)<ロゴ(画像)の場合>

pict_Insert
いきなり画面に大きな画像が出ても慌てないでください。サイズは自由に変更できます!それでは早速画像を入れてみましょう!

2)右の編集画面の「Choose Your Image」をクリック
pict_Insert2

3)別画面が表示されます。右上のタブ「ファイルをアップロード」をクリック
imageInsert

4)「ファイルを選択」をクリックし、使いたい画像を選択。
elemento

5)アップロードされた画像を選択して、「メディアの挿入」をクリック
imageInsert3

6)画像が入りました!
pictureInsert3

7)画像の設定をしていきましょう!
・画像サイズ:フル
・配置:右寄せ
picturecontrol1

8)上部のタブ(スタイル)を選択し、「幅」を調整していきます。
スライダーを左右に動かすと右のプレビュー画面の画像が大きくなったり小さくなったりすると思います。
elemento
9)早速どんな感じか見てみましょう!画面中央にある部分をクリックすると全画面にて現在のページをプレビューする事が出来ます。編集画面に戻る場合は同じくクリックすると戻ります。
preview_select

こまめに保存!ここで一旦保存します。

1)画面右下の緑(公開)横の▲をクリックし、「下書き保存」を選択します。これでこのページは保存されました。
更に、ヘッダーは他のページにも使いますので、パーツとしても保存しておきましょう。
save
パーツとして保存

section_save1section_save2
1)セクション(青枠)の中央にあるアイコンを「右クリック」します。メニューの中から「テンプレートとして保存」を選択します。

section_save3
2)別画面が表示されます。パーツに名前をつけて「保存」をクリックします。

section_save4
3)保存されました!ヘッダーパーツのタイプがセクションになっているかと思います。つまりエクセルで言う行を保存した形になり、他のページにどこでも追加する事が出来ます。

まとめ

あくまでElementorの無料版で、ホームページを作る方法となり、プロ版とは異なります。(プロ版は別で記事を書きたいと思います。)セクションとカラムの関係、カラムの中に入れるウィジェットの感覚がなんとなく分かれば、今後の制作もスムーズに行くと思います。もしもやっとされてる方は、Elementorの基本に関する記事をご覧下さい!

次回は、トップページの顔となるヒーロー部分を作って行きたいと思います。

多くの人にElementorを知ってもらいたいので
\ SNSでシェアお願いします /
Share on facebook
Facebook
Share on twitter
Twitter

プロフィール

icon

 HTMLはなんとなく聞いた事があったけど、CSSって?っていうレベルの人間がこのElementorと出会い、ハマり、好きになってしまい・・・今や他社のサイト制作を受注するまでに至りました。
 プログラミングリテラシーがゼロのこの僕が、仕事でホームページ制作を請負うまでになり、今や個人事業主から中小企業まで年間のべ25〜30サイトの制作をElementorと共にやらせて頂いております。

自称:プロElementor
趣味:Elementor・デザイン・マーケティング

オススメ記事

もくじ

ポップアップ!

こんな感じで横スライドイン!
なんてことも出来ます。