ディビは間違いなくそのXNUMXつです WordPressテーマ今日最も人気があります。このテーマの強みを構成する要素の XNUMX つは、そのビルダー (Divi Builder) です。 視覚的な作曲家.

Divi Builderには、標準の「バックエンドビルダー」と「ビジュアルビルダー」のXNUMXつの形式があります。どちらのインターフェースでも、同じコンテンツと同じデザインパラメータを使用してまったく同じタイプのWebサイトを構築できます。唯一の違いはインターフェースです。バックエンドビルダーはWordPressダッシュボード内にあり、他のすべての標準WordPress設定でアクセスできます。

これは、WordPressユーザーインターフェイス内にあり、標準のWordPress投稿エディターに置き換わるものです。ダッシュボード内ですばやく変更を加えるのに最適ですが、ダッシュボードによって制限され、Webサイトのブロック表現としてレンダリングされます。このチュートリアルでは、ビジュアルビルダーのみに焦点を当てます。

DIVI WordPressテーマをダウンロード

一方、まったく新しいVisual Builderを使用すると、Webサイトのフロントエンドでページを作成できます。それは素晴らしい経験であり、はるかに高速な設計を可能にします。ビジュアルビルダー内でコンテンツを追加したり、デザイン設定を調整したりすると、変更内容がすぐに表示されます。

ページをクリックして入力を開始できます。テキストを強調表示し、フォントとスタイルを調整できます。新しいコンテンツを追加し、ページを構築して、目の前で起こっているすべてを見ることができます。

ビジュアルビルダーを有効にする方法

WordPressダッシュボードにログインすると、Webサイトのフロントエンドの任意のページに移動し、WordPress管理バーの[VisualBuilderをアクティブ化]ボタンをクリックしてビルダーを起動できます。ビジュアル。

ダッシュボードでページを編集している場合は、Divi Builderバックエンドインターフェイスの上部にある[ビジュアルビルダーを有効にする]ボタンをクリックして、ビジュアルビルダーに切り替えることができます（最初に行う必要があることに注意してください）。ビジュアルビルダーボタンが表示される前に、Divi Builderをアクティブにします）。

ビジュアルビルダーの基礎

Diviの力は、「ドラッグアンドドロップ」と連携するページビルダーであるVisual Builderにあります。これにより、コンテンツを組み合わせて配置することで、ほぼすべてのタイプのWebサイトを構築できます。

ビルダーは、セクション、行、モジュールのXNUMXつの主要な構成要素を使用します。それらを同時に使用すると、無数のレイアウトを作成できます。セクションは最大の構成要素であり、行のグループを収容します。行はセクション内にあり、モジュールを収容するために使用されます。モジュールは行の内側に配置されます。これが各Diviウェブサイトの構造です。

セクション

Diviでレイアウトを設計する際に使用される最も基本的で最大のビルディングブロックはセクションです。これらはコンテンツの大きなグループを作成するために使用され、これがページに最初に追加するものです。セクションには、レギュラー、スペシャリティ、フル幅のXNUMX種類があります。

通常のセクションは列の行で構成され、全幅のセクションは画面の全幅を広げる全幅のモジュールで構成されます。特別なセクションにより、より高度なサイドレイアウトが可能になります。

行

行はセクション内にあり、セクション内に任意の数の行を配置できます。選択できる列にはさまざまな種類があります。行の列構造を定義したら、モジュールを目的の列に配置できます。 XNUMX列に配置できるモジュールの数に制限はありません。

モジュール

モジュールは、Webサイトを構成するコンテンツの一部です。各Diviモジュールは任意の列幅に適応でき、すべて完全に応答します。

最初のページを作成する

3つの基本的な構築ブロック（セクション、行、およびモジュール）を使用してページを構築します。

最初のセクションを追加する

ページに何かを追加する前に、まずセクションを追加する必要があります。青い（+）ボタンをクリックすると、セクションを追加できます。ページに既に存在するセクションにカーソルを合わせると、青い（+）ボタンが下に表示されます。クリックすると、現在ホバーしているセクションの下に新しいセクションが追加されます。

新しいページを開始すると、最初のセクションが自動的に追加されます。

最初の行を追加する

最初のセクションを追加したら、内部に列の行を追加し始めることができます。セクションには任意の数の行を含めることができ、さまざまなタイプの列の行を組み合わせて、さまざまなレイアウトを作成できます。

行を追加するには、空のセクション内の緑色（+）ボタンをクリックするか、現在の行にカーソルを合わせたときに表示される緑色（+）ボタンをクリックして、下に新しい行を追加します。緑色（+）ボタンをクリックすると、列タイプのリストが表示されます。選択した列を選択すると、最初のモジュールを追加する準備が整います。

最初のモジュールを追加する

モジュールは行内に追加でき、各行には任意の数のモジュールを含めることができます。モジュールはページのコンテンツ要素であり、Diviには構築に使用できる40を超えるさまざまな要素が付属しています。

Texts、Images、Buttons などの基本的なモジュール、または Sliders、Portfolios Galleries などのより高度なモジュールを使用できます。 eコマースショップ。

モジュールを追加するには、空の列内にある灰色（+）ボタンをクリックするか、ページ上のモジュールにカーソルを合わせて下に新しいモジュールを追加するときに表示される灰色（+）ボタンをクリックします。。ボタンをクリックすると、モジュールのリストが表示されます。

選択したモジュールを選択すると、ページに追加され、モジュールのコントロールパネルが表示されます。このコントロールパネルを使用して、モジュールの構成を開始できます。

このチュートリアルは以上です。今日学んだことで、Divi でレイアウトを作成できるようになります。この件に関する高度なチュートリアルで戻ってきます。すでにダウンロードできます Diviテーマ.

[vc_row center_row = "yes"] [vc_column width = "1/2"] [vcex_button target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700" style = "flat" custom_background = "＃18b69d" custom_hover_background = "＃118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fafa-download"] DIVIテーマをダウンロード[/ vcex_button] [/ width_column] [»vc_column] [» vc_column] 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center "font_family =" Raleway "font_weight =" 700″ style = "flat" custom_background = "＃c4226e" custom_hover_background = "＃8d184f" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fafa-download"]ダウンロードTEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

他のDiviチュートリアル

類似したアイテム

2コメント

マッシミリアーノ 23年2021月9日55時間XNUMX分

Chiedoscusasenonèlasezioneesattama non riesco avisualizzare le mie pagine create convisual builder divi attraverso il suo tema se non tengo attivato ilvisual builder divi、altrimenti non vedo la formatttazione dellepag。ロケール内のvedereil miositoごとのflywheeloppurexammpによるUsolocal。 Grazie e buonlavoro。
返事
ゼニ・イラワン 21年2020月19日午前25時XNUMX分

diviテーマに関して私が直面している問題、変更できないdiviテーマを修正する方法（diviジェネレーターはクリックできない、相互にのみ）を管理者に尋ねる許可すべては私が.htaccessファイルを編集してURLをhttpからhttpsにリダイレクトした結果、エラーが発生し、管理領域に入ることができず、バックアップがありませんでした。つまり、 WordPressの管理エリアに入ると、ウェブサイトの外観が少し変わったので、divi（ページ）ビルダーに入りました。これは、問題が円を描くようにのみ発生する場所です。 BlogPascher管理者が解決策を提供してくれることを本当に望んでいます。ありがとうございました
返事

コメントを投稿 Annulerラréponse

このサイトでは、望ましくないものを減らすためにAkismetを使用しています。コメントデータの使用方法の詳細.

WordPressでDivi Builderプラグインを使用する方法