円形カウンターを使用すると、XNUMX つの統計を美しく見栄えよく表示できます。 下にスクロールすると、数値がカウント ダウンし、円グラフがパーセンテージ値と一致するように徐々に塗りつぶされます。 XNUMX つのページに複数のサークル カウンター モジュールを組み合わせて、 訪問者 ビジネスや個人のスキルについて楽しく学べます。
ページに円形メーターモジュールを追加する方法
サークル カウンター モジュールをページに追加する前に、まず Divi Builder にアクセスする必要があります。 一度 Diviテーマ ウェブサイトにインストールすると、ボタンが表示されます Divi Builderを使用する 新しいページを作成するたびにパブリッシャーの上に表示されます。
このボタンをクリックすると、Divi Builderをアクティブ化できます。これにより、すべてのDiviBuilderモジュールにアクセスできるようになります。 次に、ボタンをクリックします ビジュアルビルダーを使用する ビジュアルモードでジェネレーターを起動します。
ボタンをクリックすることもできます ビジュアルビルダーを使用する WordPressダッシュボードにログインしている場合にWebサイトを閲覧するとき。
Visual Builderに入ったら、灰色のプラスボタンをクリックして、ページに新しいモジュールを追加できます。 新しいモジュールは、行内にのみ追加できます。 新しいページを開始する場合は、最初にページに行を追加することを忘れないでください。
モジュールのリストで円形メーターモジュールを見つけ、それをクリックしてページに追加します。 モジュールのリストは検索可能です。つまり、「サークルカウンター」という単語を入力し、[Enter]をクリックして、サークルカウンターモジュールを自動的に検索して追加することもできます。
モジュールが追加されると、モジュールオプションのリストが表示されます。 これらのオプションは、XNUMXつの主要なグループに分けられます。 中身 , 概念 et 高度な .
ケースを使用して、ケーススタディでプロジェクトの目標を表示します
サークルカウンターモジュールを使用する最良の方法のXNUMXつは、説明することです 統計 ケーススタディまたはポートフォリオアイテム用。
ユーザーがプロジェクトに含まれているサービスを知ることができるように、特定のプロジェクト機能または目標で各円形メーターを識別するだけです。 この例では、「サークルカウンター」モジュールを使用して、XNUMXつのプロジェクト目標を表示します。
下の画像でわかるように、ページの上部には、バーカウンターモジュールを使用したプロジェクトのXNUMXつの目的が含まれ、ページの下部には、カウンター番号モジュールを使用したケーススタディの結果が含まれています。 。
のは、始めましょう。
ビジュアルビルダーを使用して、全幅（1列）レイアウトの標準セクションを追加します。 次に、サークルカウンターモジュールを行に追加します。
次のようにサークルカウンターの設定を更新します。
コンテンツオプション
タイトル：アニメーション
番号：80
％記号：はい
バーの背景色：#e07a5e
デザインオプション
円の色：#e07a5e
テキストの色：濃い
タイトルのフォント：デフォルト
タイトル文字サイズ：26px
タイトルテキストの色：#405c60
フォント番号：デフォルト
サイズのフォントサイズ：46px
数値テキストの色：#405c60
設定を保存する
次に、サークルカウンターモジュールを2回複製し、各コピーを行の2列目と3列目にドラッグします。
デザイン要素は複製モジュールに転送されているため、円形メーターのタイトルと番号を更新するだけです。
それはそれです！
ページをご覧ください。
循環カウンタコンテンツオプション
[コンテンツ]タブには、テキスト、画像、アイコンなど、モジュールのすべてのコンテンツがあります。 制御するすべて 何 モジュールに表示されるのは常にこのタブです。
タイトル
サークルカウンターのタイトルを入力してください。 これは通常、表示している統計を表す単語です。 円グラフの番号の下に表示されます。
お名前
円形カウンターの番号を設定します。 100未満の数値を選択すると、入力した数値と同じ割合で円グラフが塗りつぶされます。 たとえば、数字の20を入力すると、円がアクセントカラーで20％塗りつぶされます。
パーセント記号
ここで、上記で定義した数の後にパーセント記号を追加するかどうかを選択できます。
バーの背景色
これにより、バーの塗りつぶしの色が変更されます。 塗りつぶしの色の量は、上で選択した「番号」によって制御されます。 数字の50と青色を選択すると、円は50％が青色で塗りつぶされます。
管理ラベル
これにより、ジェネレーターのモジュールラベルが変更され、簡単に識別できるようになります。 Visual BuilderでWireFrameビューを使用する場合、これらのラベルはDiviBuilderインターフェイスのモジュールブロックに表示されます。
循環カウンタの設計オプション
[デザイン]タブには、フォント、色、サイズ、間隔など、すべてのモジュールスタイルオプションがあります。 このタブでは、モジュールの外観を変更できます。 各Diviモジュールには、ほぼすべてを微調整するために使用できる設計設定の長いリストがあります。
円の色
これは、円の塗りつぶされていない部分（[コンテンツ]タブで定義されたバーの背景色で塗りつぶされていない負のスペース）に使用される色です。
円の色の不透明度
この設定を使用して、円の塗りつぶされた部分の不透明度を下げることができます。
テキストの色
ここで、テキストを明るくするか暗くするかを選択できます。 暗い背景で作業している場合は、テキストを明るくする必要があります。 背景が明るい場合、テキストは黒である必要があります。
タイトルフォント
ドロップダウンメニューから目的のフォントを選択して、テキストのフォントを変更できます。 Diviには、GoogleFontsを利用した数十のすばらしいフォントが付属しています。 デフォルトでは、Diviはページ上のすべてのテキストにOpenSansフォントを使用します。 太字、斜体、大文字、下線のオプションを使用して、テキストのスタイルをカスタマイズすることもできます。
タイトルフォントサイズ
ここで、タイトルテキストのサイズを調整できます。 間隔スライダーをドラッグしてテキストのサイズを拡大または縮小するか、スライダーの右側の入力フィールドに目的のテキストサイズの値を直接入力することができます。 入力フィールドはさまざまな測定単位をサポートします。つまり、サイズに応じて「px」または「em」を入力して、単位タイプを変更できます。
タイトルテキストの色
デフォルトでは、Diviのすべてのテキストの色は白または濃い灰色で表示されます。 タイトルのテキストの色を変更する場合は、このオプションを使用してカラーピッカーから好みの色を選択します。
タイトル文字の間隔
文字間隔は、各文字間の間隔に影響します。 タイトルテキストの各文字間のスペースを増やしたい場合は、間隔スライダーを使用してスペースを調整するか、スライダーの右側の入力フィールドに目的の間隔サイズを入力します。 入力フィールドはさまざまな測定単位をサポートします。つまり、サイズに応じて「px」または「em」を入力して、単位タイプを変更できます。
タイトルラインの高さ
行の高さは、タイトルテキストの各行の間のスペースに影響します。 各行間のスペースを増やしたい場合は、間隔スライダーを使用してスペースを調整するか、スライダーの右側の入力フィールドに目的のスペースサイズを入力します。 入力フィールドはさまざまな測定単位をサポートします。つまり、サイズに応じて「px」または「em」を入力して、単位タイプを変更できます。
警察番号
ドロップダウンメニューから目的のフォントを選択して、テキストのフォントを変更できます。 Diviには、GoogleFontsを利用した数十のすばらしいフォントが付属しています。 デフォルトでは、Diviはページ上のすべてのテキストにOpenSansフォントを使用します。 太字、斜体、大文字、下線のオプションを使用して、テキストのスタイルをカスタマイズすることもできます。
数字のフォントサイズ
ここで、番号付きテキストのサイズを調整できます。 間隔スライダーをドラッグしてテキストのサイズを拡大または縮小するか、スライダーの右側の入力フィールドに目的のテキストサイズの値を直接入力することができます。 入力フィールドはさまざまな測定単位をサポートします。つまり、サイズに応じて「px」または「em」を入力して、単位タイプを変更できます。
数値テキストの色
デフォルトでは、Diviのすべてのテキストの色は白または濃い灰色で表示されます。 テキストの色を変更する場合は、このオプションを使用してカラーピッカーから必要な色を選択します。
番号付き文字の間隔
文字間隔は、各文字間の間隔に影響します。 テキストの各文字間のスペースを増やしたい場合は、間隔スライダーを使用してスペースを調整するか、スライダーの右側の入力フィールドに目的の間隔サイズを入力します。 入力フィールドはさまざまな測定単位をサポートします。つまり、サイズに応じて「px」または「em」を入力して、単位タイプを変更できます。
ナンバーラインの高さ
行の高さは、デジタルテキストの各行の間のスペースに影響します。 各行間のスペースを増やしたい場合は、範囲スライダーを使用してスペースを調整するか、スライダーの右側の入力フィールドに必要なスペースのサイズを入力します。 入力フィールドはさまざまな測定単位をサポートします。つまり、サイズに応じて「px」または「em」を入力して、単位タイプを変更できます。
高度な円形カウンターオプション
[詳細設定]タブには、カスタムCSSやHTML属性など、経験豊富なWebデザイナーが役立つと思われるオプションがあります。 ここでは、モジュールの多くの要素のいずれかにカスタムCSSを適用できます。 カスタムCSSクラスとIDをモジュールに適用することもできます。これを使用して、子テーマのstyle.cssファイルでモジュールをカスタマイズできます。
CSS ID
このモジュールに使用するオプションのCSSIDを入力します。 IDを使用して、カスタムCSSスタイルを作成したり、ページの特定のセクションにリンクしたりできます。
CSSクラス
このモジュールで使用するオプションの CSS クラスを入力します。 CSS クラスを使用して、カスタム CSS スタイルを作成できます。 複数のクラスをスペースで区切って追加できます。 これらのクラスは、 Diviテーマ 子またはカスタム CSS で、Divi テーマ オプションまたは Divi Builder ページ設定を使用してページまたは Web サイトに追加します。
カスタムCSS
カスタムCSSは、モジュールおよびモジュールの内部要素に適用することもできます。 [カスタムCSS]セクションには、CSSを各要素に直接追加できるテキストフィールドがあります。 これらの設定のCSSエントリには、すでにスタイルタグが埋め込まれています。 したがって、セミコロンで区切ってCSSルールを入力するだけです。
可視
このオプションを使用すると、モジュールが表示されるデバイスを制御できます。 タブレット、スマートフォン、またはデスクトップでモジュールを個別に非アクティブ化することを選択できます。 これは、さまざまなデバイスでさまざまなmodを使用する場合、またはページから特定の要素を削除してモバイルデザインを簡素化する場合に役立ちます。
このチュートリアルは以上です。
