当サイトを最適な状態で閲覧していただくにはブラウザのJavaScriptを有効にしてご利用下さい。
JavaScriptを無効のままご覧いただいた場合には一部機能がご利用頂けない場合や正しい情報を取得できない場合がございます。
同意しました
本サイトではWebサイトのエクスペリエンスを向上させるために、Cookieを使用しています。Cookieはブラウザの設定から無効にできます。詳細はこちらから
お問い合わせ 無料トライアル

Document

ドキュメント

Xperienceページビルダーの使い方

最終更新日:

このページはチュートリアルの一部であり、最初から最後まで順番に実行する必要があります。最初のページに移動します：Xperienceのインターフェース。

以下について説明します

  • XperienceWebサイトのページビルダー

  • ページビルダーでページを作成する

  • ページビルダーの操作

ℹ️重要な注意点

Dancing Goatは、チュートリアルの目的で使用される特定のサンプルウェブサイトです。あなたの会社のウェブサイトでの編集体験は、異なるページテンプレートやウィジェットが利用可能になるなど、異なるかもしれません。

Xperienceサイトのページビルダー

ページビルダーを使用すると、Xperienceの管理インターフェイスで直接サイトのコンテンツを作成・管理することができます。ページ ビルダーの UI は使いやすく、ドラッグ＆ドロップ式のエディタでページを操作することができます。ページビルダーにアクセスするには、Pageタブをクリックします。

ページビルダーでページを作成する

ページビルダーでは、構造化されたコンテンツよりもコンテンツをよりコントロールすることができます。ページを構築したり、設定可能なセクションやウィジェットを使用してコンテンツやレイアウトを調整することができます。

開発者は、あなたのビジネス要件に基づいてページビルダー機能を設定し、魅力的なウェブサイトを作成するために必要なすべてのウィジェットを準備します。

ページビルダーでは、ほとんどWYSIWYGのような体験をすることができます。ウィジェットを使って必要な場所にコンテンツをドラッグ＆ドロップし、変更内容を保存します。そして、あなたのコンテンツがライブサイト上でどのように見えるかをすぐに確認することができます。

ページの構造を調整したい場合でも、開発者に助けを求める必要はありません。開発者は、ウィジェットを配置できるセクションを用意することができます。各セクションには異なるプロパティを設定することができ、レイアウトやページの外観を変更することができます。たとえば、プロパティのひとつはカラム数をコントロールすることができます。別のプロパティではセクションのサイズを設定することができます。あるいは、Dancing Goatのランディング・ページのセクションに実装されているのを見ることができるように、背景を変更することもできます。

私たちは、コンテンツとデザインの両方を調整する必要があるトラフィックの多いページでページビルダーを使用することをお勧めします。そのようなページの典型的な例としては、ウェブサイトのホームページやキャンペーンのランディングページなどがあります。

Dancing Goat's Coffee のサンプルページにあるように、開発者はページ全体のページビルダーを有効にすることができます。ページビルダーでは、ページのレイアウトやコンテンツを完全にコントロールすることができます。

Dancing Goatのホーム・ページでは、ページ・ビルダーの2番目の典型的な使い方を見ることができます。開発者がこのページの特定の部分だけにページビルダーを設定していることがわかります。ホームページのほとんどの部分はページタブのページビルダーを使って調整します。しかし、ページのOur Storyの部分を編集するには、Contentタブに切り替えて、Structured content editorを使用する必要があります。Our Storyの部分は頻繁に変更されることはないでしょうし、パーソナライズする必要もありません。そのレイアウトとコンテンツはほとんどの場合同じままです。開発者がページビルダーを使ってコンテンツを表示しなかったのはそのためです。img

Xperience ページビルダーは、ページテンプレート、編集可能エリア、セクション、ウィジェットで構成されています。

  • ページテンプレートを使用すると、ページレイアウトの選択や切り替えが簡単になります。ページテンプレートは、ランディングページや商品ページなど、あらかじめデザインされた構造や繰り返し構造を持つページを作成するのに適しています。ページビルダーを使用しているページで作業をしているときに使うことができます。しかし、開発者は構造化されたコンテンツを持つページにも使用することができます。(このチュートリアルの後半では、ダンシング・ゴートの記事のテンプレートを使って作業します)。

  • 開発者はページ上で編集可能な領域を定義します。開発者はコンテンツタブからページのどの部分を編集する必要があるかを選択し、コンテンツ編集者がページビルダーを使って編集できる部分を選択します。

  • コンテンツセクションは、ページの視覚的な側面をレイアウトするのに役立ちます。たとえば、セクションのカラム数を決めることができます。セクションによっては、下のサンプルGIFアニメーションを見ればわかるように、より多くのプロパティを持つこともできます。

  • ウィジェットは、コンテンツを作成するのに役立つ、あらかじめ定義された構造を持つコンポーネントです。ウィジェットを使って、画像をアップロードしたり、テキストを編集したり、Call-to-actionを挿入したりすることができます。各セクションには、どのような構成でも複数のウィジェットを含めることができます。セクション内のウィジェットの位置は、ドラッグ＆ドロップで調整できます。

img

ページビルダーの操作

💡課題

ランディングページをもっと面白くしたいと考えているあなたは、以下のアップデートを決めました。

  • コールトゥアクションボタンのテキストを"Sign up"に変更します。

  • テキストを太字にして "Our previous batches "とする。

  • Testimonialウィジェットをヒーロー画像ウィジェットの右下に移動します。

❔ヘルプ

以下の手順を踏んで、ランディングページを更新します。

  1. Pagesアプリケーションに移動し、コンテンツツリーでCoffee samplesを開きます。

  2. 必要に応じてPageタブに切り替えます。

  3. Hero imageウィジットでテキストを編集します。

  4. Hero imageのCall-to-actionボタンに”Sign up"と入力します。

  5. 見出しの "Our previous batches "をハイライトしてテキストエディタを開き、太字にします。

  6. Testimonialウィジェットのどこかをクリックして、そのプロパティを表示します。

  7. Hero imageウィジットの下にあるTemonstrialウィジェットを同じセクションにドラッグ＆ドロップします。

  8. 空のセクションを削除します

    1. 下にスクロールして、Temonstrialウィジェットが含まれている1カラムセクション(茶色がかった背景)に移動します。

    2. セクションの上にマウスを置くと、そのプロパティが表示されます。

    3. セクションの削除ボタンをクリックして、空の1カラムセクションをページから削除します。

  9. Saveボタンをクリックします。

下のGif画像は上記の手順を示しています。

img

前のページ： Pagesアプリケーションの使用— 次のページ： ファイルの操作

完成したページ： 3/6

　

原文：https://docs.xperience.io/13tutorial/business-tutorial/using-the-xperience-page-builder