To change a picture on your Editor 2.0 website, open the page in the Site Editor, click the picture and click Replace. A page's large header (hero) picture is usually the background of its top section, so select the section and change the image under Style. Then click Republish.
Applies to: Org admins whose role includes Site Editor access, such as Administrator or Content Editor · All plans, for organizations with Editor 2.0 (the CMS module) · Editor 2.0 (CMS)
Where: Content > Site Editor
Replace a picture
- Go to Content > Site Editor and open the page.
- Click the picture. The Image Content panel on the right shows a preview, the file name and the picture's size in pixels.
- Click Replace, then upload a new file or choose one from your media library.
- Under Style, choose Cover to fill the space (the edges may be cropped) or Full Image to show the whole picture.
- Use the Position icon to pick the part of the picture that stays in view.
- Enter Image alt text that describes the picture for visitors who use screen readers and for search engines.
- To make the picture a link, use Link image.
- Click Republish.
Change your page header (hero) picture
- Go to Content > Site Editor and open the page.
- Click the top section away from its text and buttons, so the whole section is selected.
- In the panel on the right, open Style, then Image, and replace the picture or click Add Image.
- If the section plays a video instead, open Style > Video and click Delete, then go to Image and click Add Image.
- Leave the section's overlay on (the dark or colored layer over the picture) so the text on top stays readable.
- Click Republish.
Header pictures shared by several pages
A header picture can be connected to the Content Library, and the editor warns you when it is. A connected picture is shared: changing it on one page changes it on every page that uses it. A logo shown in both the header and the footer can be shared the same way. To change one copy on its own, ask TeamSideline Support to disconnect it, then change it as usual.
Choose a picture that fits
- Use header (hero) pictures at least 1920 pixels wide. Smaller pictures look blurry or stretched across the screen.
- With Cover, the edges can be cropped on narrow screens such as phones, so keep the important part near the focal point you set with Position.
- Check the result in the editor's phone view before you republish.
What you'll see
The new picture shows in the editor right away. Visitors see it after you click Republish.
If it doesn't work
- The picture changed on other pages too. It's connected to the Content Library. Ask TeamSideline Support to disconnect the copy you want to change on its own.
- Clicking the header picture selects the text or a button instead. The picture is the section's background. Click an empty part of the section, or find the section in the Layers panel in the left sidebar, and use Style > Image.
- The picture can't be selected, or the area shows View Only. It's in a locked area, such as the header, the footer or a TeamSideline section. See CMS: Why can't I edit the header, footer or some page text? (View Only and locked areas).
- The new picture looks blurry or stretched. It's too small for the space. Use one at least 1920 pixels wide, or choose Full Image instead of Cover.
- Your logo didn't change. Your website's logo usually comes from Business Info in the Site Editor's CMS panel. See CMS: Business Information. The Content > Configurations > Logo page on your admin site changes only the logo on reports, Mail Merge and the app.
- Visitors still see the old picture. Click Republish, then refresh the page.
Good to know
- Pictures inside TeamSideline sections, such as a program's picture, come from your admin site. Change a program's picture on its 1 Setup page.
- If you'd rather not change a header picture yourself, send TeamSideline Support the picture and the page it belongs on.
- To change buttons, text or icons, see CMS: Add a button and choose where it links and CMS: Edit text and icons on a page.