Elementorの使用方法：完全ガイド

パー パッシーガイ | Elementor

を使い始めるのに問題がありますか? Elementorプラグイン ? Elementorの使用方法に関する完全なガイドは次のとおりです

今日は、Elementorを使用してWebサイトのページとブロックを作成する方法を紹介します。

ページビルダーは、Webデザインの経験がほとんどまたはまったくない人にとって、Web開発の不可欠な部分になっています。

最も人気のあるページビルダーのXNUMXつは、無料で利用でき、プレミアムモードでより多くの機能を備えたElementorです。

Elementorの使い方

この記事では、Elementorが最初から完璧なページビルダーであると考える理由を説明します。

Elementorを知る

ユーザーが最初にウェブサイトにアクセスしたときの印象は長続きします。 レトロまたはミニマリストスタイルを選択した場合でも、リソースをプールして将来のWebページの外観を作成する場合でも、いずれの場合も、ElementorのようなWordPressページビルダーを使用すると、Webサイトをパーソナライズできます。コーディングなし。

Elementorと互換性のあるWordPressテーマを最初にインストールすることが不可欠です。

また読みます： Elementorはテーマなしで使えますか？ (いいえ - これが理由です)

昔は、テーマが提供する利用可能なデザインオプションを使用してWebサイトをデザインしていました。 ただし、一部のテーマには特定のカスタマイズ機能がなく、他のテーマは不格好で、ページごとにカスタマイズするのが非常に困難でした。

Elementorページビルダーを使用すると、フロントエンドとバックエンドを切り替えて新しい変更がどのように実装されているかを確認することなく、Webサイトにリアルタイムで変更を加えることができます。

Elementorは、次のサイトにアクセスしてインストールできます。 自分のウェブサイト その後、zip ファイルを WordPress にアップロードするか、 WordPressのプラグイン 「Elementor」を検索してクリックします インストーラ.

プラグインをアクティブ化することを忘れないでください。そうすれば、Elementorが提供するすべてのオプションを探索する準備が整います。

また読む： Elementorのインストール方法

Elementorが提供しなければならない機能

幸い、Elementorはフロントエンドエディターです。つまり、変更がその瞬間に有効になり、調整を行うことができます。

もうXNUMXつの間接的な利点は、人気があるため、YouTubeやWordPressのWebサイトで利用できるリソースが不足していないことです。 この記事は、これらのWebサイトの実例です。

Elementorでのパーソナライズはすべてウィジェットに関するものであり、ウィジェットをページにドラッグアンドドロップすることに慣れると、WordPressテーマのデフォルトのページビルダーを扱うよりもはるかに優れている理由がわかります。

Paypalボタンウィジェットを挿入します

WordPressのすべてのページはセクションで構成されており、これがElementorを使用したページ構築の基礎です。

画面の左側にハンバーガーメニューがあり、変更が右側に反映されている間にWebサイト全体に変更を加えることができます。

ドラッグアンドドロップ機能により、デザインツールを彷彿とさせるより高速なWebページ構築エクスペリエンスが可能になります。

テーマが必要になる唯一の理由は、Webサイトはテーマなしでは機能できず、Elementorはテーマなしでは何も変更できないためです。

リラ Elementorはテーマなしで使えますか？ (いいえ - これが理由です)

また、無料バージョンのElementorを使い続ける場合は、ヘッダーとフッターを変更するためのテーマが必要です。

ElementorFreeとElementorPro

それらの主な違いは、Proバージョンで提供されるウィジェットの数にあります。

したがって、デザインで必要かどうかを必ず確認してください。

また、Elementorでフッターとヘッダーを変更する機能も便利ですが、テーマに専用のヘッダーとフッタービルダーが既に付属している場合は、それほど便利ではない可能性があります。

ウィジェットに関しては、無料版で利用できる基本的なウィジェットは次のとおりです。

  • 内部セクション
  • 画像
  • テキストエディタ
  • ビデオ
  • ボタン
  • 分離機
  • アイコン
  • 仕切り
  • グーグルマップ

Proバージョンで利用可能なウィジェットの一部を次に示します。

  • ポートフォリオ
  • 企業応募用紙説明書
  • フリップボックス
  • 価格表
  • 見積もりブロック
  • アクションの呼び出し

Elementor Proにアップグレードするかどうかについて、十分な情報に基づいて最終決定を下すのに役立つすべての情報を以下に示します。

ただし、一般的に、Elementorが最適なWordPressページビルダーであることが確実になるまで、無料バージョンを試してみることをお勧めします。

エレメンタフリー Elementorプロ
グランプリ フリー 49ドルから99,199ドル/年
ウィジェットの数 25+ 50+
ページビルダー disponible disponible
テーマビルダー 利用不可 disponible
サポート 利用不可 disponible
動的コンテンツ 利用不可 disponible
プロのテンプレートとブロック 利用不可 disponible
Eコマースの統合 利用不可 disponible

最終的に、ElementorサポートチームがProバージョンでサポートを提供するという安心感が、Proバージョンをしっかりと信じさせてくれます。

また、他のプラグインに見られるいくつかのニッチな機能も付属していますが、すべてをXNUMXか所で実行してみませんか。

例えば、 ポップアップビルダー、動的オプション、ヘッダーまたはポップアップが表示される条件、カスタムCSS、ショートコードとテンプレートウィジェット、カスタムフォントとロールマネージャー。

WordPressのユーザーに役割を割り当てて制限できるため、ユーザーはデザインを損なうことなく作業を続けることができます。 顧客はページのコンテンツを変更するためのアクセス権のみを持ち、ドラッグアンドドロップによって要素を追加または削除することはできません。 このようにして、デザインは常に保護されます。

編集環境

Elementorを使用して最初のページをデザインするとき、最初はウィジェットの数に圧倒され、空白のキャンバスに配置するためのデザインをスケッチしていない可能性があります。 これは、現時点であまり刺激を受けていないと感じている人のためにElementorページテンプレートが登場する場所です。

膨大なリストから事前定義されたテンプレートを選択してページに挿入し、必要に応じてカスタマイズするだけです。 右側は、ページのレイアウトを形成する要素を追加できるデザインの遊び場です。

左側は、ページ上のドラッグアンドドロップウィジェットで満たされたクリエイティブパネルです。

デザインに合わせてセクションを追加したりウィジェットをドラッグしたり、事前にデザインされたテンプレートを選択したりできます。

また読みます： カスタムCSSを介してElementorにホバー効果を追加する方法

下のパネルには、履歴に戻る円形の矢印アイコンがあり、アクションとレビューに分かれています。 アクションでは、ステップを見つけて以前のエディションに戻すことができ、レビュー中は保存されているすべてのバージョンを見つけることができます。

Elementorの使い方

Elementorを使用するもうXNUMXつの利点は、さまざまな表示モードにすばやくアクセスできるため、タブレットやモバイルなどのさまざまな画面で現在のデザインがどのように表示されるかを即座に確認できることです。

ホームページをデザインしたい場合は、Elementor'sBlocksを使用して独自のページを最初から作成できます。

また読む： カスタムCSSを介してElementorにホバー効果を追加する方法

タブオプション 形式 （色、フォントタイプ、サイズ）必要に応じて、ブロックのコンテンツをカスタマイズできます。

既存のセクションのスタイルをコピーしてそこから貼り付け、すべてのブロックを同じ方法で編集するという非常に便利なオプションもあります。

Elementorの使い方

ポートフォリオのように静的ページを持つ単純なWebサイトはほとんど静的ですが、ほとんどのWebサイトには複数のページ（ブログ、オンラインストア、検索結果）があります。

これらの動的ページは、たとえば独自のヘッダーとフッターを設計することにより、ElementorProまたはテーマオプションで編集できます。

参照してください： ElementorでComingSoonモードをアクティブにする方法

Proバージョンには、さらに多くのブロック、テンプレート、ウィジェットが付属しています。

バックエンドでは、URLの置換、メンテナンスモード、バージョン管理などのオプションを提供する[ツール]メニューにアクセスして、Webサイトで最新のElementorで問題が発生した場合に以前のバージョンに戻すこともできます。

つまり、どちらのバージョンでも、ページの作成、編集ツールの使用、および事前定義されたテンプレートの挿入が可能です。

ElementorProの価格

上記の表から判断すると、Elementor Proが適切な選択であると確信している場合、Elementorチームには、必要なライセンス数に応じて、開始するための5つの異なる計画があります。

最後に

一般に、Elementor（無料またはPro）とその死角をカバーする強力なWordPressテーマを組み合わせることが、ほとんどの場合正しい方法です。

その他の追加のプレミアムWordPressプラグイン 

他にも発見 WordPressのプラグイン WordPress ブログまたは Web サイトのパフォーマンスを最適化するプレミアム。

1。 Foodify

Foodify 顧客が店から食べ物を注文する最も速くて簡単な方法です。 完全に 反応する 画像などの追加機能が含まれています 検索オプション、製品情報。 ウーコマースのためのFoodlifyレストランのフードメニュー

また、バスケットにボタンを追加して改善します ユーザーエクスペリエンス。 このWooCommerce拡張機能は、任意のWooCommerceWebサイトに追加できる高速で包括的な注文ソリューションです。

あなたのために カテゴリの説明とラベルを最適化するための5 WordPressプラグイン

非常に柔軟性があり、WordPressディレクトリにある多くの既存のプラグインと互換性があるという利点があります。

ダウンロード | デモ | ウェブホスティング

2。 パンズーム画像

このプラグインを使用すると、ショートコードを使用してWordPressブログの画像のパノラマズーム機能を簡単に追加できます。 たとえば、記事やページに統合できます。

ズーム用画像ズームパンワードプレスプラグイン

機能としては、特に、XNUMXつの画像のパノラマズームまたは無制限の画像を含むギャラリー、 コントロールバーの位置 上、右、下、左にすることができ、コンテナの底は暗く、明るく、それ以外のものにすることができます。 ダッシュボードのライブプレビュー、同じページでの複数のパノラマズームの例など。

私たちも発見 5ショートコードプレミアムWordPressプラグイン

ダウンロード | デモ | ウェブホスティング

3。 スライダープロ

Slider Proソリューションは、ブロガーだけでなく、記事を公開するだけではない人々にアピールするスライドまたはスライダーの作成と編集を支援するオールインワンプラットフォームを提供します。

Slider ProレスポンシブWordPressスライダープラグイン

Ce WordPressのプラグイン プレミアムは、必要な情報を探しているユーザーにとってしばしば障害となる不必要なフリルを回避します。 さらに、それはに焦点を当てています シンプルさ 幅広いカスタマイズの可能性を提供します。

発見も WordPressでSlider Revolutionを使用してスライドショーを作成する方法

ウルルズの管理 ブラウザの検索バーには、後者で際立っていた機能のXNUMXつがあります。 名前が示すように、これはあなたが必要とする専門的な解決策です。

私たちも読んでください ブログでFAQを作成する5 WordPressプラグイン

その機能は次のとおりです。 最適化された画像読み込み、簡単なカスタマイズ、スムーズなアニメーション、複数のレイアウトなど。

ダウンロード | デモ | ウェブホスティング

推奨リソース

ウェブサイトの構築と管理に役立つ他の推奨リソースをご覧ください。

まとめ

ここに ！ Elementorの使い方を紹介する記事は以上です。 WordPressで。 あなたが持っている場合 デcommentaires または提案、予約セクションでお知らせすることをheしないでください。

ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにさらに要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.

しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する. 

... 

コメントを投稿

あなたのメールアドレスは公開されません。 必須フィールドは、マークされています *

このサイトでは、望ましくないものを減らすためにAkismetを使用しています。 コメントデータの使用方法の詳細.