フリップボックスと他の3つの新しいプロ機能の紹介

インタラクティブなデザインは今大流行しています。 ここElementorでは、サイトに双方向性を追加するさまざまな機能の提供に常に努めてきました。 ホバーとエントランスのアニメーション、カルーセル、スライド、トグルは、訪問者の操作を伴うウィジェットのほんの一例です。 今度は、別のレベルの対話性を追加する新しいウィジェット、フリップボックスウィジェットが登場します。

フリップボックスについて知っていると思っていたものはすべて忘れてください。 Elementor ProのFlipboxは、以下の例に示すように、より多くのデザインの可能性を提供します。

フリップボックスは、カーソルを合わせるとひっくり返るボックスです。 さまざまなアニメーションから選択し、各フリップボックスの外観と動作をカスタマイズできます。 フリップボックスは、コンテンツをより面白くし、ユーザーエクスペリエンスを向上させ、ビジネス機能、製品、およびサービスを強調するのに役立ちます。

Elementorの新しいフリップボックスウィジェットを使用すると、フリップ、プッシュ、スライド、フェード、ズームイン、ズームアウトなど、すべての基本的なフリップ効果を利用できます。 フリップアニメーションエフェクトはシームレスに機能し、一時的な中断やストールは発生しません。

魅力的な3D効果をコンテンツボックスに追加して、それらを本当にユニークにすることができます。 3Dオプションは、すべてのフリップ方向で使用でき、フリップボックスをさらに目立たせるために使用できます。

コンテンツは、フリップボックスの前面と背面の両方で、中央、右、または左に個別に配置できます。 上記のバナーボックスは、完全にフリップボックスウィジェットを使用して作成されており、コンテンツを左に揃えることを例示しています。

楕円形、丸いエッジ、長方形、点線のエッジ、または二重のエッジなど、さまざまな境界線オプションを使用してフリップボックスのスタイルを設定します。 境界線を使用して、上の画像のようなユニークなボックスデザインに到達できます。

フリップボックスに、ソリッド、グラデーション、または画像の背景を追加します。 フリップボックスの両側に個別の背景を追加して、2つの側面を完全に区別するオプションを提供できます。

フリップボックス内に画像やアイコンを組み込むことで、フリップボックスをより豊かにします。 これを使用して、投稿にリンクする視覚的でインタラクティブなボックス、または興味深いチームメンバーボックスを作成できます。 可能性はあなた次第です。

フリップボックスを試して、さらに想像力豊かなデザインを作成してください。 このウィジェットをシンプルでありながら、洗練されたフリップボックスを作成できるように、より柔軟で堅牢にするように努めました。

ブログページを上から下にデザインするのにどれくらい時間がかかりますか？

本日は、同じ結果を数時間ではなく数分で取得できるウィジェットの改善点をご紹介します。 この改善により、ブログのデザインを楽しくライブで視覚的に行うことができます。

Elementor Proに含まれる最も驚くべき機能の1つは、投稿ウィジェットです。 コーディングなしでブログページを視覚的にデザインする機能は、真のゲームチェンジャーです。 このウィジェットの問題は、ブログの組積造のレイアウトをまだ作成できず、投稿にページネーションが含まれていないことでした。

現在、石積みのレイアウトとページ付けの両方を導入し、投稿ウィジェットをWordPressの究極のビジュアルブログメーカーにしています。

投稿ウィジェットを使用して、石積みグリッドに投稿を表示できるようになりました。 これは、Pinterestのようなグリッドで投稿を紹介できることを意味します。 次のリリースでは、ポートフォリオウィジェットに石積み機能を追加します。

ページネーションオプションを使用すると、ブログのデザインを簡単に試すことができます。 これで、前/次のスタイルなどのページネーション要素を含むブログデザイン全体を制御できます。

また、ページ付けがSEOに適していることも確認しました。 Elementorのページ付けは、URLに関しては通常のWordPressのページ付けと同じように機能するため、作成されるすべてのページ付けリンクに対して同じSEOフレンドリーリンクを取得できます。

スライドは、もう1つの非常に便利なPro機能です。 今週は、ユーザーのリクエストから直接得られる2つの調整をこのウィジェットに追加します。

これまで、スライドウィジェットに画像を表示するには2つのオプションがありました。

1. カバー–このオプションは、画像がスライダー全体を「カバー」するようにします。 たとえば、縦長の画像を読み込むと、画像の上下がカットされ、ズーム表示されます。
2. 自動–このオプションは、画像の実際のサイズを表示します。

ここで、別の表示モードを追加します： Contain 。 このオプションは、スライドの制限内に含まれる画像を表示します。 幅の広いスライダーで幅の狭い画像を使用しているとしましょう。幅の狭い画像はスライダーの高さの100％を占め、スライダーの左側と右側には背景色が表示されます。

一方、幅の狭いスライダーで幅の広い画像を使用している場合、幅の広い画像はスライダーの幅の100％を占め、スライダーの上下に背景色が表示されます。

アメリカのドキュメンタリーにちなんで呼ばれるKenBurnsエフェクトを使用すると、スライダーに表示される静止画像にパンおよびズームエフェクトを追加できます。

ケンバーンズエフェクトは、プロスライドウィジェットでのみ使用できます。 オプションが表示されるようにするには、特定のスライドに画像を追加する必要があります。

ElementorプラグインとElementorProプラグインの両方を更新して、すべての新機能が正しく機能することを確認してください。

本日追加された機能、フリップボックス、石積み、ページ付け、ケンバーンズ効果はすべて、すでに視覚的に豊富なページビルダーに追加されます。 それぞれを試して、新しいページの作成を私たちと共有することをお勧めします。

Elementor Proにまだアップグレードしていない場合は、アップグレードする絶好のチャンスであり、プラグインに追加したばかりの新機能を試してみてください。