dondiviでできる3つのクールなこと（無料ダウンロード）

Divi Anniversary Saleは本格的です。今年は、これまでに行ったことのないことをやっています。資格のあるDIVI製品を手に入れるすべての人に、プレミアムプラグインのDondiviスイート全体を無料で提供しています。これは、すぐにアカウントに追加された170ドル以上のツールを超えています。

このコレクションがどれほど強力かを示すために、dondiviとdiviを使用して3つのユースケースを作成しました。これらは単なる「クールなアイデア」ではなく、今日のコピー、カスタマイズ、および使用できる実用的なソリューションです。この投稿で使用されているすべてのレイアウトの無料ダウンロードも入手できるため、即座にインポートして構築できます。

これが私たちが店に持っているもののスニークピークです…

Dondiviで何ができるかを発見しましょう。

Dondiviスイート全体を無料で入手してください

私たちは最近、Dondiviコレクション全体を買収しました。そして、祝うために、記念日セール中に予選購入を行うすべての人に無料でそれを提供しています。これは、Divi Pro、Divi VIP、またはDiviバンドルを購入すると自動的にアカウントに追加された170ドル以上のプレミアムプラグインを超えています。

発表を読んでください

何が含まれていますか？

すべての資格購入は、次のようなDondivi製品の完全なコレクションのロックを解除します。

• Dondivi Builder - ポップアップ、グリッド、コンテンツの切り替え、タブ、ホットスポット、タイムラインなどを含む9つのモジュールのプレミアムセット。
• Divimenus - メガメニュー、スティッキーヘッダー、フローティングナビゲーション、ポップアップ、インタラクティブコンテンツを作成できる柔軟なメニュービルダー。
• DiviPasswords - パスワードは、単純なパスワードフィールドでセクション、行、またはモジュールを保護します。
• 分割署名- Diviビルダーを使用してカスタム電子メール署名を構築および管理します。検索可能なディレクトリが含まれています！
• フローティングディバイメヌス- カスタムポジショニングと視認性コントロールを使用して、画面上のどこにでもメニューを浮かびます。
• Divimenusの共有- Divimenusスタイルを使用して、Diviレイアウトに美しいソーシャル共有ボタンを追加します。
• メディアの神経義務- インタラクティブなメニューを画像やビデオに直接配置して、エンゲージメントを高めます。

そして、それはすべて無料です - 販売中に参加するだけです。

無料のdondiviコレクションを請求します

3つのクールなものがdondiviで構築できるもの

Dondiviは、単なるプラグインの束ではなく、Diviの本格的なクリエイティブツールキットです。ヘッダーを強化したり、滑らかなポップアップを作成したり、価格設定テーブルをよりインタラクティブにしたい場合でも、Dondiviはドラッグアンドドロップのシンプルさでそれを可能にします。

何が可能かを示すために、次の3つの実際の例を作成しました。

• Divi SaasのスターターサイトをDiviクイックサイト
• DivimenusおよびDondivi Builderプラグイン
• Diviライブラリにインポートされた既製のDondiviレイアウトがプロセスをジャンプするために

以下の各例には、クイックウォークスルーが含まれています。また、この投稿の最後に無料ダウンロードとしてレイアウトファイルをパッケージ化しました。

1. Divimenusを使用したスーパーチャージヘッダーメニューを作成します

基本的なヘッダーメニューにうんざりしていませんか？ Divimenusを使用すると、はるかにダイナミックなものを作成できます。メガメニュー、ホバー明らかに、モーダルを考えてください。

これが私たちがそれを構築した方法です：

テーマビルダーのグローバルヘッダーテンプレートを、既成のDondiviヘッダーメニューレイアウト（Divimenus Flexモジュールで構築）に置き換えて、実用的な例を示しました。

次に、 Divimenus Flexモジュールを使用して、さまざまなスタイルとリンクタイプの動的ヘッダーを構築しました。これが私たちのサンプルメニューに含まれるものは次のとおりです。

• ホーム- シンプルなURLリンク
• 特徴については、ブログ- それぞれが、メガメニュースタイルでライブラリからカスタムディーディレイアウトを明らかにします。
• 価格設定- 別の標準URLリンク
• 検索-ポップアップでスタイルの検索バーレイアウトを開きます
• 連絡先- 連絡先フォームを備えたポップアップとしても開き、アクションを促進するボタンとしてスタイル
• 無料で起動します- 価格設定ページにリンクする大胆なボタン
• ハンバーガーメニュー- このハンバーガーメニューには、モバイルにワードプレスメニューが表示されます（折りたたみ可能なサブメニューがあります！）

サブリンクタイプの完全なDiviレイアウトを表示します

メニュー項目にホバリング（またはクリック）するときにカスタム「メガメニューのような」レイアウトを表示するには、モジュールアイテム設定でサブリンクタイプを使用できます。

たとえば、「機能」メニュー項目をホバリングするときに機能のレイアウトを表示するには、最初にWebサイトからDIVIライブラリにセクションを保存する必要がありました。

次に、Divimenus Flexモジュールを開き、「機能」リンクタイプを「サブ」に変更しました。次に、コンテンツとしてライブラリから保存されたレイアウトを選択しました。

ブログやメニュー項目についても同じことをしました。それぞれのライブラリにカスタムレイアウトを保存し、メニュー項目設定のサブリンクタイプを使用して表示しました。

About Linkには、クリック可能なBlurbモジュールを使用したモックレイアウトが表示され、ブログリンクには、モックリンクがカテゴリへの動的なブログ投稿スライダーが表示されます。

それはほとんどそれです！これが結果です。

レイアウトをポップアップリンクタイプを使用してポップアップに変換します

検索と連絡先に、ポップアップリンクタイプを使用して、DIVIライブラリからカスタムレイアウトをトリガーしました。

「連絡先」のポップアップリンクを作成するには、デザインオプションを使用して、アイコン、背景色、ホバーエフェクトなどのリンクをスタイリングして、ボタンのように見て機能しました。次に、リンクタイプを「ポップアップ」に変更し、DIVIライブラリ（連絡先ページから入手した）から連絡先フォームレイアウトを選択しました。

オーバーレイの色、「閉じる」アイコンなどを変更するために、デザインに最終的なタッチをいくつか入れました。それだけです！

[連絡先]リンクをクリックすると、ポップアップレイアウトが表示されます。

検索アイコンをクリックするときに、検索バーポップアップを作成するために同じことを行いました。あなたがする必要があるのは、ライブラリから事前に設計された検索バーレイアウトを引くことです。

これが動作中のポップアップメニュー項目です。

スタイリングのヒント：

• 追加のポリッシュに各アイテムにアイコンまたはカスタム画像を使用する
• デザインの下>メニュー項目、パディングを調整し、ホバーエフェクト
• スクロール中にメニューが上にあるように、粘着性設定をオンにします
• モバイルにリンクテキストを非表示にするので、アイコンのみが表示され、スペースを保存します

Dondiviの神経師は、シンプルなヘッダーをブランドとユーザーに合わせたインタラクティブな体験に変えることができます。そして、それは氷山の一角にすぎません。このプラグインは、特にDondiviのフローティングディバイメヌス、Divimenus共有、およびメディア（販売中に無料）と組み合わせる場合にできることがたくさんあります。

2.クリック、スクロール、終了トリガーでカスタムポップアップを作成します

ポップアップは迷惑になる可能性があります。 Dondiviのポップアップモジュールを使用すると、完全に制御できます。 Diviレイアウトをポップアップとして表示し、必要なときにトリガーすることができます。

この例では、SaaSスターターサイトのホームページからCTAセクションを取り、スマートな出口を目的としたポップアップに変えました。これが私たちがそれをした方法です：

CTAセクションをホームページからDIVIライブラリに保存します。

新しいセクションを作成し、 Dondiviポップアップモジュールを追加します。

コンテンツ設定では、トリガータイプとして「Exit Intent」を選択します。次に、コンテンツタイプとして「Diviレイアウト」を選択し、ドロップダウンメニューのライブラリから対応するレイアウトを選択します。

ここでは、ポップアップが実行されます。

これは、訪問者を中断することなく行動を起こすのに最適な方法です。 Diviレイアウトを使用しているため、空はカスタマイズの限界です。

その他のヒント

• アニメーション設定を使用して、「ズームイン」や「スライドアップ」などのエントリ/終了効果を追加します
• ポップアップ幅、背景色、および閉じるボタンの位置を制御します
• 代わりにボタンをクリックしてトリガーしたいですか？ [トリガー]をクリックして切り替えて、 .cta-popupのようなCSSクラスを任意の要素に割り当てます
• スクロールトリガーを使用して、ユーザーがページを下にスクロールするときに特定の時点でポップアップショーを開催します。これは、ブログ投稿テンプレートに電子メールのオプチンポップアップを追加するのに最適です！

このDivi Popupモジュールは、Optinmonsterのようなより堅牢なポップアップソリューションや、ポップアップメーカーのような無料のWordPressプラグインにぴったりの無料の代替品です。

考えてみてください：Diviはあなたのポップアップビルダーです。 DIVIで設計できる場合は、必要なトリガーを使用してポップアップに表示できます。

3.スイッチまたはタブでコンテンツを切り替える（価格設定テーブルに最適）

訪問者にページを離れることなく、毎月と毎年の価格設定など、2つのビューを切り替える必要がありますか？ Dondiviコンテンツトグルモジュールはまさにそれを行います。価格設定テーブル、機能比較、または製品プランに最適な、2つのレイアウト間のスムーズでインタラクティブな切り替えを作成します。

この例では、DIVI SaaSスターターサイトの価格設定セクションを使用しました。価格設定セクションを複製し、重複セクションの価格設定を調整しました。次に、両方のセクションをDiviライブラリに保存しました。

レイアウトが保存されたら、価格設定ページに戻り、 dondiviコンテンツトグルモジュールを追加して静的価格設定コンテンツを置き換えました。

コンテンツ>レイアウトの下で、各トグル状態を保存したレイアウトのいずれかに割り当てます。毎月と毎年の状態の状態に名前を付けます。

また、ブランドに合わせて[デザイン]タブにトグルを設計できます。

これが結果です。

モジュールスタイリングのヒント

• クリーンでモダンなトグルスイッチデザインにスイッチモード設定を使用する
• スムーズな遷移のために、 Enter Effects Effectsを適用します
• デザイン設定を使用して、スタイルトグルラベルとコンテンツを独立して切り替える

2つのレイアウトを超えて、高度なタブ付きナビゲーションを構築したいですか？ dondiviタブモジュールをご覧ください。それはサポートしています：

• 水平および垂直タブのレイアウト
• タブごとに一意のスタイリングを備えた複数のコンテンツセクション
• アイコン、字幕、エントリ/エキットアニメーション

どちらのモジュールもDondiviビルダーに含まれており、Diviライブラリに保存するレイアウトでシームレスに作業します。

最終結果

これが最終結果です。

また、モバイルのメニューに何が起こるのか疑問に思っている場合、Dondiviで完全にカスタマイズできる折りたたみ可能なWordPressメニューがあります。

この投稿からすべてのレイアウトをダウンロードしてください（無料で！）

これらの例を自分で試してみませんか？この投稿で使用されているすべてのカスタムDiviライブラリレイアウトを、無料でダウンロード可能なzipファイルにパッケージ化しました。それらをサイトにインポートし、適切なモジュールに接続するだけで、準備ができています。

サンプルレイアウトをダウンロードします

内容：

• ページレイアウト- 必要に応じてWebサイトページを設定するため
• カスタムヘッダーメニュー- Divimenusを使用して構築したヘッダーメニューレイアウト。テーマカスタマイザーのメインヘッダーテンプレートに追加できます
• ヘッダーサブメナスレイアウト- 機能、アバウーム、ブログサブメニューコンテンツのための3 Diviライブラリレイアウト
• メニューポップアップレイアウト- 2レイアウト：1つは検索ポップアップ用、もう1つはメニュー項目をクリックするときに連絡先フォーム用に1つ
• 価格設定セクションレイアウト- 毎月および毎年の価格設定セクションレイアウト、コンテンツトグルモジュールで使用する準備ができています
• ポップアップレイアウト- 私たちが構築したdondiviビルダーポップアップのレイアウト

レイアウトの使用方法：

1. zipファイルをダウンロードして、コンピューター上のファイルを解凍します。
2。 「Dondiviユースケースレイアウト-All.json」ファイルをDIVIライブラリにインポートします。

3.次に、新しいホームページと価格設定ページを作成します。 Diviビルダーを使用して、ライブラリからSaaSホームページとSaaSの価格設定ページレイアウトを使用してページを作成します。これらのページには月/年の価格の切り替えが表示されるはずです。

4. Dondiviヘッダーメニューをテストするには、テーマカスタマイザーに移動し、ライブラリから「カスタムDMヘッダー」レイアウトを使用してデフォルトテンプレートに新しいヘッダーを作成します。

また、ボーナスを含めました。メンバーポータルからの無料のDondiviレイアウトのキュレーションコレクションです。これらのテンプレートは通常、DondiviのWebサイトからのみアクセスできますが、プラグインでそれらを整理したので、必要なものを簡単に見つけることができます。

ボーナス：Dondiviレイアウトライブラリをダウンロードします

Dondiviは、無料でダウンロードできる各製品ごとに多くの既製のレイアウトを提供しています。当社の販売中に資格のある購入を行うと、メンバーエリアの[市場]タブの下にあるすべてのdondivi製品のダウンロードと補足ファイルを見つけることができます。

これは、次のプロジェクトをジャンプするのに最適な方法です。または、現在無料でアクセスできるツールで可能なことを探ります。

あなたのdondiviコレクションを主張してください

Dondiviで構築を始めてください - 無料で！

メニューをアップグレードしたり、美しいポップアップを作成したり、DIVI Webサイトに強力なUI機能を追加したい場合でも、Dondiviにはジョブのツールがあります。そして、初めて、記念日のセール中にスイート全体を無料で入手できます。

しかし、待ってはいけません。このオファーは期間限定でのみ利用できます。販売が終了すると、無料ダウンロードも終了します。

セールに参加して、dondiviを無料で入手してください

これは、Diviエコシステムで最も創造的で柔軟なモジュールのいくつかを、追加のコストでデザインツールキットを充電するチャンスです。

あなたが何を構築するかを見るのが待ちきれません。

Divi Anniversary Saleはまもなく終了します

私たちの記念日販売には数日しか残っていません。そして、Diviエコシステム全体を節約する方法が満載です。 Diviが初めてであろうと、すでにメンバーであろうと、排他的なバンドル、巨額の割引、完全な購入購入で完全に無料のDondiviスイートなど、すべての人に何かがあります。

• Divi Pro - 78％オフ- Divi、Divi Ai、Divi Cloud、Divi VIP、Divi Dash、Diviチーム、さらに50ドルのMarketplaceクレジットとDondiviコレクション全体が含まれます。
• Divi AI - 60％オフ- WebサイトでトレーニングされたAIツールを使用して、DIVI内のコピー、画像、レイアウトを生成します。
• Diviクラウド - 40％オフ- すべてのWebサイトでレイアウト、テンプレート、コードを保存および同期します。
• Diviチーム - 40％オフ- チームまたはクライアントに、管理された役割と許可を持つDiviサービスへのアクセスを共有します。
• Divi VIP - 40％オフ- 30分以下の応答時間で24時間年中無休のプレミアムサポートを取得し、すべての市場での購入を10％オフにします。
• モジュールバンドル、機能バンドル、レイアウトバンドルを60％節約します。デビ市場のベストセラーモジュール、レイアウト、拡張機能のキュレーションコレクションをつかみます。
• 生涯のアップグレード- DIVIへの生涯アクセスと将来のすべてのアップデートに対して1回限りの支払いを行います。

待ってはいけません。取引をつかんで、今日Dondiviを無料にしてください。

私をセールに連れて行ってください