PageFlyエディターでの作業方法

PageFlyエディターについて

概要：

PageFlyエディターは、強力なドラッグアンドドロップツールを使用してShopifyページを直接構築できる場所であり、コーディングスキルなしで要素やレイアウトを配置および調整できます。この記事は、PageFlyエディターを効果的に操作できるよう理解を深めることを目的としています。その特徴と機能について説明し、コーディングスキルなしで視覚的に魅力的で機能性の高いページを構築できるようになります。

PageFlyエディターにアクセスするには？

以下の手順に従ってください：

1. Shopifyの管理ダッシュボードから、PageFly Page Builderアプリに移動します。

2. 「新しいページを作成」をクリックするか、既存のページ/セクションを選択します。

3. 希望するPageFlyエディターを選択します。利用可能なエディターは2つあります：

• レガシーエディター: 行と列の構造を持つエディター。

• Gen 2エディター: 行と列の構造を持たないエディター。PageFlyページに要素を直接追加でき、Flexブロックにより柔軟なカスタマイズレイアウトが可能です。

PageFlyエディターの設定方法

ヘッダー機能

ヘッダーには、調整できるいくつかのオプションがあります：

パンくずリスト

パンくずリストは、ページ構造内の要素の位置を示す視覚的なガイドです。要素がどこに配置されているかをよりよく理解するのに役立ちます。

要素の典型的な構造は次のようになります：セクション > 行 > 列 > 要素。他のセクションはより複雑になる場合があります。

これは、Googleがブログやウェブページをよりよく理解するためのガイダンスでもあります。

ページパンくずリストの使い方

どのように機能するかを見てみましょう。私たちの例では、セクションには多くの行、列、および要素が含まれています。パンくずリストの項目をクリックすると、特定の階層にネストされている要素を選択できます。

エディターで要素にマウスオーバーすると、ページパンくずリストのテキストの色が要素に基づいて変わります。

キャンバス

新しいページを作成し、既成のテンプレートを選択しない場合、キャンバスは空白で表示され、パネルから要素をドラッグアンドドロップするように指示されます。

垂直ツールバー

垂直ツールバーは、PageFlyエディターの左サイドバーにあります。すべての異なるPageFly要素を見つけることができる場所です。したがって、これらの種類の要素についてより深い知識を持っている方がはるかに良いです。上から下の順に、すべてのオプションは次のとおりです：

• ページコンテンツ

• 要素

• サードパーティ要素

• ページテンプレート

• ページ割り当て

• ページ設定

• バージョン履歴

• カスタムコードを追加

• ライブチャットを開く

| ページコンテンツ: ここでページコンテンツの概要を確認したり、要素を移動/削除/複製したりできます。 |

| | サードパーティ要素: このリストでは、PageFlyと連携した他のアプリからのすべての要素を見つけることができます。 |

| | ページテンプレート: 事前にデザインされたテンプレートを参照して使用し、迅速にページの構築を開始します。 |

| | ページ割り当て: 商品ページを構築している場合にのみ表示されます。この機能を使用すると、商品をページに割り当てることができます。 | |

| | ページ設定: ページタイトル、ページタイプ、ページのURL、テーマセクションなどのページ設定を構成し、テーマテンプレート名を確認します。 | |

| | バージョン履歴: ページの以前のバージョンを表示および元に戻します。詳細については、このガイドを確認できます。 | |

| | カスタムコードエディター: 高度なカスタマイズのためにカスタムコードを追加します。詳細については、この記事を確認できます。 | |

| | ライブチャットを開く: 24時間年中無休のライブチャットサポートに即座に接続します。 | |

|

インスペクターツールバー

エディターで任意の要素を選択すると、インスペクターツールバーがすぐに表示されます。パネルとしてその要素に固定されたツールバーに気づくでしょう。パネルの色と機能は、異なるコンテナ要素によって変わります。

要素

|

セクション要素とカラム要素には、それぞれの要素固有の機能があります。

セクション

|

カラム

|

PageFlyのコピー＆ペーストスタイル機能の詳細については、このビデオを参照してください。

要素パラメータの検索

この機能により、要素インスペクター内でパラメータを迅速かつ効率的に検索できます。たとえば、「色」のようなキーワードを入力すると、背景やボーダースタイルなど、異なる設定でそれがどこに表示されるかを確認できます。これにより、編集とレビューがより迅速になります。

ドキュメント表示ボタン

ドキュメント表示ボタンは、PageFlyヘルプセンターに直接接続し、現在編集している要素に関連する記事やガイドに即座にアクセスできます。

ユースケース

• ストアページのカスタマイズ：ブランドの美学に合わせて、ホームページ、商品ページ、コレクションページのレイアウトをパーソナライズし、カスタム要素を追加します。

• マーケティングキャンペーン用ランディングページの作成：マーケティングキャンペーン、商品ローンチ、特別プロモーションのために、視覚的に魅力的でコンバージョン率の高いページを設計し、リードを獲得して売上を促進します。

• 情報量の多いブログページの構築：画像、動画、その他のメディアを含む魅力的なブログ記事を作成およびフォーマットし、ユーザーエンゲージメントとSEOを向上させます。

• お客様の声（証言）ページの設計：整理され、魅力的な方法で顧客の証言やレビューを表示し、潜在的な顧客との信頼と信用を構築します。

よくある質問

1. PageFlyエディターを使用して既存のShopifyページをカスタマイズできますか？

はい、そのページがPageFlyで作成されていれば可能です。その特定のページのページエディターに移動するだけです。

既存のページのPageFlyエディターは、「PageFlyで編集」ボタンを使用して開くこともできます。ただし、注意してください：

• そのページがPageFlyで作成されたものである場合、ボタンをクリックすると直接ページエディターに移動します。

• そのページがPageFlyで作成されたものでない場合、ボタンをクリックすると「PageFlyで新しいページを作成」モーダルが開かれ、最初からページを構築する必要があることを意味します。

2. セクションとフレックスセクション（Gen 2）の違いは何ですか？

セクションは、行と列のコンテナ構造でページレイアウトを設計できるもので、PageFlyセクションとPageFlyページの両方に追加できます。一方、フレックスセクションには行と列の構造がありません。PageFlyページに要素を直接追加でき、Flexブロックにより柔軟なカスタマイズレイアウトが可能です。

3. PageFlyページがモバイルフレンドリーであることを確認するにはどうすればよいですか？

PageFlyエディターには、ノートパソコン、タブレット、モバイルデバイスなど、さまざまな画面サイズでページをプレビューおよびカスタマイズできるデバイス表示モードが含まれています。これにより、ページが完全にレスポンシブであり、すべてのデバイスで見栄えがよくなります。

バージョンアップデート

従来のページ構築メカニズム（行、列）に加えて、PageFly 4.23.0ではGen 2エディターが追加されました。これは、複雑で高度にカスタマイズ可能なレイアウトの作成を可能にする、より柔軟で効率的なテクノロジーであり、直感的で使いやすいインターフェースを備えています。

追加リソース

• PageFlyの使い方 | 5分で始める

• ページエディター – ページキャンバス | ページ内のすべての要素を含む