WordPressをビジュアルビルダーに変える方法

Sep 16, 2025

操作方法

（イメージクレジット：エレメンター/ジョセフフォード）

ビジュアルビルダーはWordPressのために長い間存在していましたが、常に彼らの使用との分割を引き起こしました。ほとんどの場合、ページ速度とそれらが生成するコードの点で大きな欠点があり、編集画面内のドラッグブロックとドロップブロックが最終結果の現実的な表現ではありませんでした。その一方で、コードを書かないことなくすぐに設計してプロトタイプすることができます。

PageBuilderプラグイン要素を正しいセットアップで使用すると、WordPressを最小限のビジュアルに変換できます。 ウェブサイトビルダー 、設定の配列を使用すると、テーマとほとんど独立しているため、複雑なデザインを簡単に作成できます。

20nineeenのデフォルトを使う WordPressのテーマ プロトタイプやビルドプロダクションの準備ができて使用できる使用できるような使用できるキャンバスを作成できます。 WordPress Webサイト 。このキャンバスでは、2つのセクションと連絡先フォームを持つ単純なページを作ります。

Webページをモバイルフレンドリーで、2つのプラグインを使用して、ビジュアルビルダーを使用して主な懸念に対処し、ページのすでに最小限のロード時間を最小限に抑えます。また、素晴らしいの切り上げを参照してください WordPressチュートリアル さらにスキルを磨くために。

各画像の右上にあるアイコンを使用して拡大します

2019年の最高のWordPressホスティングサービス

01. WordPressのコピーをインストールします

物事を蹴るには、使用しているシステムにWordPressのコピーを取り付けます。マシンにインスタンスを作成するためのクイックインストールオプションを提供するLaragonというプログラムを使用しています。

02.必要な部分を取り外します

Give yourself a clutter-free page to work with — 一緒に仕事をするための雑学のないページを自分に与える（イメージクレジット：エレメンター/ジョセフフォード）

プラグインに向かい、WordPressにバンドルされているすべてを削除します。書き込み時には、新しいものを無効にするための「クラシックエディタ」プラグインをインストールするための努力を合理化します。 ガーテンブルク編集者 。雑然としたことを減らすために、私たちはまた外観とgtに行くべきです。ウィジェットとすべてのウィジェットを削除します。

03.ヘッダーとフッターでテーマを選択してください

私たちが使用するテーマの唯一の部分はヘッダーとフッターです - 他のすべてが削除されます。デフォルトの29のテーマを使用していき、シャープに見えるようにするためのいくつかの素早い変更を示します。要素を使用するときは、テーマが少なくなります。

04.要素をインストールしてページを作成します

You'll find Elementor in the WordPress plugins library — WordPressプラグインのライブラリに要素を見つけることができます（イメージクレジット：エレメンター/ジョセフフォード）

WordPressプラグイン検索を使用して見つけてください元素そしてそれを取り付けます。インストールされ起動されたら、新しいページを作成します。新しいページ 'Home'に名前を付けて、データベースに存在するようにドラフトとして保存します。 [Elementorで編集]をクリックします。 'これにより、Elementor Visual Builderがロードされます。

05.全幅ページ

ページを見て、それは私たちのテーマの箱入りのレイアウトに制約されています。これを無効にするには、要素エディタの左下にあるCOGをクリックし、「ページレイアウト」を「要素全幅」に変更します。あなたが多くのページなしでウェブサイトを作っているならば、あなたはヘッダーとフッターを削除する 'Elementor Canvas'オプションを考えるかもしれません。

06.いくつかのコンテンツを追加します

Give yourself some content to work with — 働くためにいくつかのコンテンツを与えなさい（イメージクレジット：エレメンター/ジョセフフォード）

空白のページを持っているので、私たちは自分自身を使って何かを与えるべきです。エディタの右上にあるElementor Gridアイコンをクリックして、利用可能なすべての要素を表示します。ヘッダーブロックとテキストブロックは、これらをページの途中にドラッグすることによって追加されます。これら2つの要素は私達のタイポグラフィーをスタイルするのを助けるでしょう。

07.見出し線を取り外します

行がすべての見出しの上にレンダリングされていることが29のテーマを使用するときに気づくかもしれません。 WordPressカスタマイズツールを使用してそれを削除しましょう。ここにいる間、私はサイトID設定といくつかのメニュー項目にロゴを追加します。

 H1：前、H2：前{
表示：なし

08.コンテンツ幅を修正しました

Ensure the content lines up with the header — コンテンツがヘッダーと回ることを確認してください（イメージクレジット：エレメンター/ジョセフフォード）

私たちのコンテンツセクションはヘッダーと全く並んでいません。これは、2つの19台が計算マージンを使用してヘッダとフッタの幅を設定するためです。いくつかのCSSとの一貫性のために、これを要素のセクションに複製することができます。

また、メインの要素設定ページのコンテンツ幅も増えなければなりません。

 @mediaのみの画面と（最小幅：768px）{
・要素 -  TOP-section.Elementor  - セクション - 
箱入り＆gt;収入コンテナ{
マージン：0 calc（10％+ 60px）;
}

09.開口部を作ります

Drag in the elements you want to include — 含める要素をドラッグします（イメージクレジット：エレメンター/ジョセフフォード）

ページの上部セクションから始めます。これにより、少量のテキストと画像が含まれます。以前から私たちのセクションを削除して、赤いプラスをクリックして新しい2列のセクションに置き換えます。ヘッダー、テキストエディタ、ボタンを左側の列にドラッグします。右側には画像をドラッグします。

10.背景を追加します

その上にホバリングして[青]タブをクリックするか、[要素]ボタンの右下にあるナビゲータを使用して、セクションを選択します。 3つのタブが表示されます - レイアウト、スタイル、そして高度です。

[レイアウト]タブを使用して、セクションを80VHの高さにします。オプションを見つけるためのスタイルを選択し、backgroundオプションを使用して＃0073AAの背景を設定します。

11.テキストをスタイル

You can change the font for your whole document in one go — あなたはあなたの文書全体のフォントを1行に変更することができます（イメージクレジット：エレメンター/ジョセフフォード）

ドキュメント全体のフォントを変更するには、要素庫の上部のハンバーグメニューの「デフォルトのフォント」をクリックします。個々のテキスト要素をクリックして[スタイル]タブを使用して色やその他のオプションを変更することもできます。

12.背景オーバーレイ効果を使用してください

素晴らしい追加は、[Section Style]タブから背景オーバーレイを素早く追加する機能です。私たちのセクションを選択して「背景」タブに行きます。私たちの背景にそれをテクスチャに与えるためにイメージを与え、次に「背景オーバーレイ」、下のドロップダウンに行き、グラデーションの背景オーバーレイを選択します。

13.アクションの呼び出しを作成します

私たちのページの2番目のセクションは、アクションセクションの呼び出しになります。私たちは連絡フォーム7を埋め込みますが、ショートコードを生成できるものは何も機能します。 2列の新しいセクションを作成するか、最後のセクションを右クリックして複製します。

連絡先フォームのプラグインをインストールして、フォームのショートコードを生成します。右側の列で、ショートコードウィジェットをドラッグしてショートコードをボックスに貼り付けます。

携帯にやさしい

Don't forget to tweak your design for mobile — モバイルのためにあなたのデザインを微調整することを忘れないでください（イメージクレジット：エレメンター/ジョセフフォード）

私たちのページのモバイルオプションにアクセスするには、「要素業者」パネルの下部にある「応答オプション」をオンにする必要があります。「モバイル」モードを選択すると、私たちのセクションがいくつかのパディングが必要になることがわかります。

各設定の横に青いアイコンがあることを確認することができるモバイルオプションを使用して、私たちの選択はメインのデスクトップビューに影響を与えません。ただし、このモードで行われたレイアウト変更はデスクトップビューに影響します。

15.画像を最適化します

ページの負荷速度の懸念を最小限に抑えるために、画像圧縮を実行する必要があります。これはプラグインまたはWebサーバーを介して行うことができます。今のところ、人気のプラグイン、EWWW Image Optimiserを使用して、画像の最大品質と幅を設定してから最適化を実行しましょう。

16.パフォーマンスを向上させるためのページページをキャッシュします

Make your site lightning-fast with help from a cache plugin — キャッシュプラグインからのヘルプであなたのサイトをLightning-Fastにする（イメージクレジット：エレメンター/ジョセフフォード）

最後に、私たちのページの負荷時間を最大化するためのキャッシュプラグインをインストールします。そこには多くのキャッシュプラグインがありますが、現在、キャッシュイネーブラこの設定では薄型で、うまく機能します。

キャッシュが有効になっていると、Webサイトは迅速にロードされます。バックグラウンドでは完全に機能的なビジュアルビルダーもあります。それはあなたがデザインするための完璧な速い空白のキャンバスです。

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London — （画像クレジット：未来）

9月26日に私たちに参加してください CSSを生成します 、創造的なBloq、Net、Web Designerによってあなたに持ち込まれたWebデザイナーのためのサッ得屋の会議 。 2019年8月15日までに予約するときは、早期鳥のチケットで50ポンドを保存してください。

この記事はもともとCreative Web Design Magazineで公開されました ウェブデザイナー 。 問題287を購入する または 申し込む 。

続きを読む：

40ブリリアントのWordPressチュートリアル
ヘッドレスCMSとしてWordPressを使用してください
WordPress 5.0の新機能？

WordPressをビジュアルビルダーに変える方法

01. WordPressのコピーをインストールします

02.必要な部分を取り外します

03.ヘッダーとフッターでテーマを選択してください

04.要素をインストールしてページを作成します

05.全幅ページ

06.いくつかのコンテンツを追加します

07.見出し線を取り外します

08.コンテンツ幅を修正しました

09.開口部を作ります

10.背景を追加します

11.テキストをスタイル

12.背景オーバーレイ効果を使用してください

13.アクションの呼び出しを作成します

携帯にやさしい

15.画像を最適化します

16.パフォーマンスを向上させるためのページページをキャッシュします

操作方法 - 最も人気のある記事

BlenderのEeveeとのインテリアを作成する方法

アクセス可能なWebフォームを作成する方法

Adobe Illustratorでの視点を作成する

より良い生き物を描く17の方法

油絵のために必要な5つのこと

オイルの肖像画を塗る

Reactで簡単な音楽プレーヤーを構築する

ベクターツールを使用する：Webデザイナーのアプローチ

カテゴリ