WordPressで独自のカスタムページレイアウトをデザインすることは、大きな課題のように思えるかもしれません。多くの人が、ユニークなデザインを作成するにはコーディングスキルが必要だと心配しています。サイトの外観をパーソナライズしたい場合、これはフラストレーションの原因となります。
幸いなことに、Elementor を使えば、コードを知る必要はありません。Elementor は、ドラッグ＆ドロップでレイアウトを簡単かつ直感的にデザインできる WordPress ページビルダーです。初心者でも数回のクリックで素晴らしいページを作成できます。
私たちは長年にわたり、読者がElementorでウェブサイトをカスタマイズするのを支援してきました。そのため、読者のために最も簡単で効果的な方法を知っています。
この記事では、Elementorを使用してカスタムWordPressレイアウトをすばやく簡単に作成する手順を説明します。
カスタムWordPressレイアウトはなぜ、いつ必要になるのか？
多くの無料および有料の WordPress テーマ には、さまざまな種類のページに対応する複数のレイアウトオプションが用意されています。しかし、これらのレイアウトが要件を満たさない場合もあります。
PHP、HTML、CSS でコーディングできる場合は、独自のページテンプレートを作成したり、サイトの子テーマを構築したりすることもできます。しかし、ほとんどの WordPress ユーザーは開発者ではないため、このオプションは彼らには適しません。
ですから、ドラッグ＆ドロップインターフェースを使ってページレイアウトをデザインできたら素晴らしいと思いませんか？
Elementor はまさにこれを実現します。コーディングスキルなしで独自のカスタム WordPress レイアウトを簡単に作成できる、ドラッグ＆ドロップの WordPress ページビルダープラグインです。
WordPressとElementorの組み合わせは強力で、直感的なユーザーインターフェースを提供し、ライブプレビューでカスタムレイアウトを構築できます。さまざまなウェブデザイン要素に対応する多くのすぐに使えるモジュールが付属しています。
Elementor には、すぐに読み込んで開始点として使用できる、プロがデザインしたテンプレートがいくつか用意されています。標準に準拠したすべての WordPress テーマと連携し、すべての人気の WordPress プラグインと互換性があります。
詳細については、完全なElementor レビューをご覧ください。
これを踏まえ、ElementorでカスタムWordPressレイアウトを作成する方法をご紹介します。以下に、手順の概要をまとめました。
さあ、始めましょう！
Elementorの始め方
まず、Elementor Pro プラグインを購入する必要があります。これは無料の Elementor プラグインの有料版で、追加機能と 1 年間のサポートにアクセスできます。
次に、Elementor プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化したら、プラグインの設定を行うために Elementor » 設定 ページにアクセスする必要があります。
ここでは、さまざまな投稿タイプで Elementor を有効にできます。デフォルトでは、WordPress の投稿とページで有効になっています。
サイトにカスタム投稿タイプがある場合、それらもここに表示され、有効にすることもできます。
投稿やページを作成する際に Elementor を使用できるユーザーロールを除外または含めることができます。デフォルトでは、ページビルダーは管理者のみで有効になっています。
次に、「変更を保存」ボタンをクリックして設定を保存することを忘れないでください。
ElementorでカスタムWordPressレイアウトを作成する
まず、WordPressサイトで新しいページまたは投稿を作成する必要があります。投稿編集画面で、新しい「Elementorで編集」ボタンに気づくでしょう。
これをクリックするとElementorユーザーインターフェイスが起動し、Elementorのドラッグアンドドロップページビルダーを使用してページを編集できます。
セクションを追加してゼロからページを構築するか、テンプレートを選択できます。
テンプレートは、すばやく簡単に開始する方法を提供します。Elementorには、好きなだけカスタマイズできる、プロがデザインしたいくつかのテンプレートが付属しています。
「テンプレートを追加」ボタンをクリックして、テンプレートから始めましょう。
これにより、さまざまな利用可能なテンプレートが表示されるポップアップが表示されます。ページのレイアウトで希望するものに似たテンプレートを探してください。
この例では、404 ページテンプレートを見ています。
次に、好きなテンプレートを選択してクリックし、「挿入」ボタンをクリックしてページに追加します。
Elementorがテンプレートを読み込みます。
これで、ニーズに合わせてテンプレートの編集を開始できます。任意の要素をポイントしてクリックするだけで選択でき、Elementorは左側の列にその設定を表示します。
Elementorのレイアウトの仕組み
さて、Elementorのレイアウトがどのように機能するかについて話しましょう。
Elementor のレイアウトは、セクション、カラム、ウィジェットを使用して構築されます。セクションは、ページに配置する行やブロックのようなものです。
各セクションには複数の列を含めることができ、各セクションと列には独自のスタイル、色、コンテンツなどを設定できます。
Elementor ウィジェットを使用して、カラムやセクションに任意のコンテンツを追加できます。これらのウィジェットは、Elementor のセクションに配置できるさまざまな種類のコンテンツブロックです。
考えられるすべての一般的なウェブデザイン要素を網羅する、豊富なウィジェットセットが用意されています。ウィジェットを選択して、セクションまたは列にドラッグ＆ドロップするだけです。
画像、テキスト、見出し、画像ギャラリー、動画、地図、アイコン、お客様の声、スライダー、カルーセルなどを追加できます。
デフォルトの WordPress ウィジェットや、サイトの他の WordPress プラグインによって作成されたウィジェットを追加することもできます。たとえば、サイトのさまざまなフォームを作成するためにWPForms を使用している場合、Elementor でそのウィジェットを使用できます。
編集が完了したら、「公開」ボタンの横にある矢印をクリックして、さまざまな保存オプションを表示できます。
注意: ページレイアウトを保存しても、WordPress サイトにページが公開されるわけではありませんが、保存はされます。
ページをプレビューするか、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向けのもう1つの人気のドラッグアンドドロップページビルダーです。Beaver Builderを使用して、ページや投稿のレイアウトを簡単に設定できます。また、ランディングページ用の既製のテンプレートも提供していますが、SeedProdやDiviほど多くはありません。
この記事がElementorでカスタムWordPressレイアウトを作成する方法を学ぶのに役立ったことを願っています。また、Elementor vs. Divi vs. SeedProdの専門家による比較や、最高のウェブデザインソフトウェアの選択肢もご覧ください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
モイヌディン・ワヒード
7年前に誕生して以来、Elementorが非常に身近なレンズを通して成長していくのを見てきました。
誰でも視覚的に美しく魅力的なウェブサイトを作成できる、非常に使いやすいインターフェースを提供しています。
複雑なデザインも楽々とこなせるようになります。
しかし正直に言うと、ロード時間やパフォーマンスの面で悪い経験をしました。
それ以来、私は二度とそれを選ぶことはありませんでした。
最近はSeedProdと、フルサイトエディター機能を使ったブロックベースのビルダーを利用しています。
しかしそれでも、ElementorはWordPressウェブサイトを始めたばかりのすべての人にとって非常に良いものです。
イジー・ヴァネック
Elementorを使用するとウェブサイトの作成が非常に簡単になるため、ウェブサイトの速度はある程度のトレードオフになります。WordPressが最初にGutenbergを導入したとき、私はしばらくそれを使用するのをやめました。ブロックエディターは私にとって悪夢でした。理解できず、複雑だと感じました。それからElementorを発見し、おかげでWordPressに戻り、以前のようにWordPressでウェブサイトを構築するのが簡単になったことを嬉しく思いました。はい、場合によってはElementorがウェブサイトを遅くする可能性がありますが、それはElementor自体の直接的な問題というよりも、ウェブサイト全体のセットアップに関するものです。しかし、Elementorがなければ、Gutenbergエディターの複雑さのために、多くの人がまったくWordPressを使用しないだろうと信じています。
アリン
ウェブサイトを構築する際に、カスタム機能とElementorの間を行き来するのは悪いことですか？サイトが弱くなることはありますか？Astraテーマを使用しています。
WPBeginnerサポート
コンテンツに追加したマークアップが変更される可能性があるため、1つのエディターを使用することをお勧めします。
管理者
イジー・ヴァネック
これは良い習慣ではありません。記事を書くのと同じです。誰かがElementorからGutenbergに切り替えると、通常はスタイルが崩れてしまい、結果が悪くなります。一度に1つの方法に固執するのが良いでしょう。
リンディ・ウォーレル
Elementorがテーマを壊すのではないかと心配でインストールをためらっています。壊れますか？もし壊れないなら、Gutenbergブロックでは独自のページレイアウトの設定やデザインが非常に限定的だと感じているので、試してみるかもしれません。
WPBeginnerサポート
By default it shouldn’t, if you reach out to Elementor they can let you know how it will react with your theme
管理者
J M Das
この投稿は非常に役立ちます。私は不動産リスティングのウェブサイトを持っています。私はImpress Listing Pluginを使用しています。これをカスタムレイアウトまたはテンプレートとして、デフォルトのリスティングページの代わりにどのように使用しますか。ページの情報によると、カスタムレイアウトまたはテンプレートはテーマディレクトリに追加する必要があるとのことです。どうすればよいですか。子テーマを使用しています。
エレイン・ライト
ElementorはファイルツリーディレクトリのどこにCSSを保存しますか？編集したファイルはどこで見つけられますか？
データベースに何かを保存しますか？
かなり長い間この答えを探していましたが、何も見つかりません。
ありがとうございます！
ユーラ
とても役に立ちました！ありがとうございます！ 大変な作業を省けました
アーウィン
Elementor を使うときに子テーマを作成する必要がないと言っているのですか？
テーマをアップデートしたらどうなりますか？
編集スタッフ
Elementorはページビルダーであり、その設定はプラグインに保存されます。どのテーマでも動作します。
管理者
andre
Elementorを使用して子テーマを編集することは可能ですか？特にカテゴリレイアウトについてです。
「ホームページ」では素敵なデザインができていますが、カテゴリに移動すると、デザインがホームページのスタイルに合わなくなってしまいます。
モニーク
写真と経歴付きのエグゼクティブページを作成しようとしています。Elementorで始めるにはどうすればよいですか？
デビッド・リウ
それは、個人バージョンではテンプレートのアップロードがサポートされていないため、ビジネスタイプのアカウントにアップグレードする必要があるということですか？
WPBeginnerサポート
Davidさん、こんにちは。
この記事は、セルフホスト型WordPress.orgウェブサイトに関するものです。セルフホスト型WordPress.orgと無料のWordPress.comブログの違いについては、こちらのガイドをご覧ください。
管理者
アレックス
結果として表示されるサイトはレスポンシブですか？他の類似アプリは、完全にレスポンシブなサイトを作成できると謳っていますが、実際には全く役に立たないことがわかりました。
テニカ
無料版を使用してホームページをデザインしましたが、完全にレスポンシブです。これは本当に素晴らしいプラグインで、無料版で必要なことはすべてできます！あまりにも良いので、開発者にこのような便利なプラグインを提供してくれたことへの感謝とサポートのために、プロ版を購入する予定です。
ロドニー・ラカンブラ
Elementorドラッグ＆amp;ドロップページビルダーを使用した素晴らしいウォークスルーです。これは試していませんが、試す価値はあります。
これはSiteOriginページビルダーの優れた代替案になる可能性があります
共有ありがとうございます。全体的に、WordPressでカスタムレイアウトを作成するのに便利です。
〜ロッド
Deepak
ブログでElementorを使用していますが、このプラグインでページを編集しようとすると「インターネットサーバーが見つかりません」というエラーが表示されます。
テニカ
ウェブサイトのサポートページを確認してください。そこには役立つトラブルシューティングのヒントがたくさんあります。
ビクタービジャウ
投稿ありがとうございます。サイトのページを作成するために、この目的のプラグインを探していました。
本当にありがとうございます