従来のスクロールバーの代わりに、垂直方向の進行状況トラッカーを作成しようと考えたことはありますか? そうでない場合は、この記事を最後まで参照して、作成方法を確認してください。 Elementor プロ。
しかし、本題に取り組む前に、プログレス トラッカーとは何かを思い出してみましょう。
進行状況トラッカーは、アプリケーションのインストール、更新、記事の閲覧など、進行中のプロセスの進行状況をユーザーに通知する進行状況インジケーターです。 そして、次の XNUMX つのタイプがあります。
- le 線形進捗トラッカー
- le 循環プログレストラッカー
また読むことができます： Elementor：ポートフォリオからエフェクトカードを作成する方法
このチュートリアルでは、投稿アーカイブを含むセクションに垂直方向の進行状況インジケーターを段階的に挿入する方法を示します。
進捗トラッカーを作成する
タブ内 要素 ツールパネルからElementor、検索バーに入力します プログレストラッカー. 次に、ウィジェットをセクションにドラッグします。
進行状況インジケータが表示されます。 デフォルトでは、横向きになっています。 でも心配しないでください。縦に並べる方法は後で説明します。
進行状況インジケーターが作成されました。目的の結果を得るために必要な変更を加えましょう。
参照してください： Elementor：ポートフォリオからエフェクトカードを作成する方法
プログレス トラッカーのコンテンツを編集する
ここでは、トラッカーのタイプとその関連を選択します。
主な設定は次のとおりです。
- 典型的なトラッカー: ここで、デフォルト値は 水平な. ただし、リストを下にスクロールすると、タイプ 円形の も提供されます。 デフォルトのままにします。
- に対する進行状況: この XNUMX 番目の設定では、値を選択します 選択者. この選択により、追加の設定が表示されます。 セレクタ.
- セレクタ: このフィールドは、トラッカーがアタッチされるオブジェクトの識別子を受け取るためのものです。
トラッカーが接続されている要素であるため、出版物アーカイブを選択しましょう。
設定パネルで、[詳細設定] タブに移動し、フィールドに値を入力します。 CSS ID.
次に、トラッカー パネルに戻り、メニューのセレクター フィールドに値を入力します。 コンテンツ.
最後に、進行状況インジケーターの向きを右に設定します。
プログレス トラッカーのスタイルを変更する
このステップでは、進行状況インジケーターのパラメーターと後者の背景を構成します。
進捗インジケータを設定することから始めます。
また読みます： Elementor：画像ギャラリーを作成する方法
- 調整 プログレスカラー クラシック進行とグラデーション進行のどちらかを選択できます。 この例では、最初のオプションを選択します。 しかし、どの選択肢を選んでも設定が表示されます カラー.
- をセットする色がある グローバル カラー パレットまたはカラー ピッカーを使用します。
- ボーダーの種類: ここに XNUMX つの提案があります (なし、フル、ダブル、ドット、ドット、グルーブ）。 完全な境界線を選択します。
- 幅: これは、進行状況インジケーターの境界線に太さを与えるためです。
- 境界半径: デフォルトでは、進行状況インジケーターは長方形のように見えます。 半径を変更すると、端が丸くなります。
最後に、 ゲレンデ 背景設定。 戻ってくるのはほとんど同じ設定であることがわかります。 したがって、事前に記載されているものに限定してください。
プログレス トラッカーの詳細オプションを変更する
作業を完了するために、次のタブを設定します。 モーション効果、変形、カスタム CSS.
まずはタブから カスタムCSS. それを選択し、適切なフィールドに次のコードを挿入します。 トラッカーの幅を定義できます。 したがって、幅をウィンドウの高さの 50% に設定します。
次に、トラッカーを垂直方向に回転させます。 これを行うには、サブメニューを選択します トランスフォーマーをクリックし、回転を有効にしてから、空白のフィールドに 90 と入力します。 これにより、ウィジェットが 90 度回転し、目的の垂直位置になります。
ウィジェットを最初の投稿と同じレベルに配置するには、145 のオフセットを適用します。
このレベルでページをスクロールすると、スクロール中に進行状況インジケーターが消えるのがわかります。 コンテンツ.
この問題を解決するには、タブを開きます モーションエフェクト、次にコマンドをドロップダウンします ピン 選択 アン浅.
今回は、下にスクロールすると、投稿のアーカイブを移動するにつれて、進行状況トラッカーが徐々に入力されていることがわかります。
Elementor Proを今すぐ入手！
まとめ
そう ！ 垂直プログレス トラッカーの作成方法を示すこの記事は以上です。.
作成時に垂直方向の進行状況インジケーターなどのインタラクティブな要素を追加する ウェブサイト より直観的にすることで、実際に次のレベルに引き上げることができます。 さらに、ページ全体または コンテンツ 出版物の、さらにはページの他の特定の要素まで。 したがって、その使用方法を知ることは、さらなる利点となります。
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
