エレガントなテーマの外観Divi2.4

公開: 2015-06-22

divi-サムネイル Diviは現在エレガントなテーマで最も強力で高度なWordPressテーマであり、歴史上最大のアップグレードでアップグレードされたばかりです。 Diviは、興味深いレイアウトやコンテンツ領域を作成するために使用できるビルディングブロックを提供します。 テキスト、スライダー、マップ、宣伝文句、アコーディオン、価格体系などを追加できます。 事実上、必要なあらゆるタイプのWebサイトを作成できます。 そしてもちろん、それは敏感です。

私はそれがリリースされた最初の日からDiviユーザーです。 この記事では、Diviについての私の考えを共有し、バージョン2.4の新機能を見ていきます。

2.4の新機能

Divi 2.4は、ETの将来の製品ラインの基盤です。 1000を超えるモジュール設計とカスタマイザー設定があり、いくつかの興味深い機能が追加されています。

  • グローバル設定–サイト全体の調整が簡単
  • 流動グリッド–ページレイアウトの幅は固定されていません。 流体グリッドを使用すると、独自の幅を作成できます。
  • 高度なビルダー設定–すべてのモジュールにはシンプルなUIからの高度なCSS設定があります。
  • Diviライブラリ–高度なレイアウト。

テーマオプション

テーマオプション

すべてのETテーマは、epanelと呼ばれるオプション画面を使用します。 epanelの機能は、テーマの機能によって異なります。 Diviのepanelは広範です。 ロゴ、ファビコン、固定ナビゲーションバー、最初の画像の取得、ブログスタイル、表示する投稿の数などの基本機能があります。次のような多くのオプションが追加されます。

  • WooCommerceショップページ
  • MailChimpキー
  • Aweber認証
  • ソーシャルメディアアイコン
  • ソーシャルメディアのURL
  • Google Fonts
  • スムーズなスクロール–次の行とその内容をスクロール時にフェードインできます
  • レスポンシブショートコード
  • トップに戻るボタン
  • カスタムCSS
  • もっと

ナビゲーション設定には、ページ、カテゴリ、ホームリンク、ドロップダウンメニューなどが含まれます。レイアウト設定、広告管理、SEOのカスタマイズ、高度なコード統合、およびドキュメントがあります。 epanelからだけで多くのカスタマイズを行うことができます。

テーマカスタマイザー

テーマカスタマイザー

テーマカスタマイザーはフロントエンドから機能し、フォントサイズ、スタイル、行、ボタン、色、アニメーション、ヘッダーサイズ、フッターサイズ、背景画像などを調整するためのスライダーを多数追加します。 すべての調整を行い、発生した効果を確認できます(WYSIWYG –表示されるものが得られるものです)。

ヘッダーに連絡先情報とソーシャルリンクを配置できます。 ヘッダーは、重要な情報を前面と中央に配置し、読者が下にスクロールしても画面に表示されるため、ビジネスに特に適しています。 レイアウトと地形も含まれます。 標準のカスタマイズと同様に、ナビゲーション、ウィジェット、および静的フロントページを選択できます。

タブレットや携帯電話のモバイル設定を調整することもでき、それぞれが他のすべての設定や相互に独立しています。 モバイルデバイスをシミュレートする画面に効果が表示されるため、公開する前にその効果を確認できます。 調整を行っただけでサイトがどのように表示されるかを確認するためだけにモバイルデバイスを入手する必要がないため、これは優れた機能です。 これが含まれているのを見て本当にうれしいです。

モジュールカスタマイザー

モジュールカスタマイザー

モジュールカスタマイザーを使用して、フロントエンドのモジュールの外観をカスタマイズできます。 カスタマイズには、サイズ、幅、高さなどのスライダーが含まれます。フォント、スタイル、アニメーション、アクションなどを選択することもできます。

ディビライブラリ

ディビライブラリ

Diviライブラリには、作成したレイアウトが含まれています。 このメニューから、任意のレイアウトを編集して新しいレイアウトを作成できます。

ディビビルダー

ディビビルダー

Diviの本当の魔法は、DiviBuilderを使用するときに発生します。 これを使用するには、ビジュアルエディターの上にある[ディビビルダーを使用]というラベルの付いたボタンを選択します。 以前のエディションには、ページのみで機能するページビルダーがありました。 Divi Builderは、すべての投稿タイプで機能します。

  • Diviはまた、投稿設定をエディターに追加して、ページレイアウト、ドットナビゲーション、ナビゲーションの非表示、および必要に応じて各投稿の投稿タイトルの非表示を選択できるようにします。

ページレイアウトをロードするか、デフォルトのレイアウトを変更できます。 レイアウトは、行と列のあるセクションで構成されています。 次に、モジュールが列に配置されます。 セクション、行、列、またはモジュールをドラッグアンドドロップして、レイアウトを変更できます。

セクション

セクション

セクションは、追加、削除、複製、および変更できます。 背景の外観と反応の変更、背景画像の追加、背景の透明化、色の選択、ビデオの再生、全体のサイズの選択、他のプレーヤーが一時停止できるかどうか、内側の影があるかどうかを変更できます、視差効果を使用する場合は、特別なCSSを設定します。 これらの設定を使用すると、同じ単純なレイアウトをユニークに見せることができます。

各セクションのクローンを作成することもできます–同じ行、モジュール、コンテンツ、および設定で完了します。 もちろん、新しいセクションを好きなように変更できます。

セクションには4つの異なるタイプがあります。 標準セクション、全幅セクション、特殊セクションを追加するか、ライブラリから追加できます。

行

新しい行を追加したり、既存の行を変更したりできます。 次に、列を行に配置して、レイアウトを構築できます。

列

これらの列は、モジュールが追加される場所です。 選択できる11の異なる列レイアウトがあります。

専門セクション

専門セクション

9つの特殊な列レイアウトもあります。 これらには、サイドバーのさまざまなオプションが含まれます。

ライブラリからロード

ライブラリからロード

32の事前定義されたレイアウトからレイアウトをロードすることも、作成したものからレイアウトをロードすることもできます。 それぞれを変更することができます。 レイアウトには、さまざまな数の列、グリッド、カルーセル、サイドバー、ホームページ、ショップ、企業、ポートフォリオ、ブログ、メンテナンスモード、近日公開、ランディングページ、販売ページ、ケーススタディ、製品機能、概要ページ、連絡先ページ、ショッピングページなど。

ライブラリ2からロード

ページは、行を配置し、それらの行内に列を配置してから、それらの列にモジュールを配置することによって作成されます。 新しい行を追加したり、ドラッグアンドドロップで行を移動したり、行を削除したりできます。 事前に作成されたレイアウトには、これらがすでに作成されています。 Homepage Basicを選択すると、スライダー、ヘッダー、4つの宣伝文句、および行動を促すフレーズを含むレイアウトが得られました。

モジュール

モジュール

モジュールは特別なコンテンツタイプ(ウィジェットなど)です。 新しいモジュールを追加したり、任意の順序でドラッグアンドドロップしたり、削除したりできます。 さまざまな種類のコンテンツを追加することもできます。 モジュールはいくつでも持つことができ、好きな組み合わせで使用できます。 同じモジュールを使用する回数に制限はありません。 たとえば、マップでいっぱいの画面が必要な場合は、必要な数のマップモジュールを追加するだけです。

40のモジュールがあります:

  • 全幅ヘッダー
  • 全幅メニュー
  • 全幅スライダー
  • 全幅ポートフォリオ
  • 全幅マップ
  • 全幅コード
  • 全幅画像
  • 全幅の投稿タイトル
  • 画像
  • ギャラリー
  • ビデオ
  • ビデオスライダー
  • 文章
  • 宣伝文句
  • タブ
  • スライダー
  • 推薦状
  • 価格表
  • アクションの呼び出し
  • オーディオ
  • サインアップ
  • ログイン
  • ポートフォリオ
  • フィルタリング可能なポートフォリオ
  • バーカウンター
  • サークルカウンター
  • ナンバーカウンター
  • アコーディオン
  • トグル
  • お問い合わせフォーム
  • サイドバー
  • 仕切り
  • ブログ
  • カウントダウンタイマー
  • 地図
  • ソーシャルメディアフォロー
  • 記事のタイトル
  • コード

それはあなたがあなたのウェブサイトのためにいくつかの興味深いレイアウトと機能を作成することができるのに十分なモジュールです。 モジュールはDiviの強みの1つです。 モジュールを列に配置することで、文字通り独自のレイアウトを作成できます。 モジュールを使用すると、Diviを使用してほぼすべての種類のサイトを作成できます。

各モジュールには独自の設定があります。 それらのほとんどには、エディター、高度なデザイン設定、およびCSS設定があるため、コンテンツを追加したり、ルックアンドフィールを変更したりできます。 いくつかのモジュールとその機能を次に示します。

文章

文章

テキストは、基本的なエディターとテキストの色と向きの選択、高度なデザイン設定(幅、高さ、色、余白などのスライダー)、およびカスタムCSSを提供します。 ほとんどのモジュールには、これらまたは同様の機能が含まれています。

宣伝文句

宣伝文句

宣伝文句をクリックして、追加できるコンテンツの種類を確認しました。 ここでは、タイトル、URLを指定し、URLがどのように機能するかを判断し、アイコンを指定し、色、フォント、内線番号を選択してから、標準のTinyMCEエディターを使用してコンテンツを追加できます。 高度なデザイン設定には、テキストモジュールと同じ設定が含まれていますが、画像設定が追加されています。

地図

地図

マップは、通常のマップ(地形の有無にかかわらず)として表示したり、衛星ビュー(ラベルの有無にかかわらず)で表示したりできる優れたマップを提供します。 地図上の特定の場所を強調表示できるように、ピンを追加できます。 アドレスを入力し、新しいピンを追加することを選択するだけです。 詳細設定では、パーセンテージコントロールを備えたグレースケールフィルターが提供されます。

ブログ

ブログ

ブログモジュールは興味深いものです。 これにより、任意の幅の単一の列内にブログ投稿を配置できます。 私がこれを気に入っている理由は、静的なフロントページを作成しても、選択した特定のカテゴリのブログ投稿を表示できるからです。 必要な数だけ表示でき、抜粋、作成者名、日付、カテゴリ、ページネーション、注目の画像、続きを読むボタンなどを表示できます。 これは面白い雑誌スタイルのレイアウトになります。 テキストモジュールと同じ高度なデザイン設定が含まれていますが、背景色とヘッダーにいくつかの追加設定があります。

記事のタイトル

記事のタイトル

これは新しいモジュールの1つです。 投稿タイトルの外観をデザインし、含めるものと含めないものを選択できます。 高度なデザイン機能は、背景色などのいくつかの追加設定を除いて、テキストモジュールとほとんど同じです。

投稿タイトル2

投稿タイトルモジュールの高度なデザイン設定を見てみましょう。

通常のテーマとしてDiviを使用する

通常のテーマとしてDiviを使用する

もちろん、これらの機能を使用する必要はありません。 他のテーマと同じようにDiviを使用できます。 epanelで必要な設定を選択し、標準のエディターを使用して通常のようにコンテンツを作成するだけです。 これにより、そのまま使用できるほどエレガントなシンプルでクリーンなWebサイトまたはブログが作成されます。

言語サポート

言語サポート

Diviには30以上の言語のサポートが組み込まれており、他の言語に翻訳することができます。 これには、フロントエンドとビルダーが含まれ、RTL言語が有効になっている場合は右から左に表示されます。

Diviを取得する

Diviを取得する

DiviはETのパーソナルプランの一部であり、年間69ドルで、すべてのテーマへのアクセス、永続的な更新、サポート、無制限の使用が含まれています。 サブスクリプションをキャンセルすると、ETからダウンロードしたすべてのものを保持できます。

私の意見では、Diviだけでもその価格の価値があります(特に、この口径のほとんどのテーマがこれよりもはるかに高いと考える場合)が、87のテーマとカウントが含まれていると考えると、少なくとも1年間エレガントなテーマに参加することはできません-ブレイナー。

さらに先へ

ETのアジェンダの次のリリースは、Divi Builderプラグインです。これは、Extraと呼ばれる雑誌のテーマで、同じ構成要素を共有しますが、雑誌のレイアウトに重点を置いています。次に、Divi3.0です。 ETがDiviとDiviビルダープラットフォームの成功に全力で取り組んでいることは明らかです。 Divi 2.4を見たので、Divi3.0の改善点と機能を想像することはできません。

DiviBuilderプラグイン

Diviの欠点の1つは、ページレイアウトを作成すると、ページと投稿を再作成せずにテーマを切り替えることができないことです。 ETは、使用しているテーマに関係なくレイアウトを維持する無料のプラグインでこれを解決しました。 ETのテーマを使用しなくても、すべてのレイアウトとモジュールを保持できます。 このプラグインはまもなく利用可能になるはずです。

最終的な考え

Diviは複雑なレイアウトを作成できますが、それでも使いやすいです。 大きな学習曲線はありません。 独自のカスタムレイアウトを作成したり、スライダーを使用して外観を変更したりする場合は、要素を簡単に追加したり、ドラッグアンドドロップしたりできます。 それらは、必要に応じて複雑にすることも単純にすることもできます。

レイアウトを希望どおりに作成するには時間がかかる場合がありますが、少なくともレイアウトをテンプレートとして保存するか、事前に作成されたレイアウトを使用すると、開発時間を大幅に節約できます。 高度なスタイルの調整がこれまでになく簡単になり、すべての設定に元に戻すボタンがあるため、間違いを心配する必要がありません。 Diviで作成されたサイトは、どのデバイスでも印象的で、読み込みが速くなります。 エレガントなテーマのDivi2.4を強くお勧めします。

Diviの詳細とダウンロードはこちら

君はどうでしょう? Diviを試しましたか? あなたの経験は私のようなものでしたか? 追加するものはありますか? 以下のコメントでそれについて教えてください。