WPBakeryページビルダーを使いこなす:Baselテーマを簡単に改装するための基本ガイド (06)

本記事では、その習得プロセスを順を追って説明する。WPBakeryページビルダーエディタBaselテーマの改修に使用。レボリューション・スライダーから行(ROW)の使い方まで、すべての手順と設定が詳しく説明されています。

次は正式に始める

WPBakery Page Builder EditorがBaselテーマのリニューアルを開始

ステップ ウェブサイトフロントエンド → WPBakeryページビルダーで編集

图片[1]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复
图片[2]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复
图片[3]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复

上のフロントエンドの編集ページにあるように、様々なモジュールがあることがわかります。上はレボリューションスライダー(ポスターバナー)です。

また、ROWやColumnといった機能もある。

それについてすべてお話ししましょう。

1.まず、レボリューション・スライダー(Revolution Slider)についてですが、これはポスター機能のトップページで、ここには設定されていませんので、動かす必要はありません!

图片[4]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复

上記のように、編集ページに移動する

1.ステップサイトフロントエンド→ペンマーク(編集)

图片[5]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复

デモデータをインポートしたテンプレートポスター(バナー)を選択すれば完了です!

2.列

3.コラム

行と列は基本的に同じモジュールで、もちろん、モジュールを直接置くことができますが、モジュールのサイズだけでなく、表示機能のいくつかを制御することはできませんが、我々は後でゆっくりと話します!

图片[6]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复

ROW(行)はモジュール全体をコントロールするもので、中にいくつのモジュールがあろうと、彼は全体であり、彼もまた単一ではなく全体の中にセットアップされている。コラム)を見てほしい。

图片[7]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复

上記のように、彼はモジュール全体をドラッグすることができる。

ステップ行 → シンボル(展開)

图片[8]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复

ステップ行 → ペンマーク(編集)

图片[9]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复

ステップ行の設定→全般

图片[10]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复

上の編集ページにあるように、上の丸で囲った基本的な機能のいくつかの説明を書きます。

行ストレッチ:モジュール全体のサイズと解釈できる。

图片[11]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复

Stretch row and content と Stretch row and content (no paddings) は全幅(すべて含む)、コンテンツは全幅ではない

Default(デフォルト)とStretch row(ストレッチ・ロー)は、デフォルトとギャップの違いであり、センターの位置である。

图片[12]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复
图片[13]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复

上の写真が示すように、実際の必要性に応じて調整することができる。

列のギャップ:ギャップとして理解することができ、一般的な状況は移動する必要はありませんが、フロントエンドがより混雑している場合は、必要に応じて調整します。

コンテンツの位置:コンテンツの位置で、通常はデフォルト。

图片[14]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复

上記のように、実際の状況に応じて調整し、「変更を保存する」を忘れずに設定してください!

ステップ行の設定→デザインオプション

图片[15]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复

背景や色、上下左右の間隔を調整する「デザインオプション」について説明しよう。

图片[16]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复

ボーダーカラー:ボーダーの色

ボーダースタイル:ボーダーのスタイル(style)

ボーダー半径:ボーダーの隙間(通常は調整不要)

上記のいずれも、単純なケースでは調整する必要はない

背景:追加する背景色と背景画像、画像表示効果

图片[17]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复

上図のように、実際の状況に応じてモジュール全体の背景を調整する。

图片[18]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复
图片[19]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复

上の画像が、背景のないディスプレイと背景のあるディスプレイを表示している場合

ステップ行の設定→CSSボックス

图片[20]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复

上図に示すように、ここで上下だけでなく、左右のギャップを調整するために、調整のフロントエンドの表示に使用することができますだけでなく、モジュールのスタイルは、一般的に、調整する必要はありませんが、一般的な上部と下部のモジュールは、混雑の場合に使用され、上記は、外側のフレームは、モジュールのフレーム内で調整されている、我々は一般的にギャップのフレームの外側のマージンを調整するには、正の値または負の値を追加することができますギャップを達成するために

ステップ ROW → 3つの記号(行数形式)

图片[21]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复

行のレイアウト:行の数を選択します(上記の例:1、2、2左ワイド、右ナロー、および3)、あなたはアイコンに応じて見ることができます。

行のカスタムレイアウトを入力:自分で行数を追加できる(分子フォームでも可)

图片[22]-掌握WPBakery Page Builder:轻松装修Basel主题的基础指南(06)-光子波动网 | WordPress教程、Elementor教程与故障修复

上の写真の後ろのアイコンが意味するように→。
+追加: モジュールの追加、行全体のクローン、行のコピー、貼り付け、閉じる。

上記は、WPBakeryページビルダーエディタROWの機能を説明し、私はバーゼルのテーマを飾るためにエディタの機能について詳しく説明しますが、この記事では、装飾バーゼルのテーマのより深い研究を持っている場合、初心者のためのより適した基本的な機能のいくつかを説明し、私と議論する歓迎!

概要

以上、WPBakery Page Builderエディタにおける行(ROW)の基本機能の紹介でした。次回は、Baselテーマの全面改修に役立つエディターの機能をさらに解説していきますので、ご期待ください。


お問い合わせ
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
カスタマーサービス WeChat
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨询:1025174874
Eメール:[email protected]
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
この記事はハリーが執筆しました。
終わり
好きなら応援してください。
クドス0 分かち合う
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし