のアイコン モジュールの使用方法を知りたいですか。 Divi カスタム アイコンを作成するには?
アイコン ボタンは、Web デザインの世界では定番となっています。 アイコンは簡潔で視覚的な行動を促すフレーズを提供します。アイコンはスペースをあまりとらないため、モバイル デバイスに最適です。 また、ユーザーがテキストを必要とせずに直感的に認識できるトグル ボタンまたはポップアップ ボタンとしても機能します。
今日のチュートリアルでは、アイコン ボタンをデザインする方法を紹介します。 Divi. でアイコンボタンを作成する Divi とてもシンプルで楽しいです。
アイコン モジュールを使用すると、数百のアイコンから選択し、無数の組み込みのデザイン オプションを使用できます。 Divi 思いつく限りあらゆるタイプのアイコン ボタンを作成できるビルダー。
この記事が、次のプロジェクトですばらしいアイコン ボタンの作成を開始するのに役立つことを願っています。
のは、始めましょう！
概要
このチュートリアルで作成するアイコン ボタンの概要を次に示します。
Divi Builder で新しいページを作成する
参照： Divi: 「全幅メニュー」モジュールのバスケットと検索アイコンをカスタマイズする方法
WordPress ダッシュボードから、 ページ>新規追加 新しいページを作成します。
わかりやすいタイトルをつけてクリック DiviBuilderを使用する
その後、クリック 構築を開始 (ゼロから構築)
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
Divi Iconsモジュールでアイコンボタンを作成
パート 1: アイコン ボタンの作成
まず、デフォルトの通常セクションに XNUMX 列の行を追加しましょう。
次に、新しいモジュールを追加します アイコン コラムへ。
アイコン、リンク URL、背景色
タブの下 コンテンツ アイコン モジュールの設定で、次を更新します。
- アイコン: 右矢印 (スクリーンショットを参照)
- アイコン リンク URL: # (今のところ単なるフィラー)
- 背景: #3e22ff
ボーダーとボーダー半径
タブの下 設計、次を更新します。
- 角丸：10px
- ボーダー幅：2px
- ボーダーカラー: #7272ff
シャドーボックス
- ボックス シャドウ: スクリーンショットを見る
- 影の色: rgba(62,34,255,0.48)
クリック可能なスペースとアイコン ボタンのサイズを一致させる
現在、アイコン モジュールは親コンテナー (または列) の全幅にまたがっています。 これは、クリック可能なスペースが実際のアイコン ボタンよりも大きいことを意味します。
クリック可能なスペースをアイコン ボタンのサイズに合わせるために、アイコン ボタンの幅と同じ最大幅をモジュールに与えることができます。
この例では、ボタンの合計幅は 94 ピクセルです。
[詳細設定]タブで、次のカスタムCSSをメイン要素に追加します。
max-width: 94px
結果は次のとおりです。
パート 2: 正方形のアイコン ボタンを作成する
正方形のアイコン ボタンを作成するには、作成した最初のアイコン ボタンを含む行を複製します。 これにより、操作する行に重複したボタンが表示されます。
アイコンを中央に配置したまま、アイコンの高さと幅を同じにします
アイコン モジュールで使用できるアイコンの大規模なコレクションには、Divi アイコンと Fontawesome アイコンの両方が含まれます。 ただし、すべてのアイコンの高さと幅が同じというわけではありません。 これにより、アイコン ボタンの正確な幅と高さを判断することが少し難しくなります。
ホバー時にアイコンに連動する完全に正方形のボタンを作成するために、カスタム CSS を追加して、アイコンの高さと幅を設定し、CSS Flex プロパティを使用してアイコンを中央に配置できます。
方法は次のとおりです。
まず、複製アイコンの設定を開きます。 次に、アイコン ピッカーから新しいアイコンでアイコンを更新します。
アイコン モジュールからパディングを削除します。 アイコンの高さと幅を設定するので、これは必要ありません。
詳細タブで、次のカスタム CSS を追加します。 アイコン要素 :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
これで、アイコン ボタンの高さと幅が 90 ピクセルになり、完全な正方形になります。 また、flex プロパティはアイコンをモジュールの中央に揃えます。 これにより、アイコン モジュールのアイコン サイズを簡単に更新できます。
このボタンを完成させるために、次のように背景のグラデーションと白い境界線の色を指定しましょう。
- 勾配停止:
- 0%: #3e22ff
- 100%: #ff2000
- 枠の色: #fff
これが最終結果です。
円形のアイコン ボタンを作成します。
アイコン ボタンが完全な正方形になったら、円形にするのは簡単です。 しかし、この簡単なトリックを紹介する前に、前の行を複製して、円形のアイコン ボタンの作成を開始しましょう。
新しい複製アイコンの設定をタブの下で開きます 設計、次のように境界線の半径 (または丸みを帯びた角) を更新します。
- 角丸：50%
このように、円形のアイコン ボタンができました。
デザインを少し変更するために、次のようにアイコン モジュールに別のアイコンと背景色を与えましょう。
- アイコン: スクリーンショットを参照
- 背景: #121212
結果は次のとおりです。
アイコン ボタンの水平メニューを作成する
アイコンを使用してアイコン メニューを作成するのが一般的な傾向です。アイコン メニューは通常、複数のボタンを並べて配置します。 これを行うには、flex プロパティを使用できます。
それを行う方法は次のとおりです。
まず、ページの列に新しい行を追加します。
ライン設定を開き、ガター幅を 1 に更新します。
- ガター幅: 1
次に、行内の列設定を開き、次のカスタム CSS をメインの列要素に追加します。
display:flex;
align-items:center;
新しいモジュールを追加する アイコン コラムへ。
タブの下 コンテンツ アイコン設定で、アイコンを選択し、アイコン リンク URL を追加します。
タブの下 設計、次を更新します。
- アイコンの色: #3e22ff
- アイコンサイズ: 40px
- 余白（左右）：10px
- ボーダー幅：2px
- 枠の色: #3e22ff
述べる ： マージンは、後でボタンを追加すると、隣接するボタン間にスペースを作成します。
タブの下 高機能、フィールドに次のカスタム CSS を追加します。 アイコン要素 (正方形のアイコン ボタンに対して前に行ったように):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
これで、新しいアイコン ボタンを追加するたびに、それらが並んで表示されます。 これを説明するために、既存のアイコン ボタンを XNUMX 回複製して、水平メニューに合計 XNUMX つのアイコン ボタンを作成してみましょう。
その後、必要に応じて戻ってアイコンを更新できます。
結果は次のとおりです。
アイコンボタンにホバー効果を追加
ホバー効果に言及せずにアイコン ボタンのデザインについて語ることは困難です。 彼らは無視するにはあまりにも楽しいです。
ホバー時の背景色とアイコン色の変更
ボタンの色の変更は、人気のある効果的なホバー効果です。 たとえば、ユーザーがボタンの上にカーソルを置いたときに、背景色とアイコンの色を同時に変更できます。
これを行うには、アイコン モジュールの設定を開き、背景色のホバー オプションを有効にして、ホバー状態に別の色を選択します。 次に、アイコンについても同じことができます。
この例では、背景色を白から青に、アイコンを青から白に変更します。
ホバー時にアイコンを変更
もう XNUMX つのホバー効果は、アイコンを完全に変更することです。 これを行うには、アイコン設定でアイコンを選択するときに、ホバー状態に別のアイコンを選択できます。
ホバー時のアイコン ボタン スケール
無視しにくいホバー効果は、スケーリング ホバー効果です。 これにより、アイコン ボタンが拡大または拡大されます。 このタイプのホバー効果を追加する最良の方法は、Divi の変換オプションを使用することです。 これにより、周囲の要素に影響を与えずにボタンを大きくすることができます。
アイコン ボタンにスケール ホバー効果を追加するには、アイコン設定を開き、のタブの下に 設計、変換オプションを探します。 ホバー オプションを有効にしてから、次の変換スケールをホバー状態に割り当てます。
- 変換 Y: 118%
- トランスフォーム X: 118%
これにより、ユーザーがカーソルを合わせたときにアイコン ボタンのサイズが 18% 拡大されます。
ホバー時にアイコン ボタンを回転
ホバリング オブジェクトの回転は、常に楽しいマイクロ インタラクションです。 ホバー時にアイコン ボタンを回転するには、変換回転オプションを使用できます。 でもその前に、アイコンだけが回転して見えるように、ボタンを円形にしてみましょう。
アイコンを円形にするには、ボタンが正方形であると仮定して、角丸の設定を 50 つの角すべてで XNUMX% に更新します。
次に、変換オプションを更新して、ホバー状態で次の変換回転値を含めます。
- 変換 回転 Z: 180 度
実際の 4 つのホバー効果を見てみましょう。
最終結果
チュートリアルの最終結果を見てみましょう。
ここに XNUMX つのアイコン ボタン (標準、正方形、および円形) があります。
そして、これはホバー効果のある水平アイコン ボタン メニューです。
今すぐDIVIをダウンロード!!!
まとめ
のアイコン ボタンをデザインする方法を知っている サイトのWeb が不可欠です。 そして、このチュートリアルで見たように、Divi ではそれほど難しくありません。 Divi のアイコン モジュールには、クリエイティブなアイコン ボタンのデザインへの扉を開く多数の組み込みオプションがあります。
この記事のテクニックが、独自のアイコン ボタン デザインの魔法を解くのに役立つことを願っています。
懸念や提案がある場合は、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
