ElementorとPowerPackを使用してランディングページを作成する方法
公開: 2019-05-28
WordPressは、ブログ、ビジネスWebサイト、複雑なERPなど、誰もがオンラインでの存在感を簡単に構築できるようにしました。 WordPressのテーマとプラグインにより、ユーザーは専門家を雇うことを心配せずにWebサイトを簡単に構築できます。 Page Builderプラグインは、WordPressを使用したWebサイトの構築方法を変革する上で重要な役割を果たしてきました。 Elementorは、そのような人気のあるページビルダープラグインの1つです。
Webデザイナーであり、コードを気にせずにデザインを実現したい場合は、Elementorを使用できます。 しかし、あなたが開発者である場合はどうでしょうか？ 開発者であれば、開発者に優しい機能とAPIの拡張が容易なため、Elementorも使用できます。
この投稿では、Elementorの詳細と、Elementorアドオンを使用してWebサイト、ランディングページ、ポップアップをすばやく構築する方法について学習します。
- Elementorとは何ですか？
- Elementorの特徴
- LiteおよびProバージョン
- Elementor用パワーパック
- ランディングページの作成
Elementorとは何ですか？
Elementorは、WordPress用の人気のあるPageBuilderプラグインです。 Elementorは、セクションや列などの基本的な構造要素とともに、ウィジェットと呼ばれるすぐに使用できるコンテンツブロックを提供します。
これらのウィジェットをWordPressWebサイトの任意のページにドラッグアンドドロップして、必要に応じてカスタムレイアウトを作成できます。
Elementor Proには、60を超えるウィジェットと、任意のページのデザインに使用できる事前にデザインされたテンプレートが多数付属しています。
Elementorの特徴
Elementorには、Webサイトの開発をより快適かつ迅速にすることができる機能がたくさんあります。 Elementorの印象的な機能をすべて見てみましょう。
高速で使いやすい
Elementorはパフォーマンスが最適化されています。 初心者のユーザーでも、Elementorでは非常に使いやすくナビゲートしやすいことがわかります。 Elementorが設計プロセスに引きずり込まれるのを感じることは決してなく、物事を迅速かつ簡単にするだけです。
Elementorは非常に高速ですが、Cloudways Elementorホスティングを使用すると、Elementorをさらに活用できます。 CWはパフォーマンスがすべてであり、サーバーの機能をスーパーコントロールします。 セキュリティに関しては、 Cloudwaysは、サーバーを安全に保つためのプロアクティブなセキュリティ慣行に準拠した、信頼性が高く安全なサーバーを提供します。 Cloudwaysに付属する機能の数は、今日の業界では見つけるのが難しいものです。
事前にデザインされたページテンプレート
Elementorを使用すると、ワンクリックでWebページを作成するために使用できる事前に設計されたテンプレートが多数取得されます。 ランディングページ、アバウトページなど、ほぼすべてのWebページカテゴリのテンプレートがあり、Webサイトのデザインプロセスを大幅に高速化できます。
Elementorライブラリで適切なテンプレートが見つからない場合は、サードパーティのElementorテンプレートを確認できます。 デザイナーと開発者の活発なコミュニティにより、Elementorを次のレベルに引き上げることは簡単です。
ウィジェットをロード
無料版とPro版の両方のElementorには、機能がロードされたウィジェットが付属しています。 見出し、テキストエディター、ボタンなどのシンプルなコンテンツウィジェットから、投稿グリッド、ログインフォーム、WooCommerce、ソーシャルシェアリングなどの高度なウィジェットまで、Elementorで多くの機能を利用できます。
ウィジェットに関してより強力な機能が必要な場合は、サードパーティのElementorアドオンを試すことができます。 Elementor用のPowerPackを使用することをお勧めします。 これはElementorの主要なアドオンであり、人気のあるPowerPack BeaverBuilderアドオンの背後にある同じチームによって構築されています。
Elementorポップアップビルダー
ポップアップビルダーは、Elementorビルダーに最近追加されたものの1つです。 ポップアップビルダー機能により、Webサイトでサードパーティのポップアップビルダープラグインを使用する必要がなくなります。 Elementorを使用して、高度なターゲティングルールと機能を備えた印象的なポップアップをデザインできます。
ログインフォーム、フルスクリーンマット、割引ポップアップなど、ポップアップビルダー機能を使用して作成することはできません。
全体設定
Webサイトを構築するときは、一貫した色設定、タイポグラフィなどを用意することが重要です。Elementorのグローバル設定を使用して、色、フォント、さらにはカラーピッカーを事前にカスタマイズして、設計プロセスを容易にすることができます。
ヘッダー、フッター、アーカイブなどのテーマパーツを作成します。
Elementorを使用すると、デザインはページのコンテンツ領域だけに限定されません。 コードの記述を気にすることなく、カスタムヘッダー、フッター、サイドバー、およびWebサイトのほぼすべての部分を作成できます。 これらはすべて、ElementorProのテーマビルダー機能を使用して簡単に作成できます。
動的コンテンツ
Elementor Proの動的コンテンツ機能を使用すると、WordPressカスタムフィールド、ACF、ツールセット、ポッド、MetaBox、またはその他のカスタムフィールドプラグインから動的データ/コンテンツを表示できます。 カスタムフィールドのデータを使用して、サイトの任意の部分のElementorウィジェットで表示できます。 動的コンテンツについて詳しくは、こちらをご覧ください。
LiteおよびProバージョン
Elementorには提供できるものがたくさんありますが、ユーザーがそれにアクセスするために多額の費用を支払う必要はありません。 実際、ElementorにはLiteとProの2つのバージョンがあります。 ライトバージョン自体でElementorの多くの機能にアクセスできます。 どちらのバージョンにも、提供する独自の機能があります。 これは、意思決定に役立つElementorLiteとProの詳細な比較です。
Elementor用パワーパック
Elementorは間違いなくパッケージ全体です。 最小限の学習角度でWebページのデザインを開始するために必要な唯一のツール。
Elementorの使用中に少し制限を感じる場合があります。 このために、 PowerPackElementorアドオンのような適切にコーディングされたサードパーティのアドオンが役に立ちます。 このアドオンは、このカテゴリで最高のアドオンの1つであり、ユーザー向けに多数のカスタマイズオプションを備えた優れた印象的なウィジェットを提供します。
現在、PowerPackのProバージョンには50を超えるウィジェットがあり、チームは新しいウィジェットを追加し続けているため、Elementorアドオンの中から最適な選択肢になっています。
PowerPackは、パフォーマンスを念頭に置いて、WordPressのエキスパート開発者とデザイナーのチームによって構築されています。 プラグインは適切にコーディングされており、ElementorおよびWordPressの最新バージョンとの互換性のために定期的に更新されています
ElementorとPowerPackアドオンを一緒に使用して素晴らしいWebページを作成する方法を見てみましょう。
ランディングページの作成
このチュートリアルでは、ElementorおよびPowerPackElementorアドオンを使用してクイックランディングページを作成する方法を学習します。 使いやすいインターフェースのおかげで、Elementorを使い始めるのは簡単です。
ElementorとPowerPackの両方がサイトにインストールされていることを確認してください。 以下のリンクから無料版を入手できます。
- Elementor
- Elementor用のPowerPackLite
Elementorでページを作成する
WordPress管理ダッシュボードにサインインし、[ページ]の下の[新規追加]オプションをクリックします。 次に、ページにタイトル/名前を付けて、[ Elementorで編集]ボタンをクリックします。
このチュートリアルでは、Pizzeriaのランディングページを作成しているので、それに応じてページに名前を付けます。 最終結果は次のようになります。
最初のセクションから始めましょう。 これを行う前に、エディターの左下隅にある小さな設定アイコンをクリックして、レイアウトをElementorCanvasに変更します。
ステップ1：ヒーローセクション
ヒーローセクションは、背景画像、2つの見出しウィジェット、およびCTAボタンで構成されています。
まず、プラスアイコンをクリックして、オプションから単一の列構造を追加します。 次に、セクション設定に移動し、[セクションのストレッチ]オプションを有効にして、 [詳細設定]タブから下部と上部のパディングを250に設定します。
これで、 [スタイル]タブ> [背景の種類]> [クラシック]から背景に必要な画像を選択し、メディア表示から画像を選択できます。
背景を用意しました。 それでは、タイトルとボタンをヒーローセクションに追加しましょう。
デュアルヘディングウィジェットをページにドラッグアンドドロップし、テキストをそれぞれ変更します。 次に、下の図で行ったように、価格をより強調するために、それに応じて1番目と2番目の見出しを分割してください。 見出しの両方の部分のタイポグラフィを変更します。
ヒーローのタイトルを思い通りにするために、他にも多くの変更を加えることができます。
変更を加えたら、別の見出しウィジェットを二重見出しの下にドラッグアンドドロップし、必要に応じてテキストとタイポグラフィの設定を変更します。ここでは、テキストサイズを90に、フォントをElsieに、フォントの太さを600に変更しました。
次に、CTAボタンを追加します。
ElementorButtonウィジェットをHeadingウィジェットのすぐ下のセクションにドラッグアンドドロップします。 次に、ボタンの設定の変更を開始します。
ボタンに加えた変更は次のとおりです。
- テキストを今すぐ注文に変更しました！
- ボタンを中央揃えにしました。
- CTAリンクを追加しました
- タイポグラフィをエリーゼに変更。 フォント、サイズ、太さはそれぞれ24; 600 。
- 背景色を赤（ ＃ff0000 ）に、フォント色を白（ ＃ff0000 ）に変更しました。
- 加えパディング18、40、18、トップ40、右、底部は、それぞれ左。
変更を加えた後、これはヒーローセクションがどのように見えるかです。
ステップ2：Aboutセクション
次に、[バージョン情報]セクションで作業します。先に進み、「+」アイコンをクリックしてページに2列の構造を追加します。
現在、これと同様のレイアウトを作成することを目標としているため、左側の列に見出しウィジェット、テキストエディターウィジェット、およびお客様の声ウィジェットを追加します。 右側の列に、見出しウィジェット、テキストウィジェット、およびボタンウィジェットを追加します。
セクションでウィジェットをドラッグアンドドロップし始め、上記の画像のウィジェットのように変更します。 タイトルを追加し、同じもののタイポグラフィを変更します。
これがどのように見えるかです：
次に、左側の列のタイトルの下にテキストエディタを追加し、タイポグラフィを下に表示されているものに変更します。
次に、テキストエディタウィジェットの下にお客様の声カルーセルウィジェットを追加します。 ウェブサイトに表示する「アイテム」または紹介文を追加します。 PowerPackのお客様の声ウィジェットを使用することもできます。これにより、より多くのカスタマイズ機能が提供されます。
変更が完了すると、aboutセクションの左側の列は次のようになります。
次に、右側の列に背景を追加して、セクションに少しコントラストを追加します。
次に、左側の列に作成した見出しの複製を作成し、右側の列にドラッグアンドドロップします。 テキストエディタについても同じことを行います。これにより、不要な冗長性がなくなり、時間も節約できます。 ボタンについては、ヒーローセクションからボタンを複製し、ドラッグして[バージョン情報]セクションの右側の列に移動します。
[編集]列> [レイアウト]> [垂直方向の配置]から右側の列を中央に垂直方向に配置すると、[バージョン情報]セクションの準備が整います。
これは、Aboutセクションの最終結果です。
ステップ3：「もっと知る」CTAセクション
ピッツェリアについて話している別のセクションを追加します。 このセクションは前に作成したセクションと似ていますが、構造が少し異なります。
したがって、最終結果は次のようになります。
ここで似たようなものに気づきましたか？
はい！ 見出しのテキストエディタは、以前に作成したものと似ています。 したがって、すべてのウィジェットを再設計する代わりに、ウィジェットを複製してドラッグして配置します。
やってみましょう！
まず、新しい2列の構造を追加し、セクション設定に移動して、メディアウィンドウから背景画像を追加し、 100の上部パディングを追加して、パネルをより広く見せます。 また、設定から[セクションのストレッチ]オプションを有効にします。
次に、前のセクションに移動して、見出し、テキストエディタ、およびボタンウィジェットを複製します。 ウィジェットを右クリックして複製オプションを選択するだけで、これを行うことができます。 複製したら、複製したウィジェットを新しい位置にドラッグアンドドロップします。
このセクションは次のようになります。
次に、右側の列で、画像ウィジェットをドラッグアンドドロップし、メディアギャラリーから画像を選択します。 画像サイズなどで画像を調整します。完了したら、このセクションは次のようになります。
ステップ4：連絡先/注文セクション
これは、ユーザーが注文するのに役立つCTAセクションです。 さて、このセクションには何を含めるべきですか？ ここで私たちが何を目指しているか見てみましょう。
PowerPackによって、2つの見出しウィジェットとテキストエディターウィジェット、お問い合わせフォームと価格表メニューウィジェットを作成する必要があります。
まず、見出しとテキストエディタのデザインと外観を同じに保つ必要があることを私たちは知っています。 前のセクションからそれらを複製して、ここに配置することができます。 ここで、テキストを必要なものに変更します。
Elementor Proのフォームウィジェットを使用して、単純なドラッグアンドドロッププロセスで連絡先フォームを作成できます。 これを行うと、お問い合わせフォームがページに表示されます。 これで、フォームをさらにカスタマイズできます。 私が行った変更は次のとおりです。
- フォームフィールドを追加し、フィールドサイズを変更しました。
- ボタンのテキスト、サイズ、配置を変更しました。
- 送信ボタンアクションとして電子メールを追加し、電子メールの詳細を追加しました。
- 列のギャップを調整し、テキストとフィールドのタイポグラフィと色をやり直しました
- お問い合わせフォームをより魅力的に見せるために必要なその他の変更。
Gravity Forms、WPForms、Ninja Formsなどの連絡先フォームプラグインを使用する場合は、PowerPackのフォームスタイラーウィジェットを使用して、Elementorでフォームのスタイルを設定できます。
次に、右側の列に、製品の価格表を追加します。 このために、PowerPackのPriceMenuウィジェットを使用します。 ドラッグアンドドロップし、詳細を追加し、同じデザインとレイアウトを変更するだけです。 セクション全体は次のようになります。
今すぐプレゼントに参加しましょう！
CloudwaysがホストするPowerPackプレゼント
巻き上げる！
すべての変更を行った後、これがレイアウト全体のようになります。
これで、ElementorとPowerPack for Elementorを使用して、見栄えの良いレイアウトを自分で作成することもできます。 Elementorは多くの機能を提供しますが、PowerPackは創造的で機能指向のウィジェットでそれをさらに拡張します。 ツールキットに50以上の非常に便利なウィジェットが含まれているため、Webサイトをより迅速に構築できます。
ElementorとPowerPackは、時間と労力を節約し、Webデザインビジネスを拡大するのに役立ちます。 これだけでなく、両方の製品はWordPressの専門家の素晴らしいチームによって支えられているので、完全に安心できます。