WordPress Elementor チュートリアル | 2024 年のステップバイステップガイド

Elementor を使い始めたいと考えており、 WordPress Elementor のチュートリアル? 検索はここで終了します。 この記事では、Elementor について知っておくべきすべてのことについて簡単に説明します。

導入からオシャレ度の高いページの作り方まで、記事を読めば疑問がすべて解決します。 確かに; 読んだことは無駄にはなりません！

ただし、Web サイトにプロフェッショナルなタッチを与えるには、Web サイトビルダープラグインが必要です。

どうやって手に入れるのですか？ まあ、私は使います Elementor そのために。 Elementor を使用すると、単純なドラッグ アンド ドロップ機能でプロフェッショナルな Web サイトを非常に簡単に作成できます。 

Elementor について詳しく知りたい場合は、私の詳細をチェックしてください。 Elementorレビュー.

WordPress に Elementor をインストールする方法

さて、WordPress に Elementor をインストールするには 2 つの方法があります。 

• エレメンターの公式サイトより

Elementor の公式 Web サイトにアクセスし、Web サイトに表示される「無料ダウンロード」ボタンをクリックします。 

「無料ダウンロード」ボタンをクリックするとすぐに、Elementor Web サイトに登録するためのポップアップが表示され、同じことを行うと、プラグインのダウンロードが自動的に開始されます。

ラップトップ/PC にダウンロードされた zip ファイルが見つかります。 次に、WordPress ダッシュボードに移動し、「プラグイン」セクション > 「新しいプラグインの追加」 > 「プラグインのアップロード」をクリックします。

Elementor ファイルを選択し、WordPress にアップロードします。

• WordPressダッシュボード経由

Elementor プラグインは WordPress ダッシュボードから直接インストールすることもできます。 「プラグイン」に移動して、「新しいプラグインを追加」するだけです

右上隅に検索バーがあり、検索バーに「Elementor」と入力します。 一番最初の結果は、WordPress にインストールする必要があるものです。 「インストール」をクリックして、プラグインがインストールされるまで待ちます。 プラグインを有効にすると、優れた Web サイト ビルダーを展開できるようになります。

WordPress ダッシュボードに Elementor がインストールされたので、Elementor が提供する機能を見てみましょう。

Elementor の機能と Web ページの構築におけるその使用法

Elementor が提供する機能のリストには終わりがないため、Elementor の多くの重要な機能について説明します。 必ず読んでから試してみてください。

Elementor The Free と The Pro には XNUMX つのプランがあります。 Pro プランの名前が示すように、プレイする必要がありますが、無料プランにもいくつかの機能があります。

まずは無料プランの機能について説明し、次にプロについて説明します。

Elementor 無料プランの機能

本質的な特徴：

• ドラッグ·アンド·ドロップ

Elementor のドラッグ アンド ドロップ機能は非常に高速で、Web ページのデザインを高速化するのに役立ちます。 Webページのレイアウト作成から微調整まで、ドラッグ＆ドロップだけで行えます。

ヘッダーとフッターをデザインするためにタブを切り替えたり、ページを変更したりする必要はありません。 Elementor を使用すると、プライマリ Web ページと同じページ上でそれを行うことができます。

使用するスタイルや機能をコピーして貼り付けることも、複製することもできます。 これにより、同じフィーチャを何度も再構築する時間を節約できます。

が提供する検索バーオプションを使用すると、 Elementorを使用すると、Web サイト内を簡単に移動して、数秒で目的のタブに到達できます。 この機能は、非常に長いページを作成する場合に非常に便利です。

デザインを保存するには、削除からバックアップの取得まで 3 つのオプションがあります。 作成したデザインをやり直す/元に戻すことができます。 これにより、観察結果をもとにページの A/B テストを行うことができます。 

[リビジョン] タブですべてのリビジョンにアクセスできます。つまり、Web ページでこれまでに試したすべての種類のデザインを確認し、現在の Web ページが気に入らない場合は以前のバージョンを選択することもできます。 

さまざまな機能を試して、何が機能しているかを確認してみませんか? Elementor では問題ありません。 下書きモードでページをデザインし、すべてを試して、ページを公開する準備が完全に整った後でページを作成することができます。

Elementor のドラッグ アンド ドロップ機能の使用方法

ページを作成するとすぐに、すべてのドラッグ アンド ドロップ機能がページの左側で使用できるようになります。

WordPress でページを作成し、タイトルを付けた後、「Elementor で編集」をクリックするだけで、下の画像のような Elementor のライブエディターが表示されます。

上の XNUMX 番目の画像では、ページの左側にドラッグ アンド ドロップのオプションが表示されます。 下にスクロールするだけで済むウィジェットがたくさんあります。また、上部の検索バーを使用してウィジェットを検索することもできます。

• デザインテンプレート

Elementor を使用すると、組み込みのデザイン テンプレートを入手できます。 Elementor では、5 つや 10 つだけでなく、無料で使用できる 100 個以上のデザイン テンプレートが提供され、Pro バージョンにアップグレードするとさらに多くのデザイン テンプレートが提供されます。

Elementor テンプレート ライブラリに必要なテンプレートを選択する方法

初めて Elementor ビルダー ページを開くと、以下に示すような内容が表示されます。

画像はElementor Webサイトから引用したもので、一目瞭然です。

「フォルダー」オプションをクリックするとすぐに、以下に示すポップアップが表示されます。

• ウィジェット

Elementor に付属するドラッグ アンド ドロップ ウィジェットは無数にあります。 そのうちのいくつかは次のとおりです。

• 内部セクション: セクションを XNUMX つに分割しましょう。
• 見出し: このフィールドを Web ページにドロップして、目を引く見出しを挿入します。
• 画像: このウィジェットを使用して Web ページに画像を配置します
• テキスト エディター: テキスト エディター ウィジェットを使用して Web ページにテキストを入力します。
• ビデオ: ビデオ ウィジェットを使用して、ページに高品質のビデオを配置できます。 ユーザーエクスペリエンスが向上します
• ボタン: アクションを促すフレーズは、ほぼすべてのサイトにとって非常に重要です。ボタンを使用すると、アクションを促すフレーズをページに配置し、製品のランディング ページにリンクできます。
• 星評価: 星評価は、e コマース Web サイトが提供するいくつかの異なる製品に評価を与えるのに役立ちます。
• ディバイダー: Web ページのインデントを助け、空白を生成してユーザー エクスペリエンスを向上させます。
• アイコン: アイコン ウィジェットを使用すると、ソーシャル メディアやさまざまなサービスのキャッチーなアイコンを配置して、ページをより魅力的に見せることができます。
• カウンター: 緊急性を高めるために、製品または限定された追加サービスのカウントダウン タイマーを作成します。
• お客様の声: 製品やサービスに関するお客様の声を追加して、Web サイト訪問者との信頼を築きます。

これとは別に、画像カルーセル、基本ギャラリー、タブ、ショートコード、HTML、メニュー バーなど、他にも多くのウィジェットがあります。WordPress にプラグインをインストールした後は、必ずすべての機能を確認してください。

Elementor のウィジェットの一部を以下の画像でご覧ください。

Elementorウィジェットの使い方

Elementor ウィジェットを使用する場合:

Elementor のダッシュボードに移動し、ページの左側を見てください。 Web ページにドラッグ アンド ドロップして作業を開始できるウィジェットが多数あります。

• レスポンシブデザインと編集

モバイル ファースト インデックス ルールが脚光を浴びることで、Google はモバイル フレンドリーなサイトのみが Google で上位にランクされるようにしており、他の SERP でも同じことが当てはまります。 

Elementor を使用すると、無料か有料かにかかわらず、すべてのテンプレートがモバイル対応であるだけでなく、タブレットやデスクトップにも対応しているため、モバイル対応について心配する必要はありません。 ユーザーがモバイルまたはデスクトップからアクセスするときに表示される機能を編集することもできます。 

両方のデバイスで異なるエクスペリエンスを提供することもできますが、ブランドについてユーザーの心の中に混乱を招く可能性があるため、この方法はお勧めできません。

Web ページのモバイル応答性を確認する方法

Web ページ ビルダーの下部の左下隅に、デスクトップ、タブレット、モバイルで Web ページを表示するオプションを備えた XNUMX つのアイコンが表示されます。 Web サイトを公開すると、他のユーザーにはサイトはまったく同じように見えます。

ワークフローの機能:

• コーディングの必要はありません

使用する際に、専門家である必要はなく、コーディングについて少し知っている必要もありません。 Elementor。 上記のウィジェットはすべてドラッグ アンド ドロップで簡単に作成でき、ハイエンドでスタイリッシュな Web ページを作成できます。 

Elementor 自体がコーディング部分を処理します。 それだけでなく、使用されるコードは最適化され、短縮されるため、Web ページの読み込み時間が短縮されます。これは、上位にランクされるための非常に重要な要素です。

• ナビゲーターバー

ナビゲーションを使用すると、Web ページ上で設計した構造、つまりページの順序とフローを確認できます。 必要に応じて、ナビゲータ バーからもウィジェットを変更、削除、複製できます。

ナビゲーションバーの使い方

ナビゲータを使用するには、Elementor で開いた Web ページのバックエンドを右クリックし、[ナビゲータ] をクリックするだけです。 以下の画像に示すように、ポップアップが表示されます。

• ホットキー

ホットキーは、Elementor ダッシュボードにある主要なウィジェットへのショートカット キーです。 画像を見て、プリセットされたホットキーのいくつかを確認してください。

• インライン編集機能

Elementor を使用すると、コンテンツを別の場所に書いたり、コピー＆ペーストしてスタイルを編集したりする必要がありません。 WordPress ダッシュボードに希望のスタイルで直接入力できるので、貴重な時間を節約できます。

設計機能

• グローバルフォント

Elementor を使用すると、ワンクリックで Web サイト全体に特定のフォント スタイルを設定できます。 それが見出し、段落、引用、あるいは行動喚起であっても構いません。 

• グローバルカラー

同様に、グローバル フォントを設定すると、必要に応じて Web サイトのテキスト全体の色を同じに設定できます。

• 背景のグラデーション

グラデーションカラー機能を使用すると、各ブロックやホームページに設定した背景をライトアップすることができます。 これらのグラデーション カラーは、Web サイト上のすべてのページに適用されます。

• 背景ビデオ

Elementor を使用すると、ビデオを背景として使用できます。 バックグラウンドでビデオを使用すると、Web ページが非常に明るくなります。

Elementor のデザイン機能の使用方法

上記のすべての機能は、Elementor ダッシュボードで簡単に見つけることができ、Web ページ上で適切なものをクリックしてテストするだけで使用できます。

• その他の機能
• 背景オーバーレイを適用する
• スライドショーをバックグラウンドに置く
• キャンバスを作成してページを生き生きと見せる
• ブレンドモードを活用する
• CSS スタイルフィルター
• 形状仕切り
• ボックスシャドウ
• アイコン
• 他の Web サイトから SVG アイコンをエクスポート

レイアウト機能

Web ページのレイアウトを変更し、さまざまな機能で見栄えが良くなるように最適化できます。 Elementor セクションの幅と高さ、列の幅、ギャップ、およびその位置などを提供します。

余白とパディングを調整することもできます。これは、Web ページ上で非常に重要な機能です。 

Elementor プロプランの機能

Essentials

無料の機能の他に、Elementor Pro にはさらに 2 つの機能があります。

1.ポップアップビルダー

期間限定のサインアップ用のポップアップを作成したり、売上げを増やしページをより魅力的にするために終了意図のポップアップを作成したりできます。

この機能は、他のウィジェットと同様に、Elementor のダッシュボードにあります。

ポップアップ ビルダーを使用すると、次のポップアップを作成できます。

• メール購読
• ログインフォームのポップアップ
• プロモーションおよび販売バナーのポップアップ
• リード獲得
• コンテンツのロックとポップアップの表示
• お知らせ
• Exit Intent
• ウェルカムマットタイプのポップアップ
• 関連製品とアップセル

2.テーマビルダー

Elementor Pro を使用すると、Web サイトで使用するすべての機能を完全に制御できます。 404 ページをデザインして、ユーザーを選択したページに誘導できます。 

デザインしている同じページでヘッダーとフッターを管理できます。 強力な WooCommerce 統合により、商品ページも最適化できます。

設計機能

1.カスタムCSS

追加するウィジェットごとにカスタム CSS スニペットを追加して、コンテンツをよりパーソナライズして魅力的なものにすることができます。 ただし、この機能を使用するには、CSS についての十分な知識が必要です。 

事前知識なしで使用しても、問題が発生する可能性があります。 したがって、スキルセットを持っていない場合は、カスタム CSS 機能を使用しないほうがよいでしょう。

2. モーションエフェクト

素晴らしいアニメーションを追加して、Web サイトに漫画のようなタイプを与えることができます。 これは特定の対象ユーザーを引き付けるのに役立ち、場合によっては非常に有益です。 

Elementorのデザイン機能の使い方

まあ、それはロケット科学ではありません。 他のウィジェットと同様に、ダッシュボード パネルをスクロールしてウィジェットを検索するか、検索パネルにウィジェット名を入力するだけです。

マーケティング

これらの機能は、Elementor の無料版には存在しません。

• フォームウィジェット

Elementor フォーム ビルダーを使用すると、さまざまな変更を加えて、フォームを魅力的で記入しやすいものにすることができます。

• 必要なレイアウトと間隔を簡単に選択できます。
• フォームに必要なフィールドを 10 個以上から選択できます。
• Web ページのデザインと配色に合わせて、多数の色とタイポグラフィから選択します。
• 動的フォームを作成することもできます
• Elementor のフォーム ビルダーを使用して長いフォームが必要な場合は、それを作成して複数のステップに分割し、ユーザーが簡単な方法で入力できるようにします。

• お客様の声カルーセルウィジェット

• Elementor の Pro バージョンに付属する事前にデザインされたテンプレートを使用して、ビジネス向けの素晴らしい紹介カルーセルを作成して、より多くのコンバージョンを獲得できます。
• カルーセルのコンテンツとレイアウトを調整します。 カルーセルの外観と配置を完全に制御できます。
• Elementor Pro で提供されるカスタマイズ テンプレートは使いやすく、作成する側と見る側の両方にユーザー フレンドリーなエクスペリエンスを提供します。

Elementor Pro でお客様の声カルーセル ウィジェットを使用する方法

• ダッシュボードの検索バーで「Testimonial Slider」を検索します。 ウィジェットを開くと、すぐにスライダーの作成を開始できます。 デフォルトとバブルの XNUMX つのスキンから選択できます。 スタイリングに合わせて必要なものをお選びください。
• 紹介文のレイアウトを調整して最終決定します。これは、インライン画像、スタック画像、上の画像、左の画像、右の画像の 5 つのオプションで行うことができます。
• 配色に従ってスタイルとデザインを選択し、スライダーにコンテンツを追加します。
• スライダー上のスライドを自動再生したり、ユーザーがスライドをクリックしたときに一時停止したり、スライド変更オプションで特定の時間を設定したりできます。 私は、体験談スライダーのインタラクション時に一時停止オプションを使用することを好みます。
• アクションリンク

Elementor Pro を使用すると、Web サイトを WhatsApp、Google カレンダー、その他多くのアプリに接続できます。

Elementor Pro でアクション リンクを使用する方法

• に行きます Elementor ダッシュボードにアクセスし、Elementor の Pro ウィジェットの XNUMX つであるリンク フィールドを検索します。
• ウィジェット ポップアップの右上隅にある動的オプションを選択します。
• アクション オプションで連絡先 URL を選択します。
• ウィジェットが要求するすべての詳細を追加すると、連絡先プラットフォームを Web サイトに統合する準備が整います。

テーマビルダー機能

• 動的コンテンツ
• 完璧な統合を利用して、優れた動的な Web ページを作成します。
• 動的な色、画像、さらには Web サイトのロゴなどを Web ページに追加できます。
• 最も優れた点は、作成した動的コンテンツのレイアウトを保存して、Web サイト全体のどこでも使用できることです。

Elementor Pro で動的コンテンツを使用する方法

テキストエディタを使用してコンテンツを動的にする例を示します。 他のすべてのウィジェットを確認し、試してみてください。

1. テキスト エディタを開き、Web ページに必要なテキストを入力します。 次に、以下の画像に示すように、エディターの右上隅にあるアイコンをクリックします。
2. アイコンをクリックすると、ドロップダウンからオプションのリストが表示されます。 投稿、アーカイブ、サイトに分類されます。 必要なオプションを選択して、すぐに作業を開始してください。
3. ページのタイトルをさらに編集するには、下の画像に示すように、レンチのアイコンをクリックする必要があります。

上の画像に表示されているボックス (変更前、変更後、フォールバック) に、変更前のタイトル、変更後のタイトル、および動的コンテンツの代わりに表示される一貫したコンテンツを入力する必要があります。タイトルの前後がない場合。

Elementor Pro のその他のテーマビルダー機能

• 表示条件：何を表示するか、どこに表示するかを決めることができます。
• ヘッダーとフッター: 単純なドラッグ アンド ドロップだけで、Web ページのヘッダーとフッターをカスタマイズできます。
• スティッキー ヘッダー: 特定のページまたは Web サイト全体にグローバルにスティッキー ヘッダーを追加します。
• 404 ページ: カスタム 404 ページをデザインし、ユーザーと視聴者を希望のページにリダイレクトします。

テーマの内容

• ナビゲーション メニュー バー ウィジェット

• ナビゲーション バーには、選択できるスタイル オプションが多数あります。
• これらのスタイルはすべてのデバイスに対応しており、モバイル バージョンで表示し、必要に応じて必要な変更を加えることができます。
• アニメーションやホバー効果を使用してナビゲーションバーをアニメーション化できます。 それはあなたのページを本当に明るくします。
• メニューの配置方法 (水平、垂直、全画面表示、ハンバーガー オプションなど) を選択できます。

ナビゲーション メニュー バー ウィジェットの使用方法

1. ダッシュボードに移動し、メニュー バーを検索します
2. Web サイトに適したスタイルに応じて、メニューを水平、垂直、またはドロップダウンに設定できます。
3. 各メニュー コンテンツの下に一重線や二重線を追加して、ダッシュボードからテキストを強調表示したり、色を変更したりすることもできます。

• 検索ウィジェット

検索ウィジェットには、デフォルト、最小、全画面検索ウィジェットの XNUMX つのスキンが付属しています。

Web ページのスタイルに合わせて、検索バーのデザインとボタンを微調整できます。

Elementor Proで検索バーを使用する方法

Elementor ダッシュボードに移動して検索バー ウィジェットを探し、必要なスタイル (デフォルト、全画面、または最小) を選択し、カラー テーマに合わせて検索バーのタイポグラフィと色を変更します。

• Elementor Pro で利用できるその他のテーマ コンテンツ機能

• 投稿ウィジェット: 最近の投稿をサイドバーに配置して、サイドバーの外観を変更します。
• WordPress コメント ウィジェット: このウィジェットを使用すると、読者はあなたが書いた投稿についてコメントできます。
• ポートフォリオ ウィジェット: 表示するポートフォリオが多数ある場合は、このポートフォリオ ウィジェットを使用して、革新的で魅力的なスタイルでポートフォリオを表示します。

これらすべての機能は、他のウィジェットと同様に、メインの Elementor ダッシュボードで利用できます。 これらすべての機能をぜひご覧ください。

Elementor Proの価格

ユーザーレビュー 

クイックリンク：

• Elementor Pro チュートリアル
• 最高のElementorアドオン
• エレメンターメニューアンカー
• ドゥーダ vs エレメンター

WordPress Elementor チュートリアルに関する FAQ

✅Elementor の無料版で統合は利用できますか?

Elementor の無料版で統合を利用できますか?

🤷‍♀️ Elementor の顧客サービスについてはどうですか?

Elementor カスタマー サービスは、有料プランでも無料プランでもオプトインできます。 Elementor はすべての顧客を同じ方法、同じ手順で扱います。 電子メールで連絡するか、フリーダイヤルで電話することができます。 問題の重大度に応じて技術者から電話がかかるため、まずメールで問い合わせることをお勧めします。

👍無料のElementorとProバージョンのどちらが望ましいですか?

Elementor の無料版から始めて、基本的な Web ページを作成し、Web サイト全体を作成すると役立ちます。 Web サイトが大量のトラフィックを獲得していることを確認したら、Elementor Pro に切り替えることができます。これにより、無限の機会への扉が開かれ、強力な統合により製品マーケティングにも役立ちます。

⁉️Elementor の使い方は簡単ですか / Elementor は初心者に適していますか?

Elementor は最も簡単に使用できるページ ビルダーですが、ほとんどの機能が無料で提供されます。 基本的に、コーディング、HTML、CSS の専門知識がなくても、素晴らしい Web サイトのデザインを生成したいと考えている人にとって、これは理想的な DIY オプションです。

☑️ディビはエレメンターより優れていますか?

Elementor と Divi はどちらも、高度なページ作成機能を提供します。 Elementor は無料で、PRO エディションは 49 ドルで利用できます。Divi は年間 89 ドルで、無限の数の Web サイトを作成できます。 Divi Builder は直感的ですが、Elementor の方が素早く作業できます。 エレメンターをお勧めします。

👍ビーバービルダーとエレメンターはどちらが優れていますか?

Beaver Builder には、Elementor Pro や Divi Builder などの他のソリューションで利用できるより洗練されたカスタマイズ機能の一部がありませんが、他のソリューションでは優れています。 UI は読み込みが速く、単純でわかりやすいスタイルが特徴です。 これにより、独自のレイアウトを作成するプロセスが高速化されます。 エレメンターをお勧めします。

📓Elementor に最適なアドオンは何ですか?

たくさんありますが、クリエイティブ コンポーネントやウィジェットでコア ページ ビルダーの機能を強化したいと考えている Elementor ユーザーであれば、Essential Addons は試してみる価値があります。 さらに、Essential Addons には、問題の解決に役立つライブ チャットやチケット サポートの形式での強力な顧客サポートが含まれています。

また、読んでください：

• ビーバービルダーvsディビ
• ビーバービルダーvsElementor

結論: WordPress Elementor チュートリアル 2024

主要なWebページデザインソフトウェアのXNUMXつ、 Elementorは、Web サイトを構築するための信頼性が高く、鮮明なプラットフォームです。 基本的なブログ ページの作成から、スタイリッシュで息を呑むような製品のランディング ページの作成まで、すべて Elementor を使用して行うことができます。

Elementor の Pro バージョンには、Web サイトを新しいレベルに引き上げる無限の機能があります。 これにより、Web サイトを完全に制御できるようになります。

Elementor を使用するのにプログラマである必要はありません。 Elementor の使用は、機能をクリックしてドラッグ アンド ドロップする方法を学ぶのと同じくらい簡単です。

はい、すべての機能を確認し、Web サイトにどの機能が役立つかを知るには少し時間がかかりますが、Elementor に費やす時間は少しでも価値があると断言できます。

ぜひ、Elementor を試してみて、以下にコメントしてあなたの経験を教えてください。 

エレメンターの人気ビデオ

ソーシャルメディア上のエレメンター

ページ ビルダー サミット 2021 (@サミットキャンプ）が明日から始まります！ 無料チケットを取得して、35 名以上の業界専門家と話をしましょう。 @bpines1 。 この素晴らしいイベントのスポンサーになれることに興奮しています。 それではまたお会いしましょう！ 💻🎉https://t.co/gDtFpUJLBH

— エレメンター (@elemntor) 2021 年 5 月 9 日

ちょっと脇に置いて、2021 年 10 月のショーケースを歓迎しましょう。 🏆🌷 今月は、世界中から集まった XNUMX 社のデザイン事務所に拍手を送ります。 この多様なコレクションには、世界中の Elementor Web 制作の才能が集結しています。 🌎 https://t.co/bwwOUDQCuu

— エレメンター (@elemntor) 2021 年 5 月 19 日