Diviでスクロール可能なテキストプレビュータブレットを作成する方法

公開: 2017-08-08

今日のチュートリアルでは、Webサイトでスクロール可能なテキストプレビュータブレットを作成する方法を紹介します。テキストプレビューはタブレットで表示され、訪問者はタブレット内をスクロールして、共有されているいくつかの章を読むことができます。

Webサイトにテキストプレビュータブレットを追加することは、訪問者をからかうための優れた方法です。あなたは彼らにあなたが作成したコンテンツの一部を探索する機会を与えています。コンテンツを読んで興味をそそられたら、残りのコンテンツも読みたいと思う可能性が高くなります。テキストプレビュータブレットの使用は、次のような場合に役立ちます。

本を売るとき
あなたの訪問者と無料の電子ブックを共有し、彼らに完全なバージョンをダウンロードするように勧めたいとき（購読することによって）
ケーススタディや紹介文を共有する場合

私たちが正確に何を意味するかを示すために、ステップバイステップで再作成する方法を示す例を作成しました。

タブレットには必要なだけコンテンツを追加できます。スクロールバーを使用すると、訪問者はコンテンツを簡単にスクロールできます。

Diviでスクロール可能なテキストプレビュータブレットを作成する方法

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

セクションの作成と変更

作成した例を再作成するために最初に必要なのはセクションです。簡単にするために、このセクションを新しいページに追加し、Visual Builderに切り替えて、結果の作成に使用されているすべての手順を説明します。

新しいページを追加する

新しいページを追加するには、 WordPressダッシュボード>ページ>新規追加に移動します。新しいページを追加したら、Divi Builderをアクティブにして、すぐにVisualBuilderに切り替えます。

2列の行を持つセクションを追加する

再作成する例では、必要なセクションは1つだけです。標準セクションを追加し、そのセクション内に2列の行を作成します。テキストプレビュータブレットを配置するための左側の列と、情報を提供して行動を促すための2番目の列が必要です。

グラデーションの背景を追加する

説明する次のステップは、グラデーションの背景です。私たちは本当にシンプルなものを選びましたが、それはセクションに素晴らしい付加価値をもたらします。背景のグラデーションを再作成するには、セクションの設定に移動します。次に、背景サブカテゴリのグラデーション背景に次の2色を使用します。

＃e02b20
＃f2f2f2

グラデーションの背景に使用した設定は次のとおりです。

グラデーションタイプ：線形
勾配方向：143度
開始位置：28％
終了位置：28％

最初の列：コードモジュールとテキストプレビュータブレットを追加

最初の列では、テキストプレビュータブレットでコードモジュールを追加します。テキストプレビュータブレットを完成させるには、3つのことを行う必要があります。コードモジュールを追加し、コードモジュール内にHTMLコード行を追加し、必要なCSSコード行をページ自体に追加します。 CSSコード行をテーマオプションまたはテーマカスタマイザーに追加することもできます。ただし、この場合は必要ないため、作成したページにのみ追加します。

コードモジュールを追加する

作成した行の最初の列にコードモジュールを追加することから始めます。

HTMLコードを追加する

次に、そのコードモジュールを開き、コンテンツボックス内に次の行を追加します。

<div id="tab-container">
<div class="tablet">
<div class="tab">

<h1 class="title">Chapter 1</h1>

<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>

<h1 class="title">Chapter 2</h1>

<p>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<footer>
 2017 *Author*
</footer>
</div>
</div>
</div>

テキストプレビューには3つの部分があることに気付くでしょう。タイトル、段落、フッター。好きなだけテキストプレビューを作成できます。この例では、それぞれ1つのタイトルと1つの段落で表される2つの章を追加しました。もちろん、タブレットのどこにでも複数の段落やタイトルを追加できます。

必要なCSSコードを追加する

HTMLコードをニーズに合わせて調整したら、タブレットを希望どおりに表示するCSSコードを追加できます。作成するページでこのタブレットが必要になるだけなので、コードをページに直接追加します。ページのビジュアルビルダー内で、設定アイコンをクリックします。

次に、[CSS]タブに移動し、CSSコードの次の行を[カスタムCSS]フィールドに貼り付けます。

*{ box-sizing: border-box; }

.tablet {
position: relative;
background: #1c1c1c;
width: 100%;
height: 600px;
max-width: 450px;
max-height: 600px;
margin: 0 auto 0;
padding: 30px 24px 30px 24px;
border-radius: 18px;
border-top:2px solid #3C3F45;
border-right:2px solid #202227;
border-bottom:2px solid #202227;
border-left:2px solid #3C3F45;
box-shadow:11px 11px 24px rgba(0,0,0,0.5);
}

@media only screen and (max-width:768px) {
height: 400px;
}

.tablet .tab {
background: #f9f9f9;
color: black;
padding: 50px 40px 50px 40px;
overflow: scroll;
height: 100%;
text-align: justify;
}

.tablet .tab h1 {
font-size: 30px;
font-family: "Dancing script";
font-weight: bold;
font-style: italic;
text-align: center;
margin: 0 0 20px 0;
padding: 4px;
font-size: 25px;
}

.tablet .tab p {
margin: 0 0 20px 0;
font-family: "Arial";
font-size: 13px;
}

footer {
background: black;
color: white;
margin-bottom: 8px;
}

これらのCSSコード行内で、必要に応じてすべてを変更できます。コード行でわかるように、テキストプレビュータブレットのルックアンドフィールを変更できる5つの主要部分があります。

タブレットの外観
タブレットの内部外観
タイトル
段落
フッター

したがって、テキストプレビュータブレットを統合するあらゆる種類のページにタブレットを適合させることができます。

2列目：2つのテキストモジュールとCTAを追加します

最後に、モジュールを右側の列に追加します。テキストプレビュータブレットで何を読むかを人々に知らせることが重要です。また、CTAを利用する理想的な機会でもあります。 CTAが実際のテキストプレビュータブレットに近く、目立つほど、テキストプレビューを読んだ後に行動を起こす可能性が高くなります。

最初のテキストモジュール

最初のテキストモジュールを2番目の行に追加することから始めます。設定を開き、コンテンツのテキストサブカテゴリ内のコンテンツボックスにタイトルを書き留めます。さらに、[デザイン]タブに移動し、[テキスト]サブカテゴリに次の変更を加えます。

テキストフォント：ダンススクリプト
テキストフォントスタイル：太字と斜体
テキストフォントサイズ：40（デスクトップ）、35（タブレット）、30（電話）
テキストの色：＃1c1c1c
テキスト行の高さ：1.7em

同じタブを下にスクロールして、「40％」を上マージンに追加します。

2番目のテキストモジュール

さらに、2番目のテキストモジュールを追加します。 [コンテンツ]タブ内の[コンテンツ]ボックスにテキストを追加することから始めて、[デザイン]タブに移動します。 [デザイン]タブで、[テキスト]サブカテゴリにも次の調整を加えます。

テキストフォント：Arimo
テキストフォントサイズ：14
テキスト行の高さ：1.7em

ボタンモジュール

最後に、2番目の列にボタンモジュールを追加する必要もあります。 CTAの色をグラデーションの背景に合わせました。まず、ボタンモジュールを追加し、設定を開きます。次に、[コンテンツ]タブにCTAとURLを追加します。 [デザイン]タブに移動し、ボタンサブカテゴリに次の調整を加えて続行します。

ボタンにカスタムスタイルを使用する：はい
ボタンサイズテキスト：14（デスクトップとタブレット）、12（電話）
ボタンのテキストの色：＃f9f9f9
ボタンの背景色：＃e02b20
ボタンの境界線の幅：0
ボタンの境界半径：3
ボタンフォント：Arimo

ヒント：テキストプレビューを通じて電子書籍を宣伝している場合は、次の投稿で説明するように、[クリックブルームのトリガー]オプトインフォームにリンクすることもできます。

結果

この投稿のすべての手順を実行した場合、書籍のプレビューで次の結果が得られているはずです。

まとめ

コードモジュールを使用すると、必要に応じて創造性を発揮できます。この投稿は、個人的な好みのいくつかの要素を統合した場合に、DiviWebサイトをどのように多様化できるかの一例です。この投稿を段階的に実行した場合は、本のプレビューを再作成してWebサイトで使用できるはずです。著者のWebサイトのブックプレビューを使用できるだけでなく、作成して電子メールリストを作成したい電子ブックをプレビューすることもできます。質問や提案がある場合; 下のコメントセクションにコメントをお寄せください。

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。