前号ではElementorエディタの基本的な紹介ウッドマートのテーマと組み合わせて、今日はエレメンタ・エディターWoodMartテーマを使って、より高度なウェブサイトデザインのカスタマイズを行いましょう。この記事では、デザイン初心者から、より洗練されたレイアウトを求める経験者まで、実践的な手順とヒントをご紹介します。
ステップ:サイトのフロントエンド → Elementorで編集 → フッターの前にスライド(あるいはモジュールの追加もあり得る)
上に示したように、4つのボタンがあります。すなわち、「追加」、「テンプレートファイル」、「aiビルド」、「テーマテンプレートオプション」です。
一般的にほとんどを使用すると、モジュールを保存しない限り、最初の、2番目のテンプレートファイルであり、その後、特定の場所に追加したいが、これは高レベルの設定に属し、一般的な初心者が使用することはできません、3番目のaiのビルドを使用することは推奨されません、4番目のテーマのテンプレートは、テーマによると、同じではありませんが、もちろん、異なるの内容は、上記はWoodMartのテーマを示しています。
追加をクリックすると、以下のオプションが表示される。
上記の容器のスタイルは、実際の状況に応じて選択することができる。
彼らは明らかな違いは、グリッド(グリッド)は、2番目のグリッドを設定するには、最初に設定する必要があることです、Flexboxは(フレキシブルボックス)は必要ありませんが、違いがあるでしょう、あなたはフレキシブルボックスを追加した場合のみ、全体を選択し始めたということです、分離していない、2つまたは3つを選択し、彼は、再追加しない限り、選択することはできませんが、グリッドは、複数のフォーマット自体を切り替えることができるようになります。人々は、実際の状況に応じて選択する
コンテナを追加すると、コンテナの上部に「追加」、「編集」、「閉じる」の3つのボタンがある。
記事の前半では、ページ下部のフッターを除いて、コンテナの追加も可能であると述べた。
2つ目はエディターで、コンテナ設定のオプションがいくつかある。
3本目は終了した。
つ目の編集に注目してみよう。
他は前の記事上記のように、この関数は、一般的に初心者には使用されませんが、より美しいコンテナや多様性を調整したい場合は、実際には、翻訳が非常に明確に書かれているので、理解するのは簡単ですが、赤のボックスには、プロジェクトを持って、下の方向があり、上記の写真は、下を示し、コンテナを選択するために追加するため、他は、ディスプレイの向きのいくつかダウンしている、我々は調整する実際の状況に応じて移動します!
このスタイルもまた前の記事紹介され、ここで言うことはもうない。
今日の物語の暗黙の特徴のひとつは、高度なものである。
翻訳が不正確であるため、上記のように、よりよく理解するために、私は言うために中国の画像を使用して、それは基本的な中国語のいくつかを理解する方が良いはずですが、オプションを説明している、我々は、"粘着性 "より混乱する必要があり、実際には、コンテナ上で、上部または下部を固定するために選択することができます、または固定されていないという意味!
トランスフォーム:いくつかの特殊効果のコンテナ(コンテナ)、我々は選択する翻訳に応じて行く、一般的に移動する必要はありません!
コンテナポイントを追加するには、モジュールを選択することができます、左側には、コンテナ(レイアウト)、および基本的な機能(基本)があります。エレメンタ PROバージョン(プロ)の特徴
各テーマの基本的な機能は異なりますが、あなたのサイトに他のプラグインがある場合、それは表示の基本的な機能にもなります。
しかし、基本的な機能は、ウェブサイトのあなたの基本的な構造を満たすために、十分な美しさ、カラフルなエフェクトではないかもしれませんし、Proにする必要があります 有料版を達成するために、どのようなモジュールを追加する必要があり、あなたが内側にコンテナにドラッグする必要があるモジュールをクリックします!
モジュールの説明
ステップ:ウェブサイトのフロントエンド → Elementorで編集 → Container(コンテナ) → 見出し
見出し:タイトルは、大きなタイトルとして理解され、次のチャートでは、テキストのタイトル(タイトル)だけでなく、リンク(リンク)とタイトル(HTMLタグ)のサイズだけでなく、タイトル(整列)の方向、色(テキストの色)のタイトル、フォントのレイアウト(タイポグラフィ)のサイズやフォントスタイル、サイズなどを設定することができます!
手順:サイトのフロントエンド → Elementorで編集 → Container(コンテナ) → テキストエディター
テキストエディタ:テキストエディタ(テキストは、製品紹介、会社の紹介などのいくつかのように、これを使用することをより推奨されている場合)次のグラフは、テキストの内容は、テキストの内訳(列)は、コンテナ全体のテキストとして理解することができますどのくらいの、列のギャップを占めている(あなたがテキストの内訳を設定しない場合は、調整する必要はありません)。
上に示したように、配色、テキストの向き、タイトルの色、テキストのレイアウト、コンテンツの配置、コンテンツの幅などを調整できるテキストエディタのスタイルもある。
手順:サイトのフロントエンド → Elementorで編集 → Container(コンテナ) → テキストエディター
image:フォトギャラリー
画像の選択:画像を選択し、ウェブサイトのメディアライブラリからアップロードするか、ローカルにアップロードするかを選択します。
画像の解像度:画像の解像度の大きさで、非常に幅広い解像度から選択できます。
キャプション:タイトル。
リンク:リンク、カスタムリンクまたはメディアリンクを表示可能
上記のように、Alignment(画像の位置)Width(画像の幅)、Max width(画像の最大幅)、Height(画像の高さ)Normal(デフォルト状態)、Hover(ホバー状態、マウスクリック状態)の2つの異なる状態を調整することができ、他の行の理解の翻訳に応じて!
ステップ:コンテナ(コンテナ)→2列レイアウトを選択→2列を選択する形で画像選択グリッド
上記のような効果を得たい場合は、画像の詳細機能を使う必要がある。コンテナではなくイメージであることに注意してください。次の図のマージン(外枠)に値のオフセットを設定する必要がある場合は、リンクのシンボルを切断してください、切断しない場合は、4つの方向は、上記の図のように、一緒に変更され、左下のバイアス、右上のバイアス、対応する方向の行に値を設定します!
もちろん、このような直接挿入の写真を作るという簡単な方法もあるが、私の方法よりも簡単だろう。
手順:サイトのフロントエンド → Elementorで編集 → Container(コンテナ) → ボタン
ボタン:ボタンは、リンクボタンにジャンプすることができ、不可欠な機能であり、美しいです!
通常はデフォルトですが、他のタイプも選択できます。
テキスト(ボタン名)、適宜記入
リンクボタンでリンク先へジャンプ
アイコン(icon)は、実際の状況に応じて、アイコンを設定するか、アイコンを設定しないかを調整することができます。
ボタンlD(ボタンID)は、通常、設定する必要はありません。
位置:ボタンの向き
タイポグラフィ:ボタンレイアウト
テキストの色: テキストの色
背景タイプ
カラー:カラー
ノーマル:デフォルト
ホバー:ホバー
2つの異なる州が別々に調整される
ステップ:ウェブサイトのフロントエンド → Elementorで編集 → Container(コンテナ) → Spacer(スペーサー
スペーサー。上下のぼかしや容器の間の隙間として理解できます。
ステップ:ウェブサイトのフロントエンド → Elementorで編集 → Container(コンテナ) → Divider(ディバイダー
ディバイダー。
高さだけでなく、幅や色も設定できますが、スペーサー(Spacer)との違いは、機能がもう少し強力になることです。スペーサー(Spacer)の機能は、下図のように隙間だけで、線を分ける(Divider)効果は同じではありません!
その他のモジュール
ビデオ:ビデオ挿入
グーグルマップ:地図挿入
icon: アイコン
これらの設定は比較的簡単なので、翻訳に従って設定してください。
今回のチュートリアルでは、Elementorエディターの基本的な機能を紹介し、いくつかの経験を共有しました。次回は、Elementorの有料版の機能を紹介しますので、より専門的なヒントと詳細なガイダンスにご期待ください!
お問い合わせ |
---|
記事が読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ! |
① 電話:020-2206-9892 |
② QQ咨询:1025174874 |
三 Eメール:info@361sale.com |
④ 勤務時間:月~金、9:30~18:30、祝日休み |