Divi:すべての時間の中で最高のWordPressテーマ!

もっと 901.000のダウンロードDiviは世界で最も人気のあるWordPressテーマです。 完全で使いやすく、62以上の無料テンプレートが付属しています。

ElementorにZインデックス付きのフローティングボタンを作成しますか?

すべての画面コンテンツの前に表示され、通常は円形で中央にアイコンが表示されるボタンについては、ご存知のとおりです。 さて、それはフローティングアクションボタンです。

フローティングアクションボタンは、アクションをトリガーしたり、どこかにセーリングを送ることができます。 電子メールのトリガー、ソーシャルネットワーク、訪問者にチャネルをサブスクライブするように指示するなど、さまざまな機能があります。

Elementorでは、フローティングアクションボタンを作成する方法はXNUMXつあり、次のとおりです。

  • Z-Indexを設定する
  • ポップアップウィンドウを作成する-Popup-

このチュートリアルでは、Zインデックスを設定してフローティングアクションボタンを作成する方法のみを示し、プロバージョンを使用してそれを実現します。

しかし、最初に、以下を見つけてください。 WordPressにElementorをインストールする方法

Elementorでフローティングアクションボタンを作成する方法

Elementorの無料バージョンを使用して、このメソッドでフローティングアクションボタンを作成できます。 ただし、Webサイトでボタンを表示するすべてのページに、設計したボタンを貼り付ける必要があります。

とともに Elementorプロ、この機能にアクセスすることもできます カスタムCSS、このチュートリアルで使用します。

Elementorエディターに移動します。 既存のコンテンツ(ページ、記事など)を変更したり、新しいコンテンツを作成したりできます。 このチュートリアルでは、ページを変更します。

Elementorでウェブサイトを簡単に作成

Elementorを使用すると、 簡単かつ無料 プロフェッショナルな外観のウェブサイトやブログのデザイン。 あなたが自分でできるウェブサイトに多額のお金を払うのをやめなさい。

まず、単一の列を持つ新しいセクションを作成します。 ボタンウィジェットを選択します ウィジェットパネルから編集領域にドラッグアンドドロップします。 次にボタンを変更します テキスト と リンク。 

このチュートリアルでは、ボタンをトリガーとして使用して、訪問者にElementorWebサイトを閲覧するように促します。 次に、オプションで Alignement、に設定します ドロワット et, 最後に、 タイユ オンボタンの 非常に大きい.

Zインデックス付きのフローティングボタンを作成する

上のGIFでわかるように、このボタンはセクション内で静止しています。 次に、同じ位置に保ちながらスクロールしながら動かします。

タブに移動します 高度な。 パラメータ内 レイアウト、幅を設定します インライン(車)で、 を定義する 固定上の位置、 セットする 水平方向 上の ドロワット 調整します décalage 必要に応じて。

Zインデックス付きのフローティングボタンを作成する

次に、このメソッドの要点を定義します。 現場で Z-インデックス、番号9999を入力します ボタンが常に前面(フローティング)になります。

Zインデックス付きのフローティングボタンを作成する

次に、フローティングアクションボタンを回転させます。 常にタブの下 高度な、アクセス cssクラス ブロックから レイアウト, 次に書く rotate 内部。

参照: Elementor:最高のWordPressページビルダーの紹介

その後、ブロックに移動します カスタムCSS 、次に次のコードをフィールドに貼り付けます。

.rotate.rotate
{transform: rotate(90deg);}

ノブがちょうど回転したことがわかりますが、画面の側面の間に奇妙なギャップがあります。 だから、調整して修正しましょう décalage à-92

Zインデックス付きのフローティングボタンを作成する

最後に、このフローティングアクションボタンの最後の小さなタッチを行います。 ブロックにアクセスする トランスフォーマー、それを選択します 概要、 オプションにアクセスする シフト 各オプションをに設定します 7.

Zインデックス付きのフローティングボタンを作成する

Elementorで特定のことを達成するためのいくつかのオプションがあります。 フローティングボタンに関しては、XNUMXつのオプションを使用できます。 ここではXNUMXつの方法のみを取り上げましたが、もうXNUMXつの方法は別のチュートリアルになります。

また読みます: Elementor:WordPressWebサイトを移行する方法

より多くのスタイリングオプションが必要な場合は、ポップアップのビルダーを使用してフローティングアクションボタンを作成することをお勧めします。ボタンをカスタマイズするオプションと、ボタンの閉じる時間、継続時間、開始または終了のアニメーションなどの動作があります。 。

このタスクは簡単に完了しました。 タブレットとスマートフォンの動作をプレビューし、各デバイスに合わせてマージンを変更してみてください。

Elementor Proを今すぐ入手!

結論

そう ! プロファイルカードにズーム効果を適用する方法を示すこの記事は以上です。 そこへの行き方について懸念がある場合は、内でお知らせください commentaires.

ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.

しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.

...

0 株式
シェア
さえずります
Enregistrer