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

WordPress Diviテーマに使用できるブックプレビュー(Book Preview)Diviランディングページのレイアウトを エレガント Themesブログ無料でダウンロードできるように公開されました。

無料Diviブックプレビューランディングページのレイアウト

レイアウトファイルをダウンロードした後Zip圧縮を解除し、 WordPress 伝言板> Divi> Divi Libraryに移動し、 インポート・エクスポートをクリックして、レイアウトファイルをインポートすることができます。

Diviレイアウトインポート

Divi Builder内でインポート機能を使用してレイアウトをインポートしようとすると、「This file should not be imported in this context」エラーメッセージが表示され、インポートは実行されません。

Divi> Divi Libraryでjsonファイル(divi-book-preview-layout.json)をインポートするとDiviビルダー内で、先ほどインポートしたレイアウトを呼び出すことができます。

Diviテーマでレイアウトの読み込み

図のように Load From Library> Your Saved LayoutsにBook Preview レイアウトが表示されます。 divi-book-preview-layoutを選択して、レイアウトをロードします。 レイアウトをロードした後、テキストを必要に応じて変更することができます。

WordPress Diviテーマレイアウト -  Book Preview

右ボディの各セクション(モジュール)にCSS IDを指定して、左の目次の各項目のリンクからIDを変更します。 その後、左の目次の項目をクリックすると、本文部分に対応する内容が表示されます。 ワンページレイアウトを構成する原理と似ています。

このレイアウトでは、ページを一つ作ってみました。 ここデモを確認することができます。 本文の文字が小さすぎる感じられますね。 CSSで本文の文字サイズを変更することができます。

このレイアウトの詳細については、 エレガント Themes ブログ記事を参照してください。 レイアウトをダウンロードして利用することができ、レイアウトのように直接作りたいユーザーのために作成する方法も紹介されています。 このレイアウトでGDPRページ個人情報保護方針(Privacy Policy)を提示する用途で活用したユーザーもいますね。

お誘いで本やドキュメントの一部を示して全体の内容を表示するには購入するように誘導したり、個人情報保護方針やサービス利用規約などを表示する用途にも活用できそうです。

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

メモ:

一部の記事にはアフィリエイトリンクが含まれている場合があり、パートナーの活動で一定額の手数料を受け取ることがあります。

コメントを残す

*電子メール情報は公開されません。