Diviアプリの子テーマの概要

Divi Appは、モバイルアプリ開発者向けに設計されたDiviの子テーマです。 さまざまなセクションに固定されたメニューを備えた1ページのデザインです。 画像、宣伝文、CTAは、アプリのさまざまな機能を提示し、販売目標到達プロセスを通じてトラフィックを促進するのに最適です。 この記事では、Diviアプリの子テーマの機能を見て、それがニーズに適した子テーマであるかどうかを判断するのに役立てます。

Diviアプリの子テーマのインストール

Diviアプリの子テーマのインストールは簡単です。 他のWordPressテーマと同じように機能し、コンテンツはシングルクリックでインポートされます。 Diviをアクティブにした状態で、WordPressテーマメニューのDiviアプリをアップロードしてアクティブにします。

子テーマがアクティブ化されると、[デモのインポート]と呼ばれる新しいメニュー項目がダッシュボードに追加されます。 このメニュー内の[ EasyImport Demo ]をクリックして、インポートするアイテムを選択します。 これには、投稿、メディア、メニュー、ホームページ、ウィジェット、およびDiviテーマオプションが含まれます。 デフォルトではすべてが選択されています。 ただし、インポートする投稿やウィジェットはありません。 すべてチェックしたままにしておくことをお勧めします。 [デモコンテンツのインポート]をクリックして、インポートが完了するのを待ちます。 この画面から離れないでください。

インポートが完了したことを示すメッセージが表示されます。 これで、Webサイトはデモのようになりますが、デモの画像の代わりにプレースホルダー画像が表示されます。 ホームページとメニューはすでに設定され、割り当てられています。 コンテンツを追加するだけで済みます。 これは、子テーマをインストールするための私のお気に入りの方法です。 ワンクリックインポートは簡単でスムーズです。

Diviアプリの子テーマのホームページ

Divi Appの子テーマは、ホームページとホームページの8つのセクションへのナビゲーションを備えた1ページのデザインです。 セクションごとに1つずつ見ていきます。 要素には、スライドインアニメーションといくつかの興味深いスタイリングが含まれます。 私たちが行くときにそれらを指摘します。

モジュールの多くには、CSSクラスが含まれており、それらのスタイルを設定し、モバイルで適切に機能するようになっています。 クラスはCSSスタイルシートで定義されています。 スタイルシートのCSSはコメントが付けられており、目次も含まれているため、CSSに精通している場合は簡単にカスタマイズできます。

ヒーローセクション

ヒーローセクションには、プレースホルダー画像付きのグラデーションの背景が含まれています。 左側には、タイトル、説明、およびCTAを作成する2つのボタンがあります。 右側は、アプリのスクリーンショットを配置してCTAに注意を引くことができるプレースホルダー画像です。

特徴

Diviアプリの子テーマの機能セクションでは、タイトル、簡単な説明、大きな画像から始めて、視聴者にアプリを紹介します。 スタイル付きの宣伝文はアイコンを表示し、特定の機能を説明するのに最適です。 各要素は、画面の両側と下部から独立して所定の位置にスライドします。

交互のレイアウトの3つの行は、片側に画像、反対側に説明を含む詳細を提供します。 説明にはアイコンが含まれ、箇条書きとして機能します。 最初の2つの画像は縦向きモードで、3番目の画像は横向きのレイアウトです。 最初と最後はピンクの背景を表示し、中央の行は白です。 これは、それらの間に視覚的な違いを生み出すのに役立ちます。 最後の画像は角が丸く、さらにユニークなデザインになっています。

ギャラリー

ギャラリーは、アプリのスクリーンショットを表示する方法を提供します。 このセクションまでスクロールすると、4つの画像が1行として所定の位置に反転します。 背が高くて幅が狭く、ポートレートモードのスマートフォンにマッチする形をしています。これはアプリのスクリーンショットに最適です。 周囲の背景はクリアで、目が気を散らすことなく画像に焦点を合わせることができます。

価格設定

Divi Appの子テーマの価格設定セクションには、さまざまな方法で情報を提供する複数の行が含まれています。

価格表は3つの異なるサイズで表示され、最も人気のあるものが中央に表示されます。 サイズは推奨事項と一致し、最大のものが最も推奨されます。 それらは、グラデーションの背景をその角度の付いた仕切りとオーバーラップし、ボックスシャドウを含むため、背景や相互に目立ちます。 フォントとボタンの色は外側の2つのテーブルで一致し、中央のテーブルは目立ちます。 テーブルにカーソルを合わせると、テーブルが前面に表示されます。

CTAは、片側に小さな画像を表示し、反対側に情報と2つのボタンを表示します。 ボタンは、さまざまなアプリストアの画像のプレースホルダーです。

アプリの統計情報は、全幅の背景画像上に数値カウンターとともに表示されます。

お客様の声。

Divi Appの子テーマの証言セクションには、3つのユーザーレビューが、スタイル付きの引用アイコン、丸で囲まれた画像、テキスト、名前、タイトルが付いたカードとして表示されます。 タイトルは、次のセクションの背景など、子テーマの他のセクションの色を使用します。 このセクションまでスクロールすると、カードが所定の位置に飛び出します。

よくある質問

FAQは横からスライドインし、セクションよりもわずかに明るい背景でスタイル付きトグル内に回答を表示します。 背景色は、子テーマの他の要素のハイライトの一部と一致します。 また、読者の注意を引きたい任意のタイプの画像を使用できるプレースホルダー画像も含まれています。

クライアント

[クライアント]セクションには、クライアントのロゴを表示するための全幅の領域があります。 ロゴは画像モジュールです。 このセクションにスクロールすると、一度に1つずつ表示されます。

コンタクト

Diviアプリの子テーマの連絡先セクションには、FAQセクションと一致する赤い背景の上にいくつかの要素が表示されます。 最初の部分では、連絡先情報を紹介します。連絡先情報には、スタイル付きの連絡先フォームと連絡先情報が2列の行で含まれています。 情報には、スタイル付きのアイコンとテキストが表示されます。 各要素は下から所定の位置に反転します。

ニュースレターの部分には、タイトルと簡単な説明が表示され、スタイル付きの電子メールフォームに続いて、ソーシャルメディアのフォローアイコンが表示されます。 これらの要素は所定の位置にフェードします（または、フェードしないと思います）。

Diviアプリの子テーマメニュー

メニューには、ホームページの主要なセクションがそれぞれ含まれています。 URLとしてさまざまなセクションのアンカーが含まれているため、各メニューリンクをクリックするとセクションにスクロールします。

アンカーは、ホームページのCSSIDフィールドにすでに追加されています。 メニューリンクの名前を変更する場合は、セクションの[詳細設定]タブのCSSIDも一致するように変更する必要があります。

Diviアプリを購入する場所

DiviマーケットプレイスでDiviアプリの子テーマを19ドルで購入できます。 無制限の使用と1年間のサポートとアップデートが含まれます。

終わりの考え

これが、Diviアプリの子テーマについての説明です。 この1ページの子テーマには、アプリの機能を示す要素がたくさんあり、訪問者が購入できるいくつかのCTAを提供します。 要素の多くには、CSSクラスが含まれており、それらのスタイルを設定し、モバイルでの外観を制御して、あらゆるタイプのデバイスで適切に機能するようにします。 シンプルな子テーマでお得な価格です。 アプリの機能を強調するためのシンプルな1ページの子テーマに興味がある場合は、Diviアプリを一見の価値があります。

我々はあなたから聞きたい。 Diviアプリの子テーマを試しましたか？ 以下のコメントであなたの経験について教えてください。

Julia Tim /shutterstock.comによる注目の画像