Elementorページビルダー?を使用してフローティングボタンを作成する方法を知りたいですか。フローティングボタンは、他のすべての画面情報の前に表示されるボタンです。 ほとんどのWebサイト所有者には、メーリングリストの購読やショップページの閲覧など、特定の目標にユーザーを誘導する実用的なフローティングボタンが含まれています。 とりわけソーシャルメディア
Elementorを使用すると、さまざまな方法でWebサイトのフローティングボタンをすばやく作成できます。 このチュートリアルでは、 Elementorページビルダーを利用して可能な限り簡単な方法でそれを行う方法を示します。
Elementorでフローティングボタンを作成する
ここでは、フローティングボタンを作成するためのz-indexを設定します。 Elementorの無料バージョンを使用すると、この手順に従って特定のページのフローティングボタンを作成できます。 サイト全体にフローティングボタンを追加する場合、無料バージョンのElementorを使用している場合は、各ページにボタンを手動で追加する必要があります。
次に、Elementorエディターを開き、フローティングボタンを追加するページに移動します。 新しいページを作成するか、既存のページを編集するかを選択できます。 セクションを追加するには、「+」アイコンをクリックして、単一列のレイアウトを選択します。
素晴らしいウェブサイトを作成します
最高の無料ページビルダーElementor を使用
今すぐ始める
ウィジェットパネルから新しく作成した列にボタンウィジェットを追加します。
ここで、ボタンのアクションを選択する必要があります。 この場合、ボタンを使用してショップページのURLに移動しています。 これを行うには、リンクフィールドに移動し、ページにリンクを追加します。 ボタンの位置は、位置合わせオプションを使用して変更できます。 ボタンをできるだけ小さくします。
これで、ユーザーがページを下にスクロールしたときにボタンをフロートさせる準備ができました。 これを行うには、[詳細設定]タブに移動し、[レイアウト]オプションを選択します。 幅と位置をインライン（自動）に設定します。 また、水平方向と垂直方向、およびオフセットを構成する必要があります。
ボタンを常にフロート可能にするには、z-indexを指定する必要があります。 z-indexスロットに800を入力します。これにより、ボタンが常にフロートします。
最終ビュー
最終的なデザインは次のようになります。
まとめ
Floating Elementor Elements機能は、私たちの興味をそそりました。 これは、設計の問題を迅速に解決するのに役立ちます。 私たちはそれがあなたに同じ影響を与えると信じています。 もしそうなら、コメントエリアであなたのデザインを共有してください。 私たちはあなたの作品を世界中に広めたいと思っています。 他のelementorチュートリアルもチェックしてください。
