Diviチュートリアル：ナンバーカウンターモジュールの使い方

のナンバーカウンターモジュールワードプレスのテーマ Divi は、楽しく魅力的な方法で数字を表示する優れた方法です。このモジュールは、一般的に表示するために使用されます統計あなたやあなたのビジネスについて。たとえば、Facebook で顧客数やフォロワー数を表示することは、社会的証拠を示す優れた方法です。

モジュールを追加する方法Diviのカウンター番号

ページにカウンターモジュールを追加する前に、まず Divi Builder にジャンプする必要があります。一度 Diviテーマウェブサイトにインストールすると、ボタンが表示されます Divi Builderを使用する 新しいページを作成するときはいつでも、投稿エディタの上にあります。このボタンをクリックしてDiviBuilderをアクティブにし、すべてのDiviBuilderモジュールにアクセスします。次に、ボタンをクリックします ビジュアルビルダーを使用する ジェネレータをビジュアルモードで起動します。ボタンをクリックすることもできます ビジュアルビルダーを使用する WordPressダッシュボードに接続している場合、フォアグラウンドでWebサイトを閲覧するとき。

Visual Builderに入ったら、灰色のプラスボタンをクリックして、ページに新しいモジュールを追加できます。新しいモジュールは、行内にのみ追加できます。新しいページを開始する場合は、最初にページに行を追加することを忘れないでください。

モジュールのリストで番号カウンターモジュールを見つけ、それをクリックしてページに追加します。モジュールのリストは検索可能です。つまり、「番号カウンター」という単語を入力してから「Enter」をクリックすると、番号カウンターモジュールが自動的に検索されて追加されます。モジュールが追加されると、モジュールオプションリストが表示されます。これらのオプションは、XNUMXつの主要なグループに分けられます。中身 , 概念 et 高度な .

使用例：デジタルカウンターモジュールを使用してプロジェクトの結果を表示する

number counter モジュールを使用する優れた方法は、統計ケーススタディのために。ユーザーがプロジェクトの成功を簡単に確認できるように、各カウンターに番号を付けるだけです。この例では、デジタルカウンターモジュールを使用して XNUMX つのプロジェクト結果を表示しています。

ご覧のとおり、ページの上部には、モジュール「」を使用したプロジェクトのXNUMXつの目的が含まれています。 バーカウンター また、ページの下部には、デジタルカウンターモジュールを使用したケーススタディの結果が含まれています。

デジタルモジュールを使用したケーススタディの結果を示すページのセクションでは、専用のセクションを使用する必要があります。 Visual Builderを使用して、ページに特殊なセクションを追加し、次のレイアウトを選択します。

セクションの右側に1列のレイアウトを選択し、ケーススタディの結果に必要なタイトルとテキストを入力します。

セクションの右側の2列レイアウトのすぐ下に1列のレイアウトを挿入します。

次に、最初の数値カウンターモジュールを左の列に追加します。

番号カウンターのパラメーターを次のように更新します。

コンテンツオプション

タイトル：新しい訪問者
番号：54210
サインパーセンテージ：OFF

デザインオプション

テキストの色：濃い
タイトルのフォント：デフォルト
タイトル文字サイズ：20px
タイトルテキストの色：＃405c60
タイトル行の高さ：1em
文字数：デフォルト、太字
文字数：60px
番号テキストの色：＃e07a5e
番号行の高さ：72px

設定を保存する

Number Countersモジュールを複製し、隣接する右の列にドラッグして、TitleおよびNumberオプションを更新します。

2つの数値カウンターモジュールを含む行を複製して、さらに2つの数値カウンターが下に表示されるようにします。

次に、それらのタイトルと番号のオプションを更新します。これで、XNUMXつのフルナンバーカウンターがすべて揃いました。

専用セクションの左側の列/側面に667x320の画像を追加することを忘れないでください。

終わりです！このケーススタディページの番号カウンターとバーカウンターの組み合わせは、コンテンツを本当に魅力的なものにします。

デジタルカウンターコンテンツオプション

[コンテンツ]タブには、テキスト、画像、アイコンなど、モジュールのすべてのコンテンツ要素があります。制御するすべて何モジュールに表示されるのは、常にこのタブにあります。

タイトル

カウンターのタイトルを入力します。これは、小さいテキストの番号の下に表示されます。

お名前

これは、カウンターがカウントする数です。ページを下にスクロールしてカウンターに到達すると、ここで設定した数に達するまで、数は0から急速にカウントされます。ここに配置できるのは数値のみです。

パーセント記号

ここで、上記で定義した数の後にパーセント記号を追加するかどうかを選択できます。

背景色

モジュールのカスタム背景色を定義するか、空白のままにしてデフォルトの色を使用します。

背景画像

設定されている場合、この画像はこのモジュールの背景として使用されます。背景画像を削除するには、設定フィールドからURLを削除するだけです。背景画像は背景色の上に表示されます。つまり、背景画像が適用されたときに背景色は表示されません。

管理ラベル

これにより、コンストラクターのモジュールラベルが変更され、簡単に識別できるようになります。 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」を入力して、単位タイプを変更できます。

国境を使う

このオプションを有効にすると、モジュールの周囲に境界線が配置されます。この境界線は、次の条件付きパラメーターを使用してカスタマイズできます。

国境の色

このオプションは、境界線の色に影響します。カラーピッカーからカスタムカラーを選択して、ボーダーに適用します。

ボーダーの幅

デフォルトでは、境界線の幅は1ピクセルです。この値を増やすには、範囲スライダーをドラッグするか、スライダーの右側の入力フィールドにカスタム値を入力します。カスタム測定単位がサポートされています。つまり、デフォルトの単位を「px」からem、vh、vwなどの他の単位に変更できます。

ボーダースタイル

ボーダーは、ソリッド、ドット、ドット、ダブル、グルーブ、リッジ、オーバーレイ、スタートのXNUMXつの異なるスタイルをサポートしています。ドロップダウンメニューから目的のスタイルを選択して、境界線に適用します。

カスタムパディング

インフィルは、モジュールの端とその内部要素の間に、モジュール内に追加されるスペースです。モジュールのXNUMXつの側面のいずれかにカスタムパディング値を追加できます。カスタムマージンを削除するには、入力フィールドから追加値を削除します。デフォルトでは、これらの値はピクセル単位で測定されますが、入力フィールドにカスタム測定単位を入力できます。

高度な番号カウンターオプション

[詳細設定]タブには、カスタムCSSやHTML属性など、経験豊富なWebデザイナーが役立つと思われるオプションがあります。ここでは、モジュールの多くの要素のいずれかにカスタムCSSを適用できます。カスタムCSSクラスとIDをモジュールに適用することもできます。これを使用して、子テーマのstyle.cssファイルでモジュールをカスタマイズできます。

CSS ID

このモジュールに使用するオプションのCSSIDを入力します。 IDを使用して、カスタムCSSスタイルを作成したり、ページの特定のセクションにリンクしたりできます。

CSSクラス

このモジュールに使用するオプションのCSSクラスを入力します。 CSSクラスを使用して、カスタムCSSスタイルを作成できます。スペースで区切って、複数のクラスを追加できます。これらのクラスは、Diviの子テーマ、またはDiviテーマオプションまたはDiviBuilderページ設定を使用してページまたはWebサイトに追加するカスタムCSSスタイルシートで使用できます。

カスタムCSS

カスタムCSSは、モジュールおよびモジュールの内部に適用することもできます。 [カスタムCSS]セクションには、カスタムCSSスタイルシートを各要素に直接追加できるテキストフィールドがあります。これらの設定のCSSエントリは、すでにスタイルタグでラップされています。したがって、CSSルールをセミコロンで区切って入力するだけです。

可視

このオプションを使用すると、モジュールが表示されるデバイスを制御できます。タブレット、スマートフォン、またはデスクトップでモジュールを個別に非アクティブ化することを選択できます。これは、さまざまなデバイスでさまざまなmodを使用する場合、またはページから特定の要素を削除してモバイルデザインを簡素化する場合に役立ちます。

[vc_row center_row = "yes"] [vc_column width = "1/2"] [vcex_button target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700" style = "flat" custom_background = "＃18b69d" custom_hover_background = "＃118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fafa-download"] DIVIテーマをダウンロード[/ vcex_button] [/ width_column] [»vc_column] [» vc_column] 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center "font_family =" Raleway "font_weight =" 700″ style = "flat" custom_background = "＃c4226e" custom_hover_background = "＃8d184f" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fafa-download"]ダウンロードTEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]