# Page Editor - General Tab

### About General Tab

\[PageFly Element General]\(<https://help.pagefly.io/manual/elements-general-settings/> ‎ "General settings") provides you with unique options to tailor your PageFly pages.

### Configure The General Tab

There are 5 groups of parameters that all PageFly Elements contain. In this article, you will learn about Element General Settings The Five Parameters:

* Content
* Action
* Visibility
* Attributes
* Animation

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-9aaa47dfb138adb1f519ddce1340fa7bae7fd90c%2FAD_4nXdGLD023ninUE4fL74eSTuRcufZWqPXWymjp3XOMz8Q8Qr-CSEDrrfnQMeQcPKqdSkYSSJ38yAkTlQxUr0_NZlTdEQAAD0PN3eFCHsECWE2Iy0sCMNhLRSfcXNZelQ4StREL-R6LzNSGGp5gSW_AQkeyyL2ufWcCGHt0Su-i3ImEtg.jpeg?alt=media)

#### Content

Content is a parameter of the General Tab Configuration - Element General Settings, which is used for creating and editing text, selecting images, and so on.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-ff398bd64374b300f3403f734fd9fa43643c8e93%2FAD_4nXct_Lq1EYOOgnmbdcBMi5O8H_1FsDrdVk8rad25xh9DXjgd8hh-FXLS7Z1OYSD06VRxKGCvgF6gf4cnEMi2D7osKEf6LtPwEf-qjFM57monsr7L9N8PakE_pvW9RKH4VpS2SL9-IUlLFagcvd28keyyL2ufWcCGHt0Su-i3ImEtg.jpeg?alt=media)

#### Action

Action is a parameter that allows you to set up for customers to quickly access the other links, sections, send an email or make a phone call upon a click, without leaving the page.

Available options for click option include:

* **Go to URL**
* **Open pop-up**
* **Scroll to section**
* **Send email**
* **Call number**

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-c46132f89edb01d602f18ccf1a6052bc4303a4f7%2FAD_4nXfTFSua3w2BULxt4vgpNIbDgkMw8-rAhrqVAXjPQZV0BZgiWFa-y8Tby9SzPY8FduN7nZIaahq7myn4tCqCvQK2Wwn57Zaidl9AXtUqHgQaFc7TbvGFfHZBuYf1rPvQkr-LK9hI0ociKZIQ8yJwLwkeyyL2ufWcCGHt0Su-i3ImEtg.jpeg?alt=media)

For details on how to use click action, please refer to this [article](https://help.pagefly.io/manual/direct-to-a-link-a-section-a-pop-up-an-email-address-or-a-phone-number-by-click-action/).

#### Visibility

In the example below, we choose a paragraph element and see how the Visibility parameter is applied to this element.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-c94409688ba2aff1bd082338e8762597abd38260%2FAD_4nXd5LjUvnsw_ME-Ww4IvgcMLr2Jks4-A7kp2C231_OKgtxPBRc-1u9F2JNtN4ftST6JwAOMaWJpmxhBpXjdh2szlVStPiVkeFKBCo_vfAL_VHmpjm_C-SWVaNin88cJCNiQzP4p4fpTwFACz52tplAkeyyL2ufWcCGHt0Su-i3ImEtg.jpeg?alt=media)

**What Is Visibility?**

This parameter of the General Tab Configuration - Element General Settings, is helpful if you want to hide elements in different devices.

You can choose to hide the element on specific devices:

* **Hide on desktop**
* **Hide on laptop**
* **Hide on tablet**
* **Hide on mobile**

**Visibility Examples**

Let’s see how it works.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-ff38d868d503bb6be6d4484a333621da215a1ca8%2FAD_4nXdkyoJxl5zvKTTIe7hRylvWjH4c_S1TLKQZbhoHSjslwZX_M1A3n6OQMFz0BObX3lu0iIMoSnmV5vSxYIsoEyKH97bYv9DFTyK9w4bsbM5RvKigpNgvPhrtKZhLkJhX7VSRP4Yu8CUzmPG-lzLsQwkeyyL2ufWcCGHt0Su-i3ImEtg.gif?alt=media)

In this example, we will hide the paragraph element with text “**Clearance Sale 55% Off**” on the Mobile device. Simply, we need to enable the Hide on mobile option of the Visibility parameter.

Switching to the Laptop, Tablet device, the paragraph element is still there.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-cb6ff9b2954be392689ab11ef2e05896cb809687%2FAD_4nXeI_n5THsEAZhJ562lvnad0fCv6vnXpm0kbyIl54bggmJG7ox8HcBEz5gqg7FAsOoHJjbijemnqYom2BBEf1KO6d5Z-5dyM9OMHAyEi6589ValgK1DySsWC3f4gT1AUZFNFFdOwVDTJqgL1MpSGyAkeyyL2ufWcCGHt0Su-i3ImEtg.gif?alt=media)

#### Attributes

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-637438f567b328e83bb0977b05e071cd769cca15%2FAD_4nXfhObnl2BFG1KHBBvcQl2kEKCyGDZ79kkKfs8i0L10e7XTZ5kJgqyqdsXAl3xOgqT-WDBxswrnBY7gYhz-Q3C-3RT7EdaKV3EboPHLZpGoqv-KXjrMZS6TGQk4g0LhMi5JyTerIIWUyBMbanXe5keyyL2ufWcCGHt0Su-i3ImEtg.jpeg?alt=media)

You can set a custom value for several native attributes of the element HTML code so that you can later use it in custom CSS/JS code. Supported attributes are as follows:

* **HTML ID**
* **HTML class**

Besides native attributes, you can define custom attributes for more advanced customization.

#### Animation

**What Is Animation?**

There are 2 cases when you can add an animation to the elements to spice up your page.

* **When visible**: Choose the animation to apply to the element when a visitor sees it for the first time.
* **When mouse over**: Choose the animation to apply to the element when a visitor moves the mouse over it.

Each case gives you many animation choices.

You can watch this video tutorial for more details:

{% embed url="<https://youtu.be/joB7ei0L5rk>" %}

**Animation Examples**

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-5fa40f222ebba10f569c0731620185da5d26c70c%2FAD_4nXdpG9MUvCKl72D57sD6XrJ6qBkbRYFT2Gt8x3tLhowdOkDf18rvN86SwCGw5n5x61ESBGNQtB2XLEQWuCKBJ3cyJBF3u06q3fRj7KufFTIBkgAahdojg1poe-ans5lMfaTw2cHe-w3VTFzPZ0vQOwkeyyL2ufWcCGHt0Su-i3ImEtg.gif?alt=media)

**How To Delete Animation**

Here you just need to click on the X button to remove the animation.

![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-eac4ececc4f868cd561e489bbd3d3b3f8a1a335f%2FAD_4nXfp5Cw_V7z_XWFaMWenAnE_IiV3p55vCJovqIyTUnKSpGfw6BZHA_tSz13-NEXHLaIOc8HuL1M_Pu4Uj8aF7HUcTPHpoiLGuTFSMlW46_QeY8pEjTcLCAixmWsuy9CotQYQ7qN4fGbMvC5gRIYH-QkeyyL2ufWcCGHt0Su-i3ImEtg.gif?alt=media)

### Frequently Asked Questions

**1. Does the visibility function also work on the live view?**

Yes. But before that, remember to save and publish your PageFly pages first.

**2. Can I use random names for custom attributes?**

Currently, only valid attribute keys will be accepted. You can check the [HTML attribute reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes%23attribute_list).