Backgrounds, borders, shadows, hover effects and more.
When you select an element in TeleportHQ, the right panel shows its settings in Visual and Advanced tabs, always in the same order; values you set show in normal text, while grey values come from a CSS class, a larger screen size, a parent or the browser, and pointing at one shows where it comes from.
In TeleportHQ, select the text, then in the right panel's Text Style section set Font Family, Font Weight, Font Size, Line Height, Align and Text Color; you can also make gradient text and add a text shadow there.
In TeleportHQ, select the element, open Background in the right panel, click + and choose color, gradient or image; image backgrounds have Size, Repeat and Position settings, and several gradients and images can be stacked as layers.
TeleportHQ has no video option in Background, so you place a looping, muted Video element inside the section, stretch it to fill the section with Freestyle position and Object Fit cover, and raise the section's content above it with Z-index.
In TeleportHQ, select the element and use the Border, Radius and Shadow sections of the right panel; click + in each to add a 1px border, a small corner radius or a drop shadow, then adjust color, width, style, corners, blur and spread.
In TeleportHQ, select the element and open Transforms in the right panel to move it with Translate X and Y, turn it with Rotate, slant it with Skew, resize it with Scale and set the Origin; tick Enable 3D for 3D rotation and Perspective.
In TeleportHQ, select an element with a see-through background, open Backdrop Filter in the right panel and click + to add a 5px blur behind it; click Edit filter to change the amount or pick another effect such as Brightness or Grayscale.
In TeleportHQ, select an element, open States in the right panel, click + and pick a state such as hover, then change the styles; they apply when a visitor hovers, clicks or focuses the element, at every screen size, and fade in with a 0.3-second transition you can change in the Transition section.
In TeleportHQ, select an element, open the Advanced tab of the right panel, type a CSS property and value in the empty row under Properties or a Screen ≤ px section, and click +; use it for styles the Visual tab lacks, such as cursor, filter, mix-blend-mode and inset shadows.
