Elementorでは、要素を重ねることで、独特で専門的でファッショナブルな外観を与えることができます。 さらに、無味乾燥または無関心に見えることなく、より多くの情報をコンパクトなスペースに詰め込むことができます。

良いニュースは、 Elementorを使用すると、画像、テキスト、およびその他の要素を重ね合わせるのと同じくらい簡単になることです。 今日のチュートリアルでは、Elementor で重複セクションを作成する方法を紹介します。

Elementor セクションを重複させる

ダッシュボードのページに移動し、Elementor を使用して任意のページを起動します。 次に、Elementor で編集を選択します。

ページが読み込まれたら、[ページ設定] で [ページ レイアウト] を [Elementor Canvas] に設定します。 次に、プラス記号 (+) を押して、単一列の新しいセクションを追加します。

新しいセクションにウィジェットを追加します。 widget’s アイコンをクリックし、検索で「divider」と入力して、divider ウィジェットを取得し、それをセクションにドラッグします。

セクションを選択した後、右側の [セクションの編集] ウィンドウで、高さを 400 ピクセルの最小高さに設定します。 スタイルの下で背景色を指定します (私の選択は赤です)。 仕切りを選択した後、[スタイル] で仕切りに白い背景を指定します。

セクションを選択して複製します。

クローン セクションのスタイルを前のものとは別に設定し、別の背景色を指定します。

次のステップは、2 つのパーツを重ね合わせることです。

青と赤のセクションを積み重ねる方法を示すことから始めます。

これには Elementor Navigator が必要です。 ナビゲーション シンボルは、編集セクションの下部近くの左側にあります。

ナビゲーション アイコンをクリックすると、ナビゲーターが表示されます。 ナビゲーターを使用してセクションにすばやくアクセスできます。ナビゲーターは、それらをナビゲートするのにも役立ちます。 また、その横にある「目」をクリックすると、その部分が隠されます。

青色のセクションを選択し、左側の [セクションの編集] メニューから [詳細設定] を選択し、[余白] で [上余白] を -100 ピクセルに設定します。 これにより、青いセクションが最初のセクションに (上に) 表示されます。

赤い部分を選択し、[詳細設定] を選択し、[Z インデックス] を選択して 10 に調整し、代わりに赤いセクションが青いセクションの上に表示されるようにします。 その結果、赤いセクションが自動的に青いセクションの上に配置されます。

最初は優先的に青の部分が赤より大きくなっています。 青い部分の Z-index が 1 の場合、赤い部分の Z-index が 0 の場合は上にあります。本質的に、Z-index が高い部分は、Z-index が低い部分の上に自動的にスライドします。

セクションが 2 つだけではなく、複数あるとします。

これがどのように機能するかを確認するには、別のセクションを作成する必要があります。

青い部分を選択して複製します。 次に、複製されたセクションを選択し、その Z-index と Margins を Advanced で 0 ピクセルに設定します。 スタイルの下で色を変更できます。

たとえば、青の部分を両方のセクションの上に配置したい場合は、赤と緑の部分の両方よりも高い Z インデックスを青の部分に与える必要があります。

たとえば、緑色の領域と赤色のセクションの Z インデックスはどちらも 1 です (デフォルト)。 青いセクションに 3 の Z-index を与えることに決め、それを選択します。

緑色の部分を選択し、[詳細設定] で [マージン] を -20 に設定して、上部のセクションに移動してこの変更を明確に確認できるようにします。 青いセクションは、両方の領域の上にあるように表示されます。

レスポンシブ設定でも、このオーバーラップ効果が機能します。 たとえば、レスポンシブ モード メニューからモバイル デバイスを選択し、最初に見たい部分の Z インデックスを大きくすることを決定できます。

まとめ

Elementorでは、領域をオーバーラップするためにそれを行うことができ、オーバーラップは異なるデバイスでも機能します。

コメントやクエリについては、以下のセクションを使用してください。 また、知人にこの言葉を広め、引き続き CodeWatchers をフォローしてください。