Layers


The available layer types in Placid templates offer different customization options.

Use the {layer-name} assigned in the template editor to customize its properties. If you don't specify a property, Placid will use the default as defined in the template.

General Properties

There are some base properties that can be used on every layer type:

"{layer-name}": {
  "hide":false,
  "position_x":"...",
  "position_y":"...",
  "width":"...",
  "height":"...",
}
Property Description
hide Set true to hide this layer in the template; defaults to false
position_x Relative positioning:
+10px add 10px to x-axis
-10px remove 10px from x-axis

Absolute positioning:
10px set x-axis position to 10px
position_y Relative positioning:
+10px add 10px to y-axis
-10px remove 10px from y-axis

Absolute positioning:
10px set y-axis position to 10px
width Relative sizing:
+10px add 10px to width
-10px remove 10px from width

Absolute sizing:
10px set width to 10px
50% set width to 50% of default layer width
height Relative sizing:
+10px add 10px to height
-10px remove 10px from height

Absolute sizing:
10px set height to 10px
50% set height to 50% of default layer height

Text

"{layer-name}": {
  "text": "This is the text",
  "text_color": "..." // f.ex #FFFFFF
}
Property Description
text Text content. Line breaks can be forced using \n
text_color Text-color as hex-code #FFFFFF

Picture

"{layer-name}": {
  "image": "https://...",
  "image_viewport": "1280x1024",
}
Property Description
image Image URL or URL of the website to screenshot
image_viewport Viewport size for screenshots widthxheight; defaults to 1280x1024

Rectangle

"{layer-name}": {
  "background_color": "...",
  "border_color": "...", 
  "border_radius": "...",
  "border_width": "..."
}
Property Description
background_color Background color as hex-code #FFFFFF
border_color Border color as hex-code #FFFFFF
border_radius Border radius in px 2px or 2
border_width Border width in px 2px or 2

Browserframe

"{layer-name}": {
  "image": "https://...",
  "image_viewport": "1280x1024",
  "url": "https://placid.app",
}
Property Description
image Image URL or URL of the website to screenshot
image_viewport Viewport size of screenshots widthxheight; defaults to 1280x1024
url URL to insert into the browserframe's adress bar