Transform the Exterior of Your Documents

In this tutorial you will learn what the detail and description of documents and subcategories are and how to add content to them. You will also learn how to make your descriptions look smart and well organized using the document display options.
Detail vs. Description
Thankfully, Webgarden makes it easy for you to include a description for each piece of detail on your website. The detail and description of a document or subcategory can be compared to a product and its packaging. The description, like packaging, briefly and enticingly describes what’s inside. The detail, like a product, then has the real value. For example, descriptions which lead to detail are commonly used on news websites. On the main page of the website you see the descriptions - headlines followed by short overviews of the news items. Clicking on those descriptions will take you to the detail - the actual news articles containing the real content.
How to Add Content to the Detail and Especially the Description
You can add content to the detail and description separately, or add identical content to both simultaneously.
When you first create a new document, you find yourself in the area for document detail. Begin by clicking on the main title element to edit the document name. This name will appear in the description, the url, and the navigation. It may or may not appear in the detail depending on your website DISPLAY SETTINGS where it is considered a type of CATEGORY HEADER.
01 Rename the document edited with marks.png
To add content to the detail, click on the green plus icon below the document name and insert the desired element.
For this example, after you’ve added a heading element with a title for the document detail, you can add a short introductory text. Notice the three options at the bottom of the element dialog box: DESCRIPTION, DETAIL, and DESCRIPTION AND DETAIL. DETAIL will have been automatically selected for you. This means that the text will appear only in the document detail. If you instead choose DETAIL AND DESCRIPTION the exact same text will appear in both places simultaneously.
02 Add description and detail simultaneously edited with marks.png
If you use the DETAIL AND DESCRIPTION option the text will take up the data space of only one element. This will not be the case if you enter the same paragraph separately in each the detail and the description.
If you choose to place an element in both the detail and the description, then if you delete it from one place, it will still be present in the other. You need to delete the elements separately from each location.
It is possible to add content to only the description from the detail area by selecting DESCRIPTION in the element dialog box, but it is much better to add description content while in the description area itself. When you are in the description area, you can actually see what you are adding and easily make any adjustments. You have to be in the description area to edit content that is in the description.
Go to the description from the document by hovering over the yellow edit icon in the upper right-hand corner and selecting DESCRIPTION.
03 Go to the description edited with marks.png
You can identify whether or not you are in the right place by looking at the navigation.
04 Description edited with marks.png
Here you can add content to the description in the same way you would add it to the detail.
Try Out the Document Display Options
You can change the appearance and organization of your descriptions using the document display options. Access these options from the category where your descriptions are displayed by clicking on the yellow edit icon which appears to the far right, just above the first document. You’ll need to hover over the area to find it. Once you’ve made your changes to the document display options, don’t forget to SAVE.
05 Document display options edited with marks.png
The document display options allow you to change the attributes below at your leisure. These screenshots show the default settings.
Display Style
06 Display styles.png
DISPLAY STYLE includes the following options for the overall appearance of your descriptions. The icons from left to right are:
Content is not displayed
If we choose this option, no documents or subcategories will be shown. But the content may still be accessible from other locations (menus, other categories, etc.).
Content is displayed as a list
Documents or subcategories are represented by only headings. The headings can be organized into rows and columns.
Content is displayed as tiles
Documents or subcategories are displayed with their full descriptions, including all elements.
Content is displayed as tiles on rollover
This format is the same as the list except that when you roll over a heading its description appears.
Content is displayed as a horizontal list with tiles on rollover
This is different from the previous lists in that the headings are arranged horizontally, not in the usual grid. If you roll over a heading, you can see its description.
Content is displayed as tabs
Documents or subcategories are displayed as horizontal tabs. The description of the tab you’re on is visible below. Unlike the other display styles, this option does not combine well with pagination.
Content is displayed as simple links
This option is similar to the list format, but uses a smaller typeface. It’s a good choice if there are a large number of documents or subcategories.
07 Columns.png
Select the number of columns for your descriptions.
08 Sort.png
Sort your descriptions. The icons from left to right are:
Sort from newest to oldest / Sort from oldest to newest
Organize your content according to when it was created.
Sort by last modified / Sort by last modified - inverted
Organize your content according to when it was last edited.
Sort alphabetically / Sort alphabetically - inverted
Organize your content alphabetically by name.
Custom sorting / Custom sorting - inverted
This option allows you to arrange documents or subcategories however you would like. You can move them by dragging and dropping.
Items Per Page
09 Items per page.png
You can break up your list of descriptions into pages. This is where you select how many descriptions you would like to have appear on each page. To turn off pagination, select the Ø.
Play around with the different display options to see which works best for you and the design template you have chosen. As an example, if you select CONTENT IS DISPLAYED AS TILES, 2 columns, SORT FROM NEWEST TO OLDEST, 10 items per page, and then SAVE in design template 158h, your descriptions will look like this.
10.1 Final appearance centered.png
Congratulations! Now you know what detail and description are and how to work with them to get the look you want on Webgarden.
11/09/2019 01:14:07
Or visit this link or this one