Span
Last updated
Last updated
The Cwicly <span> tag is a container that is used to group inline elements - elements that take up only as much width as possible - together and allows you to wrap sections of text for styling purposes.
The Span tag allows you to style parts of a text easily without affecting the whole text.
The great advantage is that it efficiently handles the rules for relative styling without limiting your designing control which in turn simplifies and quickens your workflow
A span tag adds a predefined custom class that can be styled to modify the font, colour, size or other properties such as hover of a specific section of selected text.
The styling can be simple or highly complex depending on your needs.
You can also add global classes with global styles.
Highlight the segment of text to which you want to add a Span tag.
Open the "More" icon in the Cwicly tool bar.
Click <> Span to open "Modify Span" element.
Input a meaningful name and click "Create".
The span will be visible in blue under the class name of the text element.
A Span tag allows you to style parts of a text easily without affecting the whole text.
Click span to be styled.
This will open the Design tab of the Block Inspector.
Style as required.
Click "X" icon to the right of the Span being edited to close the Span Editor.
Changing the tab to Primary or Advanced will also close the Span Editor.
Select span to be deleted.
Open the "More" icon in the Cwicly tool bar.
Click <> Span to open "Modify Span" element
Click the "trash" icon in the Modify Span modal to delete the selected span.
Select an existing span.
Open the "More" icon in the Cwicly tool bar.
Click <> Span to open "Modify Span" modal.
Input new span name and click "Modify".
Spans you have created can be added to any other elements in the same block.
Select text to be styled.
Open the "More" icon in the Cwicly tool bar.
Click <> Span to open "Create Span" modal.
Add Span name you want to be copied.
The styles will be automatically added to the span.
Added styles will automatically be updated when the span is modified.
The Span tags you have added can be visualised in two areas.
Under the Class name.
In the Relative Styling tab of the Design tab.
You can set rules, visibility, copy and delete spans.
You can set Rules for our span tag from the Relative Styles Rules modal.
The Visibility property allows you to show or hide a span tag.
Click the Visibility icon to show/hide a selected span.
The Copy property allows you to copy the relative styles you have applied to a span.
Next to the required span, click the "Copy" icon to copy the styles.
The Delete property allows you to permanently remove the styles you have applied to a selected span.
Click the "Delete" icon next to the span to be deleted.
Although you can add a simple hover effect to your Span, the transform property does not apply to in-line elements. To fix this, we need to add a block or in line block display.
With the Span selected, open the Layout panel and set an inline-block display.
Style as required.
Use of Global Classes for Span formats is facilitated in Cwicly.
Open the Global Classes and Stylesheets tab.
Open the Global Classes tab.
In "All", Click the "+" icon to add a Global Class.
Input a suitable name and click "Create".
Style as required.
To apply the Global Class to your Span, add a Span and choose the Global Class name to apply the global styles.
Select text segment to which you wish to apply a global class.
Click "more" in the Cwicly Toolbar to open the dropdown.
Click "<>Span".
Paste required Global Class name and click "Create".
The Global Styles will be applied to the span.
