コードを書かずにwebサイト制作 Elementorの使い方

カテゴリー: Web制作
お気に入り シェア
コースをシェアする
ページリンク
ソーシャルメディアでシェア

コースについて

この講座では、WordpressのプラグインElementorを使って、実際のサイトを作るまでを学習する講座です。Elementorを使えば、プログラミングができなくても、簡単にデザイン性が高く動きがあるサイトをつくることができます。

完成サイト(COMOLYの昔のページです)
https://traning.comoly.jp/test-page/

Elementorは、世界で500万以上ダウンロードされている人気のプラグインで、多くの企業が利用しています。また、本講座を学習することでWordPressやWebサイトの構造も理解できるようになります。

講座受講のための準備

➀Localホイールのダウンロード、WordPressサイト作成

本講座は、プログラミングの知識がない方でも受講できますが、Localホイールというアプリケーションを使ってPC内にWordPressの仮想サイトを作成して、ログインできる状態にしておく必要があります。Localホイールの使い方については、下記のレッスンを参考にしてください。

➁画像ファイルのダウンロード

本講座では、サイト作成にあたり、サンプル画像を使います。下記URLから画像ファイルをダウンロードしておいてください。

https://drive.google.com/file/d/1yzGuKMEA02Jyhzt_v-uiuHJDUAqYGhsP/view?usp=sharing

講師紹介

(現王園 健太)

SEOを中心にWebマーケティング歴7年。管理しているサイトの合計PVは100万PV以上。「東京 居場所」「個別支援計画」など、多くのビッグキーワードで検索1位を獲得。不動産や人材系、メンタルヘルス、福祉業界など、様々な分野でのライティング実績あり。オウンドメディアの立ち上げや大手Webマーケティングメディアでのディレクションを担当するなど、豊富な実績あり。現在はCOMOLYスタッフとしてディレクション等を担当。

さらに表示

コース内容

ホームページ作成ツールについて知っておこう
Elementorについて学習する前に、ホームページについて簡単に説明します。ホームページを作ることができるツールは沢山あり、目的によってどんなツールで作ればいいかも変わってきます。 どんな場合にElementorでサイトを作ればいいのかを把握しておくためにも、ホームページの目的に合わせた最適なツールを判断できるようにしておきましょう。

  • ホームページを作成できるツールとは
    00:00

Elementorの基本構造
Elementorはドラッグ&ドロップで直感的にサイト制作が可能ですが、Webの基礎知識を少し理解しておくことで、より効率的にサイト作りができます。ここでは、marginやpaddingといったWeb製作の基礎知識、およびElementorの基本構造について解説します。

Elemenntorでサイトを作ってみよう。
ここからは実際にElementorを使ってヘッダーとアイキャッチを作っていく過程を解説します。(ローカルホイールをダウンロードし、WordPressのテストサイトを作っているところまで準備が進んでいることを想定してレッスンを進めます。まだダウンロードが終わっていない方は、本講座の冒頭のリンクから、テストサイトの作り方を確認してください。)

生徒の評価とレビュー

評価がありません
評価がありません