テキストモジュールを使用した独自のDiviボタンデザインの作成

テキストモジュールを使用して独自のDiviボタンのデザインを作成することは、すでに頭を悩ませているかもしれません。 もしそうなら、あなたはあなたが知っているよりも創造的です！ Diviのホバーオプションのリリースにより、すべてのモジュールをクリック可能にすることができます。 これにより、任意のモジュール（すべての組み込み設計設定を含む）をクリック可能なCTAまたはボタンとして使用するための扉が開かれます。 たとえば、テキストモジュールを使用すると、さまざまな形式でモジュールに必要な数のテキストを追加できます。 さらに、テキストモジュールには、独自の形状を作成するために丸みを帯びた角をカスタマイズするための堅牢な設計オプションもいくつかあります。

このチュートリアルでは、テキストモジュールを使用して可能ないくつかのユニークなDiviボタンのデザインを探ります。

始めましょう！

スニークピーク

これは、テキストモジュールを使用して簡単に作成するボタンデザインの例です。

これは2行にテキストがあるボタンです…

これはリストアイテムを使用したボタンです…

これはクリエイティブコーナーを使ったボタンです…

テキストモジュールを使用した独自のDiviボタンデザインの作成

私たちのYoutubeチャンネルを購読する

＃1複数行のテキストを含むボタンの作成

前述のように、テキストモジュールでは無制限の量のテキストを使用できるため、複数の形式のテキストモジュールを使用して、わずか2行のテキストでボタンを簡単に作成できます。 wysiwygまたはテキストエディタを使用して、段落テキスト、ヘッダー、リンク、リスト、およびブロック引用符を追加できます。 また、テキストモジュールの最も優れている点は、ビジュアルビルダーのデザイン設定に組み込まれているタブUIを使用して、これらの各テキスト形式を個別にターゲットにしてスタイルを設定できることです。

これにより、複数行のテキストを追加してから、テキストの各行を個別にスタイル設定して、独自のボタンレイアウトを作成することが非常に簡単になります。

これは、テキストモジュールを複数行のテキストを持つボタンとして設定する方法の簡単な例です。

まだ行っていない場合は、新しいページを作成し、ビジュアルビルダーを展開します。 「最初から構築」オプションを選択します。 次に、新しいセクションを1列の行で作成します。 次に、テキストモジュールを行に追加します。

テキストコンテンツの場合は、[html]タブを使用して、次のように入力します。

<h3>Contact Us</h3>
<h4>WE CAN HELP</h4>

モジュールに追加できるさまざまな背景スタイルがたくさんありますが、この例では、単純なグラデーションの背景を追加します。

背景グラデーションの左の色：＃FEE140
背景のグラデーションの正しい色：＃FA709A

次に、[デザイン]タブに移動し、[見出し]タブのUIを使用して、h3およびh4の見出しタグのスタイルを次のように設定します。

見出し3フォントの太さ：超太字
見出し3フォントスタイル：TT
見出し3のテキストの色：#ffffff
見出し4フォントスタイル：TT
見出し4テキストの色：#ffffff
見出し4テキストサイズ：16px

今、私たちがする必要があるのは、ボタンのように見えるようにテキストモジュールのサイズを設定することです。 これを行うには、以下を更新します。

幅：230px
カスタムパディング：1em上、0.5em下、2em左、2em右

Diviの新しいホバーオプションのリリース以降、すべてのモジュールがボタンのようにクリック可能になりました。 これを行うには、[コンテンツ]タブに戻り、モジュールリンクのURLを入力します。

これが最終結果です。

ホバー効果として、ボタン全体にスイープするボックスシャドウを追加し、最終的に新しい背景色を適用してグラデーションを置き換えることができます。

これを行うには、テキストモジュールの設定を開き、以下を更新します。

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：0px（デフォルト）、230px（ホバー）
ボックスシャドウの垂直位置：0px
影の色：rgba（0,0,0,0）（デフォルト）、＃fee140（ホバー）

ホバーすると次のようになります。

＃2リストアイテムボタンの作成

テキストモジュールを使用すると、コンテンツにリスト（順序なしまたは順序付き）を追加できるため、この機能を利用してリストボタンを作成できます。 基本的に、あなたがする必要があるのは、コンテンツボックス内に1つのリスト要素を持つリストを作成することだけです。 次に、リストアイテムを見出しタグでラップして、リストの箇条書きアイテムと見出しテキストを別々にスタイル設定できるようにします。

まだ行っていない場合は、新しいページを作成し、ビジュアルビルダーを展開します。 「最初から構築」オプションを選択します。 次に、新しいセクションを1列の行で作成します。 次に、テキストモジュールを行に追加します。

次に、コンテンツ設定のテキストタブに次のhtmlを追加します。

<ol><li><h3>Contact Us</h3></li></ol>

リストアイテムの箇条書き/番号をテキストとは別にスタイル設定できるように、リストアイテムのテキストを見出しタグで囲むことが重要です。

次に、[デザイン]タブにジャンプして、テキストモジュールをボタンとしてデザインします。

テキスト設定カテゴリで、[順序付きリスト]タブを選択し、以下を更新します。

注文リストフォント：Exo 2
注文リストフォントの太さ：軽い
順序付きリストのテキストの色：＃000000
注文リストのテキストサイズ：20px
順序付きリストの文字間隔：5px
順序付きリストスタイルタイプ：decimal-leading-zero
順序付きリストスタイルの位置：外側
注文リストアイテムのインデント：2em

[見出しテキスト]カテゴリで、[H3]タブをクリックし、以下を更新します。

見出し3フォント：Exo 2
見出し3フォントの太さ：半太字
見出し3フォントスタイル：TT
見出し3テキストの色：＃0c71c3
見出し3テキストサイズ：26px
見出し3行の高さ：0.3em

次に、モジュールの幅を変更し、ボタンのように見えるように境界線と間隔を指定します。

（モジュールの）幅：262px
モジュールの位置合わせ：中央
カスタムパディング：上2em、下0px、左2em、右2em
丸みを帯びた角：10px2em
ボーダー幅：1px
ボーダーカラー：＃000000
ボーダースタイル：ソリッド

また、モジュールへのリンクを、選択した指定のURLに追加することを忘れないでください。

これが最終的なデザインです。

ユニークなリストボタンのデザインについては、新しいリストスタイルタイプ（Upper Romanなど）を自由に探索してください。

＃3クリエイティブコーナー（葉のような）を備えたボタンの作成

この次のデザインでは、テキストモジュール内の角の丸いデザイン設定を利用します。 基本的な考え方は、さまざまなコーナー半径値を設定して、独自の形状のボタンを作成することです。 この例では、葉のボタンのように見えるようにモジュールを形作ります。

まだ行っていない場合は、新しいページを作成し、ビジュアルビルダーを展開します。 「最初から構築」オプションを選択します。 次に、新しいセクションを1列の行で作成します。 次に、テキストモジュールを行に追加します。

テキストモジュール設定を開き、コンテンツボックスのテキストタブに次のhtmlを入力します。

<h3>grow</h3>
<h4>with us</h4>

これにより、ボタンのテキストを2行に配置して（垂直方向の幅を縮小）、個別にスタイルを設定できます。

次に、より「葉のような」色のグラデーション背景を追加します。

背景のグラデーションの左の色：＃7cda24
背景のグラデーションの右の色：＃26e051
グラデーション方向：90度

次に、デザイン設定にジャンプして、テキストを中央に配置し、見出しタグのスタイルを設定しましょう。 h3見出しを設計するには、h3タブを選択し、h4見出しを設計するにはh4タブを選択する必要があります。

テキストの向き：中央
見出し3フォント：Oswald
見出し3フォントの太さ：軽い
見出し3フォントスタイル：TT
見出し3のテキストの色：#ffffff
見出し3テキストサイズ：27px
見出し4フォント：Oswald
見出し4フォントスタイル：TT
見出し4テキストの色：#ffffff

デザインの更新を続けて、テキストモジュールにボタンの適切な幅と間隔を与えます。

幅：178px
モジュールの位置合わせ：中央
カスタムパディング：上2em、下2em、左1em、右1em

最後に、カスタムの丸みを帯びた角を追加してモジュールに葉の形状を与え、次にボックスシャドウを追加して葉をより生き生きとしたものにすることができます。 これを行うには、以下を更新します。

まず、角の丸いオプションのロックを解除して、各角に個別の値を割り当てることができるようにします。

左上隅：100px
右下隅：100px

次に、ボックスシャドウを追加します…

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：25px
ボックスシャドウの垂直位置：-4px
ボックスシャドウスプレッド強度：-12px
影の色：rgba（0,0,0,0.25）

モジュールが目的の場所にリンクするように、モジュールリンクURLを追加することを忘れないでください。

これが最終的なデザインです。

ホバー効果の場合、角の丸い値を交互に変更して、ボタンのデザインをホバーの反対方向に配置できます。

そして、これがホバー効果の様子です。

最終的な考え

Diviでウェブサイトをデザインすることになると、たまに箱の外で考えるのはいつでもいいことです。 うまくいけば、このチュートリアルは、テキストモジュールを使用して新しく創造的なdiviボタンのデザインを考えるのに役立つでしょう。 実際、さらに多くの設計オプションについては、他のモジュール（Blurbモジュールなど）を検討することをお勧めします。

コメントでお返事をお待ちしております。

乾杯！