Elementor あなたに役立つテーマを定期的に提供します ウェブサイトを作成する これらから完成。 毎月、特定のニッチを中心に構築された新しいテーマをリリースしますが、最終的に自分のニーズに合わせてカスタマイズできるほど柔軟です。

と組み合わせ Elementor プロ、これらのテーマは、Web サイトのあらゆる部分をすばやく開始するのに役立ちます。

pホームページのような静的な年齢

  • ヘッダー
  • フッター
  • 404ページ
  • アーカイブセクション 
  • ブログ
  • ポップアップなど

このチュートリアルでは、 ウェブサイトの作成方法 ビジュアルページビルダーを使用して完了します Elementor.

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

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

Elementorテーマで完全なウェブサイトを構築する方法

このチュートリアルでは、Web サイトのすべての重要な部分の基礎としてテーマを使用する方法を学び、すべてをまとめて ウェブサイトを作成する コヒーレント。

より正確には、テーマ デジタルエージェンシー.

ウェブサイトには、次のような基本的なページがいくつかあります。

  • 歓迎
  • サービス
  • 取引実績
  • ブログ
  • お問い合わせ

また、動的コンテンツ専用のセクションもあります。 たとえば、ブログの投稿アーカイブと投稿テンプレートは、スタンドアロンページに自動的に一致します。 ヘッダー、フッター、および ページ 404.

完全なウェブサイト要素またはblogpascher1を作成する方法

ので、ここで ウェブサイトの作成方法 Elementor テーマの場合:

1. ElementorHelloテーマをインストールしてアクティブ化します 

Elementorとテーマテンプレートを使用してWebサイト全体を構築するため、他の要素を検索する必要はありません。

代わりに、ElementorHelloテーマが提供する軽量でパフォーマンスが最適化されたWebサイトが必要になります。

始めるには、に行きます 外観→テーマ→追加 そして検索」 こんにちはelementor"。 次に、テーマをインストールしてアクティブ化します。 

2. Webサイトの基本的な静的ページを構成する

次にメニューに行きます ページ→追加 あなたのウェブサイトの基本的なページを作成します。

まず、「 歓迎 「そしてボタンをクリックして エレメントで編集する Elementorを起動します。

上をクリックします 設定 開くには ページ設定とそのレイアウトをに等しくなるように変更します Elementor全幅。

次にElementorテンプレートライブラリを開き、「Digital Agency」を検索します ページ :

このテーマのページテンプレートのリストが表示されます。 テンプレートを挿入 ホーム モデルのリストから。

これで、完全なホームページが表示されます。 ヘッダーは今のところ少し鈍いように見えますが、心配しないでください。すぐに修正します。.

次に、「」に使用する別のページを追加します "。

前と同じように、ページを作成し、レイアウトを次のように変更します Elementor全幅。 次に、テンプレートライブラリを開き、テンプレートを挿入します About デジタルエージェンシーのテーマの。

同じプロセスを繰り返して、以下を含む他のすべてのページを作成します。 サービス、 顧客、および 接触。

ブログページについてはまだ心配しないでください。 このページは他のページのように静的ではありません。 このため、別の方法で作成します(このチュートリアルの後半で説明します)。

静的ページの設定を完了するには、静的ホームページを使用するようにWordPressインストールに指示する必要があります。 これをする…

  • に行きます 設定→再生
  • 選択します  静的ページ(以下から選択) ホームページ設定の下 
  • テーマのホームページテンプレートを組み込んだページを選択します

3.ウェブサイトの他の部分を作成します

これで、Elementorを使用してWebサイトの他の部分を構築する準備が整いました。 Elementorを使用すると、静的ページの作成を超えることができます(上記のように)。

Elementorを使用すると、次のようなセクションを設計することもできます。nヘッド; フッターなど..。

Elementorテーマのおかげで、前のステップで作成した静的ページにすでにあるすべてのセクションのテンプレートをインポートできます。

Elementorのビジュアルビルダーにアクセスするには、 テンプレート→テーマビルダー. アクセスするにはElementor Proをインストールする必要があります。

次に、セクションを作成します

ヘッダ

開始するには、タブに移動します ヘッダ ビジュアルビルダーインターフェースの、次にクリック 新規追加。 次の画面では、Elementorライブラリのテンプレートの選択が表示されます。 静的ページで行ったのと同じように、「デジタルエージェンシー」を検索してから、以下を挿入します。

Elementor-ヘッダーテンプレートを挿入

これで、ヘッダーの視覚的なプレビューと、挿入したテンプレートのナビゲーションメニューが表示されます。

変更したい場合

  • に行きます  外観→メニュー WordPressダッシュボード
  • 新しいメニューを作成する

メニューを作成したら、手順2で作成したページをナビゲーションメニューに追加できます。

また読みます: 中小企業マーケティングのための10の自動化ツール

メニュー項目の追加が完了したら、メニューを保存して、Elementorインターフェイスのヘッダーテンプレートに戻ります。

その後 公開する ヘッダーと表示条件を使用して、ウェブサイト全体にヘッダーテンプレートを表示します。 必要に応じて、表示条件を使用して、コンテンツの種類ごとに異なるヘッダーを作成することもできます。

次に押す 保存して閉じる

フッター

次は、ウェブサイトのフッターを作成します。

  • ビジュアルページビルダーインターフェイスに戻る
  • タブをクリックします フッター 
  • ボタンをクリックして 新しいフッターを追加
  • ポップアップで、フッターに名前を付けてクリックします Create Template

ヘッダーと同じように、フッターテンプレートのリストが表示されます。 「Digital Agency」を検索して、フッターテンプレートを挿入します。

フッターテンプレートを挿入すると、フッターのプレビューが表示されます。

その後 公開する フッターテンプレートを使用し、表示用語を使用してWebサイト全体に表示します。

ページブログ

手順2で作成した静的ページとは異なり、ウェブサイトのブログページは「 アーカイブ "。 基本的に、これはWebサイトの最新コンテンツを動的に表示することを意味します。

ユーザーがブログページの特定のアイテムをクリックすると、そのアイテムのコンテンツを表示するページに移動します。 これは「シングル」ページと呼ばれます。 独自のデザインにより、すべてのコンテンツが同じように表示されます。変更されるのは、実際のコンテンツ(投稿のタイトル、本文、注目の画像など)だけです。

発見 Elementorを使用してWordPressに目次を追加する方法

固有のアーカイブページとページテンプレートを作成するには、ゾーンではなくElementorビジュアルビルダーを使用する必要があります ページ ou 記事 WordPressのデフォルト。

始める…

  • テーマビルダーインターフェイスを開く
  • [アーカイブ]タブに移動します
  • [新規追加]をクリックします
  • 名前を付けて、[テンプレートの作成]をクリックします

ヘッダーとフッターと同様に、アーカイブページテンプレートのリストが表示されます。 「デジタルエージェンシー」テンプレートを探して挿入します。

これで、記事ページの基本的なデザインが表示されます。

WordPressには「HelloWorld!」というデフォルトの例しか付属していないため、記事がXNUMXつしか表示されない場合は正常であることに注意してください。 "。

今のところ、あなたがする必要があるのは 出版します アーカイブページを作成し、すべてのアーカイブに表示するように設定します。

ガイドを読む WordPress Webサイトを手動で移行する方法

次に、ダッシュボードの投稿メニューに移動して、新しいブログ投稿を作成できます。 各アイテムを「ニュースレター"。

これで、ブログページに移動すると、次の新しい投稿がすべて自動的に表示されます。

ブログ投稿テンプレートページの作成

この時点で、ブログページはかなりユーザーフレンドリーな外観になっています。 ただし、特定のブログ投稿をクリックすると、レイアウトはWebサイトの他の部分と一致しなくなります。

この問題を解決するには、Elementorを使用して「一意の」テンプレートを作成する必要があります。

  • Elementorビジュアルビルダーを開く
  • タブに移動します 単発講座 ポスト
  • 上をクリックします 新規追加

ポップアップで 新しいテンプレート :

  • それに名前を付けます
  • 選択 ポスト ドロップダウンリスト 投稿タイプを選択。 これはElementorに、ブログの投稿にこのテンプレートを使用することを伝えます(Pagesや他のカスタム投稿タイプではなく)

もう一度、Elementorテンプレートライブラリが表示されます。 「デジタルエージェンシー」テンプレートのユニークな記事テンプレートを見つけて挿入します。

また読む WordPressのメンテナンスモード:説明と設定

必要に応じて、多くの動的パブリッシングデータウィジェットを使用して、ページの外観を制御できます。

たとえば、ウィジェットを変更した場合  投稿情報、パブリケーションなどに表示されるメタデータ要素を制御できるようになります...

  • 作家
  • 発行日
  • 注釈

アイテムモデルに満足したら、をクリックします パブリッシュ。 次に、表示オプションを使用して、この一意のテンプレートが「ニュースを超えて」カテゴリの投稿にのみ適用されるようにすることができます。

  • から選択 カテゴリ
  • カテゴリーを選択してください ニュースレター

次に押す 保存して閉じます。

これで、すべてのブログ投稿のデザインがウェブサイトの他の部分と一致するはずです。

物事を完了するには、に行きます 外観→メニュー ブログページをナビゲーションメニューに追加します。 これを行うには、セクションの「ニュース」カテゴリへのリンクを追加できます カテゴリー。

ページ404

最後に、Webサイトの404ページを作成する必要があります。 Webサイトの404ページは、壊れたリンクをたどった場合や、存在しないページにアクセスした場合に表示されるページです。

私たちも発見 5 WordPressはプラグインのより良いエラーを管理するための404

404ページを作成するには、Elementorビジュアルビルダーを使用して別の一意のテンプレートを追加します。

  • Elementorビジュアルビルダーを開く
  • タブに移動します エラー404
  • 上をクリックします 新規追加
  • 404ページからデジタルエージェンシーテンプレートを挿入
404ページ-完全なWebサイトを作成します

次に、テンプレートを公開してWebサイトを完成させます。

Elementor Proを今すぐ入手!

まとめ

それで ! ステップバイステップで説明するこのガイドは以上です ウェブサイトの作成方法 エレメンターで完成。 あなたが持っている場合 デcommentaires または提案、予約セクションでお知らせすることをheしないでください。

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

しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する

...