カスタムWordPressレイアウトを作成する方法(ステップバイステップ)

カスタムレイアウト、ビーバービルダー


あなたのウェブサイトにユニークな外観を与えるためにあなたのウェブサイトのためのカスタムWordPressレイアウトを作成しますか??

スキルセットに関係なく、開発者を雇うことなくカスタムWordPressレイアウトを簡単に構築できます.

この記事では、有名なWordPressページビルダープラグインであるBeaver Builderを使用してカスタムWordPressレイアウトを作成する方法を紹介します.

プレミアムテーマを選択して、事前に作成されたレイアウトの1つでページを開始できるのに、なぜカスタムレイアウトを作成するのか疑問に思う方も多いでしょう。.

カスタムWordPressレイアウトを作成する理由

すぐに使用できる、いくつかの見事な組み込みレイアウトを提供する多数のプレミアムWordPressテーマが見つかります。あなたは間違いなくこれらの美しいレイアウトを選び、あなたのサイトに魅力的な外観を与えることができます.

しかし、そのようなレイアウトの問題は、すぐに利用できるため、ウェブ全体で何百、何千ものユーザーによって広く使用されていることです。.

つまり、WordPressサイトにビルド済みのレイアウトを使用している場合、大幅にカスタマイズしない限り、明確な外観を与えることはできません。また、これらのレイアウトも要件を満たさない場合があります。このような場合は、カスタムレイアウトを作成するのが最適です。.

カスタムWordPressレイアウトの作成

サイトの見た目が美しいカスタムレイアウトを作成する最良の方法は、Beaver Builderプラグインを使用することです。ビーバービルダーは人気のあるドラッグアンドドロップページビルダープラグインであり、数分で最も素晴らしいレイアウトのいくつかを作成できます.

ビーバービルダー

このプラグインの最も良い点は、提供する場合の柔軟性のレベルです。ほぼすべてを制御できます.

色、テキスト、フォント、画像–すべてを完全にカスタマイズして、常に夢見ていた正確な外観を得ることができます.

ビーバービルダーのもう1つの魅力は、他のページビルダープラグインとは異なり、初心者にやさしいプラグインであり、使用方法を考え出すのに何時間も費やす必要がないことです。さらに、それはあなたが始めるのに役立つ視覚的に素晴らしいテンプレートの数十も提供します.

こちらのビーバービルダーのレビューをチェックしてください。このプラグインを使用してカスタムレイアウトを作成する方法を見てみましょう.

ステップ1:WordPressでのBeaver Builderのインストールと設定

最初のステップは、WebサイトにBeaver Builderをインストールしてアクティブ化することです。プラグインは、ビーバービルダーのサイトにアクセスしてダウンロードできます。有効になったら、 設定»ページビルダー.

ビーバービルダー設定

ここで、ライセンスキーを入力してサポートを有効にし、アップデートを受け取ることができます。完了したら、最初のカスタムレイアウトを作成する準備ができました.

ステップ2:初めてのカスタムレイアウトの作成

最初のカスタムレイアウトを作成するには、 すべてのページ»新規追加 WordPressダッシュボード。テキストエディターで、ページビルダーに切り替えるオプションがあります。.

このオプションをクリックするだけで、ページビルダータブが起動します。ここにいくつかのテンプレートオプションが表示されます。そのため、レイアウトに最も適したものを選択してください。ドロップダウン矢印をクリックして、必要なレイアウトのタイプを選択することもできます。これは、ランディングページまたはコンテンツページの場合があります。.

完了すると、ドラッグアンドドロップビルダーが表示されます。特定のフィールドを編集するには、その特定の領域にカーソルを合わせてクリックし、デザインのカスタマイズを開始するだけです.

最大6列、サイドバー、オーディオ、画像、セパレーターなどをレイアウトに追加できます。行とサイドバーを追加するには、 行レイアウト タブ。次に、必要な数の列をドラッグして、ビジュアルビルダーにドロップします.

列を追加したら、列をクリックして、要件に合わせてカスタマイズします。背景、テキストの色を変更したり、リンク、テキスト、境界線などを列に追加したりできます。これらの列と行は、後で使用するために保存することもできます。そのためには、単に セーブ ポップアップの最後にあるボタン.

その他の要素については、 基本モジュール オプション。ボタン、アコーディオン、価格表、マップ、カウントダウンタイマーなど、レイアウトに追加できる他の要素もいくつかあります.

要素を右からドラッグして、左側のビジュアルビルダーにドロップするだけです。これらの各要素はカスタマイズ可能です。たとえば、新しい見出しを追加したい場合は、 見出し レイアウトにドラッグアンドドロップします。その後、Heading要素をクリックしてカスタマイズします.

ここには3つの異なるタブがあります. 一般、スタイル、アドバンス. 1つ目は、テキストやリンクなどを見出しに追加することです。 2番目のタブでは、さまざまな色、フォントなどで見出しのスタイルを設定できます。 高度な オプションにより、マージン、可視性、応答性、アニメーションなどを操作できます.

同じ方法を使用して必要な数の要素とモジュールを追加し、要件に合わせてカスタマイズできます。.

レイアウトを編集した後、 できた 画面の右上隅にあるボタン。以下のスクリーンショットに示すようないくつかの異なるオプションを含む新しいポップアップが表示されます.

ビーバービルダー保存レイアウト

これらのオプションを使用して、下書きを保存、公開、または破棄できます.

ステップ3:レイアウトを再利用する

Beaver Builderでは、カスタムWordPressレイアウトを保存して、いつでも再利用できます。このオプションを使用するには、 ツール 画面の右上隅にあります。画面に次のオプションが表示されます.

ビーバービルダーツール

次に、要件に応じて、オプションを選択します。テンプレートを後で使用する場合は、 テンプレートを保存 オプションを選択して、レイアウトに名前を付けます。その後ヒットした セーブ ボタン.

ワードプレスレイアウトでテンプレートを節約

ステップ4:テンプレートの管理

Beaver Builderで作成したレイアウトは、無制限のWebサイトで使用できます。ユーザーが作成したテンプレートは、テンプレートと呼ばれるカスタム投稿タイプに保存されます.

デフォルトでは、このオプションは非表示になっています。に行くことによってそれを目に見えるようにすることができます 設定»ページビルダー»テンプレート タブ.

次に、 テンプレート管理を有効にする オプションとヒット テンプレート設定を保存 ボタン。これを行うと、WordPress管理バーに「テンプレート」という名前の新しいメニュー項目が表示されます。テンプレートとして保存したすべてのページレイアウトがそのページに表示されます.

WordPressレイアウトのエクスポート

作成したレイアウトはカスタム投稿タイプとして保存されるため、Beaver Builderテンプレートを簡単にエクスポートできます。このため、WordPressには組み込みのエクスポート機能があります。この機能を使用するには、 ツール»エクスポートページ.

ワードプレスレイアウトのエクスポート

次に、テンプレートを選択します。ドロップダウン矢印をクリックして、エクスポートするテンプレートを選択します。その後、 エクスポートファイルのダウンロード ボタンをクリックすると、WordPressからダウンロード用のXMLファイルが送信されます.

Beaver Builderレイアウトのインポート

レイアウトをインポートするには、このレイアウトをインポートするWebサイトのダッシュボードに移動します。次に行きます 設定»インポート»WordPress. WordPressタブのInstall Nowオプションをクリックします。 WordPressインポータープラグインをダウンロードしてインストールします.

プラグインをダウンロードしたら、ダウンロードしたXMLファイルをアップロードできます。これで、レイアウトを他のサイトでも使用できるようになりました.

以上です。私たちの記事が気に入っていただければ幸いです。もしそうなら、あなたが試すことができる他のビーバービルダーの代替案のいくつかを知りたいかもしれません.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map