Panel Diagrams

Grid Element

The grid element is a foundational layout element which allows you to organize, align, and position elements within columns on the page. Grids can contain up to 12 columns, separated by gutters. The column and gutter widths are customizable. Grids are particularly useful for optimizing designs across different devices: by changing grids from a side-by-side layout to a stack at narrower screen widths, you can easily make your website responsive.

Container Element

The container element is a layout element that can contain other elements. Containers are a fundamental organizing element of web pages, allowing you to build page layouts by grouping other elements within them, or to control the behavior of multiple elements at once.

For example, if you have a group of images and text that are part of a unit (such as a preview of an article), you can place all these elements within a single container so that they are grouped and will remain together when the screen size is changed. Nesting elements within containers, and containers within other containers, is also essential to creating certain types of layering effects.

Text Element

Allows you to place text on your website.

Image Element

The Image Element is used to add an image to the page, either by directly uploading one from your computer, or by dragging-and-dropping from the Media Library. This approach is best when you want to preserve the image’s aspect ratio (its height/width ratio) at all times, rather than cropping it. It’s also important to use image elements, rather than background images, if you want to add alt-text to an image for SEO purposes. Brandcast currently supports .JPG, .PNG, .SVG, and .GIF image formats.

Image Gallery Element

You can use the Image Gallery Element to display a collection of images on your page. You can choose whether they will be organized into a grid (gallery mode), or whether they appear one-at-a-time (carousel mode.) When users click on one of the images in the gallery, it will expand to fill the screen (this is commonly referred to as a “lightbox”.) While in this lightbox view, users can navigate forwards and backwards through your gallery using arrow icons, or by swiping on their mobile device.

Anchor Element

An anchor link is a link that navigates users to a specific location on the page. Use the anchor element when you want users to be able to navigate to a destination further down the same page, or to a specific location on a different page of your site. The anchor element will not be visible to your users on the published web page; it will only be visible in the Brandcast design studio. Place the anchor element where you want the link destination to be. Then, once you’ve linked a button or other element to this anchor, users who click on that link will automatically scroll to the location of the anchor.

Link List

The link list element is a simple way to add and maintain a collection of links that can direct users to external URLs, other pages in your site, and anchor links. To create a link list, you’ll create and label the links, specify their destinations, and (if you want sub-menus) add hierarchy. You’ll then have the option of saving your link list, for later re-use. Or, you can simply connect a link list to your site map, and it will automatically generate a link for every page on your site. This will keep the link list in sync, so that any changes you make to the structure of your website are automatically applied to your navigation.

Video Element

There are two primary ways you can add video to a page: via the Video Element, or by adding the video to the background of another element. The Video Element is designed to let the user have control over the playback of the video, and is ideal for longer videos.

Embed Element

The Embed Element can be used to embed third-party widgets or custom code snippets onto your Brandcast pages. Use it to add functionality to your site such as forms, maps, ad units, or social media widgets. You can also add analytics tracking codes via embed elements. Embedded code is iframed by default, but you can opt to render your embedded code inline if you prefer. (We recommend only experienced developers do this, as it may introduce conflicts with styling or functionality elsewhere on the published page.)

Color Panel

​ The Color Panel allows you to define the background fill color of an element, the color of text, the color of a border/stroke, or the color of a drop shadow. Colors can be defined as a Hex code, via RGB values, or by clicking on an area of the colorspace in the panel. Any color can also be made partially transparent. The panel comes with a number of default color swatches for you to use, and you can save your own custom colors as new swatches.

Text Edit Panel

The text panel contains all the options for formatting the contents of a text element, including the font, text size, style, alignment, line spacing, letter spacing, indentation, and space above/below the text. You can also customize the appearance of bulleted lists. ​

Border / Stroke Panel

Add borders to elements on the page, customize the border weight and style, and give them rounded corners. The stroke panel controls the arrangement, weight, decoration, and shape of an element’s border Applying strokes to the top or bottom of components is a good way to create a horizontal line across the page, which can be useful for visually separating content.

Dimensions Panel

Edit the height and width, margin, and padding of elements. Adjust the gutter width and define the layout behavior of your grids.

Position Panel

The Position Panel allows you to change an element’s position relative to other elements on the page, or relative to the page itself. By default, elements have “normal” positioning, which means that they will appear one after another, and their position on the page is determined by the elements that surround them. Normal layout flow is what allows content on the web to adapt itself to any screen size and device, as it flows to fill the available space. You can use the Position Panel to change the position of an element from “normal” to “fixed.” This will take an element out of flow, and it will no longer be affected by other elements on the page around it. Instead, its position can be defined relative to its parent, or to the entire page. You can also use the Position Panel to set the z-index of an element. When elements are set to fixed positions, they may overlap and cover each other. You use this setting to define which elements are “in front” vs. “behind” by increasing or decreasing the index.

Alignment Panel

The Alignment Panel allows you to set the alignment of an element relative to its parent (or to the page). This will keep the element pinned to the left side, right side, or aligned exactly in the center of its parent, regardless of the size of the device that you are viewing it on. Setting an element to left- or right-aligned will float it to that side. You can float multiple elements in a container to one side to stack them horizontally.

Show / Hide on Device

The Show/Hide on Device Panel allows you to hide or display content based on the screen size that visitors are using to view your site. Generally, you can make your website responsive in Brandcast by simply adjusting the styling at different Device Modes; however, there may be cases where your design requires a completely different layout on smaller devices, or you want to totally hide a specific design element (i.e. a mobile menu) on larger screens. In these cases, it may be necessary to use Show/Hide on Device to ‘swap’ different elements in and out of view.

Filters Panel

Use filters to adjust opacity, blur, brightness, contrast, and create color-shift effects on images and other elements. If you are applying a filter to an image, note that the original asset in your media library will be unaffected. The filter is only applied to the image as it appears in the context of your website, not to the source image itself.

Transform Panel

The Transform Panel contains a number of sliders that let you manipulate the size, orientation, and placement of elements. Transforms can be useful for adding interesting hover states, especially when combined with easing curves that you add via the Transitions Panel. Transforms are also very helpful for creating dynamic animations in combination with the Interactions Panel.

Preset Animations

Preset Animations are a way to easily add animated elements to your designs. ​ We provide 32 different animations that can be applied and triggered when you scroll the page. The animations trigger when the midpoint of the element appears on screen, so be careful to not place them on large elements otherwise it might not trigger on smaller screens.

Transitions Panel

The Transitions Panel lets you control how an element’s styles transition from one state to another. By adjusting the duration and delay, you can define how much time the transition will take from beginning to end. By editing the easing curve, you can tweak the rate of change over time, and create some interesting animation effects. This feature is most commonly used when an element has a hover state, or when it is part of an interaction.

Box Shadow (Drop Shadow)

The Box Shadow Panel lets you apply a shadow, inset shadows, and glows, to any element on the page, and to specify its size and orientation.

Background Image Control Panel

You can add images to your page by adding them to the backgrounds of containers, grids, or text elements In the Background Image Panel you are able to adjust the position, cycle images for a slideshow, create a parallax effect, scale, repeat, and blend the image(s).

Video Control Panel

The Video Control Panel can be used to add a background video to an element (a container, grid, or text box) and edit the settings and behavior of that video. It is also used to edit the settings of the Video Element.

Page Structure Panel

The Page Structure Panel displays all the elements currently on the page, and shows their location in the page hierarchy. Because elements can be placed within other elements, and because the relative order of elements will affect your layout, it’s extremely important to keep track of the page structure while designing your page. The Page Structure panel displays the hierarchy as a tree. Each parent can be expanded/collapsed to show/hide its children. Selecting an element in the tree will select that element on the page, allowing you to edit it. This panel is particularly useful in finding and selecting elements that are currently hidden, out-of-view, or obscured by other elements.

You can rename elements in the page structure panel by double clicking on them. Any name you assign an element will become its ID that you can reference.

Interaction Panel

The Interactions Panel is used to create, edit, and delete interactions on your website. It allows you to build custom animations and events when page elements are clicked, hovered over, or scroll into view.

Global Styles

Global styles allow you to control the default styling appearance and behavior of each type of element on your website (paragraph text, images, links, etc.). Global styles can be defined on a per-device basis (desktop, tablet landscape, tablet portrait, smart phone) by changing between device modes.