メインコンテンツにスキップ

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

Divi:すべての時間の中で最高のWordPressテーマ!

もっと 600.000のダウンロードDiviは世界で最も人気のあるWordPressテーマです。 完全で使いやすく、62以上の無料テンプレートが付属しています。 [推奨]

WordPressで独自のカスタムレイアウトを作成しますか? プロフェッショナルな外観のウェブサイトを簡単に作成したいですか? だからあなたは ここからWordPress Elementorプラグインをダウンロードしてください.

Elementor は、コーディングの知識がなくてもWordPressでカスタムレイアウトを簡単に作成できる「ドラッグアンドドロップ」機能を提供するビジュアルページビルダーです。

このチュートリアルでは、数回クリックするだけで、Elementorを使用してカスタムWordPressレイアウトを簡単に作成する方法を示します。 私たちも提供しています この美しいWordPressプラグインの他の選択肢をチェックしてください.

しかし、前に、WordPressをインストールしたことがない場合は、 WordPressのブログ7の手順をインストールする方法 et あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法

それから私たちがここにいる理由に戻りましょう。

WordPressでカスタムレイアウトを作成する理由とタイミング

始める前に、このWordPressプラグインで記事を参照してください。 WordPressビルダーページのプレゼンテーション:Elementor または発見 Elementorチュートリアル:インターフェースの紹介

無料のプレミアムWordPressテーマの多くは、さまざまなタイプのページに対していくつかのレイアウト選択を提供します。 ただし、これらのレイアウトテンプレートのいずれもニーズを満たさない場合があります。

ただし、PHP、HTML、およびCSSのファンの場合は、独自のページテンプレートを作成するか、Webサイトの子テーマを作成することもできます。 しかし、WordPressユーザーの大部分は開発者ではないため、このオプションは機能しません。

これらもご覧ください レイアウトを簡単に作成する8 WordPressプラグイン

シンプルなインターフェース(ドラッグアンドドロップ)を使用してレイアウトを作成するのは素晴らしいことではないでしょうか?

それがまさにElementorのすることです。 これはWordPressページ作成プラグインで、コーディングスキルがなくても独自のカスタムWordPressレイアウトを簡単に作成できます。

直感的なユーザーインターフェイスにより、リアルタイムプレビューでカスタムレイアウトを作成できます。 すべてのタイプのWebデザイン要素に対応する、すぐに使用できる多くのモジュールが付属しています。

これは、出発点としてすぐにロードして使用できる、専門的に設計されたいくつかのページテンプレートを提供します。 そうは言っても、WordPress Elementorプラグインを使用してカスタムWordPressレイアウトを作成する方法を見てみましょう。

Elementorを使ってみる

まず、プラグインを購入する必要があります Elementorプロ 」。 これは、プラグインの有料版です Elementor 無料で、追加機能や1のカスタマーサポートにアクセスできます。

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

有効化後、ページにアクセスしてください " Elementor>設定 このプラグインの動作を設定します。

ここでは、さまざまなタイプのパブリケーションに対して「Elementor」をアクティブ化できます。 デフォルトでは、記事とWordPressページで有効になっています。 Webサイトにカスタム公開形式がある場合は、これらもここに表示され、有効にすることもできます。

記事またはページを書くときにElementorを使用できるユーザーロールを除外または含めることができます。 デフォルトでは、管理者に対してのみ有効になっています。

私たちを発見 役割とユーザーを管理するための8 WordPressプラグイン

ボタンをクリックすることを忘れないでください« 変更の保存 設定を保存します。

Elementorでウェブサイトを簡単に作成

Elementorを使用すると、プロフェッショナルな外観のWebサイトデザインを簡単に作成できます。 自分でできることに対して高額な支払いをやめる。 [無料]

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

まず、WordPress Webサイトに新しいページ(または投稿)を作成する必要があります。 出版物のページに、新しい「要素で編集」ボタンがあります。

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

セクションを追加してページを最初から作成することも、デフォルトの出荷済みテンプレートの1つをロードすることもできます。

モデルは、すぐに使い始めるためのより速い方法です。 したがって、Elementorは、必要に応じてカスタマイズできる、専門的に設計されたテンプレートをいくつか提供しています。

[スタート]ボタンをクリックして、テンプレートから始めましょう。 テンプレートを追加する '。

これにより、使用可能なさまざまなモデルを確認できるポップアップウィンドウが表示されます。 あなたが望むもののように見えるモデルを探す必要があります。

目的のモデルをクリックして選択し、ボタンをクリックします インサート ページに追加します。

Elementorがテンプレートをロードします。

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

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

Elementorプラグインが提供するモデルは、セクション、列、ウィジェットで構築されています。 セクションは、ページに配置する線またはブロックのようなものです。

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

Elementorが提供するウィジェットを使用して、アイテムを列やセクションに追加できます。

これらのウィジェットは、ページのセクションに配置できるコンテンツブロックの一種です。

あなたは最高のWordPressのテーマとプラグインをお探しですか?

Envatoで最高のプラグインとWordPressテーマをダウンロードし、簡単にあなたのウェブサイトを作成してください。 すでに49.720.000以上のダウンロードがあります。 [EXCLUSIVE]

ウィジェットを選択して、セクションまたは列にドロップするだけです。 想像できるすべての一般的なWebデザイン要素をカバーする広範なウィジェットのセットが利用可能です。

画像、テキスト、トピック、画像ギャラリー、ビデオ、地図、アイコン、紹介文、スライダー、カルーセルなどを追加できます。

また私達のを見なさい Webサイトを作成する15 Elementorのテーマとテンプレート

また、デフォルトのWordPressウィジェットや、Webサイトの他のWordPressプラグインで作成されたウィジェットを追加することもできます。

独自の作成またはレイアウトの変更が完了したら、ボタン「 Enregistrer 変更を保持するため。

レマルク: レイアウトを保存しても、WordPress Webサイトにページは公開されません。 それは単にあなたのレイアウトを保存するでしょう。

この時点で、ページをプレビューするか、WordPressダッシュボードにアクセスするオプションがあります。 これにより、WordPressのデフォルトのパブリッシャーに戻ります。 これで、WordPressページを保存したり、Webサイトに公開したりできます。

以上で、WordPressプラグインElementorを使用したページの作成が終了しました。

しかし、多くのページビルダーと同様に、拡張機能も提供しています。 デフォルトのプラグインにさらに設計要素を追加することで、簡単かつ迅速に新しいレイアウトを作成できます。

Elementorをダウンロードする

プレミアムWordPressプラグインもご覧ください

他のWordPressプラグインを使用して、モダンな外観を提供し、ブログまたはWebサイトのグリップを最適化できます。

ここでは、そのためのプレミアムWordPressプラグインを提供しています。

1。 JetElements

このプラグインは、さまざまなモジュールでElementorバンドルを強化します。これは、Webサイトを構築するときに非常に便利です。 強力な要素が特別に作成され、Elementorの機能に統合され、最終的に汎用性の高いソリューションとエレガントな要素が提供されます。

その主な機能は次のとおりです。多くの便利なモジュール、多くのスタイルオプション、機能パラメーター、完全にカスタマイズ可能な要素、オンラインストアをすばやく起動するための信じられないほどの要素、RTL言語のサポート、 WPMLプラグインのサポート およびモジュール お問い合わせフォーム7 これは、連絡先フォームを追加してWebサイトに統合できるようにすることです。

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

2。 JetMenu

JetMenuは拡張です 非常に機能的 プラグイン 作成できるElementor megamenus 使いやすいスクロール要素。 このプラグインはあなたの想像力を制限するものではなく、素晴らしいメニューを作成し、あなたのビジョンとニーズに応じてそれらを改良する可能性があります。

主な機能は次のとおりです。コーディングに関する知識は不要です。 シンプルさと明快さを完全に兼ね備えた豊富な機能、 メニューの作成、応答性の高いレイアウトなどを支援するために特別に開発されたコンテンツモジュールの大規模な選択。

あなたのウェブサイトのメニューやメガメニューを盛り上げたいなら、このWordPressプラグインは相談することです。

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

簡単にオンラインストアを作成する

無料のWooCommerceをダウンロードし、WordPressで物理的およびデジタル製品を販売するための最高の電子商取引プラグインです。 [推奨]

3。 JetWooBuilder

JetWooBuilderは、Elementorで本格的なWooCommerce製品ページを作成できる必須のアドオンです。

あなたが他の人の間で見つける機能として: いくつかのユニークな製品ページテンプレート、多くの視覚要素 製品ページを作成するには WooCommerce, カートに追加、プレビュー、画像、表記法、関連などの多くのキャッチーなコンテンツウィジェット、表示機能 製品分類 そしてより多くの。

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

いくつかの有用なリソース:

結論:

このチュートリアルはこれですべてです。プラグインを使用して、モダンでプロフェッショナルなレイアウトを作成できることを願っています Elementor.

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.

特に、さまざまなソーシャルネットワークでこの記事を共有してください。

...

この記事にはコメントが含まれています23
  1. シャビ dit :

    こんにちはティエリー
    この記事を心から感謝します。 私はワードプレスで始め、テーマとしてオーシャンWPを使用し、無料版でelementorをインストールしたので、この無料版ではページを作成しましたそれは良いことですが、私に生じた問題は、ページや記事を公開するときに、大文字が含まれていると、ポイントの後に、または文の先頭に表示されないことが必要なことですタイポグラフィやフォントファミリーの設定は、要するに、ある時点以降に資本がない無料版がどこにあるのかをよりよく理解するのに役立ちます。 ご理解いただきありがとうございます。

    1. ボンジュール、

      WordPress.orgページでElementorプラグインサポートに連絡することをお勧めします。 あなたは確かに著者からの答えを見つけるでしょう。

  2. KAA dit :

    こんにちは、Elementorを使用して開始ページを変更できますか? はいの場合はどこですか? このプラグインを使用して連絡先フォームを作成できますか? 🙂

  3. ダイアン・エレーヌ dit :

    ボンジュール
    私は私のワードプレスインターフェースのカスタムタブを介して私のホームページを作成しました。 なぜ私はelementorで同じものを見つけないのですか? elementorで私のメニューバーが同じ場所になく、私のロゴが表示されていません! 私はワードプレスのものを好むが、私が私のサイトの視覚化をするときに現れるelementorのホームページである! そのやり方を教えてもらえますか?
    ありがとうp

    1. ダイアン・エレーヌ dit :

      申し訳ありませんが私はテーマoceanwpを使用することを言及するのを忘れていました!

      1. ボンジュール、

        私達はあなたのテーマでElementorをテストしたことがありません。 申し訳ありません。

  4. ロボ dit :

    ボンジュール、
    私は問題を抱えていますここ数カ月、私はこの要素を使用している私のウェブサイトを更新していません。 今日私はそれをやろうとしました、しかし、私は問題を抱えています、大部分のセクションは私にOFF SECTIONという単語で箱を示します、そして、私は何もすることができません。 編集できるのはページの1つのセクション、つまりテキスト自体があるセクションだけです。
    あなたはそれがうまくいくことを知っていますか?

  5. VALENTINA dit :

    こんにちは、elementor proのアーカイブテンプレートはどこでどのように編集しますか? ブログの横の列にコンテンツを挿入できない

    1. こんにちはバレンティーナ、

      あなたは直接WordPressウィジェットを使用しますか? どのようなコンテンツを追加しますか?

  6. Goshia dit :

    ボンジュール、
    私はWordPressでウェブサイトを構築する方法を学ぶ、Elementorは素晴らしいプラグインです、それは多くを可能にする、私は何か新しいことを発見します。
    問題もある;)私は通常、解決策に取り組んでいる。 今はありません。

    テキスト編集に問題があります。 パラグラフとヘッダーは両方ともリジッドなので、フォント、色、太さなどを変更することはできません。 設定の変更にもかかわらず、何も変わりません。 これは、そのフォントと配色がElementorと異なるため、パターンの問題ではありません。
    私はこのテンプレートパラメータを1ヘッダと同じように変更する方法はわかりませんが、ヘッダーにhtmlコードを入力して変更して助けましたが、今は動作しません。

    これはどうやって変わるでしょうか? - 助けてください。

    1. ボンジュール、

      すべてのWordPressプラグインを無効にして、もう一度お試しください。 障害がすべて解消されたときに問題が解決した場合は、それらを1つずつアクティブにしてから、毎回チェックしてください。

      それが別のプラグインとの互換性の問題であれば、どちらのプラグインか分かります。

  7. マルコス・チャベス dit :

    こんばんは。
    私はサイト(着陸ページ)に写真を追加しましたが、何回か削除できなかった別のものに変更しようとしましたが、新しい写真を入れましたが、ロードされません...古い写真が残っています...
    あなたは私を助けることができるでしょうか?

  8. ニコラス dit :

    こんにちは、このページのビルダーとしてのElementorの選択に私を補強してくれてありがとう。 ^^

    一方、変更前の子サイトの作成についてはどう思いますか? Elementorには必要ですか?

    テーマを更新すると、すべての変更が上書きされるのではないかと心配していますか? リスクはありませんか?

    あなたの答えをありがとう、
    ビエンàvousの、
    ニコラス

  9. ニコラス dit :

    こんにちは、この非常に興味深い記事に感謝します。
    私はElementorを使用し始め、私が使用しているものの子テーマを作成し続ける前に、それが必要でないかどうか疑問に思っていました。 そうでない場合は、テーマやプラグインのマインドが組み込みのレイアウトをElementorで上書きする危険はありませんか?
    あなたの帰りにありがとう、

  10. ジョエル・メンガラ dit :

    ボンジュール、

    私は拡張子ELEMENTORのPHPコードをホームページに統合する方法を知りたいですか?

    私は私の要求にあなたの注意を払ってくれてありがとう。

    1. ボンジュール、

      残念ながら、あなたには解決策がありません。申し訳ありません。

  11. Jeanson dit :

    ボンジュール、

    非常に興味深い記事。
    私はあなたがプロであるかどうかについての質問があります。
    生成されたフォームにmethod = "POST"を追加することは可能ですか?

    Jeanson

    1. 今晩は、

      まだテストされていません。 Elementorチームに連絡することをお勧めします。

  12. 洋子 dit :

    非常に良い記事、ガンは質問したい、私が要素に行くのを始めたとき、またはヘッダーとフッターがあるように見える理由、空に見える方法

コメントを残します

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

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

トップに戻る
23 株式
シェア18
さえずります
Enregistrer5
:)