ディビ抹茶ショップ子テーマ概要

ディビ抹茶ショップの子テーマは、商品の販売に集中するのに役立つ最小限のテーマです。 子のテーマに一致するようにスタイル設定されたWooCommerceページが含まれています。 また、ブログ、連絡先などの簡略化されたページも追加されます。 この記事では、Divi抹茶ショップの子テーマを見て、ニーズに合ったものかどうかを判断します。

ディビ抹茶ショップ子テーマのインストール

すべてのインストールとセットアップは手動です。 幸いなことに、これは難しいことではありません。 Diviの経験がある人なら誰でも問題はありません。 セットアッププロセスは簡単で、数分しかかかりませんでした。 情報は販売ページに含まれています。

まず、Diviをアクティブにして、WordPressテーマと同じように、子テーマをアップロードしてアクティブにします。 次に、子テーマをアクティブにします。 子テーマはCSSスタイルシートを追加します。 テーマオプション、カスタマイザー設定、およびレイアウト用のファイルが付属しています。 ファイルは、使用される場所に応じて名前が付けられます。

インポートするファイルには、補足のzipファイルが含まれています。 また、Diviライブラリにアップロードするためのレイアウトも含まれています。 第三に、子テーマがアクティブ化されたので、手動でページを作成する必要があります。 最後に、メニューを作成し、デフォルトのサイドバーウィジェットとフッターウィジェットを削除する必要もあります。 この例では、Diviテーマオプション画面でテーマオプションをインポートしています。

すべてのレイアウトはワンクリックでアップロードされます。 これがレイアウトです。 6ページのデザインがあります。 レイアウトを使用してページを作成してから、メニューを作成する必要があります。 あなたのウェブサイトは、Divi抹茶ショップの子テーマのデモのようになります。 コンテンツを追加するだけです。

ディビ抹茶ショップ子テーマページ

デモページには画像とアイコンが含まれています。 法的な理由により、画像とアイコンはレイアウトファイルに含まれていません（これは理解できます）。 このため、私はデモの画像を使用しています（画像は見栄えがよく、子テーマの使用方法についてより良いアイデアを提供します）。 これは一般的ですが、サイトがこの記事のサイトと異なる理由がわかるように、言及したいと思います。

ディビ抹茶ショップチャイルドテーマホームページ

ホームページには、多くのテキストモジュール、画像、ボタン、番号カウンター、ビデオモジュール、およびお問い合わせフォームが含まれています。 これがワイヤーフレームビューです。 フロントエンドの各セクションを見てみましょう。

ホームページには、ページが読み込まれると所定の位置に回転する特大のテキストを含む全幅の背景が表示されます。 画像がこのセクションと次のセクションに重なっています。 ページが読み込まれると、所定の位置にズームインします。 ホームページ全体で商品に焦点を当てているのが好きです。

2番目のセクションには、宣伝文として機能する情報のセットを含む全幅の背景が表示されます。 それらには、タイトル、説明、およびそれぞれについて詳しく読むためのリンクが付いた画像（またはアイコン）が含まれています。 これらは、製品に関する情報を提供します。 画像は画面の両側から所定の位置にスライドします。

次のセクションでは、埋め込みビデオ用のスペースを提供します。 ビデオは2つのセクションに重なっています。 ビデオの下に紹介文が表示されます。 紹介文の色付きの背景とグラフィックは含まれていませんが、紹介文をどのように使用できるかについての優れたアイデアを提供します。

全幅CTAが視差の背景の上に表示されます。 数値カウンターは情報を提供します。 CTAのテキストが所定の位置にスライドし、このセクションまでスクロールすると、カウンターの数がカウントされます。

フッターには、スタイル付きの全幅ニュースレターのサインアップフォームと、それに続くロゴのセクションが表示されます。 これらは、クライアント、認定資格、提携または提供しているブランドなどに最適です。このセクションまでスクロールすると、お問い合わせフォームの横の画像が所定の位置にスライドします。

ページについて

[バージョン情報]ページには、視差の背景を持つタイトルセクションが表示されます。 また、ホームページの製品情報とロゴセクションも使用します。 このレイアウトは、複数の製品を提供する場合に、各製品のページを作成するために使用できます。

福利厚生ページ

メリットページには、ホームページのビデオと紹介文のセクションを使用して、製品のメリットが表示されます。 ビデオは視差ヒーローセクションと重なっています。 このレイアウトを使用して、各製品のページを作成できます。 複数のセクションを作成して、それぞれのメリットに焦点を当てることもできます。

ブログページ

ブログページは、ブログ投稿を3列で表示するすっきりとしたデザインになっています。 カードには、境界線、上部の画像、タイトル、メタ、抜粋、および詳細を読むためのスタイル付きリンクが含まれています。 また、視差のタイトルセクションとフッターのロゴも含まれています。

ショップページ

ショップページには、4列のショップモジュールが追加されています。 タイトルとフッターもこのページに含まれています。 商品画像にカーソルを合わせると、緑色のアイコンが表示されます。

製品ページ

製品ページは標準のWooCommerceレイアウトに従い、サイトに合わせたスタイルが含まれています。 価格の緑色のスタイリング、カートに追加ボタン、カテゴリ、レビューセクションの星評価、関連製品のホバーアイコンが含まれています。

ショッピングカートやその他のWooCommerceページにもグリーンスタイルが含まれています。 この例は、商品名、クーポンボタン、チェックアウトボタンが緑色で表示されたショッピングカートを示しています。

お問い合わせページ

連絡先ページにはヘッダーとフッターも含まれ、背景画像の上にスタイル付きの連絡先フォームが追加されます。

ディビ抹茶ショップ子テーマCSS

すべてのスタイルが子テーマのスタイルシートに追加されます。 CSSに精通している場合は、スタイルシートの色を簡単にカスタマイズできます。 幸い、CSSを変更するためにテーマファイルを掘り下げる必要はありません。

CSSはDiviテーマオプションにも追加されます。 または、ここのテーマオプションで変更を加えることもできます。 これにより、子テーマのファイルを変更する必要がなくなります。 ここで追加されたCSSは、スタイルシートに追加されたCSSよりも優先されます。

購入場所

ディビ抹茶ショップの子テーマは、ディビマーケットプレイスで29ドルで購入できます。 無制限の使用と1年間のサポートとアップデートが含まれます。

終わりの考え

これが、ペーパーテンプルのDivi抹茶ショップの子テーマです。 これは、すっきりとエレガントに見えるシンプルな子テーマです。 シンプルさは、製品に集中するための優れた方法です。 私は特にホームページのデザインが好きです。 特典ページは、ビデオで製品情報を提供するための優れた方法です。 [概要]ページでは、宣伝文句スタイルのカードをうまく利用して、購入者が製品やプロセスについてより深く理解できるようにしています。 結論として、シンプルで使いやすいeコマースのDivi子テーマを探しているなら、Divi抹茶ショップは一見の価値があります。

我々はあなたから聞きたい。 ディビ抹茶ショップの子テーマを試しましたか？ コメントであなたがそれについてどう思うか教えてください。

手紙による注目の画像-Shmetters / shutterstock.com