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

コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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

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

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

Diviレイアウトインポート

Diviビルダー内でインポート機能を利用して、レイアウトをインポートしようとすると、「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を選択して、レイアウトをロードします。 レイアウトをロードした後、テキストを必要に応じて変更することができます。

ワードプレスDiviテーマレイアウト -  Book Preview

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

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

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

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

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

注:



コメントを残す

コメント