--- title: "How element settings work" description: "The Content, Styles, Settings and Effects tabs, sizes, shapes, borders, colors and backgrounds, mobile changes and add-ons." url: https://scratcher.io/help/elements/element-settings-basics language: en --- 1. [Help center](https://scratcher.io/help) 2. [Elements and design](https://scratcher.io/help/elements) 3. How element settings work # How element settings work The Content, Styles, Settings and Effects tabs, sizes, shapes, borders, colors and backgrounds, mobile changes and add-ons. Every element on a page has the same kind of settings panel. Once you know how it works, you can style any element. ## Open an element's settings Click the element on the page. Its panel opens on the left with up to four tabs, shown as icons: - **Content**: what the element says or shows, such as the image, the video or the button's action. - **Styles**: how it looks: size, colors, border, shape and alignment. - **Settings**: how it behaves. - **Effects**: animations and visual effects. See [Animations, confetti and other effects](https://scratcher.io/help/campaigns/animations-and-effects). An element only shows the tabs it uses. Text, headings and spacers have no panel: you edit them directly on the page. ## The element toolbar A small toolbar appears next to the selected element: - **Select section** (or **Select header** / **Select footer**) selects the section the element sits in. - **Move element** lets you drag it, or press Shift+↑ and Shift+↓. - **Duplicate element** makes a copy (Ctrl/Cmd+D). - **Delete element** removes it. Games, forms, calendars and interactive graphics ask you to confirm. Hold Alt and press Delete to skip the question where that's allowed. Press Tab and Shift+Tab to select the next or previous element. ## Common style controls - **Size**: choose **Small**, **Medium** or **Large**, or click the three dots to set the **Width** and **Height** yourself. Buttons can **fit text**, so they grow with the label. - **Shape**: **Square**, **Round**, **Pill** or a custom corner radius. - **Border**: **None**, **Solid**, **Double**, **Dotted**, **Dashed** or **Groove**, with a width and a color. - **Color**: pick a color or type a hex code. Your **Recently used colors** are shown in the picker. - **Background**: a **Color**, an **Image** (with **Placement**: **Top**, **Center** or **Bottom**) or, on pages, a **Video** from YouTube, Vimeo or your own file. - **Alignment**: **Left**, **Center** or **Right**, or a 3 × 3 grid for elements that can sit in a corner. - **Gap**: the space between the parts of an element. - **Shadow**: turn it on and set the **Color**, **Blur**, **Spread**, the **Horizontal** and **Vertical** position, and **Inset** for a shadow inside the element. - **Font**: the font, size and **Bold**. Text elements also have **Italic** and **Underlined**. Drag the handles between elements to change the spacing (**Drag to resize spacing**). On images, the shortcut **Replace image** lets you swap the picture straight from the page. ## The design kit and your own styles Most elements use your [design kit](https://scratcher.io/help/campaigns/design-kit) until you change them. When you have changed a button's style, two buttons appear on the **Styles** tab: - **Clear styles** puts the element back to the design kit. - **Apply to all** saves your changes in the design kit, so every button follows them. ## Changes for mobile and tablet only Switch to **Mobile** or **Tablet** above the page and change a setting: the change only applies to that screen size. A small undo arrow appears next to settings that differ from desktop. Click it to use the desktop value again. ## Add-ons Many elements have extra features, called add-ons. Click the add-ons button (tooltip **Advanced extensions**) in the panel to see them, for example **Button add-ons** or **Form add-ons**. Each add-on has a short description and a switch. Some add-ons have their own **Settings**: click the cog to open them. Enabled add-ons are listed in the panel, so you can see at a glance what is on. ## Color picker Click a color to open the picker (**Pick color**), choose a color or type a hex code, and click **Reset color** to go back to the default. Elements and design - [How element settings work](https://scratcher.io/help/elements/element-settings-basics) - [Edit text and headings](https://scratcher.io/help/elements/text-and-headings) - [Buttons and click actions](https://scratcher.io/help/elements/buttons-and-click-actions) - [Images, logos, video and fonts](https://scratcher.io/help/elements/images-video-and-fonts) - [Sections, columns, dividers and spacers](https://scratcher.io/help/elements/sections-columns-and-layout) - [Page settings, backgrounds and popup pages](https://scratcher.io/help/elements/page-settings-and-backgrounds) - [Countdown, social, share and menu elements](https://scratcher.io/help/elements/countdown-social-share-and-menu) - [Interactive graphics with clickable hotspots](https://scratcher.io/help/elements/interactive-graphic) - [Cookie notice, custom code and other campaign add-ons](https://scratcher.io/help/elements/cookie-notice-and-custom-code) - [Save and reuse templates](https://scratcher.io/help/elements/templates-and-reuse) ## Related articles - [Edit text and headings](https://scratcher.io/help/elements/text-and-headings): Type on the page and use the text toolbar for fonts, sizes, colors, line spacing, links, emojis, dynamic tags and AI. - [Buttons and click actions](https://scratcher.io/help/elements/buttons-and-click-actions): Choose what happens when people click a button or image: next page, a link, play, submit, share, download and more. - [Add your brand with the design kit](https://scratcher.io/help/campaigns/design-kit): Set the background, fonts, text colors, links, logo and button style once, and every page of the campaign follows them. Save kits and reuse them in other campaigns. ## Still need help? Real people are here to help. If you already use Scratcher, the quickest way is the chat inside the platform. - **[Chat with us](https://platform.scratcher.io/login)** Log in and click the chat button in the bottom-right corner. Rex answers right away, and our team is a click away. - **[Book a meeting](https://scratcher.io/book-a-meeting)** A free 30-minute video call with our team: a tour, campaign ideas or help with your setup. - **[Email us](mailto:contact@scratcher.io)** Write to contact@scratcher.io and we will get back to you.