CSS Text Property
CSS Text accepts any valid CSS string values.
You can add a Name, Default, and make it responsive or not as required.
Open the Components Properties modal by clicking the "+" icon in the Block Inspector.
Choose CSS Text in the dropdown.
Select the Text Property you wish to configure.
Connect
The Class Property needs to be connected for it to be applied to the canvas.
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
Select the Component to which you want to connect the CSS Text Property.
Select "Modify" in the toolbar or the Block Inspector.
The blocks contained in the component are now visible in the navigator.
Find and select the Conditions property you wish to connect in the navigator.
In the Components tab of the Primary tab, click the Component icon of the property you wish to add, in this example Text Colour.
Select the required CSS Property in the dropdown, in this example CSS Colour Text.
The connected CSS Text property will now have a coloured background in the Block Inspector to indicate that it is connected.
A CSS Text field is now available in the Block Inspector where you can input your string.
As an example, the colour string "saddlebrown" has been added to the Name field of the component.
Name
Allows you to label the selected CSS Text property.
Open the Component Properties modal.
Select required CSS Text property.
Input suitable label name to Name field.
The required label will now be visible in the Block Inspector next to the text field.
Default
Allows you to set suitable default CSS Text string to your component.
Open the Components Properties.
Select required CSS Text property.
Open Settings tab.
Input suitable default text in Default field, in this example the colour "purple".
The Responsive toggle offers you the possibility of setting a CSS Text property for a specified screen size.
In the Components Properties modal, toggle Responsive as required.
Select required screen size.
Last updated
