Diviの変換オプションを使用して画像マーカーを追加する方法

画像マーカーは、製品の特別な機能を紹介するための優れた方法です。 この投稿では、テキストモジュールと垂直仕切りを使用して画像マーカーを作成する方法を紹介します。 列内の変換設定のおかげで、画像マーカーは必要な場所に配置できます。 この手法の用途の広さを示すために、2つの異なる設計例を示します。 JSONファイルも無料でダウンロードできます！

それを手に入れよう！

プレビュー

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

例1

デスクトップ

モバイル

例2

デスクトップ

モバイル

画像マーカーのレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

例1を再作成する

最初のデザイン例の再現を始めましょう！

新しいセクションを追加

作業中のページに新しいセクションを追加します。 行を追加する前に、まずセクション設定を調整してください。

バックグラウンド

グラデーションを追加してから、画面ブレンドモードで画像を追加します。

• 背景：グラデーション+画像
• グラデーションカラー1：白#ffffff
• グラデーションカラー2：ミディアムグレー＃666666
• グラジエント開始位置：22％
• 背景画像のブレンド：画面

間隔

次のセクションのデフォルトの上下のパディングを削除します。

• 上下のパディング：0vw

可視性

セクションのオーバーフローを非表示にして、セクションの設定を完了します。

• 垂直および水平オーバーフロー：非表示

行＃1を追加

次に、3列の新しい行を追加します。

モジュールを追加する前に、行の設定を調整してください。

サイジング

まず、行のサイズを調整します。

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

カスタムCSS

次に、CSSコードの1行を行のメイン要素に追加します。 これにより、小さい画面サイズでも列を並べて表示できます。

• 主な要素CSS：表示：フレックス;

display: flex;

列1

変換翻訳

カスタム変換変換効果を最初の列に適用して、列を再配置します。 この手順は、後で画像マーカーモジュールを追加すると意味があります。 別のデザインでこの手法を使用している場合は、それに応じてこれらの値を変更する必要があります。

• 変換変換：x軸2vw、y軸16vw

Zインデックス

可視性タブに、より高いzインデックス値を追加します。

• Zインデックス：10

列2

変換翻訳

2番目の列に変換変換効果を適用します。

• 変換変換：x軸-11vw、y軸6vw

Zインデックス

zインデックス値を増やします。

• Zインデックス：10

列3

変換翻訳

3番目の列の変換変換値を変更します。

• 変換変換：x軸-11vw、y軸8vw

Zインデックス

そして、zインデックス値を変更します。

• Zインデックス：10

行＃2を追加

最初の行にモジュールを追加する前に、新しい1列の行を追加します。 画像マーカーを追加する前にこれを行って、設計中に画面で何が起こっているかを確認できるようにします。

サイジング

行のサイズ設定を変更します。

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

画像モジュールの追加

次に画像モジュールを追加します。

サイジング

画像モジュールに全幅を強制して、すべての画面サイズでデザインの応答性を維持します。

• 全幅を強制：はい

間隔

次に、画像を小さくするために左右のパディングを追加します。

• 左右のパディング：10vw

3つのテキストモジュールを追加します

ここで、最初の3列の行に戻り、3つのテキストモジュールを追加します。

ワイヤーフレームビューを使用すると、簡単にアクセスできます。

テキストモジュールを最初の列に追加し、それを2回複製して、複製を他の列にドラッグします。

列1のテキストモジュールの変更を開始します。選択したコンテンツを入力し、次のように設定を変更します。

バックグラウンド

黒の背景を追加します。

• 背景色：黒＃000000

文章

テキストのスタイルを設定します。

• テキストフォント：Aldrich
• テキストの色：白#ffffff
• テキストの配置：中央揃え
• 文字サイズ：
  • デスクトップ：1.2vw
  • タブレット：2vw
  • 電話：2.4vw
• 見出しフォントの太さ：太字

サイジング

テキストモジュールのサイズを調整します。

• 幅：
  • デスクトップ：17vw
  • タブレット：23vw
  • 電話番号：30vw
• モジュールの配置：中央

間隔

上部と下部のパディングを追加します。

• 上下のパディング：0.9vw

国境

境界線の設定を変更します。

• 丸みを帯びた角：すべての角で14px
• ボトムスタイル：ボトムボーダー
• 下の境界線の幅：4px
• 下の境界線の色：赤＃E02B20

ボックスシャドウ

ボックスシャドウを適用します。

• ボックスシャドウ：3番目のオプション

テキストスタイルを展開

時間を節約するには、extend styleオプションを使用して、セクション内の他のテキストモジュールのスタイルを設定します。

• まず、テキストモジュールの右端にある3つのドットをクリックして、[テキストスタイルの拡張]を選択します。
• 次に、ポップアップボックスで、[全体]をクリックし、メニューがドロップダウンしたら[このセクション]を選択します。
• 各テキストモジュールの内容を変更します。

3つのディバイダーモジュールを追加します

列1のテキストモジュールの下に仕切りを追加します。次に、それを2回複製し、複製を他の列にドラッグします。

列1の仕切りモジュールを開き、いくつかの変更を加えます。

ライン

仕切りを黒にします。

• 線の色：黒＃000000

サイジング

仕切りの厚さを調整します。

• 仕切りの重量：3px
• 幅：20vw
• モジュールの配置：中央

間隔

上マージンを調整します。

• トップマージン：7vw

変身

変換回転効果を追加して、仕切りを垂直にします。

• 変換回転：90度での最初のオプション

Divider設定を展開します

時間を節約し、スタイルの拡張オプションを使用します。

• まず、ディバイダーモジュールの右側にある3つのドットをクリックして、[ディバイダースタイルの拡張]を選択します。
• 次に、ポップアップボックスで、[全体]をクリックし、ドロップダウンメニューで[このセクション]を選択します。

デザインは次のようになります。

行＃3を追加

次の列構造を使用して、セクションに3番目の行を追加します。

ここで、モジュールを追加する前に、それに応じて行設定を調整します。

サイジング

サイズ設定を変更します。

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

列1

変身

最初の列に変換変換効果を適用します。

• 変換変換：y軸-8vw

Zインデックス

zインデックス値も調整します。

• Zインデックス：10

列2

変身

いくつかのカスタム変換変換設定を使用して、2番目の列を再配置します。

• 変換変換：x軸-17vw、y軸-14vw

Zインデックス

zインデックス値を調整します。

• Zインデックス：10

2つの分周器を追加します

各列に1つずつ、合計2つの仕切りを追加します。

仕切りスタイルを拡張する

仕切りを追加した後、前の仕切りを使用してスタイルを新しいものに拡張します。

• まず、上の最初の行の仕切りモジュールの3つのドットをクリックして、[仕切りスタイルの拡張]を選択します。
• 次に、ポップアップで[このページ全体]を選択します。

次に、3行目の最初の列の仕切りにいくつかの変更を加えます。

サイジング

余白を削除します。

• 上マージン：デフォルト

Zインデックス

zインデックスも変更します。

• Zインデックス：-2

2つのテキストモジュールを追加します

各列にテキストモジュールを追加します。

テキストスタイルを拡張する

新しいテキストモジュールを追加した後、最初の行のテキストモジュールからテキストスタイルを拡張します。

• まず、一番上の行の最初のテキストモジュールの3つのドットをクリックして、[テキストスタイルの拡張]を選択します。
• 次に、ポップアップで[このページ全体]を選択します。

次に、デザインに一致するようにテキストを変更します。 さらに、3行目の両方のテキストモジュールに上部マージンを追加します。

間隔

• トップマージン：7vw

例2を再作成する

次の例に移りましょう！

新しいセクションを追加

作業中のページに新しいセクションを追加します。 行を追加する前に、セクション設定を調整してください。

可視性

可視性設定でセクションのオーバーフローを非表示にします。

• 水平および垂直オーバーフロー：非表示

行＃1を追加

次に、5列の行を追加します。 モジュールを追加する前に、次のように行設定を調整します。

サイジング

まず、サイズ設定を変更します。

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

間隔

次に、間隔を調整します。

• 左右のパディング：19.5vw

カスタムCSS

行のメイン要素にCSSコードを1行追加して、列を並べて表示できるようにします。

• 主な要素CSS：表示：フレックス;

display: flex;

すべての列設定

次に、各列にいくつかの変更を加えます。

カスタムCSS

• 主な要素：幅：20％！重要;

width: 20% !important;

Zインデックス

zインデックス値も調整します。

• Zインデックス：10

5つのテキストモジュールを追加します

各列にテキストモジュールを追加します。

関連するコンテンツをコンテンツボックスに追加し、列1のテキストモジュールのテキストモジュール設定を変更して続行します。

バックグラウンド

背景色を追加します。

• 背景色：緑＃2f7713

文章

次のようにコンテンツのスタイルを設定します。

• テキストフォント：Allerta
• テキストの配置：中央
• テキストの色：白#ffffff
• 文字サイズ：
  • デスクトップ：1.3vw
  • タブレット：2vw
  • 電話：2.4vw
• テキスト行の高さ：2.9em

サイジング

サイズを調整します。

• 幅：
  • デスクトップ：6vw
  • タブレット：8vw
  • 電話番号：9vw
• モジュールの配置：中央

間隔

モジュールを正方形に変えるために間隔を調整します。

• 下マージン：-2vw
• 上下のパディング：1vw
• 左右のパディング：1vw

国境

境界線設定でテキストモジュールを円に変えます。

• 丸みを帯びた角：4辺すべてが50vw

ボックスシャドウ

ボックスシャドウも選択します。

• ボックスシャドウ：3番目のオプション

テキストスタイルを拡張する

行内のすべてのテキストモジュールの設定を調整するには、[スタイルの拡張]オプションを使用します。

• まず、テキストモジュールの右側にあるドットをクリックして、[テキストスタイルの拡張]を選択します。
• 次に、ポップアップで[全体]をクリックし、[このページ]を選択します。
• 最後に、各モジュールのコンテンツボックスのテキストを変更します。

デザインは次のようになります。

テキストモジュール2

2番目の円を黄色にします。

• 背景色：黄色＃f2e200

テキストモジュール3

3番目の円をオレンジ色にします。

• 背景色：オレンジ＃f2b100

テキストモジュール4

4番目の円をオレンジレッドにします。

• 背景色：オレンジレッド

テキストモジュール5

5番目のモジュールを紫色にします。

• 背景色：紫＃8e008c

5つのディバイダーモジュールを追加します

次に、各テキストモジュールの下に、仕切りモジュールを追加します。

それに応じて最初の仕切りに設定を調整します。

ライン

仕切りに色を付けます。

• 線の色：緑＃2f7713

サイジング

幅を調整します。

• 仕切りの幅：4px
• 幅：13vw

間隔

トップマージン値を追加します。

• トップマージン：
  • デスクトップ：7vw
  • タブレット+電話：5vw

変身

仕切りを回転させて垂直にします。

• 変換回転：最初のオプションで90度

仕切りの設定を拡張する

他の仕切りのスタイルを設定するには、extendstylesオプションを使用します。

• まず、仕切りモジュールの右側にあるドットをクリックして、「仕切りスタイルの拡張」を選択します。
• 次に、ポップアップで[全体]をクリックし、[このセクション]を選択します。

色を合わせる

仕切り2

2番目の仕切りを黄色にします。

• 線の色：黄色＃f2e200

仕切り3

3番目の仕切りをオレンジ色にします。

• 線の色：オレンジ＃f2b100

仕切り4

4番目の仕切りをオレンジレッドにします。

• 線の色：オレンジレッド＃ef4a21

仕切り5

5番目の仕切りを紫色にします。

• 線の色：紫＃8e008c

行＃2を追加

新しい1列の行を追加します。

イメージモジュールを追加する前に、行の設定を調整してください。

サイジング

まず、サイズを調整します。

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

可視性

次に、可視性。

• 水平および垂直オーバーフロー：目に見える

画像モジュールの追加

画像モジュールを追加し、ジュースの画像をアップロードします。

サイジング

画像に全幅を強制します。

• 全幅を強制：はい

行間隔

最後の仕上げの時間です。 行＃1の設定を再度開き、上下の余白を追加します。

• トップマージン：7vw
• 下マージン：
  • デスクトップ：-24vw
  • タブレット：-31vw
  • 電話番号：-35vw

プレビュー

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

例1

デスクトップ

モバイル

例2

デスクトップ

モバイル

おしまいです！

この投稿では、2つの異なる画像マーカーデザインを作成する方法を紹介しました。 列オプションを使用して、テキストの列と仕切りを一緒に保ちました。 これらのデザインが、独自の画像マーカーデザインを作成するきっかけになることを願っています。 各画像マーカーをより適切に制御するために、列内で変換変換オプションを使用することを忘れないでください。 ご不明な点がございましたら、下のコメント欄にコメントを残してください！