回転コピーを使用してDiviのモバイルビューポートを最大化する方法
公開: 2020-06-06Webサイトを設計するときは、最初に重要な選択をする必要があります。「最初にどのデバイスを設計するのですか？」 多くの場合、答えはデスクトップです。 しかし、最初にデスクトップ向けに設計したからといって、モバイル設計がそれほど徹底的でないという意味ではありません。 たとえば、回転コピーを使用することで、訪問者やデザインに負担をかけることなく、Diviのモバイルビューポートを最大化し、モバイルビューポート内により多くのコンテンツを収めることができます。 このチュートリアルでは、Divi内でそれを行う方法を正確に示します。 JSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
最大化モバイルビューポートレイアウトを無料でダウンロード
無料の最大化モバイルビューポートレイアウトを利用するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
再作成を始めましょう！
新しいセクションを追加
間隔
作業中のページに新しいセクションを追加することから始めます。 セクション設定を開き、デフォルトの上部と下部のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
行＃1を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
- 幅：100％
- 最大幅：50％（デスクトップ）、100％（タブレットと電話）
- 行の配置：左
間隔
次に、デフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
主な要素CSS
すべての列が隣り合っていることを確認するために、CSSコードの1行を行のメイン要素にも追加します。
display: flex;
列1の設定
アニメーション
次に、列1の設定を開き、次のアニメーションを追加します。
- アニメーションスタイル：フェード
主な要素CSS
次のCSSコード行を列のメイン要素に追加することで、列サイズを小さい画面サイズに維持します。
width: 40% !important;
列2の設定
アニメーション
次に、列2の設定を開き、次のアニメーションを適用します。
- アニメーションスタイル：フェード
- アニメーションの遅延：200ms
主な要素CSS
次のCSSコード行を追加することで、列のサイズを小さい画面サイズに維持しています。
width: 60% !important;
列2に画像モジュールを追加します
画像をアップロード
モジュールを追加する時が来ました。 画像モジュールを列2に追加し、選択したポートレート画像をアップロードします。
サイジング
モジュールの[デザイン]タブに移動し、モジュールに全幅を強制します。
- 全幅を強制：はい
列1にテキストモジュールを追加
H2コンテンツを追加する
列1で、最初に必要なモジュールは、H2コンテンツを含むテキストモジュールです。
H2テキスト設定
モジュールの[デザイン]タブに移動し、H2テキスト設定を次のように変更します。
- 見出し2フォント：Montserrat
- 見出し2フォントの太さ：軽い
- 見出し2テキストの配置：中央（タブレットと電話のみ）
- 見出し2のテキストの色：＃000000
- 見出し2テキストサイズ：3vw（デスクトップ）、50px（タブレット）、40px（電話）
- 見出し2文字の間隔：-3px
サイジング
次に、サイズ設定で幅を変更します。
- 幅：89％（デスクトップ）、150％（タブレットと電話）
変換回転
モジュールを小さい画面サイズで回転させるには、変換回転設定を使用します。
- 左：270度（タブレットと電話のみ）
ポジション
また、さまざまな画面サイズでモジュールの位置を変えています。
- 位置：絶対
- 場所：下部センター（デスクトップ）、センター（タブレットと電話）
- 垂直オフセット：50px
Dividerモジュールを列1に追加します
可視性
列1で必要な次の最後のモジュールは、ディバイダーモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
ライン
モジュールのデザインタブに移動し、線の色を変更します。
- 線の色：＃000000
サイジング
サイズ設定も変更します。
- 幅：50％（デスクトップ）、30％（タブレットと電話）
ポジション
それに応じてモジュールを再配置して、モジュール設定を完了します。
- 位置：絶対
- 場所：中道右派
行＃2を追加
カラム構造
次の行で、次の列構造を使用します。
サイジング
モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
- 幅：100％
- 最大幅：50％（デスクトップ）、100％（タブレットと電話）
- 行の配置：右
間隔
次に、デフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
主な要素CSS
小さい画面サイズで両方の列が隣り合っていることを確認するために、CSSコードの1行を行のメイン要素に追加します。
display: flex;
列1の設定
グラデーションの背景
次に、列1の設定を開き、グラデーションの背景を適用します。
- 色1：＃1a9970
- 色2：＃000000
- グラデーションタイプ：線形
- 勾配方向：153度
アニメーション
このコラムでも遅延アニメーションを使用しています。
- アニメーションスタイル：フェード
- アニメーションの遅延：400ms
主な要素CSS
次に、列のメイン要素に次のCSSコード行を追加して、列のサイズを小さい画面サイズに維持するようにします。
width: 25% !important;
可視性
最後になりましたが、コンテナを超えるものがないことを確認するために、列のオーバーフローを非表示にします。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
列2の設定
背景色
列2の設定に移ります。 次の背景色を使用してください。
- 背景色：＃f4f4f4
アニメーション
遅延アニメーションも適用します。
- アニメーションスタイル：フェード
- アニメーションの遅延：600ms
主な要素CSS
そして、列のメイン要素に1行のCSSコードを追加して、列の設定を完了します。 これにより、列が小さい画面サイズでもそのサイズを維持できるようになります。
width: 75% !important;
列2にテキストモジュールを追加します
コンテンツを追加する
モジュールを追加する時が来ました。 選択した説明コンテンツを含むテキストモジュールを列2に追加します。
テキスト設定
モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：Open Sans
- テキストサイズ：15px（デスクトップ）、14px（タブレット）、13px（電話）
- テキスト行の高さ：2.4em
サイジング
次に、サイズ設定を変更します。
- 幅：80％
- モジュールの配置：中央
間隔
間隔設定にいくつかのカスタムパディング値を追加して、モジュール設定を完了します。
- トップパディング：15％
- ボトムパディング：15％
ボタンモジュールを列2に追加
コピーを追加
列2で必要な次の最後のモジュールは、ボタンモジュールです。 選択したコピーをいくつか追加します。
配置
モジュールのデザインタブに移動し、ボタンの配置を変更します。
- ボタンの配置：中央
ボタンの設定
次にボタンのスタイルを設定します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストの色：＃000000
- ボタンの背景色：#ffffff
- ボタンの境界線の幅：0px
- ボタンの境界線半径：0px
- ボタンフォント：Montserrat
- ボタンアイコンを表示：はい
- ボタンアイコンの配置：左
- ボタンのホバー時にアイコンのみを表示：いいえ
間隔
そして、間隔設定にいくつかのカスタムパディング値を追加して、モジュール設定を完了します。
- トップパディング：2％
- ボトムパディング：2％
- 左パディング：10％
- 右パディング：10％
列1にテキストモジュールを追加
コンテンツを追加する
1列目では、必要なモジュールはテキストモジュールのみです。 次のコンテンツをコンテンツボックスに追加します： '— 01'。
テキスト設定
モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：Montserrat
- テキストフォントの太さ：薄い
- テキストの色：#ffffff
- テキストサイズ：50px（デスクトップ）、40px（タブレット）、35px（電話）
- テキストの配置：中央
サイジング
次に、モジュールの幅を増やします。
- 幅：150％
変換翻訳
次に、変換設定に移動し、変換変換設定を変更してモジュールを再配置します。
- 下：-50％（タブレットと電話のみ）
変換回転
小さい画面サイズでもモジュールを回転させています。
- 左：270度（タブレットと電話のみ）
ポジション
そして、[詳細設定]タブでモジュールの位置を変更して、モジュールの設定を完了します。
- 位置：絶対
- 場所：センター
再利用のためのクローンセクション
最初のセクションを完了したら、必要な回数だけクローンを作成できます。
すべてのコピーとリンクを変更する
必ずすべてのコピーとリンクを変更してください。
画像を変更する
ポートレート画像と一緒に、これで完了です。
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
最終的な考え
この投稿では、Divi内でモバイルビューポートを最大化する方法を紹介しました。 具体的には、回転コピーを使用して、圧倒的なデザインエクスペリエンスを作成することなく、ビューポート内により多くのコンテンツを収めました。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。