Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Page Objects
The basic tools in Macaw include a Text tool (which creates text), an Element tool that lets you draw divs by default, and a Container tool that is used for “grouping” or nesting HTML content.
Suppose we want to include a header element with a background image. Using the Element tool (making sure to be viewing the largest breakpoint!), draw an element on the page.
You can adjust the positioning of selected objects, such as the element you drew, to static (default), fixed, or absolute (as shown in Figure 8).
)
Figure 8 Adjust positioning
Aside from dragging objects into position or adjusting the position, you can also set the “origin” to left, center, or right. Essentially, origin is float. So left origin is float: left, center origin is no float, and right origin is float: right. Each object you create has a float applied by default.
)
Figure 9 Set floats
When you draw elements (divs by default), you can change the properties for it in the Inspector panel on the right. Elements have a lot more options than images, things like rounded corners, linking, backgrounds, borders, and more. I want make the element 100% width and have a background image that covers the div.
With the element selected on the page, you can drag it to snap to the top of the page and drag both edges to snap to the edges of the page. You can also set the width to 100% in the Inspector panel. You can then click the + (plus) to the right of No Backgrounds in the BACKGROUND section of the Inspector panel and choose Image (see Figure 10). There are lots of settings in the Background Image dialog box, including the option to cover or contain (SIZE).
)
Figure 10 Add a background image