With "Add Article" you can create a new article in the DS Hub and thus create your first own article.
Follow us on the first steps and we will show you how blocks work as a basic part of this editor and how to use special blocks like the "Purple Slider" and the "Purple Accordion".
- Add Title
- Add Cover Block
- Insert Image into Cover Block
- Media Library
- Select Image
- Image Alignment
- Article Title on the Cover
- Cover Setting and Overlay
- Text Alignment
- Text and Color Settings
- Paragraph Settings
- Add Block
- "Purple Slider" - Picture Gallery
- Insert Images from Media Library
- Preview of the "Purple Slider"
- Slider Settings
- "Purple Accordion"
- Save Article Draft
Read in the following article how to publish your first article.
The central part of the article view is your editor. Here you can create the individual elements of your article and fill them with text or images. It is a WYSIWYG editor so that you get a preview of the individual blocks, how they will look like in the final article (see WYSIWIG = What You See Is What You Get).
2. Add title
The top part of the editor starts with "Add title". Add the Post Title, i.e. the title of the article, e.g. "Demo Article No.1". This title is also displayed in the article overview and in the app on the thumbnails.
Now you can add the elements of the article, so-called "blocks", below it. Use the + icon in the upper left corner to add a new block. With this you build a "stack" of blocks on top of each other, which finally forms the finished article.
In the top left corner with the + you will find a selection of the available blocks, sorted by
- Most used - This section shows the nine blocks you use the most, it changes depending on your use of the blocks.
- Common Blocks - Paragraph, Purple Slider (image gallery), Purple Accordion (list with unfolding sections), Social Share Button, Image, Heading, List (ordered with numbers, unordered with dots), Quote, Audio, Cover (large teaser image for the beginning of an article), Video
- Formatting - Pullquote (quote from the article's text), Table
- Layout Elements - Button (can refer to other destinations and functions via URL), Separator (horizontal line as a decorative element to structure articles), Spacer (used between blocks to structure article elements)
- Embeds - Twitter, YouTube, Facebook, Instagram
- Search - At the top is a search box embedded, so you can search for the name of a block to find it faster.
4. Add Cover Block
Click on the + at the top left and search for "Cover" in the search field of the blocks. Tap "Cover" to add the item below the post title.
5. Insert Image into Cover Block
The new block is now visible in the editor. You can now add an image from your computer or from the media library.
6. Media Library
Select the button "Media Library" from the block. In the pop-up select the right tab "Media Library" at the top. Here you can see all used pictures from other articles. They are available for reuse.
7. Select Image
You insert an image into the block by tapping on it. A new window will open to select an image (upload a file or select from Media Library, see screenshot below). A preview of the image will then be displayed on the right, including various additional information. Confirm your choice with "Select" and you will automatically be returned to the article editor.
You can now edit some properties of the block:
- Alignment and arrangement with the following (text) block, above the block in the context menu
- Text that is styled as a heading (and can be used instead of the post title, see publish your first article for more details)
- Focus point of the image (especially relevant if it is displayed as "fixed background" or in a responsive layout), in the right menu to the block
- Color and opacity of the overlay above the image, in the block menu on the right
8. Image Alignment
Select "Wide Width" to align the cover image to the width of the text.
9. Article Title on the Cover
Tap the text and write e.g. "Demo-Artikel No.1". The text on the cover picture can be used as header and title for the article because you can also hide the post title above it before publishing the article.
10. Cover Settings and Overlay
In this menu you can adjust the default settings according to your needs, e.g. reduce the opacity of the semi-transparent layer above the image to 20%. This will make your image appear a bit more colorful and your text will still be clearly legible.
If you add the title to the cover, you will also be offered options in the context menu above the text as well as in the block menu on the right.
11. Text Alignment
Select "Align text center" and "Bold" here.
12. Text Settings
Here you can define the text size, a "Drop Cap" for the first letter or the color of the text or the background to the text ("Color Settings"). The color value is usually specified as a hexadecimal value.
13. Paragraph Settings
By moving the mouse over a block, you can see which block type has been used.
With the arrows on the left, you can swap the block with others above and below. With the dotted slider, you can also move the block by dragging and dropping with the mouse button held down.
14. Add Block
The + also allows creating a new block between existing blocks with one click. The same is possible with the + in the upper left corner of the editor.
In the context menu of the paragraph block, you can define the alignment of the paragraph and highlight individual words within the paragraph. You can also use the chain icon to link to web pages. The link is highlighted in a light blue color as usual.
16. Purple Slider - Picture Gallery
Insert a "Purple Slider" as the next block. The layout of the gallery is the same for the website and mobile devices. But the usability is optimized for mobile devices: with a Swipe gesture, you can browse through the gallery. On the website, the arrows to the right and left of the picture can be used for browsing.
17. Insert Images from Media Library
Now insert several images from the Media Library. You can add a caption to each image in the right area of the Media Library.
18. Preview of the Purple Slider
As an exception, the Purple Slider does not display the preview for the picture gallery in the editor, but above all an overview of all inserted pictures including caption. The caption is displayed in the gallery on the mobile devices and on the website below the picture (see below the gallery view).
19. Slider Settings
In the menu on the right, you can activate the function "Crop Images" under "Slider Settings". This will crop all images to the aspect ratio 2:3 (height:width) and all images will be displayed in the same size. If you deactivate this function, the images will be displayed completely. However, there may be black stripes around the respective image, the so-called "letterbox effect". This fills the space around images that do not fit perfectly into the gallery and balances the aspect ratio between the gallery and the image.
20. Purple Accordion
This block is particularly suitable for long lists. Each heading is a separate element to which paragraphs and other blocks can be subordinated. As you can see in the webpage view below, the individual sections of the accordion can be expanded to display the subordinate content.
This makes it easy to structure more complex topics and allows users to quickly view the topics. If necessary, an interesting section can be expanded to deepen a topic.
An accordion block consists of a heading that is always visible, even if the element is not unfolded. Below this, you can create any other blocks which will be visible after unfolding.
A. First accordion element
B. Paragraph within the first accordion element
C. Quotation block within the first accordion element
D. "Add block" within the first accordion element
E. "Add block" below the first accordion element
F. Second accordion element (= new block!)
21. Save Article Draft
When you have finished the article, you can save it as a draft. The article will then not be published, but will still be available for further editing and revision in the DS Hub.
Read the following Knowledgebase article to find out what you should prepare for publication and how an article will be published: Publish your first article in the DS Hub.