Diviで特大の文字を背景マスクに変える（無料ダウンロード！）

公開: 2019-06-13

背景マスクに関しては、人々はDiviの外部で画像編集ソフトウェアを使用し、作成しているWebサイトに画像をアップロードする傾向があります。それはあなたのウェブサイトをカスタマイズしてパーソナライズするための確かな方法ですが、それは必ずしも行く唯一の方法ではありません。さまざまなデザイン要素とフィルターオプションをクリエイティブに組み合わせることで、Divi自体の中に背景マスクを作成することもできます。それがまさにこの投稿でやろうとしていることです！特大の文字を、さまざまな画面サイズで見栄えのする背景マスクに変換します。このチュートリアルが、特大のキャラクターとDiviの組み込みオプションを使用して独自のデザインを作成するきっかけになることを願っています。

それを手に入れよう！

プレビュー

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

例1

特大のキャラクター

例2

特大のキャラクター

ヒーローセクションを無料でダウンロード

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

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

無料でダウンロード

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

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

例1を再作成する

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

特大のキャラクター

新しいセクションを追加

背景色

最初の例から始めましょう！新しい通常のセクションを新しいページまたは既存のページに追加し、そのセクションに背景を追加します。

背景色：＃000000

特大のキャラクター

間隔

次に、間隔設定に移動し、デフォルトの上下のパディングをすべて削除します。

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

特大のキャラクター

オーバーフロー

[詳細設定]タブに移動して、セクションのオーバーフローを非表示にします。これは、このチュートリアルの後半で、特大の文字を含むテキストモジュールを再配置するときに重要になります。

水平オーバーフロー：非表示
垂直オーバーフロー：非表示

特大のキャラクター

行＃1を追加

カラム構造

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

特大のキャラクター

列1の背景色

モジュールをまだ追加せずに、行設定を開き、最初の列に背景色を追加します。

列1の背景色：＃848484

特大のキャラクター

列1の背景画像

背景色も追加します。背景色と画像を組み合わせるために、ブレンドモードを適用します。

列の背景画像のブレンド：乗算

特大のキャラクター

サイジング

[デザイン]タブに移動し、次のサイズ設定を適用して、行が画面の幅全体を占めるようにします。

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

特大のキャラクター

間隔

また、行のすべてのカスタムの上部と下部のパディングを削除しています。

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

特大のキャラクター

列にテキストモジュールを追加

コンテンツボックスに文字を追加

特大の文字を含むテキストモジュールを追加する時が来ました。コンテンツボックスに文字「o」を追加します。

特大のキャラクター

背景色

続行して背景設定に移動し、黒の背景色を追加します。

背景色：＃000000

特大のキャラクター

テキスト設定

デザインタブに移動し、テキスト設定を変更します。テキストサイズに高い値を使用していることに注目してください。

テキストフォント：ポピンズ
テキストサイズ：100vw
テキストの向き：中央

特大のキャラクター

間隔

次に、間隔設定に移動し、カスタムマージンとパディング値を追加します。

トップマージン：-6vw
トップパディング：15vw
ボトムパディング：49vw

特大のキャラクター

フィルタ

魔法を起こす時が来ました！モジュールのフィルター設定に移動し、それに応じてブレンドモードを変更します。

ブレンドモード：乗算

特大のキャラクター

行＃2を追加

カラム構造

特大のキャラクターがデザインに追加されたら、セクションに表示する残りのモジュールを追加することで、できれば新しい行を追加することで続行できます。

特大のキャラクター

サイジング

モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体を占めるようにします。

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

特大のキャラクター

間隔

デフォルトの上下のパディングもすべて削除します。

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

特大のキャラクター

テキストモジュール＃1を列に追加

H1コンテンツを追加する

この新しい行では、選択したモジュールを追加できます。この投稿のプレビューで共有された正確な例を再現するには、H1コンテンツを含むテキストモジュールを追加することから始めます。

特大のキャラクター

H1テキスト設定

デザインタブに移動し、H1テキスト設定を変更します。

見出しフォント：プレイフェアディスプレイ
見出しフォントの太さ：太字
見出しテキストの配置：中央
見出しのテキストの色：#ffffff
見出しのテキストサイズ：6vw

特大のキャラクター

間隔

間隔の設定に移動して続行し、負の上部マージンを追加して、テキストモジュールが特大の文字と重なるようにします。また、応答性を確保するために、モジュールの左側と右側にある程度のスペースがあることを確認しています。

トップマージン：-47vw
左マージン：1vw
右マージン：1vw

特大のキャラクター

Dividerモジュールを列に追加

可視性

次に必要なモジュールはディバイダーモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。

仕切りを表示：はい

特大のキャラクター

色

次に[デザイン]タブに移動し、仕切りの色を変更します。

色：#ffffff

特大のキャラクター

サイジング

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

仕切りの重量：13px
幅：16％
モジュールの配置：中央

特大のキャラクター

間隔

また、上部マージンを追加して、テキストモジュールとディバイダーモジュールの間にスペースを作成します。

トップマージン：16vw

特大のキャラクター

テキストモジュール＃2を列に追加

コンテンツを追加する

次に必要なモジュールは、段落の内容を含むテキストモジュールです。

特大のキャラクター

テキスト設定

テキスト設定に移動し、次の変更を行います。

テキストフォント：Open Sans
テキストの色：#ffffff
テキストサイズ：1vw（デスクトップ）、2vw（タブレット）、2.5vw（電話）
テキスト行の高さ：1.9em
テキストの向き：中央

特大のキャラクター

間隔

いくつかのカスタム間隔値も追加します。

トップマージン：3vw
下マージン：3vw（デスクトップ）、10vw（タブレットと電話）
左マージン：27vw（デスクトップ）、10vw（タブレット）、8vw（電話）
右マージン：27vw（デスクトップ）、10vw（タブレット）、8vw（電話）

特大のキャラクター

ボタンモジュールを列に追加

コピーを追加

次の最後のモジュールであるボタンモジュールに進みます。お好みのコピーを入力してください。

特大のキャラクター

配置

デザインタブでボタンの配置を変更して続行します。

ボタンの配置：中央

特大のキャラクター

ボタンの設定

ボタンの設定に移動し、ボタンのスタイルを自由に設定します。

ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：1vw（デスクトップ）、2.5vw（タブレット）、3vw（電話）
ボタンのテキストの色：#ffffff
ボタンの境界線の幅：1px
ボタンの境界線半径：0px
ボタンフォント：Sansを開く
フォントの太さ：超太字
フォントスタイル：大文字

特大のキャラクター

間隔

大事なことを言い忘れましたが、望ましい結果を達成するために、いくつかのカスタムマージンとパディング値も追加しています。

下マージン：10vw
トップパディング：15px
ボトムパディング：15px
左パディング：50px
右パディング：50px

特大のキャラクター