Diviで拡張可能なコンテンツを使用して「付箋」を作成する
公開: 2019-06-08Diviの組み込みオプションを使用すると、Webサイトでサービスを紹介したりステップを処理したりする方法がたくさんあります。 インスピレーションを得るために、Diviの組み込みオプションのみを使用して、拡張可能なコンテンツで付箋を作成する方法を紹介します。 これは、訪問者がインタラクションをトリガーするとすぐに追加のコンテンツを共有するための楽しい方法です。 このデザインは、作業中の任意のWebサイトに使用でき、JSONファイルも無料でダウンロードできます。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
付箋のレイアウトを無料でダウンロード
無料の付箋のレイアウトに手を置くには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
再作成を始めましょう！
私たちのYoutubeチャンネルを購読する
新しい通常のセクションを追加する
最初に行う必要があるのは、作業中のページに新しい通常のセクションを追加することです。
新しい行を追加する
カラム構造
次の列構造を使用して、新しい行も追加して続行します。
移行期間
モジュールをまだ追加せずに、行設定を開きます。 [詳細設定]タブでトランジションの期間を変更することで、インスタントトランジションを作成しています。
- 移行時間：0ms
テキストモジュール＃1を列1に追加します
コンテンツを追加する
モジュールの追加を開始する時が来ました！ 行の最初の列に新しいテキストモジュールを追加し、付箋デザインに表示するH2コンテンツを入力します。
背景色
次に、背景設定に移動し、それに応じて背景色を変更します。
- 背景色：＃ffd800
H2テキスト設定
H2テキスト設定に移動し、そこでもいくつかの変更を加えます。
- 見出し2フォント：インディーフラワー
- 見出し2テキストの配置：中央
- 見出し2のテキストの色：＃3a0cf2
- 見出し2テキストサイズ：40px
間隔
付箋のルックアンドフィールを作成するために、モジュールにいくつかのカスタムパディング値を追加します。
- トップパディング：150px
- ボトムパディング：150px
- 左パディング：20px
- 右パディング：20px
国境
また、次の設定を使用して上部の境界線を追加しています。
- 上枠幅：20px
- 上枠の色：＃ffc300
Dividerモジュールを列1に追加します
可視性
最初の列で必要な次のモジュールは、Dividerモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
色
次に、[デザイン]タブに移動し、仕切りの色を変更します。
- 色：＃ffc300
スタイル
仕切りのスタイル設定も変更します。
- 仕切りスタイル：破線
サイジング
また、サイズ設定も変更してください。
- 仕切りの重量：5px
- 高さ：0px
間隔
前のモジュールとこのモジュールの間にスペースを作成するために、上部マージンを追加しています。
- トップマージン：150px
変換回転
この投稿のプレビューでわかるように、水平方向の仕切りではなく、垂直方向の仕切りを作成しようとしています。 これを実現するために、Dividerモジュールの変換回転設定の左側の値を変更します。
- 左：270度
可視性
また、Dividerモジュールがテキストモジュールの下に表示されることを確認する必要があります。 これを行うには、[詳細設定]タブの仕切りのzインデックスを減らします。
- Zインデックス：-99
テキストモジュール＃2を列1に追加します
コンテンツボックスに記号を追加
最初の列に必要な次の最後のモジュールは、別のテキストモジュールです。 コンテンツボックスに「●」文字を追加します。
テキスト設定
次に、[デザイン]タブに移動し、テキスト設定を変更します。
- テキストフォント：Open Sans
- テキストの色：＃3a0cf2
- テキストサイズ：100px
- テキスト行の高さ：1em
- テキストの向き：中央
間隔
次に負の上部マージンを追加して、目的の重なりを作成します。
- トップマージン：-50px
テキストモジュール＃3を列2に追加します
H3コンテンツを追加する
2番目の列に移りましょう。 ここで、最初に必要なモジュールはテキストモジュールです。 お好みのH3コンテンツを入力してください。
H3テキスト設定
[デザイン]タブに移動し、それに応じてH3テキスト設定を変更します。
- 見出し3フォント：インディーフラワー
- 見出し3テキストの色：＃3a0cf2
- 見出し3テキストサイズ：30px
間隔
次に、カスタムの上部マージンを追加します。
- 上マージン：400px（デスクトップ）、200px（タブレット）、150px（電話）
テキストモジュール＃4を列2に追加します
コンテンツを追加する
次のモジュール、つまり別のテキストモジュールに進みます。 選択した段落の内容を入力します。
テキスト設定
次に、[デザイン]タブに移動し、テキスト設定を変更します。
- テキストフォント：Open Sans
- テキストサイズ：13px
- テキスト行の高さ：2em
サイジング
次に、モジュールの幅を変更します。
- 幅：78％
間隔
そして、上下の余白を追加します。
- トップマージン：10px
- 下マージン：50px
ボタンモジュールを列2に追加
コピーを追加
2番目の列に必要な最後のモジュールはボタンモジュールです。 お好みのコピーを入力してください。
ボタンの設定
次に、[デザイン]タブに移動し、ボタンのスタイルを設定します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：20px
- ボタンのテキストの色：＃3a0cf2
- ボタンの背景色：＃ffd800
- ボタンの境界線の幅：0px
- ボタンの境界線半径：0px
- ボタンフォント：Abhaya Libre
間隔
いくつかのカスタムパディング値も追加します。
- トップパディング：20px
- ボトムパディング：20px
- 左パディング：60px
- 右パディング：60px
行を2回クローンする
すべてのモジュールの追加が完了したら、先に進んで行のクローンを2回作成できます。
重複する行＃1を変更する
テキストモジュール＃1の背景色を変更する
最初の複製から始めて、両方の複製のカラーパレットを変更します。 列1の最初のテキストモジュールを開き、背景色を変更します。
- 背景色：＃00ffee
テキストモジュール＃1の上部の境界線の色を変更する
上枠の色も変更します。
- 上枠の色：＃00e0c2
仕切りの色を変更する
次に、仕切りに次のカラーコードを使用します。
- 仕切りの色：＃00e0c2
ボタンモジュールの背景色を変更する
そして、ボタンの背景色を変更します。
- ボタンの背景色：＃00ffee
重複する行＃2を変更する
テキストモジュール＃1の背景色を変更する
2番目の重複行に移動し、列1の最初のテキストモジュールを開いて、背景色を変更します。
- 背景色：＃42ff21
テキストモジュール＃1の上部の境界線の色を変更する
上枠の色も変更します。
- 上枠の色：＃1de524
仕切りの色を変更する
次に、ディバイダーモジュールを開き、次のディバイダーカラーを使用します。
- 仕切りの色：＃1de524
ボタンモジュールの背景色を変更する
最後になりましたが、ボタンの背景色を変更します。
- ボタンの背景色：＃42ff21
拡張可能なコンテンツを作成する
すべての行にデフォルトの行サイズを追加
セクションのすべての行をカスタマイズしたので、次はコンテンツを展開可能にします。 これを行うには、各行を開き、次の最大高さを適用します。
- 最大高さ：397px
すべての行にホバー行のサイズを追加
ホバーの最大高さを「100％」に変更します。 これにより、行が再び初期サイズを占めるようになります。
- 最大高さ：100％
すべての行のオーバーフローを変更する
各行のオーバーフローも非表示にして、完了です。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviの組み込みオプションのみを使用して、拡張可能なメモで付箋を作成する方法を示しました。 これはあなたのウェブサイトでサービスを紹介するための創造的で遊び心のある方法です。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。