コードモジュールは、プラグインショートコードや静的HTMLコードなどのコードをページに追加できる空白のキャンバスです。 サードパーティのスライダープラグインなどのサードパーティのプラグインを使用する場合は、プラグインのショートコードを標準または全幅のコードモジュールに配置するだけで、要素を自由に表示できます。
コードモジュールをページに追加する方法
ページにコード モジュールを追加する前に、まず Divi Builder にアクセスする必要があります。 一度 Diviテーマ あなたにインストールされている サイトのWeb、あなたはボタンに気づくでしょう Divi Builderを使用する 新しいページを作成するたびにパブリッシャーの上に表示されます。
このボタンをクリックすると、Divi Builderがアクティブになり、すべてのDiviBuilderモジュールにアクセスできるようになります。 次に、ボタンをクリックします ビジュアルビルダーを使用する ビジュアルモードでジェネレーターを起動します。
ボタンをクリックすることもできます ビジュアルビルダーを使用する あなたがあなたを閲覧するとき サイトのWeb WordPress ダッシュボードにログインしている場合はアップストリーム。
Visual Builderに入ったら、灰色のプラスボタンをクリックして、ページに新しいモジュールを追加できます。 新しいモジュールは、行内にのみ追加できます。 新しいページを開始する場合は、最初にページに行を追加することを忘れないでください。
モジュールのリストでコードモジュールを見つけ、それをクリックしてページに追加します。 モジュールのリストは検索可能です。つまり、「コード」という単語を入力してからEnterキーを押すと、コードモジュールが自動的に検索されて追加されます。 モジュールが追加されると、モジュールオプションのリストが表示されます。 これらのオプションは、XNUMXつの主要なグループに分けられます。 中身 , 概念 et 高度な .
個々のページのコンテンツをアニメーション化するために鈍いスタイルシートを追加することによるユースケース
この例では、Animate.cssをインポートするリンクスクリプトを追加して、ページ上の要素にアニメーション効果を追加します。 Animate.cssファイルには多くのコードが含まれているため、必要なページにのみロードするのが理にかなっています。
通常のセクションと全幅の行（1列）を追加して、コードモジュールを追加するだけです。
のテキストボックスに、 コンテンツ、コードスニペットを追加します。
あなたがしなければならないのはあなたのページ上のあなたのCSSクラスページの任意の要素をアニメーション化するためにいくつかのCSSクラスを追加することです。 この例では、ページが読み込まれたときにボタンをバウンスします。
ボタンモジュールの設定の[詳細設定]タブで、[CSSクラス]テキストボックスに「アニメーション」と「バウンス」のXNUMXつのクラスを入力します。
ページが読み込まれると、ボタンがバウンスします。
ヒント：改行を含むコードを追加すると、コードが機能しなくなる場合があります。 テキストエディタでコードを作成し、コードモジュールに貼り付けることをお勧めします。
コードコンテンツオプション
のタブで コンテンツ, テキスト、画像、アイコンなど、モジュールのすべてのコンテンツ要素が表示されます。 コントロールするものすべて 何 モジュールに表示されるのは常にこのタブです。
中身
ここで、ページの現在の場所に表示する HTML、CSS、または JavaScript コードを配置できます。 フィルター処理されていない HTML を投稿できるのは編集者と管理者のみです。つまり、作成者または寄稿者がコードを使用した場合、コースからコードが削除される可能性があります。 モジュールにショートコードを配置することもできます。 これらのコース コード (ショートコード) は、追加の Divi モジュール ラッパーなしで親列内に表示されます。
管理ラベル
これにより、ジェネレーターのモジュールラベルが変更され、簡単に識別できるようになります。 Visual BuilderでWireFrameビューを使用する場合、これらのラベルはDiviBuilderインターフェイスのモジュールブロックに表示されます。
コード設計オプション
[デザイン]タブには、フォント、色、サイズ、間隔など、すべてのモジュールスタイルオプションがあります。 このタブでは、モジュールの外観を変更できます。 各Diviモジュールには、ほぼすべてを微調整するために使用できる設計設定の長いリストがあります。
最大幅
ここに入力する値は、コードモジュールでレンダリングされるコンテンツの幅を設定値に制限します。 たとえば、入力フィールドに50％と入力すると、コードモジュールの内容がそれを含む列の50％に削減されます。
コード詳細オプションコード
[詳細設定]タブには、カスタムCSSやHTML属性など、経験豊富なWebデザイナーが役立つと思われるオプションがあります。 ここでは、モジュールの多くの要素のいずれかにカスタムCSSを適用できます。 カスタムCSSクラスとIDをモジュールに適用することもできます。これを使用して、子テーマのstyle.cssファイルでモジュールをカスタマイズできます。
CSS ID
このモジュールの使いやすいCSSIDを入力します。 識別子を使用して、カスタムCSSスタイルを作成したり、ページの特定のセクションにリンクしたりできます。
CSSクラス
このモジュールで使用するオプションの CSS クラスを入力します。 CSS クラスを使用して、カスタム CSS スタイルを作成できます。 複数のクラスをスペースで区切って追加できます。 これらのクラスは、 Diviテーマ 子、またはページまたはページに追加するカスタム CSS 内 サイトのWeb DiviテーマオプションまたはDivi Builderページ設定を使用します。
カスタムCSS
カスタムCSSは、モジュールおよびモジュールの内部要素に適用することもできます。 [カスタムCSS]セクションには、CSSを各要素に直接追加できるテキストフィールドがあります。 これらの設定のCSSエントリには、すでにスタイルタグが埋め込まれています。 したがって、セミコロンで区切ってCSSルールを入力するだけです。
可視
このオプションを使用すると、モジュールが表示されるデバイスを制御できます。 タブレット、スマートフォン、またはデスクトップでモジュールを個別に非アクティブ化することを選択できます。 これは、さまざまなデバイスでさまざまなmodを使用する場合、またはページから特定の要素を削除してモバイルデザインを簡素化する場合に役立ちます。
このチュートリアルは以上です。
