The Arrange inspector

The Arrange inspector pane, the Arrange menu and the format bar controls let you manage element layering.

Elements are drawn in the order they have been added to the project. Draw order is not important if elements don’t overlap each other. When overlap occurs you need to control ordering.

The Back button brings the element behind all the others, while Front brings it in front of all others. Backward moves the element one step behind in the layering (its position is swapped with the following element), while Forward moves it a step ahead (its position is swapped with the previous element).

The layer name is shown in the layer pane, and is an aid in selecting elements and understanding the page layout.

The Full page width setting can be used for boxes, galleries, maps, videos and embed elements, to make them extend beyond the page margins, full bleed.

The Lock setting prevents an element from being moved on the canvas, and also removes it from the current selection in many circumstances.

The Show on this device setting toggles visibility of the element on the current device, to be used in conjunction with multi-device setups.

The Show with Color Theme setting is used in conjunction with color themes, to show elements only when the light color theme is active, or the dark one is.

The Show on blog index setting is used in blog pages, to control which blog post elements are shown on the index.

The Show to All Users setting works in conjunction with the Password Protection feature, when unchecked it allows elements to be shown or hidden based on whether the user is logged in.

Elements can be resized by:

  • specifying the desired width and height in the Arrange inspector pane;
  • using the handles on edges and sides—holding the shift key while dragging preserves the element aspect ratio, that is the proportion of width to height.

Elements can be moved by:

  • specifying the desired horizontal and vertical position in the Arrange inspector pane;
  • dragging them directly—holding the shift key while dragging constraints movement on horizontal, vertical or diagonal axes.

Most elements can be rotated via a rotation setting in the Arrange inspector pane.

Text wrapping

After adding an image in the canvas you can set the text wrapping options to control how text will flow around the image. Text wrapping in fact can be used for any canvas element, not just images. By default text wrapping is off, so text will overlap the element (or end up below the element).

Setting “Above and below” clears the sides of the image, forcing the text to skip the entire horizontal stripe where the image intersects the text box.

Setting “Rectangle” causes text to avoid the frame of the element, pretty much the frame you see in the canvas.

Setting “Contour” causes text to fill areas of the image that aren’t fully opaque, so if you have a bitmap or SVG image with transparent regions, text will wrap the contour of the image content.

Image transparency often looks clear cut, but there often actually is a multi-level transparency value, Sparkle represents that in a 0 to 1 range, so if you have a transparency gradient you can control how far in the text will overlap. The margin option is always on top of the actual edges of an element, as a safe area to prevent text from getting too close to the content.

Text wrapping also accounts for element rotation and image or box corner rounding (with the Contour option), so you can get creative about text layout even without transparent images.

As a layout tip, wrapping will be more visible and more pleasing when text is tight around the element, so text should be possibly aligned to account for it, if possible. For example an image on the left will work best with left aligned text, an image on the right will work best with right aligned text.

A final note on the edge case of a text frame lying entirely inside an element set for text wrapping. In this case, the text inside won’t be affect by the text wrapping settings. This lets you design an element that contains text within but forces text around it to wrap.

Visibility

Sparkle’s visibility setting is key in helping show some common page features across the website identically, for visual consistency. This is similar to how master pages work in some design applications, but is more applicable to web content.

You can show the page header, a navigation element or the footer in a consistent way on all site pages, or perhaps just in a section.

When an element is visible on multiple pages it remains fully editable in all of them. A useful trick is to group, say, the page header elements, and make the group visible on multiple pages, instead of setting visibility on the individual header components.

The multi-page visibility applies to all properties, including position. This makes the Follow footer setting particularly useful, because by anchoring an element to the page bottom, it lets you have a common footer on pages of different height.

The Move with Page Bottom setting causes elements to move along with the page bottom handle. This is mainly useful when an element is shown on multiple pages. By following the page bottom in multiple pages, the relative positioning allows pages to have different heights, and the element will be positioned at different heights in different pages, but always the same distance from the bottom of the page.

Advanced code integration

If you have enabled the relevant option in the Miscellaneous site settings, you will find an additional section at the bottom of the arrange inspector. This lets you enter the HTML id attribute for the main HTML element that constitutes the Sparkle element. This is implementation dependent and might change across major Sparkle versions. The main purpose is element targeting via Google Tag Manager, or code integration via Javascript.

A text wrapping example
Code integration settings

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

Updated for Sparkle 5.2

Made with Sparkle

Copyright © Crinon SRL 

This website makes use of cookies.

Please see our privacy policy for details.

It’s Okay

Deny