Text components
Drag and drop text components
Assembler allows users to quickly add text content that was previously related (Story Cards included in the “Related materials” section) or the starter template’s own content, from the assets and layouts panel. To do this, one simply has to click on the Assets tab and expand the Text dropdown to show all the textual elements, ready to be dragged and dropped to the desired point in the project. Content can also be dropped without a determined layout: the text will be displayed covering the whioe section, in a single column structure.
Dragging and dropping without a layout:
Dragging and dropping content inside a layout:
Authoring text
Users can also include their own text by double clicking on a text box and inputting the text.
To edit the text’s appearance, simply click twice inside a text box. A new utility bar will be displayed on the top of the screen.
The utility bar helps users to apply and modify the following:
Predefined styles
Its default style is no style. The predefined styles gives to the entire text box a predefined style. Each predefined style has its own font size, font weight, and some particular characteristics such a bullet point if you select the predefined style “bullet”.
Font family
The font family determines the typography of the text. Choose the appropriate font family among the available fonts in Assembler Online. Note: Choosing a font family may change the predefined style to no style.
Font size
Font size determines the height and width of the text. Users can select the predifined sizes or type the desired one into the size box. Note: Choosing a font size may change the predefined style to no style.
Bold/italic/underline
By clicking on the three icons, users can add boldness, italics and underlining to the text of buttons, even when a predetermined style has been previously applied. This works as a character style, which means that only the highlighted text will be modified.
Superscript/Subscript
Clicking on the first icon applies a superscript, shifting the text to the top of the line, while the second subscript icon shifts the text to the lower half of the line. This works as a character style, which means that only the highlighted text will be modified.
Text Color
The text color drop down shows three sections with the primary and secondary colors established in the template according to branding guidelines, as well as our company’s corporate colors. Simply click on one of the color switches to apply it to the selected text.
Bullets
Selecting the bulleted list adds a bullet point to the selected text. If a whole paragraph is selected, a bullet will be added at the beginning of each line.
Alignment
By clicking on the various options, users can change the alignment of the text inside the container, respectively horizontally (left, right or center) and/or vertically (top, right or bottom) with the relation to the cell.
Line height
Clicking on line height changes the space separating each line within the selected paragraph.
Weblinks
By clicking on the chain icon, you will be able to apply a link to a website for the text that is currently selected.
Padding
Padding refers to the space between the text and its container, in this case the cell in the chosen layout. Padding can be adjusted either individually or generally with boxes such as the ones shown below.
Border weight and color
In the menu shown below, users can input a border weight (thickness) applying to all sides, and side by side by checking the “More options” box. Once the border weight has been established, users can select its color by checking one of the circular switches choosing from primary and secondary brand colors or other corporate colors.
Background color
The background color in the icon shown above determines the background color for the container of the image in this case. In the menu below, users can once more select the desired color by clicking on one of the brand’s or corporate color switches.