DiviテーマでRevolution Sliderを全体の幅に追加する方法

FacebookさえずりredditPinterestのLinkedInのmail

Diviテーマで使用されるDivi Builderにサードパーティのプラグインで提供されるショートコードを簡単に追加することができます。 この記事では、Diviテーマでレボリューションスライダー(Revolution Slider)を全体の幅に追加する方法について説明します。

DiviテーマでRevolution Sliderを全体の幅(Full-width)に追加する方法

Divi Builderには、 Code ModuleFullwidth Code モジュールの二つのコードモジュールが提供されます。 DiviテーマでDiviビルダーを有効にして Fullwidth section(全幅セクション)を作成し Insert Module(s)をクリックすると、次のようにモジュールを選択する画面が表示されます。

Divi BuilderのFull-width Codeモジュール

Fullwidth Codeをクリックすると、次の図のように Fullwidth Code Module Settings ウィンドウが表示されます。

Divi BuilderのFullwidth Codeモジュールの設定

ショートコードを追加するには、Content:横にあるテキストフィールドに貼り付けします。

Fullwidth Slider Revolutionスライダーを追加する

例えば、上記の Fullwidth Code モジュールを使用して簡単に Revolution SliderスライダーをFullwidth(全幅)に追加することができます。

まず、Slider Revolutionでスライダーを作成するようです。 次にスライダーのショートコードを確認してコピーします。 ショートコードを確認するには、ワードプレスの管理ページの左側のパネルで 革命スライダーをクリックして、スライダーのリストから目的のスライダーの上にマウスを置きます。 これにより、スライドの名前と一緒にいくつかのアイコンが表示されます。

レボリューションスライダーショートコードを確認する

V字形状のアイコンをクリックすると、ドロップダウンメニューが表示されます。 "スライダーを埋め込む」をクリックすると、スライダーのショートコードを確認することができます。

Revolution Sliderショートコード

スライダーを埋め込む ウィンドウに表示されているショートコードをコピーするようにします。

さて、先ほど説明した方法に応じて、Divi Builderで Fullwidth Code モジュールを好きなところに追加します。 Fullwidth Code モジュールにコピーしたRevolution Sliderショートコードを貼り付けます。

Divi Builderにショートコードを追加する

今保存し、次のページを確認してみると、レボリューションスライダーが全幅(Fullwidth)で表示されます(デモ).

上記の内容を参考にしレボリューションスライダーだけでなく、他の要素をFull-widthに追加することができます。

ちなみにビジュアルコンポーザーで画面の左右にタイト満たすよう作成する方法は、 この記事を参考にしてみてください。 しかし、テーマに沿ってうまくいかない場合もあるようです。 Divi Builderを使用する場合VCよりも容易に制御が可能であると感じました。

ああ、海, 円フォールド などのテーマを使用して、YouTubeの映像や雨メオ映像を背景に追加することができます。

注:



コメントを残す