ページエディタ:要素の追加

要素は、ClickFunnels のページの構成要素です。見出しや画像からボタンやフォームに至るまで、要素を使用すると、さまざまな種類のコンテンツや機能をページに追加できます。この記事では、ページに要素を追加し、設定を調整し、デザインに合わせてスタイルをカスタマイズする方法について説明します。

必要条件

アクティブなClickFunnelsアカウント
エディターに追加されたセクション、行、またはフレックスコンテナ

ページエディタでの要素の追加

ClickFunnels アカウントで、新しいセクションを追加する ページ に移動します。
ページのサムネイルをクリックして、ページエディタを開きます。
要素を配置する行または列にカーソルを合わせてから、表示される「 要素を追加」 ボタンをクリックします。
画面右側の [要素] パネルには、カテゴリごとにグループ化されたさまざまな要素オプションが表示されます。
要素タイプ ( 見出し、画像、 ボタンなど) をクリックして、選択した行または列に追加します。
要素の外側またはページの別の領域をクリックして要素の追加を続行するか、右上隅の [保存] をクリックして作業内容を保存します。

要素のカスタマイズ

When you hover over an element, its border will be highlighted in orange. To access an element's settings, click on the gear ⚙️ icon or click directly on the element.

手記
要素で使用可能な設定は、編集する要素の種類によって異なります。たとえば、見出し要素にはテキストのスタイル設定オプションが含まれ、画像要素には画像のアップロードと配置の設定が含まれる場合があります。調整は、各要素の特定の機能に合わせて調整されます。

詳細設定

To further customize your container (section, row, column, and element), ClickFunnels provides Advanced settings that allow you to control style, advanced CSS, animation, and rendering logic. We’ve separated these advanced features into dedicated articles to avoid overwhelming you with too much content in one place and to keep our documentation concise. Explore the following resources for more details:

Advanced Settings - Customize Styles: Learn how to populate contents dynamically, position containers, and apply z-index.
Advanced Settings - Customize Animation: Learn how to add animations, control entry and exit effects, and adjust animation delay.
Advanced Settings - Customize Logic: Learn how to apply conditional logic to elements and add custom attributes.

コントロールパネル

The Control Panel appears at the bottom of every container(Section, Row, Flex, and Element) in the page editor, offering quick access to essential settings and actions for that container. Here’s what each icon represents:

ALL: The container will be visible on all devices (desktop, tablet, and mobile).
Desktop (🖥️) Icon: The container will only be visible in desktop view.
Mobile (📱) Icon: The container will only be visible in mobile view.
Eye (👁️) Icon: Use this to hide the container from the page. Once clicked, the container will be hidden in the editor but not deleted. You can click the Layout menu in the top navigation bar to find the hidden containers. Select All, Desktop, or Mobile icon to unhide in the editor.
Code (</>) Icon: This icon opens the code editor, where you can insert custom CSS or JavaScript code to modify the container's behavior or styling.
Trash (🗑️) Icon: Removes the container from the page editor entirely.