Image and Logo widget settings

The Image widget shows one picture. The Logo widget shows the business logo from Business Info (or its own image) and links to the homepage. They share most design settings.

Image

How to add it

1. Click Add in the left rail and open Basic.
2. Drag Image onto the page.
3. Click Manage Image in its toolbar to choose the picture.
4. Click Edit Design for alt text, click actions and styling.

Choosing the picture (Manage Image)

The image window has tabs:

• Upload: JPG, PNG, GIF, WebP or SVG, up to 10 MB each.
• URL: paste a link to a picture.
• Library: the site's media library.
• Client media: pictures the client has added, when there are any.
• Free photos: search free stock photos.
• Edit current image: crop (Free, Original, 1:1, 4:3, 3:2, 16:9, 3:4, 2:3), Rotate and flip, and Adjust Brightness, Contrast and Saturation. Save as new image keeps the original untouched and saves an edited copy in the media library.

More on the window in Media library.

Content

• Thumbnail of the current picture.
• Alt text: what the picture shows, for screen readers and search engines ("Describe the image…"). See Image alt text.
• Fit: Contain (whole picture shows, may leave space), Cover (fills the box, may crop edges) or Fill (stretches to the box). Default Contain.

Click & Hover

• When clicked: Nothing, Open a link or Enlarge. Open a link shows the link picker (the link picker). Enlarge opens the picture full screen over the page on the live site. Default Nothing.
• Hover effect (desktop): None, Zoom out, Opacity, Float, Forward, Grayscale, Reverse grayscale, Blur, Blur and grayscale.
• Focal point: only when Fit is Cover. "The part that stays in view when cropped." Click a spot in the 3×3 grid, for example top center for a face.
• Caption: "Shown under the image (optional)".
• Tooltip: "Shown when hovering (optional)".

Layout

All set per screen size.

• Width: auto (the picture's own size, never wider than its column), px (0 to 2,000) or % (0 to 100). Default auto.
• Height: auto or px (0 to 2,000). Default auto.
• Alignment: horizontal Left, Center, Right, and vertical Top, Middle, Bottom. Default Left and Top.

You can also drag the handles on a selected image to resize it on the screen size you're editing.

Spacing

Padding (per screen size) and margin. See Design panel basics.

Shape

Cut the picture into a shape. Set per screen size (a circle on computers, the plain picture on phones, for example). The picture always fills the shape (like Fit Cover); use Focal point to choose what stays in view. Alt text, links, Enlarge and captions work the same on every shape.

• Rectangle (default): the plain picture, with the corner radius under Style.
• Circle: cropped to a square, then made round.
• Oval: an ellipse the size of the picture.
• Arch: a rounded top (a half circle on a tall or square picture) and a flat bottom.
• Rounded arch: an arch with rounded bottom corners. The bottom corners use the Corner radius under Style (0 uses 24 px).
• Blob 1, Blob 2, Blob 3: soft organic shapes.
• Hexagon and Diamond.

Circle, Oval and Arch keep the border and shadow. Rounded arch, the blobs, Hexagon and Diamond have no border (the Border setting is hidden), and their shadow follows the shape. Shapes other than Circle stretch with the picture, so set a Height if you want a squarer shape. Logos don't have shapes.

Style

• Opacity: 0 to 100 %, per screen size. Default 100 %.
• Rotation: −180° to 180°, per screen size. Default 0.
• Border: width 0 to 20 px and a color. Hidden for shapes that can't have one (see Shape).
• Corner radius (Rectangle and Rounded arch): one value up to 200 px, or turn on Each corner for Top left, Top right, Bottom right and Bottom left separately.
• Shadow: switch on, pick a direction in the 3×3 grid, and a Color.
• Reset to theme image style: shows once you've changed border, corners or shadow. Images take these from Theme > Images until you change them.

Animations & Effects

Hover effects, Entrance and Scroll. See Animations and effects.

Connect to Data

Toolbar > Connect to Data: Connect Image to (an image field) and Connect Alt text to (a text field). Use it for a team member's headshot on a dynamic page, or a hero photo from a collection item. See Connect to data.

Logo

How to add it

1. Add > Basic > drag Logo onto the page (the header usually has one already).
2. It shows the logo from Business Info straight away, 180 px wide, linked to the homepage.
3. Click Manage Logo to change the source or link.

Manage Logo (also at the top of the Design panel's Content section)

• Use Business Info logo (default): the shared site logo. "Changing Business Info updates every logo connected to it on this site. Publish when you want visitors to see the change." Edit logo in Business Info opens it from here.
• Use a different image for this logo: Choose logo image / Replace this logo image, and Remove this image. Use this for a white logo in a dark footer, for example.
• Alt text: left blank, it uses the business name.
• Link: Link to homepage (default), No link or Choose another link (the link picker). On the live site a logo link must be a web page, email or phone link.
• Fit: Contain, Cover or Fill.

Background plate

On Logo widgets, and on Image widgets used as the header logo or connected to the Business Info logo.

• Automatic (default): "A plate is added only when the logo wouldn't stand out from what's behind it." If Zeus added one on an older site, the note says so and Off removes it. Zeus no longer adds plates: logos on sites he builds are set to Off.
• Off: never a plate.
• Light / Dark: always a plate. Then set Plate color (white or near-black to start), Padding (0 to 40 px, default 8) and Corner radius (0 to 60 px, default 10).
• A header logo on Tablet or Mobile follows the larger screen's choice until you pick one there.

Layout, Spacing, Style and Animations

The same as the Image widget, with two differences:

• Width starts at 180 px.
• Horizontal alignment follows the column it's in ("Horizontal alignment follows the containing column."). Once you set one, Use container alignment puts it back.
• The logo doesn't take the theme's image corners, border or shadow; only what you set here applies.

Logo size and swap on scroll are in the header's own settings. See Header, footer and navigation.

Examples

• A dentist's team page: Image with Shape Circle, Focal point top center, for round faces.
• A boutique "about" photo: Shape Arch on desktop and Rectangle on phones.
• A portfolio photo that opens big: When clicked > Enlarge, Caption "Kitchen remodel, 2025".
• A dark footer: Logo > Use a different image for this logo with the white version.
• A logo on a busy hero photo: Background plate Light, Padding 12 px.

Limits and what it can't do

• One picture per Image widget. For several, use Photo Gallery or Media Slider (Photo Gallery and Media Slider).
• Enlarge shows that one picture, not a gallery to swipe through.
• Hover chips need a mouse.
• Business Info holds one logo. For a second version, use Use a different image for this logo on that widget.
• The image editor saves a new copy; it can't change the original file.

Who can use it

• Agency team members with the Mount Olympus tool.
• Client people with Widget content can change the picture, alt text and logo source. Design settings need Editor. Changing the Business Info logo needs Content Library.

Troubleshooting

• The picture looks stretched: Fit is Fill. Choose Contain or Cover.
• The top of a head is cut off: with Fit Cover, set Focal point to the top row.
• Enlarge does nothing in the editor: it works on the live site. In Edit mode a click selects the widget instead.
• The Focal point row is missing: it only shows with Fit Cover.
• I changed the logo but the live site still shows the old one: republish the site.
• My logo link was dropped on the live site: only web pages, email and phone links are kept for a logo. Pick a page or web address.
• An image I edited looks unchanged elsewhere: the edit is a new copy; only this widget switched to it.