WPレイアウト– WordPressレイアウトを保存する新しい革新的な方法!

公開: 2019-10-17

WP Layoutsは、主要なWordPressビルダーのすべてのレイアウトをクラウドに保存するため、どのWordPressWebサイトからでもアクセスできます。 ワンクリックでレイアウトを保存または使用できます。 これは時間を節約するための優れた方法であり、デザインを再利用したい人にとって理想的です。 これは、多くのWebサイトを構築する人や、大規模な設計機関内でのプロジェクトコラボレーションに特に理想的です。 この記事では、WPレイアウトを詳しく見て、何ができるか、使いやすさ、そしてWPレイアウトがあなたに適しているかどうかを確認します。

なぜWPレイアウトを使用するのですか?

古い方法

古い方法では、各レイアウトを一度に1つずつエクスポートして、コンピューターに保存していました。 次に、レイアウトを使用するサイトに移動し、一度に1つずつインポートします。

以前は、.JSONエクスポートファイルをコンピューター上のファイルまたは別のクラウドストレージサービスに保存する必要がありました。 つまり、それらを検索するか、フォルダに移動して、一度に1つずつ個々のファイルを見つける必要があります。 これは、ファイルを使用したいすべてのWebサイトに対して行われました。 アップロードする前にレイアウトを見ることができなかったので、いくつかのレイアウトをアップロードして、Webサイトに適切なレイアウトを取得することができました。

古い方法は、子テーマをパッケージ化する場合はさらに悪化しました。 それらのエクスポートとパッケージ化は、複雑になる可能性のある複数のステップからなるプロセスです。 最終的には多くのファイルが作成され、そこから子テーマパッケージを作成する必要があります。 これには時間がかかりました。

新しい方法

WPレイアウトを使用すると、あるサイトからレイアウトをエクスポートして、一度に別のサイトにインポートする必要はありません。 レイアウトはクラウドに保存され、WordPressWebサイト内の単一のメニューからアクセスできます。 CSSファイルや画像も含まれています。 Gutenberg、Divi、Elementor、およびBeaver Builderで動作します(より多くのオプションが間もなく登場します)。

使用するビルダーのレイアウトオプションで[WPレイアウト]タブを選択するだけです。 すべてのレイアウトはサムネイルとして表示できるため、毎回何を選択しているかを正確に把握できます。 WPレイアウトサブスクリプションには、20を超えるカスタム設計のレイアウトが含まれており、ライブラリから直接、より多くのプレミアムレイアウトを購入できます。

今後の機能では、ワンクリックプロセスで子テーマを作成できるようになります。 個々のファイルをダウンロードし、それらを組み合わせて子テーマパッケージを作成する必要はもうありません。 それはすべて自動的に行われます。

WPレイアウトをダウンロードしてインストールする

WPレイアウトの取得とインストール

WP Layouts Betaの使用を開始するには、WPLayouts.spaceにアクセスし、 「Get WPLayoutsNOW!」というラベルの付いたボタンをクリックします。

これにより、アカウントを作成するか、アカウントにログインしてプラグインをダウンロードできるフォームが開きます。 ここでライセンスキーを更新することもできます。 これはベータ版で、年末まで利用可能になります。 今年の最初以降、無料のオプションがいくつかのプレミアムパッケージとともに引き続き利用可能になります。

プラグインをアップロードし、通常どおりアクティブ化します。 ダッシュボードメニューで、[ WPレイアウト]> [設定]に移動し、電子メールでログインします。 WPレイアウトがビルダーのライブラリに追加され、Gutenbergのページや投稿にインポートできるようになりました。

WPレイアウトマイレイアウト

レイアウトのリストは、WPレイアウトダッシュボードメニューに表示されます。 それらをグリッドまたはリストで表示できます。 グリッドビューには、サムネイル、エディターまたはレイアウトの名前、およびレイアウトを開いて新しいタブに表示される拡大鏡が表示されます。 カーソルを合わせると、それぞれがスクロールしてレイアウトが表示されます。 日付またはアルファベット順に表示でき、ページに表示する数を選択できます。 左上隅の検索ボックスでは、名前またはエディターで検索できます。

リストビューが表示されます。 AからZのアルファベット順に並べ替えました。名前、エディター、アップロード日、レイアウトをライブプレビューとして表示するためのボタンが表示されます。

レイアウトを選択して画面右側のボックスで選択することにより、レイアウトの名前を変更したり、レイアウトを削除したりすることもできます。 レイアウトを削除することを選択した場合、削除の確認を求めるポップアップが表示されます。

テーマ

ダッシュボードメニューには、テーマと呼ばれるリンクもあります。 これは、WPLayoutsクラウドライブラリから子テーマをインポートできるようにする今後の機能です。 これはエキサイティングな機能であり、詳細は近日公開されます。

WPレイアウトの使用方法

各ビルダーでWPレイアウトを使用する方法を見てみましょう。 それらはすべて、ワンクリックプロセスを使用してレイアウトを表示します。

GutenbergでのWPレイアウトの使用

GutenbergでのWPレイアウトの使用

Gutenbergエディターでは、[インポート/エクスポート]というタブ内の右下隅にいくつかのボタンが表示されます。 クリックして、クラウドからレイアウトをインポートするか、レイアウトをクラウドにインポートします。

GutenbergでのWPレイアウトの使用

クリックしてインポートしました。 モーダルが開き、このビルダーで使用できるレイアウトが表示されます。 これはWPレイアウトライブラリと同じ画面なので、同じ方法で並べ替え、検索、表示できます。 WPレイアウトと呼ばれるタブとマイレイアウトと呼ばれるタブが含まれています。 マイレイアウトは、任意のWebサイトからクラウドライブラリに保存したレイアウトです。

GutenbergでのWPレイアウトの使用

レイアウトをクリックすると、インポートオプションを選択できる新しいモーダルが表示されます。 既存のコンテンツの上、既存のコンテンツの下にレイアウトを挿入するか、既存のコンテンツを置き換えます。

GutenbergでのWPレイアウトの使用

これで、レイアウトがクラウドライブラリからインポートされました。

GutenbergでのWPレイアウトの使用

レイアウトを作成したら、[ WPレイアウトにエクスポート]をクリックして、レイアウトをクラウドに保存できます。 レイアウトの名前を指定できるモーダルが開きます。 サムネイル画像を生成し、すべてのコンテンツをエクスポートします。

DiviでのWPレイアウトの使用

DiviでのWPレイアウトの使用

2つの新しいWPレイアウトタブがDiviレイアウトポップアップに追加され、WPレイアウトクラウドに保存したDiviレイアウトまたはWPレイアウトライブラリのレイアウトを確認できます。

DiviでのWPレイアウトの使用

Gutenbergレイアウトの場合と同様に、モーダルからレイアウトをインポートする方法を選択し、[インポート]をクリックします。

これで、レイアウトがDiviページまたは投稿にインポートされ、他のレイアウトと同じようにカスタマイズできます。

WPレイアウトライブラリに保存するには、レイアウトを通常どおりライブラリに保存することを選択してから、[WPレイアウト]オプションを選択します。

ElementorでのWPレイアウトの使用

ElementorでのWPレイアウトの使用

WPレイアウトタブがElementorライブラリに追加され、保存したレイアウトを選択したり、WPレイアウトライブラリから選択したりできます。

ElementorでのWPレイアウトの使用

目的のレイアウトをクリックして、インポートされるのを待ちます。

ElementorでのWPレイアウトの使用

レイアウトをWPレイアウトクラウドに保存するには、左下隅にある[公開]ボタンの横にある矢印にカーソルを合わせ、[テンプレートとして保存]を選択します。

ElementorでのWPレイアウトの使用

保存ポップアップで[ WPレイアウトに保存]を選択します。

BeaverBuilderでのWPレイアウトの使用

BeaverBuilderでのWPレイアウトの使用

Beaver BuilderでWPレイアウトを使用するには、右上隅にあるクラウドアイコンをクリックします。 これにより、[マイレイアウト]タブと[WPレイアウト]タブを含む[レイアウトのインポート]ポップアップが開きます。

BeaverBuilderでのWPレイアウトの使用

レイアウトを選択し、ページまたは投稿にレイアウトを挿入する方法を選択します。

BeaverBuilderでのWPレイアウトの使用

これで、レイアウトがWPレイアウトライブラリからインポートされます。

BeaverBuilderでのWPレイアウトの使用

レイアウトをライブラリに保存するには、保存するセクションまたはモジュールのクラウドアイコンをクリックします。

BeaverBuilderでのWPレイアウトの使用

レイアウトに名前を付けて、[エクスポート]をクリックします。

BeaverBuilderでのWPレイアウトの使用

左上隅の[ツール]メニューからインポートまたはエクスポートすることもできます。

WPレイアウト無料レイアウト

WPレイアウト無料Diviレイアウト

WP Layoutsサブスクリプションには、20以上の専門的に設計された、プレミアム品質のレイアウトが付属しています。 さらに購入可能になり、図書館から直接購入できるようになります。

これがDiviのTravelレイアウトのプレビューです。 Visual Builderがアクティブな状態で開くので、変更を加えたり、含まれている要素を確認したりできます。 変更は保存されませんが、これは設定とモジュールを確認するための優れた方法です。

DiviでのWPレイアウトの使用

これがeコマースレイアウトのプレビューです。

WPレイアウトのサポートとドキュメント

WPレイアウトのサポートとドキュメント

ドキュメントは、WPレイアウトのサポートページで提供されています。 記事、FAQ、クイックスタートガイド、サポートへのリンク、およびお問い合わせフォームが含まれています。 クイックスタートガイドには、開始に役立つ詳細なビデオとステップバイステップの記事が含まれています。

価格

ベータ版は年末まで無料です。 ベータ版が終了すると、DiviSpaceおよびAspenGroveStudiosのメンバーシップに特別価格帯が適用されます。 価格は今後発表される予定ですので、必ずニュースレターにご登録ください。

終わりの考え

WPレイアウトは、すべてのレイアウトを指先で配置します。 インポートは高速です。 ほとんどの場合、標準のDiviレイアウトをインポートするよりも高速であるように見え、すべての画像とCSSが含まれていました。 プラグインとタブの使用は直感的です。 ビルダーのドキュメントは必要ありませんでしたが、必要な人なら誰でもすぐに利用できます。

現在、Gutenberg、Divi、Elementor、およびBeaverBuilderのレイアウトで動作します。 間もなく、プラグインは子テーマとも互換性があり、Web開発者にとってプラグインの価値がさらに高まります。

クリック内にすべてのレイアウトを表示することは、ゲームチェンジャーです。 WPレイアウトは、多くのWebサイトを構築し、独自のデザインを出発点として再利用したい人、または単にレイアウトを手元に置きたい人にとっては必須です。

私たちはあなたから聞きたい。 WPレイアウトベータ版を試しましたか? コメントであなたがそれについてどう思うか教えてください。