Divi – 究極のWordPressテーマ&ビジュアルページビルダー

WordPress関連

※この記事はDiviのWebサイトに掲載された文章を引用・翻訳・要約して作成しています。

  1. Divi
  2. 視覚的に構築する
  3. WYSIWYGの未来
    1. ドラッグ&ドロップで構築
    2. 真のビジュアル編集
    3. カスタムCSSコントロール
    4. レスポンシブ編集
    5. 豊富なデザインオプション
    6. インラインテキスト編集
    7. デザインの保存と管理
    8. グローバルエレメント & スタイル
    9. 元に戻す、やり直す、修正する
  4. Diviはすべての人のためにある
    1. フリーランサー
    2. エージェンシー
    3. ウェブサイト所有者
  5. 200以上のフルウェブサイトパック
  6. WordPressの完全なデザインシステムはここにある
    1. 完全なデザインコントロール
    2. 最適化&コンバージョン
    3. ウェブサイトをより速く構築
  7. 「カスタマイズ」すべてをコントロールするデザイン
    1. ホバー状態のスタイリング
    2. レスポンシブ編集
    3. フォントとテキストのスタイリング
    4. シェイプディバイダー
    5. ボーダーオプション
    6. トランスフォームコントロールとエフェクト
    7. 高度なコード編集
    8. フィルター&エフェクト
    9. ドロップシャドウ
    10. テキストシャドウ
    11. アニメーション
    12. 背景画像、色、グラデーション、動画
    13. 背景マスクとパターン
    14. スティッキーヘッダーとスタッキングコンテンツ
    15. 高度なアニメーションとスクロールエフェクト
    16. 高度な表示条件
  8. 「スピード」Diviを高速化しました。超高速。
    1. 肥大化しない
    2. 重要なCSS
    3. スピードブースト
    4. マルチセレクト&一括編集
    5. スタイルの検索と置換
    6. マジックカラーマネージャー
    7. スタイルのコピー&ペースト
    8. 拡張可能なスタイル
    9. Diviのクイックアクション
    10. レイヤービュー
    11. ドラッグ&ドロップでアップロード
  9. 「効率化」これまで以上に効率的な設計を
    1. キーボードショートカット
    2. 要素のスタイリングにすばやくアクセス
    3. 検索可能な設定
    4. 設定と検索のフィルタリング
  10. 「マーケティング」eコマース、リードジェネレーション、スプリットテストと強力なコンバージョンインサイトの構築
    1. メールオプトインプロバイダーサポート
    2. プライシングテーブル
    3. お問い合わせフォームの作成
    4. ソーシャルフォロー
    5. 組み込みのスプリットテスト
  11. 「WooBuilder」Divi Builderで素晴らしい製品を構築し販売する

Divi

世界で最も人気のあるWordPressテーマと究極のWordPressページビルダー

視覚的に構築する

Diviは、驚くほど先進的なビジュアルビルダーテクノロジーでWordPressを新しいレベルに引き上げます。これまでにないWordPressのウェブサイトを構築できます。DiviはWordPressテーマだけでなく、標準のWordPress投稿エディターを優れたビジュアルエディターに置き換える新しいウェブサイト構築プラットフォームです。デザインプロフェッショナルから初心者まで楽しめ、驚くほど簡単かつ効率的に素晴らしいデザインを作成する力を与えます。

WYSIWYGの未来

ドラッグ&ドロップで構築

ウェブサイトのフロントエンドで、要素を追加、削除、移動することができます。コーディングや分かりにくいバックエンドオプションは不要です。

真のビジュアル編集

リアルタイムでページをデザインし、その結果を即座に確認できます。直感的なビジュアルコントロールを使用して、ページを作成、カスタマイズできます。

カスタムCSSコントロール

Diviのビジュアルデザインコントロールと、開発者独自のカスタムCSSを簡単に組み合わせることができます。Diviのインターフェイスはシンプルでありながら、制限されることはありません。

レスポンシブ編集

美しいレスポンシブWebサイトの構築は簡単です。Diviはレスポンシブデザインに対応しており、モバイル端末での表示も完全にコントロールできます。

豊富なデザインオプション

数十種類のユニークなページ要素と、数千種類のデザインオプションが用意されています。Diviでは、ウェブサイトのデザインを自在にコントロールできます。

インラインテキスト編集

クリックするだけで、テキストを入力できます。ページの編集は、かつてないほど簡単です。フロントエンドでページの下書きをすれば、入力と同時に結果が表示されます。

デザインの保存と管理

カスタムデザインは無制限に保存・管理できます。新しいページをすぐに始められるよう、簡単に再利用できます。高度なデザインシステムを構築し、ワークフローを効率化できます。

グローバルエレメント & スタイル

グローバルエレメントとWebサイト全体のデザイン設定を使用して、Webサイト全体のデザインを管理できます。Diviは単なるページビルダーではなく、ウェブサイトデザインシステムなのです。

元に戻す、やり直す、修正する

Diviは、最新のソフトウェアアプリケーションのように動作します。編集履歴を簡単に元に戻したり、やり直したり、移動することができます。ミスがあっても、Diviなら安心です。

Diviはすべての人のためにある

フリーランサー

Diviは、クライアントのためのウェブサイトをより簡単に、より速く、より楽しく構築できるようにします。Diviを使えば、何十種類ものテーマを管理する代わりに、一つのプラットフォームであらゆるものを作ることができます。

エージェンシー

Diviは、ウェブサイト制作をより速く、より効率的にします。デザインプロセスを合理化し、チームのコラボレーションを向上させます。しかも、驚くほど手ごろな価格です。1つのメンバーシップで、クライアントのために無制限のウェブサイトを構築できます。

ウェブサイト所有者

Diviは、ウェブサイトをより簡単に構築します。Diviは、初心者やウェブサイトの所有者に、自分のビジョンを実現する自由を提供します。Diviのビジュアルエディタと数百種類の既成のデザインは、誰でも簡単に利用できます。

200以上のフルウェブサイトパック

2,000以上の既成のウェブサイトレイアウトが、Diviの中に無料でパッケージされています。新しいレイアウトは、ロイヤリティフリーの写真、アイコン、イラストとともに毎週追加されています。

※この記事はDiviのWebサイトに掲載された文章を引用・翻訳・要約して作成しています。

WordPressの完全なデザインシステムはここにある

完全なデザインコントロール

Diviは単なるWordPressテーマではなく、ウェブサイトのあらゆる部分を一からデザインし、カスタマイズできる、完全なデザインフレームワークです。細部に至るまで、すべてをコントロールすることができます。あなたやあなたのクライアントのために、完璧なウェブサイトを作りましょう。

最適化&コンバージョン

Diviは強力なデザインツールを備えているだけでなく、ウェブサイトを成功に導くためのサポートも提供します。ブルームポップアップでマーケティングリストを作成しましょう。Monarchソーシャルシェアリングで、ソーシャルメディア上でウェブサイトを宣伝できます。Divi Leadsのスプリットテストでウェブサイトのコンバージョンを向上させましょう。

ウェブサイトをより速く構築

ウェブデザインのプロなら、Diviのスピードと効率にきっと驚かれることでしょう。Diviは初心者でも簡単に使えるウェブサイトビルダーというだけでなく、あなたのチームのワークフローを次のレベルへと引き上げる高度なデザインシステムです。

「カスタマイズ」すべてをコントロールするデザイン

ホバー状態のスタイリング

ホバーオプションを使用すると、魅力的なホバー効果を作成し、Diviモジュールを楽しくてインタラクティブな要素に変換することができます。ホバーオプションのインターフェイスはユニークで、驚くほど使いやすくなっています。トランジションをサポートするDiviのすべてのデザイン設定は、ホバー時に簡単にカスタマイズできるようになりました。

レスポンシブ編集

Diviなら、レスポンシブWebサイトの制作も簡単です。Diviはデフォルトでレスポンシブデザインに対応していますが、さらに一歩進んで、各モバイルデバイスのデザイン設定を完全にコントロールできるようになっています。これにより、コンピューター、タブレット、スマートフォンの各要素の外観を完全に調整することができます。

フォントとテキストのスタイリング

テキストとフォントのオプションが充実しています。数百種類のウェブフォントから選ぶことも、自分で用意したフォントをアップロードすることもできます。テキストサイズ、文字間隔、行の高さをカスタマイズできます。フォントの太さやテキストのスタイルを変更できます。アンカーリンク、リスト、ブロック引用符など、標準的なテキスト要素をすべて制御できます。

シェイプディバイダー

カスタムシェイプやエフェクトをページに追加して、コンテンツのブロック間にダイナミックなトランジションを作成し、ウェブサイトに個性的な雰囲気を加えることができます。シェイプディバイダーは、ウェブサイトの各セクションの上下に配置でき、ページの異なる部分間の魅力的なトランジションエフェクトを簡単に構築することができます。

ボーダーオプション

Diviの強力なボーダーエディターを使って、あらゆる要素にボーダーを追加できます。丸みを帯びたコーナーも作れます。ボーダーのサイズ、色、スタイルを制御し、要素の各エッジを個別に調整することでユニークなエフェクトを作成できます。

トランスフォームコントロールとエフェクト

Diviでは、PhotoshopやSketchのようなグラフィックデザインプログラムでしかできないような方法で、ページ上の要素を変形させることができます。要素の移動、拡大縮小、3種類の軸での回転、変形原点の傾きや調整も簡単にできます。これらはすべて、各変換が簡単に実行でき、理解しやすい、非常に洗練されたインターフェイスを使用して行われます。

高度なコード編集

コードの記述と編集をより簡単に、より楽しくする、フル機能のコードエディタをお楽しみください。シンタックスハイライト、エラーレポート、オートコンプリート、カラーピッキング、複数行選択、検索、検索と置換などの機能があります。Diviのコードモジュールを使って、あらゆる要素にカスタムCSSを追加したり、あらゆるページに独自のコードを追加することができます。

フィルター&エフェクト

色相、彩度、明度、コントラスト、反転、ぼかし、不透明度、セピアなど、さまざまなフィルタやエフェクトを使って、要素の外観を簡単に調整し、美しくすることができます。背景のブレンドモードを使って、魅力的なデザインを作成できます。

ドロップシャドウ

カスタムドロップシャドウを作成することで、ページに深みを加えることができます。シャドウのサイズ、位置、色、強さは自由に設定できます。ドロップシャドウの作成は簡単で、グラフィックデザインソフトウェアを使用する必要もありません。

テキストシャドウ

テキストシャドウを使って、魅力的なテキストエフェクトを作成できます。Diviのシンプルなプリセットを使えば、どんな要素にも簡単にテキストシャドウを適用できます。また、豊富なコントロール機能を使えば、オリジナルのテキストシャドウを作ることも可能です。

アニメーション

あらゆる要素に簡単にアニメーションを追加できます。アニメーションプリセットを使ってシンプルなアニメーションを適用したり、アニメーションの種類、速度、方向をカスタマイズして独自のアニメーションを作成することもできます。エレメントが表示されたときにトリガーされる美しいアニメーションで、ページをスクロールしていく訪問者を驚かせましょう。

背景画像、色、グラデーション、動画

カスタム背景色、背景グラデーション、背景画像、背景ビデオをあらゆる要素に適用できます。グラデーションや画像の重なりを楽しむエフェクトや、背景のブレンドモードを使って色や画像を合成し、ユニークなデザインを作ることもできます。

背景マスクとパターン

背景マスクは、背景画像、グラデーション、動画をマスクして、新しいシェイプを作ることができます。これにより、デザインの可能性が大きく広がり、Photoshopなどのグラフィックデザイン・プログラムを使わなくても、Builder内で美しく軽快なシェイプを作成することができます。マスクはパターンと組み合わせることができ、背景要素の上にテクスチャを追加できます。

スティッキーヘッダーとスタッキングコンテンツ

ユーザーがページを上下にスクロールすると、粘着性のある要素が画面に「貼りつく」ようになります。ブラウザの上部や下部に貼り付けたり、重ねて表示させることも可能です。メニューやナビゲーションなどの関連情報を強調したり、関連するコンテンツを表面化して、ユーザーがページをスクロールする際に物語を構築できます。

高度なアニメーションとスクロールエフェクト

ページを上下にスクロールする際に、訪問者と対話するような魅力的なモーションエフェクトを作成できます。静的なアニメーションではなく、ユーザーとのインタラクションによって変化する生きたアニメーションです。Diviのモーションエフェクトを使えば、訪問者の注意を引きつけ、飽きさせない、本当に魅力的なデザインを作ることができます。

高度な表示条件

Diviの条件オプションにより、あらゆる要素に高度な表示ロジックを適用できます。ユーザーの役割、日時、投稿情報、ウェブサイトの場所など、定義した条件に基づいて、要素を隠したり、表示したりすることができます。Diviの高度な条件を使えば、さまざまなことが可能です。顧客が購入した製品に基づいて、製品情報を表示する。ユーザーがログインしたときに、異なるコンテンツを表示する。セール期間中だけ表示され、セールが終わると自動的に消えるコンテンツを作成する。可能性は無限大です。

「スピード」Diviを高速化しました。超高速。

肥大化しない

Diviは、使っていないリソースを自動的に削除することで、肥大化を解消します。Diviは、あなたが使うモジュールや機能に必要なCSSだけを読み込み、ページのレンダリングに必要なPHP関数だけを処理します。それ以外はすべてカットされます。だから、Diviは多くのことをこなしながら、軽快な動作を続けることができるのです。

重要なCSS

Diviは、フォールドより上のコンテンツに必要なCSSを自動的に検出し、それ以外のCSSは省略します。これにより、レンダリングを阻害するCSSを完全に排除し、コンテンツに直接アクセスできる超高速の高速道路を提供します。コンテンツがすぐに表示されるため、GoogleはDiviのサイトに高いスコアを与えています。

スピードブースト

Diviには、不要なリソースの遅延、リクエストのキャッシュ、レンダーブロックを引き起こすアセットの削除など、スピードアップのためのオプションが豊富に用意されています。これにより、最初の読み込み時間が大幅に短縮され、コンテンツの読み込みがすぐに開始されます。これには、JavaScriptの遅延、Google Fontsのキャッシングなどが含まれます。

マルチセレクト&一括編集

マルチセレクトがすごい。Diviでは、CmdキーやCtrlキーを押しながらクリックすることで、ページ上の複数の要素を一度に選択することができます。これらの要素を同時に編集して、スタイルやコンテンツを一緒に変更したり、グループとしてページ上の別の場所に移動したりできます。

スタイルの検索と置換

ページ全体のスタイルを瞬時に変更できるので、編集にかかる時間を大幅に短縮できます。検索と置換を使用すると、色やフォントなどのデザイン値をページ全体または特定の場所で変更できます。各要素を個別に開いて何度も色を変更する代わりに、文書全体を検索して置き換えるだけです。驚くほど簡単です。

マジックカラーマネージャー

Diviは、最近使った色を自動的に記憶し、簡単にアクセスできるように保存します。また、カスタマイズ可能なあなただけのカラーパレットも表示されます。さらに、Diviは高度な色彩理論を使って独自の拡張カラーパレットを作成し、あなたのページに似合う色の候補を表示します。

スタイルのコピー&ペースト

要素間でスタイルをコピー&ペーストできる機能は、ゲームチェンジャーに最適です。Diviでは、ある要素から何かをコピーして、別の要素にペーストすることができます。個々の設定、設定グループ、あるいは要素全体のデザインをコピーして、ページ上の別の要素に転送することができます。デザイン設定を開いて、何度も編集する必要はありません。コピー&ペーストするだけです。

拡張可能なスタイル

Diviの拡張スタイル機能は、デザインの効率をまったく新しいレベルに引き上げます。作成したばかりのデザインスタイルを、ページ内の他の場所やページ全体で使いたい場合、そのスタイルを自動的に拡張して、希望する場所に配置するだけです。数百の要素を一度に更新 スタイルを拡張する場所や要素を正確にコントロールできます。例えば、画像のボックスシャドウとボーダーのスタイルを完璧に作り上げたものの、ページ上に画像が何十枚もあるとします。そのスタイルを他の画像にも即座に適用できます。

Diviのクイックアクション

Diviのクイックアクションは、検索も実行もできるオールインワンシステムです。設定を探すのにお困りですか?ビルダーでどのように動作するのか知りたいですか?入力するだけで、ヘルプビデオや利用可能なすべてのDiviのオプションが検索できます。エレメントの追加やレイアウトの読み込みなど、高度な操作も可能です。数回のキー操作でビルダーの別の場所にジャンプしたり、別のページや別のWordPress管理エリアにジャンプすることもできます。超高速で、時間を大幅に節約できます。

レイヤービュー

Diviのレイヤービューパネルを開くと、コンテンツの階層構造を見ることができます。レイヤービューパネル内のコンテンツを操作しながら、同時にページ制作ができます。ドラッグ&ドロップ、コピー&ペースト、レイヤーパネルを使用して、長いページ内のさまざまなエリアにすばやく移動できます。

ドラッグ&ドロップでアップロード

メディアファイルをドラッグ&ドロップでページに直接アップロードできます。メディアファイルはすぐにアップロードされ、あなたのデザインに表示されます。Diviのレイアウト全体をドラッグ&ドロップして、直接インポートできます。新しいウェブフォント、テキストファイル、ビデオなどをドラッグ&ドロップで取り込めます。WordPressのメディアライブラリを使用する必要はありません。

※この記事はDiviのWebサイトに掲載された文章を引用・翻訳・要約して作成しています。

「効率化」これまで以上に効率的な設計を

キーボードショートカット

キーボードショートカットは、究極の効率化の鍵です。Diviには、上級ユーザーが作業フローを大幅にスピードアップするために使えるキーボードショートカットが豊富に用意されています。ショートカットを使いこなすと、ショートカットなしでどうやって生活していたのか不思議に思うでしょう。

要素のスタイリングにすばやくアクセス

Diviのエレメントには、膨大な数のデザイン設定が用意されています。しかし、Diviでは、これらの設定を簡単に検索、フィルタリングでき、すでに変更した設定にすばやくジャンプできます。変更済みのスタイルを表示すると、現在有効なすべての設定のリストが表示されるので、オプションの全容を把握する必要がありません。Google Chromeの「コンピュータのスタイルを表示」フィルタに非常によく似ています。

検索可能な設定

Diviのすべての設定は、検索可能です。探している特定のオプションを見つけるためにさまざまなオプショングループを探し回る代わりに、設定のポップアップを開いたときに入力し始めるだけで、結果が適宜フィルタリングされます。どこにオプションがあるかわかっていても、検索すればすぐに見つかります。さまざまなタブやグループをクリックする必要はありません。背景色を編集したい場合は、「background color」と入力すれば、すぐにオプションが表示されます。

設定と検索のフィルタリング

Diviの設定項目は、フィルタリングが可能です。さまざまな検索フィルターを適用することで、検索結果を絞り込み、探しているものを見つけることができます。検索結果をフィルタリングして、修正スタイル、レスポンシブスタイル、ホバースタイルなど、さまざまなグループに設定を整理することができます。

「マーケティング」eコマース、リードジェネレーション、スプリットテストと強力なコンバージョンインサイトの構築

メールオプトインプロバイダーサポート

Diviのメールオプトインモジュールで、メールマーケティングリストを作成しましょう。Diviでは、さまざまなメールプロバイダをサポートしており、ほぼすべてのプラットフォームでリストを作成することができます。カスタムフィールドの作成も可能なので、セグメント化されたリストの構築や、購読者から独自の情報を収集することができます。また、GDPRに準拠した機能も備えています。

プライシングテーブル

価格表は、Diviが提供する数多くのページ要素の一つです。デザインとコンテンツの設定を自在に操り、魅力的な商品の販売ページを作成できます。

お問い合わせフォームの作成

フル機能のコンタクトフォームビルダーをお楽しみください。カスタムフォームフィールドを作成し、訪問者からあらゆるタイプの情報を収集できます。高度な条件設定ロジックにより、入力フィールドを非表示にしたり、表示したりできます。豊富なデザインオプションで、各入力を個別にスタイル設定できます。

ソーシャルフォロー

DiviのソーシャルフォローモジュールとMonarchのソーシャル共有システムで、ソーシャルフォローの構築を支援します。Diviでは、ソーシャルメディアのプロフィールを簡単に宣伝することができます。

組み込みのスプリットテスト

Diviのスプリットテストシステムは冗談ではありません。Diviでは、あらゆるものをテストできます。さまざまなデザインやコンテンツを互いにテストし、独自の目標を設定して、各バリエーションがどのように機能するかを確認できます。Diviは強力なインサイトを提供するので、最適なバージョンを選択し、実証済みの結果を使用してウェブサイトのコンバージョン率を高めることができます。

※この記事はDiviのWebサイトに掲載された文章を引用・翻訳・要約して作成しています。

「WooBuilder」Divi Builderで素晴らしい製品を構築し販売する

DiviはWooCommerceと互換性があります。WooCommerceの統合機能を提供しており、この2つの組み合わせは完璧です。WooCommerceは無料で利用できるため、Diviを使用している人は追加費用なしでオンライン販売を開始できます。