Span

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

Add

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.

Style

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.

Close Span Editor

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.

Delete

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.

Modify

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".

Adding Same Classes

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.

Find

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.

Relative Styling

You can set rules, visibility, copy and delete spans.

Rules

You can set Rules for our span tag from the Relative Styles Rules modal.

Visibility

The Visibility property allows you to show or hide a span tag.

Click the Visibility icon to show/hide a selected span.

Copy

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.

Delete

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.

Transform properties and Span tag

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.