魅力的で高機(jī)能なウェブサイトをデザインすることは、訪問者を惹きつけ、エンゲージメントを高め、コンバージョンを促進(jìn)する鍵となります。このプロセスを簡(jiǎn)素化するために エレメンタ とそのアドオンは、革新的な機(jī)能とモジュールを?qū)毪肪Aけている。

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

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

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

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

操作ステップに進(jìn)む。

ループグリッドの準(zhǔn)備

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

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

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

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

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

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

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

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

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

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

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

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

注目畫像を投稿する

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

投稿情報(bào)

畫像の下には、作者や出版日などを表示することをお?jiǎng)幛幛筏蓼?。不要な情?bào)要素を削除したり、「項(xiàng)目を追加」で新しいコンテンツを追加することができます。色、太さ、配置はスタイルオプションで調(diào)整できます。

投稿タイトル

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

抜粋を投稿する

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

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

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

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

出版テンプレート

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

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

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

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

さらに調(diào)整することができる。

ステップ 06: ループグリッドの設(shè)定

レイアウト設(shè)定で調(diào)整可能：

• 行ごとの列
• ページあたりのコンテンツ表示數(shù)
• 高さは均一か

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

クエリ條件を設(shè)定する（クエリ）

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

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

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

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

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

ステップ08：スタイル設(shè)定

Style "タブで設(shè)定できる：

• 行と列の間隔

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

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

ステップ09：テンプレートの詳細(xì)を再度調(diào)整する

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

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

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

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

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

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

攜帯電話やタブレット端末では、各端末との互換性を確認(rèn)するため、表示を再度確認(rèn)することをお?jiǎng)幛幛工搿?/p>

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

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

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

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

2.商品陳列ブロック

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

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

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

4.イベントカレンダー

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

5.サービス分類の提示

グリッドにはサービス名、説明、寫真が表示され、情報(bào)を簡(jiǎn)潔かつ直感的に伝えることができる。

概要

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

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