Elementorエディタ徹底分析：ウッドマートテーマの個性的なウェブサイトを作る (04)

前回は、次のようなセットアップ方法について話した。ウッドマートをテーマにしたポスター(バナー）、今回はWoodmartテーマを改修するためのElementorエディタについて、さらにWoodMartテーマをカスタマイズし最適化するためのElementorエディタの使い方に飛び込みます。このチュートリアルでは、Elementorの多機能モジュールを使って、美しく機能的なウェブサイトのフロントエンドを作成する方法を学びます。

上図のように編集モードに入る

各テンプレートには、以下のように異なるモジュールが含まれています。

以下は同じテンプレートだが、エフェクトが異なる。

単調でなく、個性的で、ずっと良く見えると思わない？

次に、Elementorエディタの各機能の効果と具体的なメソッドについて説明します。

まず、上記のテンプレートの全体のレイアウトを説明しましょう、我々は、編集ページの右側にテンプレートを入力すると、全体のレイアウトは、次のように表示されます。

上記のようなレイアウトは、コンテナ（容器）構成、様々なモジュール内のコンテナ

上記のように、例えば、タイトルと分類モジュール2つの実装によって、右側に表示、Elementorのエディタ、初心者のためのより適したに対応しますが、より美しく、より見栄えを調整したい場合だけでなく、いくつかの経験が必要です！

例として、より具体的なモジュールを2つ挙げてみよう。

上の写真から、これはポスターや写真に加えて、右の製品表示モジュールで、レイアウトは1:3であり、実際には、モジュール内の2つのコンテナを追加したものです！

まず左側を見て、次の絵の箱のシンボルはコンテナ（Container）、ペンのシンボルはモジュールエディタで、これはPromo Banner（プロモーションバナー）モジュールです。

ステップ：ウェブサイトのフロントエンド → 対応するモジュールを選択 → ボックス（コンテナ） コンテナ

コンテナに入ると、以下のようにコンテナの設定が表示される。

主な設定は以下の3つ。

レイアウト：レイアウト

スタイル

Advanced：詳細設定（アドバンス）

コンテナレイアウト：コンテナのスタイルで、フレキシブルボックスとグリッド（赤枠）に分かれる。

コンテンツの幅：コンテナのレイアウトは、中央と全幅に分かれて、全幅は、翻訳と実際の効果によると、理解することができるようになりますフルスクリーンです（黄色のボックス）

Width: コンテナ全体の幅。(青枠)

最小高さ：コンテナ全体の高さ（青枠）

あなたは、バックの調整またはピクセル調整の割合に応じて調整することができる青いボックスを見ることができますが、他の、4つの形式の合計があり、最も一般的に使用されるか、または2つは、我々は実際の状況に応じて調整すると言ったが、また、デバイスのパターンを参照してください、適応が理想的でない場合は、個別に各デバイスに応じて調整することが可能であることを示す、調整するために行くことができます。

隙間：コンテナの前の隙間として理解される列（緑のボックス）

スタイルは上記の通り。

ここでは、コンテナはBackground（背景）色に調整され、他の一時的な移動は必要ない！

上記の通りである。Advanced：詳細設定（アドバンス）

レイアウト→マージン：外枠のオフセットを調整する

レイアウト→パディング：内枠のオフセットを調整する

一般的に調整する必要はありません、あなたがスタイルに必要な場合は、同じではありません、または調整する必要性を埋める、つまり、より良い結果を得るための必要性が、初心者が取得することをお勧めしません、コンピュータ側の良い感じにつながるかもしれませんが、他のデバイスは、感覚でめちゃくちゃに表示されます！

レスポンシブ：レスポンシブは、あなたが表示するデバイス、または唯一のデバイスに表示するように、このモジュールを作ることができ、非常に柔軟性があり、さらに、同じの2つを設定することができますが、異なるデバイスのために、非常に良い効果に到着しているだけでなく、自己適応を避けるために、またはソリューションの効果に調整します！

上記はコンテナ(コンテナ)コンテナの基本的な使い方はほとんど同じで、微妙な違いはあるだろうが、モジュールではなく、違いは大きいだろう！

このモジュールについてのコメントは以下の通り。

一般：一般的に、このモジュールはリンクを挿入する機能を表示します。

背景

出典：バックグラウンド・ソース

choose imae: 画像を選択。ただし、ソースがchoose imageの場合のみ、メディアライブラリに移動するか、画像をアップロードする。

バナーの高さ：モジュールの高さ

画像の位置：表示される画像の位置

上記のように、コンテンツ

右のモジュールの位置に対応し、これは同じを伝えるために、比較的簡単ではありません、あなたも理解するために応じて翻訳することができる

スタイル：スタイル、ここでは、各コンポーネントのスタイルに対処することができ、そのようなボタンの説明のタイトルだけでなく、モジュールのより多くの効果として、それらをより美しくすることである、我々は理解するために翻訳に応じて行く

Advanced：高度な設定（アドバンスド）、基本的にはコンテナと同じだが、初心者は調整する必要はない

次は右サイドについて。

ステップ：ウェブサイトのフロントエンド → 対応するコンテナ（ボックスアイコン）またはモジュール（ペンマーク）

上の図が示すように、彼は、タイトルモジュールとボタンモジュールが追加され、製品モジュールの追加の下のコンテナの内側のコンテナで構成されています。

上図のように、タイトルをタッチするとペンのマークが表示され、エディターに入ることができる。

上の写真のように、訳すと意味がよくわかりますね。今回の詳細な紹介を通して、カスタムWoodMartテーマにおけるElementorエディタの応用について、より深く理解していただけたと思います。様々なモジュールやコンテナを使って、ウェブサイトの視覚効果や機能性を高める方法を紹介しました。次回も引き続き、基本的なモジュールやコンテナの使い方をご紹介し、Webサイトのデザインをさらに充実させるためのヒントを探りますので、お楽しみに。それでは、また次回お会いしましょう！