Smart Slider とBeaver Builder：まさに完璧な組み合わせ。一方はビジュアルストーリーテリングの達人、もう一方は精密なレイアウトの達人。この2つの強力なツールを組み合わせれば、 究極のWordPressサイト構築体験が実現します。シームレスな統合、直感的なインターフェース、そしてコンバージョン重視のデザイン機能を備えたSmart SliderとBeaver Builderを使えば、コードを一行も書かずに、魅力的でダイナミック、かつ高性能なウェブサイトを作成できます。
これらがなぜ、どのようにうまく連携するのかを探ってみましょう。.
スマートスライダーとは何ですか?
Smart Sliderは、WordPress用の非常に柔軟で強力なスライダープラグインです。基本的なカルーセルをはるかに超えるスライダーを作成できます。Smart Slider 3では、ドラッグ＆ドロップ機能、ダイナミックスライド、高度なアニメーションを使用して、美しいスライダーをデザインできます。豊富なテンプレート、レイヤーオプション、モバイル最適化ツールも搭載されています。.
従来のWordPressスライダープラグインとは異なり、Smart Slider 3はそれ自体がミニページビルダーのような機能を備えています。直感的なスライドエディターUIを使用して、スライドに見出し、テキスト、画像、ボタン、さらには動画を追加できます。.
スマートスライダーの主な機能:
- ドラッグアンドドロップスライドエディター
- スライドの背景画像のサポート
- WordPressの投稿、カスタム投稿タイプ、または外部ソースからの動的スライド
- テンプレートと美しいスライダーライブラリ
- 静的オーバーレイ背景オプション
- 使用しているWordPressテーマとの互換性
- スライダーの詳細をピクセル精度で編集する機能
画像スライダー、ビデオショーケース、推薦ローテーター、ヒーローバナーなどを作成する場合でも、Smart Slider はプロフェッショナルな作成を実現するツールを提供します。.
Beaver Builder とは何ですか?
Beaver Builder は、WordPress向けの高評価ページビルダープラグインで、ビジュアルエディターを使ってレスポンシブなウェブサイトを構築できます。クリーンなコード、安定性、開発者フレンドリーなフレームワークで知られ、代理店やフリーランサーなど、幅広いユーザーから信頼されています。
リアルタイムのフロントエンド編集、高度なレイアウトコントロール、カスタムモジュールを備えています。Beaver Builderを使えば、ランディングページ、サービスセクション、価格表、お問い合わせフォームなどを作成できます。そして何より嬉しいのは、コーディングが一切不要だということです。.
Beaver Builder のコア機能:
- ライブフロントエンド編集
- モバイルレスポンシブレイアウト
- あらかじめデザインされたテンプレート
- 画像、スライダー、ボタンなどのカスタムモジュール
- との統合 WooCommerce、WordPressユーザー、サードパーティツール
- 人気のWordPressテーマやプラグインとの互換性
Smart SliderとBeaver Builderが完璧な組み合わせである理由
Smart SliderとBeaver Builderを組み合わせることは、Webデザイナーにとって夢のようです。Smart Sliderが動的なコンテンツとインタラクティブなビジュアルを扱い、Beaver Builderがページ構造とコンテンツフローを管理します。.
両方を併用すると、次のことが可能になります。
- スライダーを作成し、ドラッグアンドドロップで正確に配置します
- スマートスライダーをウィジェットとしてBeaver Builderの行または列内に追加します。
- Smart Sliderの無料版またはプロ版をシームレスに使用
- スライダーが遅れることなく適切に読み込まれるページを設計する
- 単一のスマートスライダー管理領域からスライダー設定を管理します
これらを組み合わせることで、デザインの制約がなくなります。スライドの背景画像と複数のテキストレイヤーを備えたヒーローセクションが欲しいですか？ 簡単です。ケーススタディページ内にダイナミックなスライドが欲しいですか？ 簡単です。.
Beaver Builderでスマートスライダーを使う方法
- 両方のプラグインをインストールします。まず、WordPress サイトに Smart Slider 3 と Beaver Builder をインストールします。.
- Smart Slider インターフェースを使用してスライダーを作成します。あらかじめデザインされたテンプレートから選択するか、最初から作成します。.
- Beaver Builder でページを開きます。HTML またはショートコード モジュールをドラッグします。.
- スライダーを埋め込む: Smart Slider からショートコードを貼り付けます。.
- 間隔、配置、レイアウトを調整する: Beaver Builder の余白とパディングの値を使用して、デザインを微調整します。.
テーマでサポートされている場合は、スマート スライダー ウィジェットを直接使用することもできます。.
利点：
- WP Rocketの互換性修正により、スライダープラグインの読み込み速度が向上
- スマートスライダー表示は、ビーバービルダーの全幅行内に固定されます。
- ヒーローセクション、ポートフォリオ、または推薦文にレスポンシブスライダーを埋め込む
- スマートスライダーのぼかしフィット塗りつぶしモードとレイヤートランジションを使用してアニメーションを追加します
高度な使用方法とトラブルシューティング
これら 2 つのツールを一緒に使用するのは通常は簡単ですが、注意すべき例外的なケースがいくつかあります。
- Firefox のモバイル スライド スワイプに関する修正
- WP Grid Builder の 競合または Themify Builder の競合はプラグインのアップデートにより修正されました
- WP Meteorプラグインの互換性問題が解決されました
- Avada Builderの 互換性に関する修正（テーマを切り替える場合）
- WP Bakery フロントエンドエディターは Smart Slider のインライン JavaScript オプションと共存します
また、スライダーの読み込みに失敗したり、画像サイズのボックスが重なったりする場合は、次の点を確認してください。
- レスポンシブレイアウトと競合する絶対位置のレイヤーを避ける
- WordPressの管理バーでプラグインの更新アラートを確認してください
- モバイルとタブレットのビューに適切なスライダーのサイズを使用する
続きを読む: 3.4 の最も重要な変更点
スピードと効率を重視した構築
Beaver Builderは、ページのレイアウト、構造、そしてレスポンシブ性を保証します。Smart Sliderは、動き、インタラクティブ性、そしてストーリーテリングによって、ページに活気を与えます。.
あなたはできる：
- スライダーにカスタム投稿タイプを動的に追加する
- 最近のブログ投稿や注目の商品を表示するスライダーを作成する
- パフォーマンスを向上させるために、サムネイル画像のサイズを変更した設定を使用する
- テキストの視認性を高めるために、適応型フォントサイズ変更または非適応型フォントサイズ変更を適用する
Smart Slider 3 のパフォーマンス最適化には以下が含まれます。
- 出力バッファの修正と出力バッファの問題に関するアラート
- 背景ビデオの修正とアニメーションの読み込み遅延時間の制御
- Googleのモバイルフレンドリーテストのコンプライアンス
- キャッシュGoogle FontsおよびWP Compressとの互換性
スマートスライダーのデザインのヒント
- 簡単にナビゲートできるように、外側の右コントロール位置などの外側に配置されたコントロールを使用します。
- ページネーションと検索オプションを備えた美しいスライダーを活用する
- 要素を適切にグループ化することで、ネストされたレイヤーによるエラーを回避します。
- 強制全角計算でスライダーが表示される問題を修正
- スライド エディター UI から画像レイヤー ボックスの影とスライドの CSS 設定を管理します。
これらのオプションはすべて無料版でも利用できますが、高度な機能にはプロ版が必要です。.
このコンボは誰が使うべきでしょうか?
- マーケティングサイトやポートフォリオを構築する代理店
- インタラクティブなホームページスライダーを作成するデザイナー
- ダイナミックなスライドを求めるブロガーやコンテンツクリエイター
- コレクションや季節のセールを宣伝するEコマースサイト
ビルダーによって作成された、パフォーマンスの高いスライダーと変換可能なページの組み合わせにより、このコンボは戦略をエンドツーエンドでサポートします。.
最後に
高性能なウェブサイト制作において、Smart SliderとBeaver Builderはまさに完璧な組み合わせです。クライアントサイトを構築するフリーランサー、大規模なクリエイティブエージェンシー、あるいはWordPressサイトを1つだけ管理するビジネスオーナーなど、この2つのツールの相乗効果はプロセスを効率化し、成果物の質を高めます。高度なデザインニーズへの対応、コントロール、創造性、スピード、そしてサポートを求めるなら、Smart SliderとBeaver Builderに勝る組み合わせはありません。スライダータイトルの間違い、データベースの列数制限、PHPエラーメッセージの警告とはおさらばです。Smart SliderとBeaver Builderがあれば、自信を持ってウェブサイトを構築できます。.
