The Layout section allows you to customize the general aspect of your template.
In there, you will find selectors for making your in-app messages fullscreen, round your template corners, change your close button aspect, turn on dark mode, and more.
Selectors:
General
- Name: name your template to find it when creating an in-app message.
- Modal vs Fullscreen: turn your template from a pop-up to a responsive fullscreen IAM.
Note 1: Devices have different screen heights. To be responsive to all devices, B.Layer makes the image component fill the gaps by default. Visit the section Example: fullscreen modes to learn more about all the possibilities for the fullscreen templates' layout.
Note 2: turning your template into fullscreen will automatically add media queries in the CSS+ section to handle tablet responsiveness (prevents stretching the IAM on tablet screens, the IAM will show up as a pop-up on tablets).
- Background image: Adds a background image to your template that can be added when creating an IAM with this template. Disables the background color.
- In-app corners: Increase the px number to round your template corners even more: 1px will be square, 50px will be very round
- In-app width: Increase the width of your modal template. We recommend a width of 320px to fit with all screen sizes.
- Background color: change the template's background color. Compatible with any color, hex codes, rgb, rgba, css gradients, and plain css colors. Is disabled if background image is on.
- Padding Top: Increase/decrease the space at the top of your template. In px, %, vw, or vh.
- Padding bottom: Increase/decrease the space at the bottom of your template. In px, %, vw, or vh.
- Padding left: Increase/decrease the space on the left of your template. In px, %, vw, or vh.
- Padding right: Increase/decrease the space on the right of your template. In px, %, vw, or vh.
Cross button
- Close button - circle width: change the size of the close button circle. In px. Write "0px" to make it disappear.
- Close button - circle background-color: change the color of the close button circle. Write "transparent" to make it disappear.