Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design

  • Print
  • + Share This
Like this article? We recommend Adding Non-Fluid Content

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.

  1. Click the edge of the containing div (see Figure 22).
  2. Figure 22 Click the containing fluid element

  3. 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.
  4. 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.

  5. In Design mode, click the edge of the container div again to select it. Choose Edit > Copy.
  6. Insert the cursor after the slideshow div (make sure the cursor isn’t inside of the slideshow div). Choose Edit > Paste (see Figure 25).
  7. 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

  • + Share This
  • 🔖 Save To Your Account