Skip to main content

Text layer

Layer definition#

first_name:
type: text
label:
en: First name
fr: Prénom
panelGroup:
en: Section
fr: Section
text: Hamza
color: rgba(255, 255, 255, 1)
fontFamily: Breakdown
fontStyle: normal
fontWeight: 300
fontSize: 4.8
position: [50, 65.7]
positionCentered: [TRUE, FALSE]
positionFrom: ["left", "top"]
lineHeight: 4.8
textAlign: center
textTransform: uppercase;
letterSpacing: 0.2
hideFromPanel: false
hideFromLayers: false
PropertyRequiredUsage
first_nameyesAn unique identifier defining the layer
typeyesThe layer type (should be text)
labelyesA translatable property defining the layer name
panelGroupyesA translatable property defining the form controls group in the panel
textyesThe text to be displayed
coloryesThe color of the text (follows the CSS specification)
fontFamilyyesThe name of the font family, that can be a narive one (Arial for example) for a custom one (the custom font needs to be configured)
fontStyleyesThe font style, normal or italic
fontWeightyesHow thick or thin characters in text should be displayed (from 100 to 900 ; 400 for normal, 700 for bold)
fontSizeyesThe font size, caluated from the width of the viewport (1.0 means 1% of the width of the viewport)
positionyesAn array defining the x/y position of the text, as a percentage (the format is [width, height])
positionCentered-An array of booleans (TRUE or FALSE, default FALSE) defining if the position of the layer should be calculated from the top/left corner or from the horizontal center/vertical center (the format is [horizontal, vertical]). This allows to center a layer independently of its dimensions
positionFrom-An array of booleans defining if the position or the layer should be calculated from the default left (horizontal axis) and top (vertical axis) or if it should be different (the format is [horizontal, vertical], can be left|right and top|bottom)
lineHeight-The line height for the text, caluated from the width of the viewport (1.0 means 1% of the width of the viewport). The font size will be used if not specified
textAlign-The horizontal alignment of the text, left (default), center or right
textTransform-The transformation of the text (follows the CSS specification)
letterSpacing-The spacing between letters in the text (default is 0), caluated from the width of the viewport (1.0 means 1% of the width of the viewport)
multilines-Defines if the text field should be an text input (single line) or a textarea (multilines) in the panel (default is false)
display-Specifies how the layer should be displayed (can be none, inline, block, inline-block)
margin-Specifies the margin outside of the layer, needs to be defined in %, vw or vh (follows the CSS specification)
padding-Specifies the padding inside of the layer, needs to be defined in %, vw or vh (follows the CSS specification)
hideFromPanel-Allows to hide the controls of the layer in the panel (default is false). Useful if the layer should be controller through properties
hideFromLayers-Allows to hide the the layer in the layers list (default is false). Useful if the layer should not be managed by the user
offsetSelector-In some situations, it is required to calculate the coordinates/dimensions of a layer regarding it offset for the selector (default is false)