Diviを使用した大胆な全幅トグルモジュールでページを構成する

DiviのToggleModuleを使用すると、jQueryコードを追加することなく、クリック時に追加のコンテンツを表示できます。 アコーディオンモジュールと同様に、トグルモジュールは通常、よくある質問など、グループ化されたコンテンツを共有するために使用されます。 ただし、それらを他の目的にも使用できます。たとえば、ページを構造化するために使用できます。 このチュートリアルでは、全幅のトグルモジュールを使用して、クリック時に動作する簡単なページデザインを作成します。 私たちが扱っているデザインスタイルは大胆でクリーンです。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

大胆な全幅トグルレイアウトを無料でダウンロード

無料の太字の全幅トグルレイアウトに手を置くには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

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

再作成を始めましょう

新しいセクションを追加

間隔

新しいページを作成する（または既存のページを開く）ことから始めて、通常のセクションをページに追加します。 セクション設定で行う必要があるのは、間隔設定のデフォルトの上下のパディングをすべて削除することだけです。

• トップパディング：0px
• ボトムパディング：0px

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行設定を開き、サイズ設定を変更して、行がセクションコンテナの左側と右側に接触していることを確認します。 これは、このチュートリアルの重要なステップです。 これにより、このチュートリアルの後半で追加するトグルモジュールを全幅にすることができます。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：100％
• 最大幅：100％

間隔

行のデフォルトの上部と下部のパディングも削除します。 これにより、トグルモジュールとそれが配置されている行/列コンテナの間のすべてのスペースが削除されます。

• トップパディング：0px
• ボトムパディング：0px

トグルモジュールを列に追加

タイトルとコンテンツを挿入

モジュールの追加を開始する時が来ました！ この行に必要なモジュールは、トグルモジュールだけです。 タイトルボックスを使用してタイトルを追加し、共有するすべてのコンテンツを本文のコンテンツボックスに配置します。 コンテンツボックスに好きなものを自由に入れてください。 テキストから画像などまで。

州

閉じたトグル状態を使用していますが、開いたままにしておいてもかまいません。

• 状態：閉じる

デフォルトのアイコン設定

[デザイン]タブに移動し、それに応じてモジュールのアイコン設定を変更します。

• アイコンの色：＃570fff
• カスタムアイコンサイズを使用：YEs
• アイコンのフォントサイズ：6vw

ホバーアイコンの設定

ホバー時にアイコンの色を変更します。

• アイコンの色：＃f2f2f2

デフォルトのトグル設定

次に、閉じたトグルの背景色を変更します。

• 閉じたトグルの背景色：#ffffff

ホバートグル設定

また、ホバー時に色を変更します。

• 閉じたトグルの背景色：＃000000

タイトルテキスト設定

次のようにタイトルテキスト設定を変更して続行します。

• タイトルテキストの色：＃000000
• タイトル見出しレベル：H2
• タイトルフォント：Montserrat
• タイトルテキストの配置：左
• タイトルテキストサイズ：8vw（デスクトップ）、10vw（タブレットと電話）
• タイトル文字の間隔：-1vw（デスクトップ）、-0.5vw（タブレットと電話）
• タイトル行の高さ：0.7em

デフォルトの閉じたタイトルのテキスト設定

次に、閉じたタイトルテキスト設定に移動し、それに応じて設定を変更します。

• クローズドタイトルフォント：Montserrat
• クローズドタイトルテキストサイズ：18vw（デスクトップ）、16vw（タブレットと電話）
• クローズドタイトルラインの高さ：0.8em

閉じたタイトルのテキスト設定にカーソルを合わせる

ホバー時に閉じたタイトルのテキストの色を変更します。

• 閉じたタイトルのテキストの色：＃f4f4f4

本文の設定

本文のテキスト設定に移動し、そこでもいくつかの変更を加えます。

• ボディフォント：Fira Sans
• ボディフォントの太さ：軽い
• 本文の配置：正当化
• 本文のサイズ：1.2vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• ボディラインの高さ：2.1em

間隔

モジュールにカスタムの上部、下部、左側のパディングも追加します。

• トップパディング：10vw
• ボトムパディング：10vw
• 左パディング：6vw

国境

境界線設定でモジュールのデフォルトの境界線を削除して続行します。

• ボーダー幅：0px

コンテンツCSSを切り替えます

次のCSSコード行をデスクトップに追加して、トグルモジュールの設定を完了します。

width: 60vw;
border-left: 0.2vw solid black;
padding: 5vw 5vw 5vw 5vw;

タブレットと電話のCSSコード行の幅を変更します。

width: 85vw;

セクション全体を必要な回数だけクローンします

最初のセクション、行、およびトグルモジュールを完了すると、セクション全体を必要な回数だけ複製できます。 ページに表示するコンテンツの量によって異なります。

コンテンツの変更

重複する各トグルモジュールのすべてのトグルコンテンツを必ず変更してください。

アイコンの色を変更する

次に、各トグルモジュールを個別に開き、アイコンの色を変更します。 このチュートリアルで使用したものを以下に示します。

• アイコンの色1：＃ff9000
• アイコンの色2：＃00ffd4

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、Diviのトグルモジュールを使ってクリエイティブになる方法を紹介しました。 すなわち; それらを全幅にし、クリエイティブな方法でさまざまなセクションコンテンツを表示するために使用しました。 このチュートリアルでは、さまざまなコンテナを考慮に入れると、箱の外でDiviのモジュールを簡単に使用できることを示します。 チュートリアルのJSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。