무료 WordPress ページビルダーElementorを使用してランディングページを作成する

  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

Elementorページビルダーとは

Elementorは無料で使用が可能なオープンソースのライブページビルダープラグインであり、コーディングの知識がなくても簡単に目的のWebサイトを作成することができます。 このビルダーを使用して、ユーザーは、既存のワードプレスのテーマや外部のテーマをカスタマイズ(ユーザー定義)することができます。

参考までに ビジュアルコンポーザーが、多くの人気を集めているがビカムはあまり良いプラグインはありません(ワードプレスのページビルダーの長所と短所 を参照)。 最近では、Elementorが使用されているテーマが少しずつ出てきています。 "Elementorページビルダーを使用しているワードプレスのテーマ」を参照してみてください。

Elementorページビルダーでランディングページを作成する

このページビルダープラグインは非常に簡単に使用が可能です。 この記事では、Elementorでランディングページを作成する方法について説明します。 Elementorを使用してランディングページを最初に作成する場合は、この文が助けになります。

段階1:Elementor Page Builderのインストール

まず、ワードプレスの管理パネルにログインして、サイドメニューから プラグイン>プラグインを追加する オプションをクリックします。

Installing Elementor 1 compressor  - フリーワードプレスのページビルダーElementorを使用してランディングページを作成する

プラグイン・ライブラリからElementorを検索します。 Elementor Page Builderアイテムを見つけ、「今すぐインストールする"をクリックします。

または、Elementorウェブサイト https://elementor.comでElementorを直接ダウンロードした後に プラグインのアップロード 機能を使用してアップロードすることができます。

Elementor Install manually compressor  - フリーワードプレスのページビルダーElementorを使用してランディングページを作成する

Elementor Upload plugin file compressor  - フリーワードプレスのページビルダーElementorを使用してランディングページを作成する

Elementorプラグインがインストールされると、活性化を押してElementorを有効にします。

段階2:Elementorエディタ

サイドバーのメニューに移動し、 ページ>新しいページを追加をクリックして、新しいページを作成します。 ページのタイトルを入力して保存し、「Elementorと編集」を選択してください。

Add a new page compressor  - フリーワードプレスのページビルダーElementorを使用してランディングページを作成する

Elementorエディタが初期化される下図のように多くの機能が含まれているElementorエディタが表示されて、必要に応じページをカスタマイズすることができます。

Elementor new page compressor  - フリーワードプレスのページビルダーElementorを使用してランディングページを作成する

段階3:あらかじめデザインされたテンプレートを使用する

Add Template(テンプレートの追加)をクリックするか、左の一番下のファイルのアイコンをクリックして、 テンプレートライブラリを選択すると、事前にデザインされたテンプレート画面が表示されます。

Predesigned Templates compressor  - フリーワードプレスのページビルダーElementorを使用してランディングページを作成する

目的のテンプレートを選択して、Insertをクリックして挿入します。 テンプレートがロードされると、必要に応じ修正が可能です。

段階4:最初から新しいページデザインする

最初から新しいページをデザインすることもできます。 サイドバーのメニューに移動し、 ページ>新しいページを追加をクリックして新しいページを作成します。 ページのタイトルを履歴し、Elementorと編集」をクリックします。

Add a new page compressor  - フリーワードプレスのページビルダーElementorを使用してランディングページを作成する

Elementor Editorがロードされると、Elementsタブのさまざまなコンテンツブロックをドラッグして、必要に応じて編集します。

Elementor Elements Tab compressor  - フリーワードプレスのページビルダーElementorを使用してランディングページを作成する

現在、次のような要素(Element)が提供されます。

  • Columns(カラム)
  • Heading(タイトル)
  • Image(画像)
  • Text Editor(テキストエディタ)
  • Video(ビデオ)
  • Button(ボタン)
  • Divider(ディバイダ)
  • Spacer(スペーサー)
  • Google Maps(グーグルマップ)
  • icon(アイコン)
  • Image Box(画像ボックス)
  • Icon Box(アイコンボックス)
  • Image Gallery(ギャラリー)
  • Image Carousel(画像カルーセル)
  • Icon List(アイコンリスト)
  • Counter(カウンター)
  • Progress Bar(進行状況バー)
  • Testimonial(使用期限、経験談)
  • Tabs(タブ)
  • Accordion(アコーディオン)
  • Toggle(トグル)
  • Social Icons(ソーシャルアイコン)
  • Alert(警告表示)
  • SoundCloudが
  • Shortcode(ショートコード)
  • HTML
  • Menu Anchor(メニューアンカー)
  • Sidebar(サイドバー)
  • 加えて、ワードプレスの要素:ページ、カレンダー、記事リスト、オーディオ、画像、ビデオ、その他の機能、検索、テキスト、カテゴリー、最新記事、最新コメント、RSS。 タグクラウドは、カスタムメニュー、カスタムHTML

他にも Elementorプロ バージョンでは、より多くの機能が提供されるとね。

段階5:空白のページにキャンバステンプレートを使用する

空白のページにキャンバステンプレートを使用するには、 ワードプレス伝言板>ページ>新しいページを追加するを選択する必要があります。 ページのタイトルを入力した後、ページの右側の[テンプレート]ドロップダウンから Elementor Canvasを選択し、「Elementorと編集」をクリックします。

Select Elementor Canvas compressor  - フリーワードプレスのページビルダーElementorを使用してランディングページを作成する

段階6:新しいセクションを追加する

新しいセクションを非常に簡単に追加することができます。 Elementorエディタで「Add Section」を選択するようにします。

Add new section compressor  - フリーワードプレスのページビルダーElementorを使用してランディングページを作成する

希望の構造を選択すると、セクションが追加されます。

Added a new section in Elementor compressor  - フリーワードプレスのページビルダーElementorを使用してランディングページを作成する

段階7:2列を追加する

要素 タブで「コラム「オプションを選択して新しい列を追加することができます。

希望カラム構造を選択すると、新しい列が作成されます。

新しい列が追加されると セクション編集 タブの[追加のオプションを設定して、カラムをカスタマイズすることができます。

段階8:タイトル(見出し)を追加する

要素 タブで「見出し「オプションを選択して、新しいタイトル(見出し)を追加することができます。

その後、 セクション編集 タブの[追加のオプションを設定して、タイトル(見出し)をカスタマイズすることができます。

段階9:画像

パネルで「画像「ウィジェットを選択して、新しいイメージを追加することができます。

Edit Imageスタイル タブの[追加のオプションを指定して画像をカスタマイズすることができます。

段階10:ボタンを追加する

要素 タブで「ボタン「オプションを選択して新しいイメージを追加することができます。

同様にEdit Button]タブで、追加のオプションを指定して、ボタンをカスタマイズすることができます。

※7段階以下から写真がすべて壊れて削除しました。 (いくつかの理由でわからない写真がサーバーから削除されましたね。おそらくサムネイル再生成プラグインを使用する過程で削除されたようです。)Elementorページの編集方法を次の記事で確認することができます。

おわりに

様々なツール(要素)を提供する Elementorページビルダーは無料ですが、高い完成度を示すようです。 通常のページビルダーは、サイトの読み込み速度に悪影響を及ぼしますがElementorは、サイトの速度をあまり低下させないですね(個々のサイトに基づいて異なる場合があります)。

ページビルダーは使用しないことが最も理想的だが、レイアウト作業のためのページビルダーを使用する場合は無料ページビルダーであるElementorを考慮してみることができるようになります。

注:



8のコメント

  1. よく読みました。 良い材料ありがとうございます。
    手順7から写真が文字化け〓〓

    応答
    • お知らせいただきありがとうございます。
      おそらくテーマの変更後サムネイル再生成プラグインを実行する過程でイメージが削除されたようです。

      応答
  2. こんにちは、既存 WordPress 作業したサイトにエレメンターとして新たに作った
    モバイル上でのヘッダメニューが下に降りてくる現象が発生し、問題となっているのに。
    問題をトラップする方法を教えていただければ幸いです!

    応答
    • こんにちは?

      詳細情報が失わ正確な原因を把握することが容易ではない点ご了承ください。

      メニューにメニュー項目が多すぎると、減らしてみてください。
      問題を解決するためにしようと試みることができる措置としては、

      1) WordPressとテーマ、プラグインを最新バージョンにアップデートした後、問題が解決するか確認します。
      2)プラグインをすべて無効にして、問題が解決するか確認してください。
      3)それでも問題が解決しない場合、テーマをデフォルトのテーマ(例えば、Twenty Nineteen)に変更します。

      問題がうまく解決されることを願います。

      応答
  3. このプラグインを利用して、中に機能のグーグルマップを簡単に入れあるから入れたら修正ページでは見える
    アップデートを押しても出てくるから地図だけ表示されない理由をご存知ですか?。

    応答
    • Google Maps APIを入力しましたか?

      次の記事を参照してください。

      https://www.thewordcracker.com/basic/%EA%B5%AC%EA%B8%80-%EB%A7%B5-%EC%B6%94%EA%B0%80-%EC%8B%9C-%EC%98%A4%EB%A5%98%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EA%B2%BD%EC%9A%B0/

      応答
  4. プラグインの追加後、新しいページ作成時にエレメンが表示されません〜〓〓

    応答
    • こんにちは?
      少し詳しく説明してくださるでしょうか?
      いくつかのプラグインを追加した後に問題が発生しますか?

      そして、現在使用中のテーマ名と有効化され、プラグインのリストも一緒に教えてもらえますか?

      応答