Elementorループグリッドチュートリアル：HappyAddonsダイナミックグリッドユーザーガイド

魅力的で高機能なウェブサイトをデザインすることは、訪問者を惹きつけ、エンゲージメントを高め、コンバージョンを促進する鍵となります。このプロセスを簡素化するためにエレメンタとそのアドオンは、革新的な機能とモジュールを導入し続けている。

ループグリッド(Circular Grid）は、Elementorとそのプラグイン・チームによって最近導入された新しいコンポーネントで、ウェブページ上のコンテンツをすっきりとしたエレガントなグリッドで表示することができます。

Elementorのループグリッドとは何ですか？

Loop Gridは機能豊富なElementorウィジェットで、ウェブサイト内の様々なコンテンツを表示するためのダイナミックレイアウトの作成をサポートし、いつでも変更することができます。このタイプのコンポーネントは、ブログ記事、商品、ポートフォリオを表示するときにとても便利です。

コンテンツが自動的に更新されるという利点があります。新しい記事や商品を公開すると、手作業なしでページに直接表示されます。また、ブランドのスタイルに合わせてテンプレートをカスタマイズすることもできます。

操作ステップに進む。

ループグリッドの準備

このコンポーネントを使用するには、まず以下のプラグインをインストールする必要があります：

エレメンタ
ハッピーアドオン
HappyAddons Pro

準備が整いましたら、以下の手順で始めてください。

ステップ01：ループグリッドをページにドラッグ＆ドロップする

編集するページをエレメンタエディターで検索 ハッピー・ループ・グリッドを選択し、希望のエリアにドラッグ＆ドロップする。

ステップ 02: ループ・グリッド・テンプレートの作成

コンポーネントを追加すると、テンプレートを選択するプロンプトが表示されます。テンプレートがすでに存在する場合は、それを直接選択することができます。そうでない場合は、"Create Template "をクリックしてください。

システムが新しいページにジャンプするので、"Loop Template "タブの下にある "Add New Template "をクリックする。

テンプレートに名前を付け（例：Loop Template One）、"Create Template "をクリックします。

システムが新しいキャンバスを開くので、コンポーネントをドラッグ・アンド・ドロップしてテンプレート・レイアウトを作り始めることができる。

ステップ03：ループグリッドのテンプレートレイアウトをデザインする

例えばブログ記事を表示するには、以下のコンポーネントを順番に追加すればよい：

注目画像を投稿する

記事のサムネイルを表示するために使用します。

投稿情報

画像の下には、作者や出版日などを表示することをお勧めします。不要な情報要素を削除したり、「項目を追加」で新しいコンテンツを追加することができます。色、太さ、配置はスタイルオプションで調整できます。

投稿タイトル

記事情報コンポーネントの下にドラッグ＆ドロップします。コンテンツの設定は HTML ラベル、フォントのサイズと配置、スタイル設定でのフォントの色とタイポグラフィの調整。

抜粋を投稿する

タイトルの下に配置し、要約を表示する。色とフォントはスタイル設定で調整できる。

ステップ04：テンプレートのレイアウトをモバイルデバイスに合わせる

さまざまなデバイスからアクセスされたときに適切に表示されるように、エディターの下部にある「レスポンシブ・モード」ボタンをクリックすると、デスクトップ、タブレット、モバイルの各モードを表示できます。

必要に応じて各モードの要素のサイズと位置を調整し、さまざまなスクリーンに合わせることができます。

出版テンプレート

テンプレートのデザインが完了したら、"Publish "ボタンをクリックしてテンプレートを保存します。

ステップ05：メインページに戻ってテンプレートを選択する

メインページに戻り、Loop Gridブロックをクリックし、Layout Settingsで先ほど作成したテンプレートを選択します。

テンプレート名を入力し、選択するとテンプレートがリアルタイムでロードされ、公開された記事の内容が表示されます。

さらに調整することができる。

ステップ 06: ループグリッドの設定

レイアウト設定で調整可能：

行ごとの列
ページあたりのコンテンツ表示数
高さは均一か

この例では、1ページに3記事、3カラム。

クエリ条件を設定する（クエリ）

照会」タブに移動し、表示するコンテンツの種類（記事、ページ、ページなど）を選択します。お飾り.

著者、タグ、カテゴリーでコンテンツをフィルタリングするには、「Include By」を使用します。システムは、選択に基づいて関連するコンテンツを表示します。

ステップ07：ページネーションの設定

ページネーションともっと読み込む」設定に移動し、ページネーションのスタイルを選択する。

設定が完了すると、グリッドの下にページングボタンが表示されます。

ステップ08：スタイル設定

Style "タブで設定できる：

行と列の間隔

各アイテムのマージン、背景、シャドウ、ボーダー

ページネーションボタンの色、フォント、マージン

ステップ09：テンプレートの詳細を再度調整する

テンプレートに変更を加える必要がある場合は、バックグラウンドでアクセスすることができます：

HappyAddons > テーマビルダー > ループテンプレート

をクリックしてください。エレメンタ編集」でテンプレートを開き、例えば「続きを読む」ボタンのスタイルを変更します。修正したら「更新」をクリックします。

ステップ10：プレビューとリリース

メインページで "Save Draft "をクリックし、ページを更新するとテンプレートの効果が表示されます。

最後に、Publish ボタンをクリックして、Loop Grid デザイン全体をパブリッシュします。

携帯電話やタブレット端末では、各端末との互換性を確認するため、表示を再度確認することをお勧めする。

ループ・グリッド共通アプリケーション・シナリオ

ループ・グリッドが適切なシナリオをいくつか紹介しよう：

1.ブログ記事のレイアウト

ショーケースの記事キャプション抄録、画像、著者情報など、整然としたページレイアウト。

2.商品陳列ブロック

eコマースサイトで、商品画像、価格、説明を表示し、閲覧やショッピングを容易にするために使用されます。

3.ポートフォリオ・プレゼンテーション

プロフェッショナルなイメージを高めるために、デザイン作品やケース、記事などのコンテンツを展示。

4.イベントカレンダー

イベント名、日付、場所などをグラフィック表示することで、訪問者が素早く情報にアクセスできる。

5.サービス分類の提示

グリッドにはサービス名、説明、写真が表示され、情報を簡潔かつ直感的に伝えることができる。

概要

これでLoop Gridがフル稼働です。このコンポーネントは使いやすく強力で、ウェブページ上にリッチで柔軟なコンテンツブロックを構築し、ビジュアルプレゼンテーションとページパフォーマンスを向上させることができます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み