WordPress Diviテーマ:反応型アコーディオンスライドの作成方法

0

アコーディオンスライダー(Accordion Slider)を使用すると、狭いスペースにコンテンツを楽しく魅力的に表示することができます。 一般的に、アコーディオンのスライドは、カーテンを折りたたみように横方向に重なった複数の要素またはパネルで構成されます。 パネルのいずれかにマウスを置くと、そのパネルのコンテンツが繰り広げられ、他のパネルには、折ることになります。

エレガントなテーマでは、CSSのみを使用し、ワードプレスのDiviテーマで反応型アコーディオンスライダーを作成する方法を公開しました。 例では、Blurbモジュールを使用して、デスクトップでは、スライドが横方向に折り広がるようにしてタブレットとモバイルでは縦方向に表示されます。

アコーディオンスライダー例示

デスクトップ:

ワードプレスDiviテーマの反応型アコーディオンスライド
画像ソース:Elegant Themes

タブレットとスマートフォン:

ワードプレスDiviテーマの反応型アコーディオンスライド
画像出典:Elegant Themesブログ

Divi用反応型アコーディオンスライダーのレイアウト無料ダウンロード

次のElegant Themesブログ記事では、上記の図のように表示されるDivi用反応型アコーディオンスライダーのレイアウト(Divi Responsive Accordion Slider Layout)を無料でダウンロードすることができます。 そして、作り方も公開されているので参考にすることができます。

Divi 4.0カウントダウン

来る10月17日にDivi 4.0がリリースされる予定です。 Diviは継続的に機能を向上させ、新しい機能を追加しています。 最近では、呉コマース商品ページを自由にデザインすることができるWooCommerce Builder(右コマースビルダー)が追加されました。

現在のページビルダーは、ページのコンテンツの範囲が制限され、遅かれ早かれ公開されるDivi Theme Builderは、このような方法を変えるでしょう。 Theme BuilderでDivi Builderをワードプレスのサイトのすべての部分をカスタマイズするために使用することができそうですね。

既存の標準化されたヘッダとフッタに食傷した場合Divi 4.0を期待しても良さそうです。 Theme Builderで、ヘッダーとフッターを完全にカスタマイズすることが可能であり、現在のサイトレベルでのブログのポストと商品ページをデザインすることができるとします。

ちなみにDivi 4.0ランチングを記念して、MacBook Proを提供する景品イベントも進行しています。 しかし、現在の75,000人以上がイベントに参加しており、当選の可能性はほとんどないに見えます。ㅠ

Divi 4.0の詳細については、 Elegant Themesサイトを参照してみてください。

300x250  - ワードプレスDiviテーマ:反応型アコーディオンスライドの作成方法

注:

コメントを残す

コメントを入力してください!
名前を入力してください