Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Adding Non-Fluid Content
Next, you will add content (an image, a slideshow, etc.) that stretches the width of the viewport. This is great for content that is not pushed in from the edges, like the header and nav you added; rather, it goes from edge to edge.
- Click the edge of the containing div (see Figure 22).
- Choose Insert > Structure > Div. In the Insert Div dialog box, add a class name like slideshow and deselect Insert As Fluid Element (see Figure 23). Click OK.
- In Design mode, click the edge of the container div again to select it. Choose Edit > Copy.
- Insert the cursor after the slideshow div (make sure the cursor isn’t inside of the slideshow div). Choose Edit > Paste (see Figure 25).
)
Figure 22 Click the containing fluid element
)
Figure 23 Insert a non-fluid element
By deselecting the Insert As Fluid Element option, it is place outside of the containing div. If you placed an image using this method, the image would go from edge to edge and scale automatically. Since you inserted a div, you will need to edit the class style (slideshow in this case) in each layout (mobile, tablet, and desktop), as shown in Figure 24.
)
Figure 24 The non-fluid element
Next, you’ll add columns and a footer beneath the slideshow div. This content will be fluid elements, so they will need to be container within a .gridContainer div.
)
Figure 25 Copy and paste the container div
You can now delete the header and nav in the new container and add other elements like columns and a footer (that’s what I did). Create two divs in the new container that are fluid grid elements—each with its own class, and resize them. You can then insert the Footer element in the Insert panel beneath the columns (see Figure 26).
)
Figure 26 Add columns and a footer