The ‘Advanced’ section of the ‘Properties’ Control Column offers content creators greater scope for customization by controlling positioning, box shadows and rollovers.
Position
The tools in this section require some basic knowledge of CSS and HTML positioning, but they allow page designers to create more specific layouts that might not be possible to achieve using basic width and height settings, or by using the padding and margin spacing properties.
Add an image to your canvas. The one in our example has been resized to 50% column width. This was done by adding the image to the canvas, selecting it to open the “Properties” panel, choosing “General”, “Width” and then typing 50. The height of the image was adjusted by grabbing and dragging its bottom edge.
The “Advanced” section offers 4 types of spacing based on CSS property values.
Static
This is the default position, on the page, of content blocks. The blocks appear in order.
Relative
Content blocks appear relative to their placement in the publication’s flow.
Absolute
This removes content blocks from the publication’s flow so that they scroll with the page.
Fixed
This removes content blocks from the publication’s flow, allowing them to be positioned anywhere. When scrolling, the content blocks won’t move with the page, for example.
An element’s position can be fine-tuned using the left, top, right and bottom controls.
Z-Index
Defines how an element stacks along with other elements on the canvas, along the z-axis (which can be imagined as a line between the screen and your eyes). Elements with a higher z-index will appear in front of those with a lower z-index.
Opacity
Applies transparency to an element and its children. 0% is fully transparent, while 100% is fully opaque.
Box Shadow
Applies a shadow around the outside or inside of an element, depending on which Box Shadow Type is selected. Box shadows can be customized using the color and number inputs.
Rollover
Used to apply a text and color overlay to an element when a user hovers their cursor over it.