> For the complete documentation index, see [llms.txt](https://support.agentfire.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.agentfire.com/spark-editor/spark-editor/articles-2342894-spark-editor-blocks-header.md). # How to Change the Header at the Top of a Page How to change the Header block at the top of a page: its background image, video or slider, its title and text, and its buttons, phone number and quick search. The Header block is the big section at the top of a page, with a background, a title and usually a button. Click it in the editor to open its settings on the right. ![The Add Block panel with the Header category selected](https://2039430885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq65vhH2v4k5rpDOha9Vm%2Fuploads%2Fgit-blob-a4d8f2e437966cbe18cd0d9feb8557c1cee35987%2Fheader-block-1-category.png?alt=media) {% hint style="info" %} Not every page starts with a Header block. If the settings that open are **Rows**, **Design** and **Advanced**, your header is a Spark Creator block instead. Click the text, image or button inside it to change that part. For headers on inside pages, see [Spark Editor: Blocks - Internal Header](/spark-editor/spark-editor/articles-2353442-spark-editor-blocks-internal-header.md). {% endhint %} ## Background Open **Background** and choose a **Background Type**: * **Color:** one solid color. * **Image:** one photo. Click **Change Image** to pick a new one. * **Video:** a video that plays behind your text. See [Use a video](#use-a-video). * **Youtube:** paste a YouTube link in **Youtube Video Url**. * **Slider:** several photos that rotate. Click **Add Image** for each one. You can show arrows and dots, turn the fade on or off, and set how long each photo shows. 1000 milliseconds is one second. ![The Header's Background section with Background Type highlighted](https://2039430885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq65vhH2v4k5rpDOha9Vm%2Fuploads%2Fgit-blob-4f8398310b258eaacd375b87bd989e8f56c4d512%2Fheader-block-2-background.png?alt=media) **Hero Size** makes the header **Full Screen** or the **Default** height. **Animation** sets how the text comes in. ### Use a video Email with your video and we'll add it for you. It needs to be an MP4 file, up to 32 MB, with no sound. Add a **Poster Image** too, which shows while the video loads. ## Content Open **Content** to change the **Title** and **Intro Content**, the text under the title. You can change their colors, and **Looks Like** changes the title's size. ## Buttons, phone number, click map and quick search Each of these has its own section with an on/off switch: * **Buttons:** turn on **Enable Buttons** to show up to three buttons. A button with no text doesn't show. * **Phone Number:** shows your phone number with a short line of text. * **Click Map:** shows your ClickMap, if you have one. * **Quick Search:** adds a property search bar to the header. On Showcase IDX sites, the search bar's options are set in Showcase. See [Showcase's video tutorials](https://showcaseidx.com/video-tutorials/). Click **Save** when you're done. ## Common Questions
My text covers the video or photo on phones. Shorten the **Intro Content** or remove it, then check on your phone. Click the device icon at the top of the editor to see the page as it looks on a phone.
I need a fourth button. The header has room for three. Add another button in the section below the header.
My header loads slowly. Big photos and videos take longer to load. Try a smaller photo file or a shorter video. See [How to Change a Photo on Your Website](/spark-editor/spark-editor/how-to-change-an-image-on-a-page.md). If it's still slow, email with the page.
My YouTube video doesn't play. Check the link opens the video, and that the video's owner allows it to be shown on other websites. On YouTube, that's the **Allow embedding** setting.