プラグインwpベーカリービルダー(ビジュアルコンポーザー)を使用してランディングページを作成する手順
- 24-07-2022
- trienkhaiweb
- 0 Comments
Mục lục
WPBakeryページビルダーでブロックを使用するためのクイックチュートリアル
WPBakeryページビルダーは、ワードプレスプラットフォームを使用してウェブサイトに統合された優れたツールであり、クリック、ドラッグ、ドロップするだけで、ウェブサイトのコンテンツを整理して表示するのに役立ちます。また、多くのモダンで「クールな」効果でWebサイトを美しくするのにも役立ちます。したがって、この記事では、WPBakeryページビルダーでブロックをすばやく使用する方法を学びましょう。そして、ここにガイドがあります。
なぜWPBakeryページビルダーを使用するのですか?
柔軟なページを作成し、相対的な方法で目的のランディングページを簡単に作成します。モダンで美しいウェブサイトインターフェースのための多くのレスポンシブ機能YouTube、Googleマップ、記事の表示リストの多くの機能が組み込まれているため、コーディングをあまり理解していなくてもプレゼンテーションを行うことができます。
効果のある多くのコンポーネントは、多くのデザインスタイルに適合します
WPBakeryページビルダーには、98を超えるコンテンツ要素(大まかにコンテンツブロックとして翻訳されます)が含まれており、非常にモダンで魅力的な効果があります。 CSSの知識、効果の作成、これらのコンテンツブロックの作成に長けている人でさえ簡単ではありません。ただし、ここでは、テキストと画像のみのWebページは退屈なので、目的に合わせてこれらのコンテンツブロックを選択してドラッグアンドドロップする必要があります。より多くのエフェクトやその他のコンポーネントが必要です。特に、WPBakeryページビルダーで列を分割し、行を分割し、常にモバイルを超高速のWebサイトに応答させる機能により、非常に便利に感じることができます。
ドラッグアンドドロップしてWebサイトを作成します(ドラッグアンドドロップ)
あなたがする必要があるのはウェブサイトを構築するためにドラッグアンドドロップです。コンテンツブロックを追加する場合は、ボタンをクリックするだけで追加できます。それらを配置する必要があるときは、ドラッグアンドドロップするだけです。したがって、WPBakeryページビルダーを使用する場合、CSSやHTMLでさえ、コードについて学ぶ必要はありません。
便利なバックエンドおよびフロントエンドエディター
WPBakeryページビルダーを使用すると、2人の気の利いたエディターでWebサイトコンテンツを作成できます。
- フロントエンドエディター:コンテンツの変更をライブで確認できるエディターです。訪問者はあなたがどのように見えるかを見ることができますが、もちろんあなたにはコンテンツを編集する権利があります。
- バックエンドエディター:フロントエンドとは対照的に、デフォルトのエディターと同じエディターであり、ブロック要素がより適切に記述されています。
あらゆるテーマと互換性があり、レスポンシブデザインの準備ができています
ほとんどすべてのテーマでWPBakeryページビルダーを使用できます。また、WPBakeryページビルダーはレスポンシブデザイン標準に従って設計されています。これは、Webサイトがあらゆるデバイス、あらゆる画面サイズで見栄えがするのに役立つ標準です。これは、SEOウェブサイトを作成するときにGoogleが評価する重要な要素です。
多くのアドオンはWPBakeryページビルダーをサポートしています
これは非常に強力なコンポーネントであるため、より多くの機能の拡張、より多くのコンテンツブロックと効果の追加をサポートする多くのアドオンを追加するために、コミュニティによって作成されました。
WPBakeryページビルダーでコンテンツブロックを使用するための手順
まず第一に、WPBakeryページビルダーの使用方法にアプローチするのに役立つ非常に優れた視覚化があります:[/ caption]
コンテンツブロックはすべてボックスです。 RowブロックとColumnブロックを使用して、Webページを行と列に分割します(MicrosoftExcelなど)。次に、他のコンテンツブロックをそれらの行-列に配置します。
各コンテンツブロックは、値の入力、使用可能な値からの選択、またはボタンの押下によって編集できます。カスタマイズは非常に直感的であるため、コーディングについて何も知る必要はほとんどありません。コンテンツブロックは、境界線、配置、背景画像、表示効果などのプロパティを調整できます。
以下にコンテンツブロックを紹介します。
行–行これは、WPBakeryページビルダーの最も基本的なコンポーネントです。 Webサイトに行を追加すると、その行の列数を調整できるようになります。 WPBakery Page Builderインターフェースで、「要素の追加」をクリックし、リストで「行」を選択して行を追加します。 注:以下に示す3つのダッシュをクリックして、行数を変更できます。[/ caption] 列-列コードまたはcss(ブートストラップ)の操作に慣れていない人のための列分割の概念は、簡単に理解できます。行は最大12列に分割でき、できるだけ多くの列に分割できます。あなたが好きなように。列を分割するとき、列の数が1を超える場合は、モバイルインターフェイスに合わせて列の応答機能を確認およびカスタマイズする必要があることを考慮してください。テキストブロック-テキストブロックコンテンツエディター、テキストブロックWYSIWYGエディター-テキスト編集の一種MicrosoftWordのようなツール。テキストブロックのフォーマットは、ページまたは記事のエディターツールと同じであるため、非常に使いやすいです。それでもエディターツールの使用方法がわからない場合は、私のチュートリアルを確認してください:エディターツールを使用して記事を書くための手順アイコンWPBakeryPageBuilderを使用すると、FontAwesomeアイコンライブラリの特別なアイコンを使用できます。これらのアイコンは通常の画像形式ではありませんが、通常のフォントに似ています。テキストを入力するときと同じように、アイコンの色とサイズをカスタマイズできます。 セパレーター–水平セパレーターこのセクションには、実線–実線、点線–点線、破線–破線などのさまざまなタイプがあります。セパレーターラインの太さを手動で調整することもできます。簡単に。 テキスト区切り文字付きの区切り文字。このセクションでは、区切り文字の中央にテキストを追加できます。必要に応じて、カスタムアイコンを使用することもできます。 注:テキスト付きセパレーターはセパレーターに似ていますが、最大の違いは、テキスト付きセパレーターにアイコンが追加されることです。[/ caption]メッセージボックスこれは、ユーザーのWebサイトからWebサイトに情報を送信する機能を持つメッセージボックスです。ウェブサイトで会員登録する。メッセージボックスを使用して、背景色と一致するテキストおよびアイコンを含むメッセージブロックを作成できます。 FAQ FAQは、質問を作成し、そこに入力したコンテンツを拡大または縮小してWebサイトのスペースを節約し、ユーザーが必要な情報を簡単に見つけられるようにするセクションです。 単一画像画像エディタ、これは美しい表示効果を備えた単一画像ブロッカー機能です。 画像ギャラリーさまざまな種類の画像のギャラリーをレスポンシブデザインと並べて作成し、Webサイトをより美しくすることができます。 画像カルーセルこれは多くの異なる画像を含むブロックですが、各画像を順番に表示することしかできません。スライド効果を使用して画像を切り替えます。 タブ表示スペースを節約するために、水平方向のコンテンツタブを作成する必要があります。コンテンツリストに必要な他のブロックをこれらのタブに配置して、より充実した、より統一されたWebサイトを作成することもできます。 ツアータブに似ていますが、これは垂直コンテンツタブを作成し、視聴者がWebサイトの概要を把握するのに役立ちます。 アコーディオンこのセクションでは、詳細を狭めたり拡大したりできるブロックを作成できます。実装は上記のFAQと同様です。 カスタム見出しGoogleFontsのフォントを使用して、さまざまなカスタムフォントでタイトルを作成し、より目を引く感じを作成できます。 ボタンさまざまなリンク、アクションボタンを使用してボタンを作成できます。好みに応じて、アイコン、3Dボタンスタイル、フラットなどを追加できます。 召喚状アクションブロックには、注意を集中させ、Webサイトの訪問者にあなたの目的に応じて行動を起こすように呼びかける機能があります。組み込みのエディタでアイコンとテキストを追加します。 ビデオプレーヤーYoutubeのビデオを、好みに合わせてカスタムの幅や効果などでWebサイトに埋め込みます。 グラフ–グラフWPBakery Page Builderの指示に従って、円グラフ、円グラフ、列などを作成できます。 上記はあなたが使用するために必要な機能の紹介です。さらに、著作権で保護されたテーマを使用する場合、Webデザインサービスを使用する場合、またはtech888からテーマを購入する場合は、一連のWPBakeryBuilderアドオンも提供されます。便利ですよね?ご不明な点がございましたら、こちらにお任せください。ご質問にお答えします!