Diviを使用してカスタムのスティッキーな「トップに戻る」デザインを作成する方法

公開: 2019-06-19

毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。 レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。

今週は、進行中のDiviデザインイニシアチブの一環として、DiviとGreen Energy LayoutPackを使用してカスタムのスティッキーバックツートップデザインを作成する方法を紹介します。 この手法は、デザイン側のDiviの組み込みオプションを利用しながら、ページのユーザーエクスペリエンスを向上させるのに役立ちます。 このチュートリアルが、独自の代替デザインを作成して次のWebサイトで使用するきっかけになることを願っています。

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、このチュートリアルの結果を簡単に見てみましょう。

GIF

トップに戻る

例1

トップに戻る

例2

トップに戻る

例3

トップに戻る

1.ページHTMLにスムーズスクロールを追加します

Green EnergyLandingページを新しいページにアップロードする

最初に行う必要があるのは、新しいページを作成し、Green Energy LayoutPackのランディングページをアップロードすることです。

トップに戻る

ページ設定を開く

下の印刷画面でマークされたアイコンをクリックして、ページ設定を開きます。

トップに戻る

カスタムCSSボックスにスムーズスクロールを追加

[詳細設定]タブに移動し、次のCSSコードを[カスタムCSS]ボックスに追加して、ページ全体にスムーズなスクロール動作を追加します。 

html {
scroll-behavior: smooth;
}

トップに戻る

2.ヒーローセクションにCSSIDを追加します

ヒーローセクションを開く

トップに戻るデザインは、訪問者をヒーローセクションにリダイレクトします。 それをやってのけるには、最初にヒーローセクションの設定を開く必要があります。

トップに戻る

CSSIDを追加します

次に、[詳細設定]タブに移動し、CSSIDをセクションに追加します。 この投稿の後半で、訪問者をこのセクションに導くアンカーリンクを追加します。

  • CSS ID：セクション-1

トップに戻る

3.「トップに戻る」デザインでページの下部に新しいセクションを追加する

一般的な手順

ページの下部に新しい通常のセクションを追加する

この投稿のプレビューでお気づきのように、3つの異なるデザイン例を再現します。 プロセスを合理化するために、最初にいくつかの一般的な手順から始めて、投稿の後半で各設計例に個別に焦点を当てます。 ページの下部に新しい通常のセクションを追加します。

トップに戻る

間隔

セクション設定を開き、デフォルトの上部と下部のパディングをすべて削除します。

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

トップに戻る

新しい行を追加

カラム構造

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

トップに戻る

アンカーリンクを追加

誰かが行全体をクリックするとすぐに、ページの上部にリダイレクトされるようにします。 そのために、ページのヒーローセクションにリダイレクトするリンクを追加します。

  • 行リンクURL：yourwebsite.com/page/#section-1

トップに戻る

行の配置

また、セクションコンテナの右側に行を配置しています。

  • 行の配置：右

トップに戻る

固定位置

次に、行の[詳細設定]タブに移動し、次の位置オプションを更新して、行全体を修正します。

  • 位置：固定
  • 垂直オフセット：30px
  • 水平オフセット：30px
  • Zインデックス：99

行を固定することに加えて、zインデックスを増やすことにより、行がすべてのページコンテンツとオーバーラップするようにします。

トップに戻る

設計例＃1を再作成する

トップに戻る

行設定

列構造の変更

一般的な手順をすべて完了したので、この投稿の冒頭で確認できた3つの異なる例を再現します。 最初のものから始めましょう！ 行の列構造を変更します。

トップに戻る

背景色

行設定を開いて続行し、白い背景色を追加します。

  • 背景色：#ffffff

トップに戻る

サイジング

[デザイン]タブに移動し、サイズ設定を変更します。

  • カスタムガター幅を使用：1
  • 幅：9vw（デスクトップ）、23vw（タブレット）、35vw（電話）

トップに戻る

間隔

いくつかのカスタムパディング値も追加します。

  • トップパディング：2.5vw（デスクトップ）、6vw（タブレット）、10vw（電話）
  • ボトムパディング：2.5vw（デスクトップ）、6vw（タブレット）、10vw（電話）
  • 左パディング：1vw（デスクトップ）、2vw（タブレット）、4vw（電話）
  • 右パディング：1vw（デスクトップ）、2vw（タブレット）、4vw（電話）

トップに戻る

国境

境界線設定の各コーナーに「10px」を追加して続行します。

トップに戻る

ボックスシャドウ

そして、次の設定を使用してボックスシャドウを追加します。

  • ボックスシャドウブラー強度：80px
  • 影の色：rgba（0,0,0,0.3）

トップに戻る

画面

すべての画面サイズで列が隣り合っていることを確認するために、行のメイン要素にCSSコードの行を追加します。 

display: flex;

トップに戻る

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

コンテンツを追加する

モジュールの追加を開始する時が来ました！ 選択したコンテンツを含むテキストモジュールを最初の列に追加します。

トップに戻る

テキスト設定

[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

  • テキストフォント：Arial
  • テキストフォントの太さ：太字
  • テキストの配置：右
  • テキストの色：＃000000
  • テキストサイズ：1.1vw（デスクトップ）、3vw（タブレット）、4.4vw（電話）
  • テキスト文字の間隔：-1px
  • テキスト行の高さ：1em

トップに戻る

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

シンボルを追加

2番目の列に移動し、そこにもテキストモジュールを追加します。 コンテンツボックスに「▲」記号を追加します。

トップに戻る

テキスト設定

大事なことを言い忘れましたが、デザインタブに移動してテキスト設定を変更してください。

  • テキストフォント：Open Sans
  • テキストの配置：中央
  • テキストの色：＃000000
  • テキストサイズ：3vw（デスクトップ）、8vw（タブレット）、12vw（電話）
  • テキスト行の高さ：0.6em

トップに戻る

設計例＃2を再作成する

トップに戻る

行設定

サイジング

2番目の例に移ります！ 行設定を開き、行の幅を変更します。

  • 幅：7％

トップに戻る

間隔

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

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

トップに戻る

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

シンボルを追加

行にテキストモジュールを追加して続行し、「↑」記号を入力します。

トップに戻る

テキスト設定

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

  • テキストフォント：Open Sans
  • テキストの配置：中央
  • テキストの色：＃000000
  • テキストサイズ：56px
  • テキスト行の高さ：1em

トップに戻る

間隔

次に、カスタムの上部と下部のパディングを追加します。

  • トップパディング：30px
  • ボトムパディング：50px

トップに戻る

国境

デザインタブに移動し、各コーナーに「50vw」を追加します。 次の設定を使用して、境界線も追加します。

  • ボーダー幅：3px
  • ボーダーカラー：＃000000

トップに戻る

設計例＃3を再作成する

トップに戻る

行設定

サイジング

次の最後の例に移りましょう！ 行設定を開き、幅を変更します。

  • 幅：4％（デスクトップ）、10％（タブレット）、15％（電話）

トップに戻る

間隔

次に、デフォルトの上下のパディングを削除します。

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

トップに戻る

ボックスシャドウ

次の設定を使用して、カスタムボックスシャドウを行に追加します。

  • ボックスシャドウスプレッド強度：4px
  • 影の色：rgba（0,0,0,0.3）

トップに戻る

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

シンボルを追加

この設計例に必要な唯一のモジュールはテキストモジュールです。 コンテンツボックスに「^」を追加します。

トップに戻る

テキスト設定

[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

  • テキストフォント：Open Sans
  • テキストフォントの太さ：超太字
  • テキストの配置：中央
  • テキストの色：＃4359e9
  • テキストサイズ：56px
  • テキスト行の高さ：1em

トップに戻る

  • テキストの影の色：＃35d764

トップに戻る

間隔

間隔の設定に移動し、カスタムの上部と下部のパディングを追加して続行します。

  • トップパディング：30px
  • ボトムパディング：20px

トップに戻る

国境

最後になりましたが、テキストモジュールに境界線を追加すれば完了です。

  • ボーダー幅：3px
  • ボーダーカラー：＃4359e9

トップに戻る

プレビュー

すべての手順を完了したので、最後に結果を見てみましょう。

GIF

トップに戻る

例1

トップに戻る

例2

トップに戻る

例3

トップに戻る

最終的な考え

このユースケースチュートリアルでは、Diviを使用してカスタムのトップツートップデザインを作成する方法を示しました。 ページにスムーズなスクロールを追加し、ヒーローセクションにセクションIDを割り当て、固定行をヒーローセクションにリンクしました。 このチュートリアルは、進行中のDiviデザインイニシアチブの一部であり、毎週、デザインツールボックスに何か特別なものを入れようとしています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。