アンカーリンクとCTAを含む無料のブックプレビューDiviランディングページレイアウトをダウンロードする

物理的な本を販売している場合でも、電子書籍を販売している場合でも、効果的なランディングページがあると、驚異的な結果が得られます。 このランディングページに従来の方法でアプローチすることも、本のプレビューランディングページに変えることもできます。 書籍プレビューのランディングページを使用すると、ユーザーは書籍の特定の部分や章を事前に読むことができます。 また、さまざまなパーツやチャプターをシームレスにナビゲートできるアンカーリンクも装備されています。 それに加えて、本を販売している場所へのトラフィックを促進するCTAをスポットライトに当てることも必要です。

このチュートリアルでは、Diviを使用して見事な本のプレビューランディングページを最初から再作成します。 レイアウトJSONをすぐにウェブサイトに追加したい場合は、無料でダウンロードすることもできます。

それを手に入れよう！

プレビュー

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

デスクトップ

モバイル

ブックプレビューランディングページレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

再作成を始めましょう！

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

新しい通常のセクションを追加する

間隔

新しいページを作成することから始めて、それに通常のセクションを追加します。 セクション設定を開き、すべてのカスタム上部および下部パディングを削除します。

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

行を追加する

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

背景色

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

• 背景色：#ffffff

列3グラジエントバックグラウンド

3番目の列にもグラデーションの背景を追加します。

• 色1：＃6a30ff
• 色2：＃a202ff
• 列3の勾配タイプ：線形
• 列3の勾配方向：166度

サイジング

次に、サイズ設定に移動し、次のサイズ設定を追加して、行が画面の幅全体を占めるようにします。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい
• 幅：100％
• 最大幅：100％

間隔

間隔設定に移動し、行のカスタムの上部と下部のパディングを削除します。 1列目と3列目にもいくつかのパディング値を追加します。

• トップパディング：0vw
• ボトムパディング：0vw
• 列1の上部パディング：15vw（デスクトップ）、10vw（タブレットと電話）
• 列2の下部パディング：15vw（デスクトップ）、10vw（タブレットと電話）
• 列1の左パディング：7vw

列2CSS ID

この投稿のプレビューでわかるように、2番目の列にスクロールバーが付いています。 投稿の後半でこのスクロールバーのスタイルを設定する場合は、先に進んでCSSIDを2番目の列に追加します。

• 列2CSS ID：style-scrollbar

列2の主要要素

次に行うことは、CSSコードの次の行を列2のメイン要素に追加することにより、列をスクロール可能にすることです。

overflow-y: scroll;
height: 57.87vw;
scroll-behavior: smooth;

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

コンテンツを追加する

すべての行設定を変更したので、モジュールの追加を開始できます。 列1のテキストモジュールから始めて、選択したコンテンツを追加します。

テキスト設定

モジュールのテキスト設定に移動し、いくつかの変更を加えます。

• テキストフォント：Lato
• 色：＃666666
• テキストサイズ：1.6vw（デスクトップ）、3vw（タブレット）、4vw（電話）
• テキスト行の高さ：2vw

Dividerモジュールを列1に追加します

可視性

次に追加するモジュールは、Dividerモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

色

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

• 色：＃5802ed

サイジング

サイズの値も試してみてください。

• 仕切りの重量：4px
• 幅：3vw（デスクトップ）、6vw（タブレット）、9vw（電話）
• 高さ：0px

間隔

また、カスタムの上下のパディングを追加してスペースを作成します。

• トップマージン：1vw（デスクトップ）、3vw（タブレット）、4vw（電話）
• 下マージン：7vw

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

コンテンツを追加する

別のテキストモジュールである3番目のモジュールに移ります。 ここでは、記号（►）の後に最初の章のタイトルをコンテンツボックスに追加しました。

リンクを追加

このモジュール全体をアンカーIDにリンクします。これは、この投稿の後半で追加します。

• モジュールリンクURL：https：//yourwebsite.com/pagetitle/#chapter-1

テキスト設定

テキスト設定に移動して続行し、コンテンツを希望どおりにスタイル設定します。

• テキストフォント：Lato
• テキストフォントの太さ：軽い
• テキストの色：＃666666
• テキストサイズ：1.3vw（デスクトップ）、2vw（タブレット）、3.3vw（電話）

間隔

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

• トップパディング：1vw
• ボトムパディング：1vw

クローンテキストモジュール＃22回

テキストモジュールの変更が完了したら、2回（または共有したい数のチャプターまで）クローンを作成します。

コンテンツの変更

複製のそれぞれの内容を変更します。

リンクの変更

モジュールリンクURLの最後にあるアンカーIDとともに。 この場合、それは最初の複製に「＃chapter-2」を追加し、2番目の複製に「＃chapter-3」を追加することを意味します。

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

コンテンツを追加する

スクロール可能な次の列に進みます。 ここでは、テキストモジュールを使用して、本のプレビューのさまざまなページを追加します。 選択したコンテンツを含む最初のテキストモジュールを追加することから始めます。

背景色

次に、背景設定に移動し、白い背景色を追加します。

• 背景色：#ffffff

テキスト設定

テキスト設定も変更します。

• テキストフォント：Lato
• テキストサイズ：0.8vw（デスクトップ）、1.6vw（タブレット）、2.1vw（電話）
• テキスト行の高さ：1.7vw（デスクトップ）、3.3vw（タブレット）、3.8vw（電話）

H2テキスト設定

H2テキスト設定も試してみてください。

• 見出し2フォント：Lato
• 見出し2フォントの太さ：重い
• 見出し2のテキストの色：＃5802ed
• 見出し2テキストサイズ：2vw（デスクトップ）、2.5vw（タブレット）、2.9vw（電話）
• 見出し2ラインの高さ：2.3vw

間隔

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

• トップマージン：2vw（デスクトップ）、7vw（タブレット）、10vw（電話）
• 下マージン：2vw（デスクトップ）、7vw（タブレット）、10vw（電話）
• 左マージン：5vw
• 右マージン：5vw
• トップパディング：6vw
• ボトムパディング：6vw
• 左パディング：6vw
• 右パディング：6vw

ボックスシャドウ

微妙なボックスシャドウを追加して、テキストモジュールを形成します。

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

CSS ID

テキストモジュールにCSSIDを追加して続行します。 行の最初の列でリンクしていたものと同じCSSIDを使用していることを確認してください。

• CSS ID：chapter-1

テキストモジュールを2回複製する

テキストモジュールのスタイルを設定したら、必要な回数だけ複製します。

コンテンツの変更

重複する各テキストモジュールの内容を変更します。

CSSIDを変更する

CSSIDとともに。

• CSS ID：第2章
• CSS ID：第3章

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

コンテンツを追加する

次の最後のコラムへ！ 選択したコンテンツを含むテキストモジュールを追加します。

テキスト設定

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

• テキストフォント：Lato
• テキストフォントの太さ：重い
• テキストの色：#ffffff
• テキストサイズ：2vw（デスクトップ）、3vw（タブレット）、4vw（電話）
• テキスト行の高さ：2vw
• テキストの向き：中央

間隔

次に、カスタムの左右のパディングを追加します。

• 左：2vw
• 右：2vw

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

コピーを追加

続けて、ボタンモジュールを3番目の列に追加し、選択したコピーをいくつか追加します。

配置

次にボタンの配置を変更します。

• ボタンの配置：中央

ボタンの設定

ボタンの設定も変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：1vw（デスクトップ）、1.5vw（タブレット）、2.4vw（電話）
• ボタンのテキストの色：＃5802ed
• ボタンの背景色：#ffffff
• ボタンの境界線の幅：0px
• ボタンの境界半径：10vw
• ボタンの文字間隔：0px
• フォントの太さ：超太字
• フォントスタイル：大文字

間隔

また、カスタムマージンとパディング値を追加して、モジュールのスタイルと位置を設定します。

• トップマージン：2vw（デスクトップ）、4vw（タブレット）、5vw（電話）
• トップパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• 下部のパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• 左パディング：3vw（デスクトップ）、7vw（タブレット）、9vw（電話）
• 右パディング：3vw（デスクトップ）、7vw（タブレット）、9vw（電話）

スタイルスクロールバー

ページ設定を開く

このチュートリアルの最後の部分は、2番目の列のスクロールバーのスタイル設定に専念しています。 列のスクロールバーのスタイルを設定するかどうかは、完全にあなた次第です。 スタイリングしなくても、機能については何も変わりません。 スクロールバーのスタイルを設定する場合は、ページ設定を開きます。

CSSコードを追加する

次に、[詳細設定]タブに移動し、[カスタムCSS]ボックスにカスタムCSSを追加すると、完了です。

#style-scrollbar::-webkit-scrollbar {
width: 1.1vw;
}
#style-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
#style-scrollbar::-webkit-scrollbar-thumb {
background: #333333;
}

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、本のさまざまな部分や章へのアンカーリンクと、目立つCTAを備えた、見事で効果的な本のプレビューランディングページを作成する方法を紹介しました。 また、レイアウトJSONを無料で共有しているため、作成中の任意のWebサイトにすぐに追加を開始できます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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