Z インデックスをオンにしてフローティング ボタンを作成しますか? Elementor ?
すべての画面コンテンツの前に表示され、通常は円形で中央にアイコンが表示されるボタンについては、ご存知のとおりです。 さて、それはフローティングアクションボタンです。
フローティングアクションボタンは、アクションをトリガーしたり、どこかに航海したりできます. 電子メール、ソーシャル ネットワーク、オリエンテーションのトリガーなど 訪問者 チャンネルを購読するため、および他の多くの。
DANS Elementor、フローティング アクション ボタンを作成するには、次の XNUMX つの方法があります。
- Z-Indexを設定する
- ポップアップウィンドウを作成する-Popup-
このチュートリアルでは、Zインデックスを設定してフローティングアクションボタンを作成する方法のみを示し、プロバージョンを使用してそれを実現します。
しかし、最初に、以下を見つけてください。 WordPressにElementorをインストールする方法
Elementorでフローティングアクションボタンを作成する方法
無料版を使用できますElementor このメソッドを使用してフローティング アクション ボタンを作成します。 ただし、デザインしたボタンを、ボタンを表示したい各ページに貼り付ける必要があります。 ウェブサイト.
とともに Elementorプロ、この機能にアクセスすることもできます カスタムCSS、このチュートリアルで使用します。
Elementorエディターに移動します。 既存のコンテンツ（ページ、記事など）を変更したり、新しいコンテンツを作成したりできます。 このチュートリアルでは、ページを変更します。
まず、単一の列を持つ新しいセクションを作成します。 ボタンウィジェットを選択します ウィジェットパネルから編集領域にドラッグアンドドロップします。 次にボタンを変更します テキスト と リンク。
このチュートリアルでは、ボタンをトリガーとして使用して、 訪問者 ナビゲートするには サイトのWeb エレメンター。 次に、オプションで Alignement、に設定します ドロワット et, 最後に、 タイユ オンボタンの 非常に大きい.
上のGIFでわかるように、このボタンはセクション内で静止しています。 次に、同じ位置に保ちながらスクロールしながら動かします。
タブに移動します 高度な。 パラメータ内 レイアウト、幅を設定します インライン（車）で、 を定義する 固定上の位置、 セットする 水平方向 上の ドロワット 調整します décalage 必要に応じて。
次に、このメソッドの要点を定義します。 現場で Z-インデックス、番号9999を入力します ; ボタンが常に前面（フローティング）になります。
次に、フローティングアクションボタンを回転させます。 常にタブの下 高度な、アクセス cssクラス ブロックから レイアウト, 次に書く rotate 内部。
参照： Elementor：最高のWordPressページビルダーの紹介
その後、ブロックに移動します カスタムCSS 、次に次のコードをフィールドに貼り付けます。
.rotate.rotate
{transform: rotate(90deg);}ノブがちょうど回転したことがわかりますが、画面の側面の間に奇妙なギャップがあります。 だから、調整して修正しましょう décalage à-92
最後に、このフローティングアクションボタンの最後の小さなタッチを行います。 ブロックにアクセスする トランスフォーマー、それを選択します 概要、 オプションにアクセスする シフト 各オプションをに設定します 7.
Elementorで特定のことを達成するためのいくつかのオプションがあります。 フローティングボタンに関しては、XNUMXつのオプションを使用できます。 ここではXNUMXつの方法のみを取り上げましたが、もうXNUMXつの方法は別のチュートリアルになります。
また読みます： Elementor：WordPressWebサイトを移行する方法
より多くのスタイリングオプションが必要な場合は、ポップアップのビルダーを使用してフローティングアクションボタンを作成することをお勧めします。ボタンをカスタマイズするオプションと、ボタンの閉じる時間、継続時間、開始または終了のアニメーションなどの動作があります。 。
このタスクは簡単に完了しました。 タブレットとスマートフォンの動作をプレビューし、各デバイスに合わせてマージンを変更してみてください。
Elementor Proを今すぐ入手！
まとめ
そう ！ プロファイルカードにズーム効果を適用する方法を示すこの記事は以上です。 そこへの行き方について懸念がある場合は、内でお知らせください commentaires.
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
