2
0

tutorial02.rst 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. Tutorial Part 2: Adding Content
  2. ===============================
  3. Now let's start adding some content to our site.
  4. Adding a hero unit to the home page
  5. -----------------------------------
  6. In the admin dashboard, select **Pages >**. This will open a tree-style view of all the pages
  7. on our site. For now, the only page is Home Page. Click the pencil icon to edit the page, or click
  8. "Home Page" and then the "Edit" button.
  9. Here in the body section is where we can add our content. Each component in this section is called
  10. a "block" and provides a different format of content. Wagtail CRX is heavily based on Bootstrap CSS
  11. and its grid system, which means all content is based in rows and columns that dynamically stack depending
  12. on the visitor's screen size.
  13. First, let's make a big flashy hero unit. A hero unit in Wagtail CRX is a block that allows for
  14. a full-width background image or background color, and has lots of padding by default.
  15. Select the **Hero Unit** block. Next set a background image or color - we are going to download and use
  16. `this image <https://pixabay.com/photos/cupcake-bakery-dessert-sweet-4457880/>`_ from `Pixabay <https://pixabay.com>`_.
  17. Now to add content to our hero unit, under the Content field select **Responsive Grid Row** and then
  18. a **Column**. Inside our column, we will add **Text** and format it.
  19. Next, click the small "+" icon directly below the text field. This will let you add another block
  20. directly below the text, but still in the same column.
  21. Select the **Button Link** block. We are going to add a "Learn More" button. Right now we don't have
  22. any other pages on our site, so for the time being set **Other link** to "http://example.com", and
  23. the **Button Title** to "Learn More".
  24. My editing page now looks like this (ignore the misplaced side menu, that is just a result of the screenshot):
  25. .. figure:: img/tutorial_edit_home1.png
  26. :alt: The home page editor after adding a hero unit.
  27. The home page editor after adding a hero unit.
  28. Next click the **Preview** button at the bottom, which will open up a preview of the home page in a new tab.
  29. Great success!
  30. .. figure:: img/tutorial_front_home1.png
  31. :alt: The home page preview after adding a hero unit.
  32. The home page preview after adding a hero unit.
  33. Adding cards to the home page
  34. -----------------------------
  35. Next, let's say our company offers three different baked goods, and we would like to add three
  36. uniformly-sized cards on the home page representing that. Go back to the tab with the home page
  37. editor. All the way at the bottom of the page, click the "+" icon directly below the "Hero Unit" block.
  38. This will add a new block directly below the hero unit.
  39. Select the **Card Grid** block. The select **Card** to add the first card. Now fill out the **Title**,
  40. **Body**, and add a **Button Link** at the bottom.
  41. Next add and fill out two more cards by clicking the "+" icon directly below our current card block.
  42. The editing page now looks like this (ignore the misplaced side menu, that is just a result of the screenshot):
  43. .. figure:: img/tutorial_edit_home2.png
  44. :alt: The home page editor after adding a card grid with three cards.
  45. The home page editor after adding a card grid with three cards.
  46. Next click the **Preview** button at the bottom, which will open up a preview of the home page in a new tab.
  47. Lookin' good!
  48. .. figure:: img/tutorial_front_home2.png
  49. :alt: The home page preview after adding the card grid.
  50. The home page preview after adding the card grid.
  51. Adding more content to the home page
  52. ------------------------------------
  53. Continue following this pattern to add content. While the **Hero Unit** and **Card Grid** provide
  54. "special" content formats, the **Responsive Grid Row** is the most general purpose block for adding content,
  55. and you will probably find yourself using it the most all throughout your site. Of course, there is also an
  56. **HTML** block for inserting raw HTML if needed.
  57. When you are finished editing the home page, click the arrow next to the "Save Draft" button and select **Publish**.
  58. .. figure:: img/tutorial_publish.png
  59. :alt: Publishing a page.
  60. Publishing a page.