Back to PageFly.ioVideo Tutorials

PageFlyページエディター - FAQ

概要

このよくある質問セクションでは、PageFlyページエディターの使用に関する一般的な質問に答えています。

よくある質問

PageFlyでスクロール時にShopifyの商品画像を固定表示させる方法は？

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

ステップ1: メインメディア要素を選択します。

ステップ2: スタイリングタブで、詳細設定/CSSコードセクションに注目してください。

ステップ3: このコードをCSSコードに貼り付けます。

position: sticky;
top: 0;
z-index: 1;

ステップ4: ページを保存して公開します。

詳細については、こちらのビデオチュートリアルをご覧ください。

PageFlyで要素のホバー状態とアクティブ/選択状態を設定する方法は？

通常状態/マウスオーバー状態/アクティブ/選択状態

ボタンなどの要素をクリックし、スタイリングタブで「Normal state」をクリックしてドロップダウンを開きます。設定できる状態は3つあります：Normal state、Mouse over state、Active/Selected stateです。

これらの状態を適用できる要素がいくつかあります。

  • Button

  • Heading

  • Tabs

  • Accordion

  • Icon

  • …

設定方法

例として「Button」要素を見てみましょう。

  • ステップ1: 「Button」要素を選択します。スタイリングタブをクリックします。

  • ステップ2: Mouse over state（またはSelected/Active state）を選択します。

  • ステップ3: スタイリングタブのオプションを使用してボタンを設定します。

PageFlyページでモバイルにおける横スクロールの問題を修正する方法は？

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

ステップ1: 問題が発生しているページを開きます。左下のサイドバーにある「Add custom code」アイコンをクリックします。

ステップ2: これらのコードのいずれかを追加します。

ステップ3: ページを保存して公開します。

詳細については、この記事をご覧ください：Responsive Mobile Horizontal Scroll Issue

もっと知りたいですか？以下のビデオチュートリアルをご覧ください。

PageFlyページエディターでグラデーションカラーを追加する方法は？

背景と要素の両方にグラデーションカラーを追加できます。そのためには、以下の手順に従ってください。

  • ステップ1: グラデーションカラーのCSSコードを選びます。そのためには、cssgradient.ioにアクセスしてください。

  • ステップ2: 色を調整した後、「Copy to Clipboard」ボタンをクリックします。

  • ステップ3: 背景にグラデーションカラーを追加する：コピーしたCSSコードをスタイリングタブのCSSコードセクションに貼り付けます。

要素にグラデーションカラーを追加する：

  • ステップ1: 追加したい要素をクリックします。

  • ステップ2: 一般タブで、属性セクションまでスクロールします。

  • ステップ3: 「HTML class」に「gradient」と入力します。

  • ステップ4: 左下のツールバーで、「Add custom code」アイコンをクリックし、以下のコードを貼り付けます。

.gradient {
  background: linear-gradient(90deg, green, rgba(121, 9, 65, 0.9128443613773635) 72%, rgba(0, 212, 255, 1) 99%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

ヒントとベストプラクティス

保存済みセクション

PageFlyを使用すると、ストアの様々なページに統合できる再利用可能なセクションを作成できます。

ステップ1: 保存したいセクションにカーソルを合わせ、「Save section」を選択します。

ステップ2: セクションを未公開として保存します。

ステップ3: 左側のパネルに移動し、「Sections」をクリックし、名前を付けたセクションをクリックして、公開するのを忘れないでください。

ステップ4: 再利用したいページのセクションの右上にある「+」アイコンをクリックし、「Saved」を選択します。

ステップ5: 好みのセクションを選択します。

セクションの名前変更/複製

セクション名を変更する方法は2つあります。

一般タブから変更する：

一般タブから「Attributes」セクションまでスクロールし、「More settings」をクリックします。

ページコンテンツから変更する：

ページコンテンツで選択したセクションの三点リーダーアイコンにカーソルを合わせてクリックし、「Rename」を選択します。

その他のリソース

Last updated

Was this helpful?