ElementorでカスタムWordPressレイアウトを作成する方法

WordPressで独自のカスタムページレイアウトをデザインすることは、大きな課題のように思えるかもしれません。多くの人が、ユニークなデザインを作成するにはコーディングスキルが必要だと心配しています。サイトの外観をパーソナライズしたい場合、これはフラストレーションの原因となります。

幸いなことに、Elementorを使えば、コードを知る必要はありません。Elementorは、ドラッグ＆ドロップでレイアウトを簡単かつ直感的にデザインできるWordPressのページビルダーです。初心者でも数回のクリックで素晴らしいページを作成できます。

私たちは長年にわたり、読者がElementorでウェブサイトをカスタマイズするのを支援してきました。そのため、読者のために最も簡単で効果的な方法を知っています。

この記事では、Elementorを使用してカスタムWordPressレイアウトをすばやく簡単に作成する手順を説明します。

カスタムWordPressレイアウトはなぜ、いつ必要になるのか？

多くの無料およびプレミアムWordPressテーマには、さまざまな種類のページに対応する複数のレイアウトオプションが用意されています。しかし、これらのレイアウトのいずれも要件を満たさない場合があります。

PHP、HTML、CSSでコーディングできるなら、独自のページテンプレートを作成したり、サイトの子テーマを構築したりすることも可能です。しかし、WordPressユーザーの大多数は開発者ではないため、この方法は彼らには適しません。

ですから、ドラッグ＆ドロップインターフェースを使ってページレイアウトをデザインできたら素晴らしいと思いませんか？

これがまさにElementorが行うことです。これは、コーディングスキルなしで独自のカスタムWordPressレイアウトを簡単に作成できる、ドラッグアンドドロップのWordPressページビルダープラグインです。

WordPressとElementorの組み合わせは強力で、直感的なユーザーインターフェースを提供し、ライブプレビューでカスタムレイアウトを構築できます。さまざまなウェブデザイン要素に対応する多くのすぐに使えるモジュールが付属しています。

Elementorには、すぐに読み込んで開始点として使用できる、プロがデザインしたテンプレートがいくつかあります。標準に準拠したすべてのWordPressテーマと連携し、人気のWordPressプラグインすべてと互換性があります。

詳細については、当社の完全なElementorレビューをご覧ください。

これを踏まえ、ElementorでカスタムWordPressレイアウトを作成する方法をご紹介します。以下に、手順の概要をまとめました。

1. Elementorの始め方
2. ElementorでカスタムWordPressレイアウトを作成する
3. Elementorで独自のテンプレートを作成する
4. ボーナスのヒント：カスタムレイアウト作成のためのElementorの代替手段

さあ、始めましょう！

Elementorの始め方

まず、Elementor Pro プラグインを購入する必要があります。これは無料のElementorプラグインの有料版で、追加機能と1年間のサポートが利用できます。

次に、Elementorプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、プラグインの設定を行うために Elementor » 設定 ページにアクセスする必要があります。

ここで、さまざまな投稿タイプに対してElementorを有効にできます。デフォルトでは、WordPressの投稿とページで有効になっています。

サイトにカスタム投稿タイプがある場合、それらもここに表示され、有効にすることもできます。

投稿やページを作成する際にElementorを使用できるユーザーロールを除外または含めることができます。デフォルトでは、ページビルダーは管理者のみに有効になっています。

次に、「変更を保存」ボタンをクリックして設定を保存することを忘れないでください。

ElementorでカスタムWordPressレイアウトを作成する

まず、WordPressサイトで新しいページまたは投稿を作成する必要があります。投稿編集画面で、新しい「Elementorで編集」ボタンに気づくでしょう。

これをクリックするとElementorユーザーインターフェイスが起動し、Elementorのドラッグアンドドロップページビルダーを使用してページを編集できます。

セクションを追加してゼロからページを構築するか、テンプレートを選択できます。

テンプレートは、すばやく簡単に開始する方法を提供します。Elementorには、好きなだけカスタマイズできる、プロがデザインしたいくつかのテンプレートが付属しています。

「テンプレートを追加」ボタンをクリックして、テンプレートから始めましょう。

これにより、さまざまな利用可能なテンプレートが表示されるポップアップが表示されます。ページのレイアウトで希望するものに似たテンプレートを探してください。

WordPressの404ページテンプレートを見ています。

次に、好きなテンプレートを選択してクリックし、「挿入」ボタンをクリックしてページに追加します。

Elementorがテンプレートを読み込みます。

これで、ニーズに合わせてテンプレートの編集を開始できます。任意の要素をポイントしてクリックするだけで選択でき、Elementorは左側の列にその設定を表示します。

Elementorのレイアウトの仕組み

さて、Elementorのレイアウトがどのように機能するかについて話しましょう。

Elementorのレイアウトは、セクション、カラム、およびウィジェットを使用して構築されます。セクションは、ページに配置する行またはブロックのようなものです。

各セクションには複数の列を含めることができ、各セクションと列には独自のスタイル、色、コンテンツなどを設定できます。

Elementorのウィジェットを使用して、カラムやセクションに好きなものを追加できます。これらのウィジェットは、Elementorのセクションに配置できるさまざまな種類のコンテンツブロックです。

考えられるすべての一般的なウェブデザイン要素を網羅する、豊富なウィジェットセットが用意されています。ウィジェットを選択して、セクションまたは列にドラッグ＆ドロップするだけです。

画像、テキスト、見出し、画像ギャラリー、動画、地図、アイコン、お客様の声、スライダー、カルーセルなどを追加できます。

また、デフォルトのWordPressウィジェットや、他のWordPressプラグインによって作成されたウィジェットをサイトに追加することもできます。例えば、サイトのさまざまなフォームを作成するためにWPFormsを使用している場合、Elementorでそのウィジェットを使用できます。

編集が完了したら、「公開」ボタンの横にある矢印をクリックして、さまざまな保存オプションを表示できます。

ページをプレビューするか、WordPressダッシュボードに移動できます。

これでコンテンツエディターに戻ります。これで、WordPressページを保存するか、ウェブサイトに公開できます。

Elementorで独自のテンプレートを作成する

Elementorを使用すると、独自のカスタムレイアウトをテンプレートとして保存できます。これにより、将来的に独自のテンプレートを再利用して、さらに迅速に新しいページを作成できます。

テンプレートとして保存したいページをElementorで編集します。Elementorビルダーインターフェイスで、「公開」ボタンの横にある矢印をクリックしましょう。

ここで、投稿を保存するためのオプションがさらに表示されます。「テンプレートとして保存」オプションをクリックするだけです。

これにより、テンプレートの名前を入力する必要があるポップアップが表示されます。

名前を入力したら、「保存」ボタンをクリックするだけです。

次回カスタムページレイアウトを作成するときは、「マイテンプレート」タブから選択できるようになります。

カスタムページレイアウトの「挿入」ボタンをクリックするだけです。

このテンプレートをエクスポートして、Elementorを使用して他のWordPressサイトで使用することもできます。

3つのドットのアイコンをクリックし、「エクスポート」オプションをクリックするだけです。

ここから、テンプレートをコンピューターにダウンロードできます。

ボーナスのヒント：カスタムレイアウト作成のためのElementorの代替手段

Elementor以外にも、サイトのカスタムレイアウトを作成できる他のランディングページおよびウェブサイトビルダーがあります。

ここに、使用できる最高のElementorの代替案がいくつかあります。

• SeedProdは、ランディングページ用のカスタムレイアウトを作成できる、最高のドラッグ＆ドロップWordPressウェブサイトビルダーです。300以上のテーマまたはランディングページテンプレートから選択できます。SeedProdは、見栄えの良いページを作成するための多数のカスタマイズオプションとブロックも提供しています。詳細については、完全なSeedProdレビューをご覧ください。
• Diviは、ビジュアルテーマおよびページビルダーです。14年以上にわたり業界で利用されており、レイアウトライブラリを含む、WordPressレイアウトを作成するためのさまざまな機能を提供しています。ビジュアルビルダーには多くのカスタマイズオプションがあり、コードを編集する必要はありません。
• Thrive Architectは、美しいレイアウトを作成するために使用できる、強力で初心者向けのページビルダーです。352以上のテンプレートと多くのカスタマイズオプションが付属しています。フロントエンドのビジュアルビルダーを使用して、ページ上のあらゆる要素を編集できます。詳細については、Thrive Architectのレビューをご覧ください。
• Beaver Builderは、WordPress向けのもう一つの人気のドラッグ＆ドロップページビルダーです。使いやすく、Beaver Builderを使用して、ページや投稿のレイアウトを簡単に設定できます。また、ランディングページ用の既製のテンプレートも提供していますが、SeedProdやDiviほど多くはありません。

この記事がElementorでカスタムWordPressレイアウトを作成する方法を学ぶのに役立ったことを願っています。また、Elementor vs. Divi vs. SeedProdの専門家比較や、最高のWebデザインソフトウェアの選択肢もご覧になりたいかもしれません。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。