Diviのスライダーモジュールを使用してモバイルウォークスルーを作成する方法（無料ダウンロード！）
公開: 2019-03-10スライダーは常にウェブデザインで本当に人気があります。 彼らの最大の利点の1つは、訪問者がモバイルデバイスでそれらをスワイプできるという事実です。 今日では、スワイプが新しいクリックであるため、スライダーを含めると、訪問者がWebサイトで体験するモバイルユーザーエクスペリエンスを向上させることができるのは言うまでもありません。 Diviを使用してWebサイトを構築する場合、作業中の任意の行またはセクションにスライダーモジュールを簡単に追加できます。 そして、少しの創造性と実験で、あなたは見事なウェブデザインを達成することができます。
できることの1つは、スライダーモジュールを使用してモバイルウォークスルーを作成することです。 スライドはいくつでも追加できます。ウォークスルーは、最初はモバイルデバイス向けに設計されていますが、デスクトップとタブレットで同じように見栄えがします。 この投稿では、見事な例を最初から再現し、最後にダウンロード用のセクションを提供します。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズで再現する結果を簡単に見てみましょう。
静的
GIF
再作成を始めましょう！
Diviのスライダーモジュールを使用してモバイルウォークスルーを作成する方法
私たちのYoutubeチャンネルを購読する
新しいセクションを追加
間隔
作り始めましょう！ 新しいページを追加するか、既存のページを開いて、新しい通常のセクションを追加します。 セクション設定を開き、さまざまな画面サイズに一致するカスタムパディング値をいくつか追加します。
- トップパディング：4vw（デスクトップ）、5vw（タブレット）、3vw（電話）
- 下部のパディング：4vw（デスクトップ）、5vw（タブレット）、3vw（電話）
- 左パディング：30vw（デスクトップ）、18vw（タブレット）、3vw（電話）
- 右パディング：30vw（デスクトップ）、18vw（タブレット）、3vw（電話）
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
グラデーションの背景
モジュールをまだ追加せずに、行設定を開き、放射状グラデーションの背景を追加します。
- 色1：＃f9f9f9
- 色2：rgba（255,255,255,0）
- グラデーションタイプ：ラジアル
- 半径方向：上
- 開始位置：40％
- 終了位置：40％
サイジング
行のサイズ設定に移動して続行し、列間のスペースをすべて削除します。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
また、行に下部のパディングを追加しています。
- ボトムパディング：30px
国境
次に、境界線設定の各コーナーに「20px」を追加します。
ボックスシャドウ
大事なことを言い忘れましたが、行に微妙なボックスシャドウを追加して、ページにある程度の深さを作成します。
- ボックスシャドウブラー強度：80px
- 影の色：rgba（0,0,0,0.07）
スライダーモジュールを追加する
背景色を変更する
行設定の変更が完了したら、先に進んでスライダーモジュールを追加できます。 モジュールの設定を開き、背景色を変更します。 [デザイン]タブで行ったすべての変更は、後で追加するすべてのスライドに自動的に適用されます。
- 背景色：rgba（255,255,255,0）
テキスト設定
次に、[デザイン]タブに移動し、テキスト設定を変更します。
- テキストの向き：中央
- 影の色：rgba（0,0,0,0）
本文の設定
次に、本文の設定を変更します。
- 本文フォント：デフォルト（Open Sans）
- 本文のサイズ：0.6vw（デスクトップ）、1.5vw（タブレット）、2.4vw（電話）
- ボディラインの高さ：2.2em（デスクトップ）、2.3em（タブレット）、2.4em（電話）
間隔
カスタムの上部と下部のパディングも追加します。
- トップパディング：2vw
- ボトムパディング：2vw
ボタンカスタムCSS
また、特にスライダーモジュールのボタンにカスタムのパディングとマージンの値を追加する必要があります。 この要素は各スライドの異なる要素と組み合わされているため、[詳細設定]タブのCSSコードを使用して、パディングとマージンを手動で追加する必要があります。
padding-left: 80px; padding-right: 80px; padding-top: 8px; padding-bottom: 8px; margin-bottom: 80px;
アクティブスライダーを削除する
すべての一般的なスライド設定の変更が完了したら、先に進んで、すでに存在するアクティブなスライドを削除できます。 これらを使用する代わりに、投稿の次の部分で最初から作成します。 これにより、すべてをより迅速に変更およびカスタマイズできます。
最初のスライドをカスタマイズする
コンテンツボックスのコンテンツをカスタマイズする
スライダーモジュールに新しいスライドを追加し、コンテンツボックスのコンテンツのカスタマイズを開始します。 以下の印刷画面では、画像設定ではなくコンテンツボックスに画像が追加されていることがわかります。 これにより、書かれたコンテンツの上に画像を配置することができます。 グラフィックイラストレーターレイアウトパックの投稿にアクセスし、最後にある画像をダウンロードすると、使用したイラストを見つけることができます。 また、タイトルフィールドの代わりにコンテンツボックスにH3タイトルを追加してスタイルを設定し、目的の場所に正確に表示されるようにします。
ボタンリンク
リンク設定に移動し、ボタンへのリンクを追加して、問題のスライドに関するより詳細なページに訪問者をリダイレクトします。
グラデーションの背景
次に、次の設定を使用してグラデーションの背景を追加します。
- 色1：#aaacff
- 色2：rgba（255,255,255,0）
- グラデーションタイプ：ラジアル
- 半径方向：上
- 開始位置：30％
- 終了位置：30％
ナビゲーション
次にテキスト設定を変更します。
- 矢印カスタムカラー：＃f4f4f4
- ドットナビゲーションカスタムカラー：＃000000
テキスト設定
スライドのテキスト設定でテキストの色を変更します。
- テキストの色：暗い
ボタン
大事なことを言い忘れましたが、ボタンを変更して、希望どおりに表示されるようにします。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：0.8vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- ボタンのテキストの色：#ffffff
- ボタンの背景色：#aaacff
- ボタンの境界線の幅：0px
- ボタンの境界線半径：10px
スライドを必要な回数だけクローンする
最初のスライドの作成とカスタマイズが完了したら、スライドを何度でも複製できます。 複製のそれぞれに手動で変更を加える必要があります。
コンテンツボックスのコンテンツを変更する
最初に変更する必要があるのは、コンテンツボックスのコンテンツです。 これには、使用されている画像/イラストが含まれます。 このチュートリアルで使用された両方のイラストは、Graphic Illustrator Layout Packの投稿に移動し、最後にある画像をダウンロードすることで見つけることができます。
リンクを変更
ボタンのリンクも変更します。
グラデーションの背景を変更する
最初のグラデーションの色を変更することで、複製された各スライドのカラーパレットをカスタマイズすることもできます。
- 色1：#ffccaa
ボタンの背景色を変更する
同じ色を使用して、ボタンの背景色を変更します。 作成した複製ごとにこれらの手順を繰り返して、完了です。
- ボタンの背景色：#ffccaa
モバイルウォークスルーセクションを無料でダウンロード
無料のモバイルウォークスルーセクションに手を置くには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズで再現する結果を簡単に見てみましょう。
静的
GIF
最終的な考え
この投稿では、Diviのスライダーモジュールを使用してゴージャスなモバイルウォークスルーを作成する方法を紹介しました。 当初はモバイル画面サイズ用に設計されていましたが、タブレットでもデスクトップでも同じように見栄えがします。 このアプローチを使用して、Webサイトにあらゆる種類のスライドセクションを作成し、訪問者とシームレスに対話できます。 このチュートリアルが、Diviのスライダーモジュールで創造性を発揮するきっかけになることを願っています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！