Divi の Circle Counter モジュールをスタイルする 5 つの方法

Divi の Circle Counter モジュールを使用して、ステータスやスキルなどを表示します。 このモジュールを利用すると、大量の数値データを含むページに見られる単調さを解消できます。 Circle Counter モジュールは、単一のデータ ポイントを美しく視覚的に魅力的に表示する方法を提供します。 ページの読み込み時に、モジュールにはデータをエキサイティングな方法で紹介する目を引くアニメーションが表示されます。 Web ページ上の退屈な表に別れを告げましょう。 今日のブログ投稿では、Divi に付属する無料のレイアウト パックの一部を利用して、Divi の Circle Counter モジュールをスタイル設定する方法を学びます。

Divi の Circle Counter モジュールのスタイル設定例

このチュートリアルでは、さまざまなレイアウト パックを使用します。 各レイアウト パックは異なる分野からのものです。 これは、Circle Counter モジュールを使用できるインスタンスが数多くあることを示しています。

オプション 1: Divi ストリーマー

このレイアウト パックでは、Circle Counter モジュールを使用して、Divi Streamer の人口統計統計を表示しました。

スタイル 2: ディビ ショコラティエ

ショコラティエの場合、モジュールを使用して、ビジネスに入った注文の数を紹介しました。

デザイン 3: Divi ジュエリー デザイナー

この場合、Circle Counter モジュールを使用して、視聴者に情報を提示しました。

ルック フォー: ディビ ホステル

アニメーションモジュールを使用してゲスト間の「幸福度指数」を測定することは理にかなっています。

デモ 5: Divi おもちゃストア

ここでは、オンライン ストアでの販売を促進するためにサークル モジュールを使用します。

Divi の Circle Counter モジュールのスタイルを準備する

Divi の Circle Counter モジュールのスタイルを開始する前に、まずこれらのモジュールを収容する別のセクションを作成する必要があります。 このセクションを新しいページに追加する場合でも、既存のページに追加する場合でも、同じ準備を行う必要があります。 スタイルを設定する前に、サークル カウンター モジュールでどのデータ ポイントを表示するかを決定します。 次に、モジュールのセクションを作成する必要があります。 第三に、行内にいくつの列を含めるかを決定する必要があります。 このため、どのデータ ポイントがサークル カウンター モジュールのデータを入力するかを知る必要があります。 データ ポイントは、使用する列の数に影響します。 これを設定したら、サークル カウンター モジュールを各列に追加します。

セクションの作成

まず、青いプラスアイコン をクリックします。 これにより、ページに新しいセクションが追加されます。

列の選択

次に、緑色のプラス アイコンを使用して、使用する列の数を含む行を追加します。 各列には 1 つのサークル カウンター モジュールが保持されます。

サークルカウンターモジュールの追加

列を作成したら、灰色のプラスアイコン をクリックします。 これにより、モジュールモーダルが開きます。 ここから、 Circle Counter Module を選択します。

一貫性を保つために、一度に 1 つのサークル カウンター モジュールをスタイル設定することをお勧めします。 次に、Divi の右クリック メニューを使用して各サークル カウンター モジュールを複製し、その中のデータ ポイントを変更します。

基本を理解したので、モジュールのスタイルを開始しましょう。

スタイル ワン フィートの Divi Streamer レイアウト パック

このブログ投稿に従って、Divi Streamer Layout Pack のどのレイアウトが自分のニーズに最も適しているかを確認できます。 このチュートリアルでは、ランディング ページ レイアウト内の About セクションを変更します。

セクションを準備する

まず、現在このセクションにある Number Counter モジュールを削除しましょう。 モジュール の上にマウスを置き、表示される灰色のポップアウト メニューからゴミ箱アイコン をクリックします。

セクション内の他の数値カウンター モジュールに対してこれを繰り返します。

サークルカウンターモジュールの追加

次に、灰色のプラス アイコンをクリックして、行の最初の列にサークル カウンター モジュールを追加します。 次に、 Circle Counter アイコンをクリックして、モジュールの 1 つを列に追加します。

コンテンツを追加する

最初のサークル カウンター モジュールを追加したら、データ ポイントを入力する必要があります。 モジュールの [コンテンツ] タブに、データ ポイントの説明を入力します。 この例では、トロント出身のユーザーの割合を表示します。 そこで、テキストと数字 78 (パーセント記号はなし) を入力します。

サークルカウンターモジュールのスタイルを設定する

次に、「デザイン」タブに移動します。 このセクションは Divi Streamer Layout Pack の一部であるため、パックの一部であるフォント、テキスト、色を使用してモジュールのスタイルに影響を与えます。

円グラフのスタイルを設定する

まず、「円」タブをクリックして、モジュールの円の部分に使用する色を決定します。

サークルのデザイン設定:

• サークルカラー： #5200ff
• 円の背景色: #ffffff
• 円の背景の不透明度: 0.4

タイトルテキストのスタイルを設定する

円グラフのスタイルを設定した後、モジュールのタイトル テキストに進みます。 [タイトル テキスト] タブをクリックし、次の設定を使用して、サークル カウンター モジュールのタイトル テキストに命を吹き込みます。

タイトルテキストの設定:

• タイトルのフォント:ポピンズ
• タイトルのフォントの太さ:太字
• タイトルのフォントの色: #ffffff

数字のテキストにスタイルを追加する

最後になりましたが、サークル カウンター モジュール内の数値を修正します。 このために、 「数値テキスト」タブをクリックします。 次に、次の設定を使用してスタイルを設定します。 レイアウト パックだけでなく、以前に存在したナンバー カウンター モジュールからもインスピレーションを得ていることに注意してください。

数値テキストの設定:

• 数字のフォント:ポピンズ
• 数字のフォントの太さ:太字
• 数字のテキストの色: #ffffff
• 数字のテキストサイズ: 72pt

これらの最終編集が終了したら、モーダル ボックスの下部にある緑色のチェック マークをクリックします。 これにより、変更が保存されます。

モジュールのコピーと更新

スタイル設定が完了したら、このモジュールを複製できるようになります。 他のデータポイントとそれに対応するタイトルを使用して変更します。 これを行うには、モジュールの上にマウスを置きます。 これにより、モジュール設定メニューのポップアップが表示されます。 コピーアイコンをクリックします。 次に、モジュールを行の他の列に移動します。

私たちの場合、モジュールのタイトルとデータを更新することに加えて、レイアウト パックに合わせて色も変更しました。

Divi Chocolatier Layout Pack を使用したデザイン 2

Web サイトにレイアウトをインストールする方法については、Divi Chocolatier Layout Pack のブログ投稿に従ってください。 ホームページのレイアウト上のイベント セクションを変更します。 サークル カウンター モジュールを追加して、収集された注文の数に関するデータを表示しましょう。

現在のコンテンツを削除

まず、現在のモジュールを削除します。 ここのテキスト モジュールと画像モジュールは見栄えがしますが、非常に静的です。 サークル カウンター モジュールを使用して、このセクションに興奮とアニメーションを追加します。 各モジュールの上にマウスを置き、ゴミ箱アイコン をクリックします。 アイコンはモジュール設定のポップアウト メニューに表示されます。

最終的には空の 3 列の行になります。

タイトルを更新

また、タイトルのテキスト モジュールを、そのセクションの今後のコンテンツとより整合性の高いものに更新することを検討することもできます。 これを行うには、テキスト モジュール の上にマウスを置き、歯車アイコンをクリックしてモジュール テキストを編集します。

サークルモジュールの追加

サークル カウンター モジュールを追加する前に、行の列番号を変更します。 行の上にマウスを置き、グリッド アイコンをクリックします。 これにより、必要な列の数を選択できるポップアップが表示されます。 このデザインでは、4 つのデータを視覚化します。 したがって、この行に 4 つの列を追加することにします。 4 列のアイコン をクリックします。

次に、灰色のプラス記号アイコン をクリックして、Circle Counter Modules を最初の列に追加します。 次に、モジュール ポップアップが表示されたら、 Circle Counter アイコンをクリックして最初の Circle Counter モジュールを追加します。

Circle モジュールにデータを追加する

最初のモジュールを配置したら、スタイルの設定とコンテンツの追加を開始できます。 まず、このモジュールのタイトルを追加しましょう。 次に、データ ポイントを追加します。

この設計では、モジュールにデフォルトで付属するパーセント記号を削除します。 これを行うには、 [要素] タブをクリックします。 次に、パーセント記号オプションの横にあるトグルのチェックを外します。

これで、このモジュールのスタイルを設定できるようになりました。

サークルカウンターモジュールのスタイル設定

まず、モジュールの「デザイン」タブに切り替えます。

円グラフにブランドを追加する

次に、 [円] トグルをクリックして、モジュールの円グラフの側面のデザイン設定にアクセスします。 次の設定を使用してスタイルを設定します。

サークルのデザイン設定:

• サークルカラー: #ff6a28
• 円の背景色: #000000
• 円の背景の不透明度: 0.3

タイトルテキストのスタイル設定

タイトル テキストについては、 [タイトル テキスト] タブをクリックした後、次の設定を使用します。

タイトルテキストの設定:

• タイトルのフォント: Jost
• タイトルのフォントの太さ:標準
• タイトル文字色: #000000

数字のテキストをデザインする。

数字のテキストには同じフォントと色を使用します。 ただし、サイズは変更します。 パーセント記号を使用していないため、サークル カウンター モジュール内にさらに多くのスペースがあります。 これを設計に活用します。 [数値テキスト] タブをクリックし、次の設定を入力します。

数値テキストの設定:

• 数字のフォント: Jost
• 数字のフォントの太さ:標準
• 数字のテキストの色: #000000
• 数字のテキストサイズ: 72px

複製して終了

最初のサークル カウンター モジュールを設計したので、それを複製してみましょう。

複製を独自の行に移動し、その中のコンテンツを更新して完成品を表示します。

Divi Jewelry Designer Layout Pack のスタイル 3

このデザインでは、出発点として Divi Jewelry Designer Layout Pack を使用しました。 このレイアウトの製品ページに教育セクションを追加したいと考えており、この情報を紹介するためにサークル カウンター モジュールを使用する予定です。 ページの下部にあるお客様の声のセクションをこれに変換します。

モジュールの削除

以前の作業と同様に、このセクション内の現在のモジュールを削除する必要があります。

セクションと行のデザインと構造を更新する

このレイアウト パックでは、セクションの背景を変更して面白みを加えたいと考えています。 セクションの青い設定メニュー内の歯車アイコンをクリックします。

まず、背景画像を削除しましょう。 「背景」タブをクリックします。 次に、画像アイコン をクリックします。 最後に、ゴミ箱アイコンをクリックして背景画像を削除します。

背景のグラデーションと色はそのままにしておきます。 次に、セクションに背景パターンを追加しましょう。 「背景パターン」アイコン をクリックします。 次に、プラスアイコンをクリックして背景パターンを追加します。

次の背景パターンを使用します。

緑色のチェック アイコンをクリックして、セクションの設定を保存します。 次に、行の列数を変更します。 このデザインでは、サークル カウンター モジュールに 5 つの列を用意します。

サークルモジュールの追加

列とセクションを作成したら、灰色のプラスアイコンをクリックしてサークルカウンターモジュールを追加します。

前と同様にモジュールを列に追加したら、コンテンツを追加します。 このデザインではパーセント記号を使用します。

サークルカウンターのスタイルを決める

ここで、カウンターのスタイルを開始します。

円グラフのスタイル設定

まずはカウンターの円の部分から始めます。 次の設定が使用されます。

サークルのデザイン設定:

• 円の色: #000000
• 円の背景色: #ac8961
• 円の背景の不透明度: 0.5

このデザインの背景の不透明度をどのように変更したかに注目してください。 同系色のベージュ色を使用しましたが、不透明度を高めてデザインに高級感を加えました。

タイトルテキストにスタイルを追加する

タイトル テキストには、レイアウト パック全体で使用されているのと同じフォント ファミリを使用します。 [タイトル テキスト] タブをクリックすると、設定を見つけることができます。 以下で、タイトル テキストのスタイルに使用された設定を見つけます。

タイトルテキストの設定:

• タイトルテキストのフォント: GFS Didot
• タイトルのフォントの太さ:太字
• タイトル文字色: #000000

数字のテキストのスタイルを設定する

数字のテキストには、このレイアウト パックのブランド内で使用されている色を思い起こさせる金色を使用します。 「数値テキスト」タブをクリックして、以下で使用する設定を入力します。

数値テキストのスタイル:

• 数字のフォント: GFS Didot
• 数字のテキストの色: #ac8961
• 数字のテキストサイズ: 48px

作業内容の保存と複製

これらすべての設定を入力したら、設定ボックスの下部にある緑色のチェック マークをクリックします。 これで私たちの労力はすべて省けます。 ここで、以前のスタイルで行ったようにモジュールを複製し、残りのデータを使用してコンテンツを編集できます。

また、サークル モジュールの上の別の行にいくつかのテキスト モジュールを追加して、データ ポイントにコンテキストを追加しました。

次のデザインへ！

デザイン 4 フィート ディビ ホステル

この投稿の 4 番目のデザインでは Divi Hostel Layout Pack を使用します。 具体的には、ランディング ページ テンプレート内のアメニティ セクションを変更します。

セクションからモジュールを削除

サークルモジュールを準備するには、セクション内にあるモジュールを削除する必要があります。

円モジュールには 4 つの列が必要なので、行構造をそのままにしておきます。

サークルモジュールの追加

灰色のプラスアイコンをクリックして、 Circle Counter Module を行の最初の列に追加します。

コンテンツの追加

モジュール設定の [コンテンツ] タブに移動したら、タイトルとデータ ポイントを追加します。

サークルカウンターモジュールの設計を開始する

[デザイン] タブに切り替えて、サークル カウンター モジュールのスタイルを開始します。 まずは円グラフから始めます。

サークルカウンターモジュールのサークルのスタイリング

次の設定を使用して、モジュールの円グラフのスタイルを設定します。

サークルのデザイン設定:

• サークルカラー： #008186
• 円の背景色: #d37643
• 円の背景の不透明度: 0.2

タイトルテキストのスタイル

次に、モジュールのタイトル テキストのスタイル設定に進みます。 次の設定を使用します。

タイトルテキストの設定:

• タイトルテキストのフォント: Manrope
• タイトルのフォントの太さ:ウルトラボールド
• タイトル文字色: #000000

数字のテキストスタイル

最後に、Circle Counter モジュール内で数値のスタイルを設定します。 使用する設定は次のとおりです。

数値テキストのスタイル:

• 数字のフォント:マンロープ
• 数字のフォント:通常
• 数字のテキストの色: #d37643
• 数字のテキストサイズ: 54px

枠線とパディングを追加する

サークル カウンター モジュールに面白みを加えるために、モジュールに境界線とスペースを追加してみましょう。 「サークルカウンター設定」の「デザイン」タブ内で、 「境界線」タブをクリックします。 そこで、使用する設定は次のとおりです。

境界線の設定:

• 枠線:すべての枠線
• 枠線の幅: 4px
• 枠線の色: #008186
• ボーダースタイル:ソリッド

ご覧のとおり、境界線がモジュールにくっつかないように、モジュールにパディングを追加する必要があります。 まず、 「間隔」タブをクリックします。 次に、すべての辺に25 ピクセルのパディングを使用します。

モジュールを複製して更新する

時間を節約するために、右クリック メニューを使用して、他の列の完成した作業を複製します。 完成したCircle Counter Moduleを右クリックし、コピーアイコン をクリックします。 ニーズに応じてコンテンツを更新します。

最後の例: Divi Toy Store

Divi の Circle Counter モジュールをスタイリングする最後の例では、Toy Store Layout Pack を使用します。 パック内のホーム レイアウト、具体的にはページ下部の CTA セクションを変更します。

セクションに行を追加

前の例とは異なり、このセクションに 2 つの行を追加します。 この行は、サークル カウンター モジュールを追加する場所になります。 新しい行を追加するには、行の上にマウスを置き、緑色のプラス アイコン をクリックします。 これを 2 回繰り返します。

次に、ボタン モジュールを 1 行目から 3 行目に移動します。 したがって、このセクション内に 3 行が表示されます。最初の行には CTA が含まれ、セクションは (今のところ) 空のままで、3 行目にはボタンが表示されます。

列構造の変更とモジュールの追加

次に、Circle Counter モジュールを収容する行の構造を変更しましょう。 これを行うには、緑色の行メニューのグリッド アイコンの上にマウスを置きます。 3 列構造を選択し、この行に 3 つのモジュールを追加します。

最初の列では、灰色のプラス アイコン をクリックし、次にサークル カウンター モジュールアイコン をクリックして、サークル カウンター モジュールを追加します。

サークルカウンターモジュールにコンテンツを追加

次に、コンテンツとデータをサークル カウンター モジュールに追加します。

サークルカウンターモジュールのスタイルを設定する

前の例と同様に、[デザイン] タブに移動して、タイトル テキスト、番号テキストなどのスタイルを設定します。 ただし、このチュートリアルを締めくくるために、少し異なることを行います。

サークルカウンターのスタイリング

次の設定でサークル カウンターのスタイルを設定することから始めます。

サークルのデザイン設定:

• サークルカラー: #557068
• 円の背景色: #ffffff
• 円の背景の不透明度: 1

円の背景の不透明度に透明度を使用していないことに注目してください。 このデザインでは、 「テキスト」タブをクリックし、テキストの色として「ライト」を選択します。 これにより、タイトルと番号が白、またはページの明るいフォントの色として設定した色になります。

テキストデザイン設定：

• テキストの配置:中央
• 文字の色:ライト

タイトルテキストにスタイルを追加する

タイトル テキストのスタイルには、Divi Toy Store Layout Pack で使用されているものと同じフォントを使用します。 使用する設定は次のとおりです。

タイトルテキストの設定:

• タイトルフォント:リブレ・バスカヴィル
• タイトルのフォントの太さ:太字

数字のテキストのスタイルを設定する

数値テキストには次の設定を使用します。

数値テキストの設定:

• 数字のフォント: Libre Baskerville
• 数字のフォントの太さ:太字
• 数字のテキストの色: #ffffff
• 数字のテキストサイズ: 72px

サークルカウンターモジュールにアクセントを追加する

このチュートリアルを終了するには、[コンテンツ] タブに戻ります。 次に、 [背景] タブをクリックして、サークル カウンター モジュールにアクセントを追加します。 次に、背景マスク アイコン に移動します。

サークルカウンターモジュールの背景マスクのスタイル設定

背景マスクについては、次の設定を使用して、サークル カウンター モジュールにアクセントを追加します。

背景マスクの設定:

• 背景マスク デザイン:ロック スタック
• マスクカラー： #eac989
• マスク変換:回転、反転
• マスクのアスペクト比:正方形

2 番目のモジュールでは、次の設定を使用します。

背景マスク設定 (モジュール 2):

• 背景マスク デザイン:ロック スタック
• マスクカラー： #354e7c
• マスク変換:反転
• マスクのアスペクト比:正方形

最後のモジュールでは、次の設定を使用します。

背景マスク設定 (モジュール 3):

• 背景マスク デザイン:ロック スタック
• マスクカラー: #f6c6c5
• マスク変換:水平方向に反転、回転、反転
• マスクのアスペクト比:正方形

すべてのアクセントを配置すると、最終製品は次のようになります。

最終的な考え

いくつかのガイダンスと優れたデータがあれば、ユーザーがサイト上のコンテンツを操作する方法を変えることができます。 サークル カウンター モジュールを使用すると、製品やサービスに関する情報を人目を引く方法で紹介しながら、ページに興味を加えることができます。 これらのチュートリアルをあなたのサイトに実装していただけることを楽しみにしています。 インスピレーションを受けた場合は、下のコメントセクションでお知らせください。