Definitions

Account Settings

From the “Studio” menu in the top bar, select ‘Account Settings’ to view basic information about any accounts that you belong to, as well as your personal account. From here, you can update the name of the account, and its avatar image. ADA Compliance​ A wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these.

Advanced Calc Options

The Dimensions Panel also has some tools for calculating the dimensions of an element via simple math (subtraction, addition, multiplication, and division.) You can use this to allow an element’s width and/or height to flex with the browser, while ensuring that it maintains a fixed amount of margin.

Alignment

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. If two or more elements are both left aligned (or right aligned), and are equal to or less than the width of their parent container, they will stack next to each other. Note that this is not the same thing as text alignment, which refers to the alignment of the text content inside an element, not the element itself.

Alt Text

Also called “alt tags” and “alt descriptions,” alt text is the written copy that appears in place of an image on a webpage if the image fails to load on a user’s screen. This text helps screen-reading tools describe images to visually impaired readers and allows search engines to better crawl and rank your website.

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.

Background Blend Mode

This allows you to define the way the background image blends with its parent container, and with other background images within in. You can use it to create visual effects that brighten, darken, dissolve, or color-tint the image. Note that this is only supported by modern browsers.

Background Fill

Set the element’s background to fill the site width, or the full browser width. By default, an element’s background will extend to the full width of the browser. By toggling the box fill mode, you can limit an element’s background so that it only extends to the full width of the website or edge of the element.

Background Image

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). Adding an image as a background is the best approach when:

...you want to be able to easily crop an image to fit the page design.
...you want to float other kinds of content over top of the image, such as text or buttons.
...you want the image to be full-browser-width, extending past the max-width of the website.
...you want to tile an image within a container.
...you want to add multiple background images to create blending effects, or to create a simple automated carousel. You can control the positioning of your images on both the x-axis and y-axis by using the sliders, drop-down, or by entering in exact values (as a percentage or a pixel value.)

Blend Mode

Blend mode is how two or more images, video, or colors that overlap each other interact. Instead of the topmost element being the only one visible, a blend mode can be used to have the overlapping elements blend together in a variety of ways, producing an output that is a combination that looks different than any individual member of the group.

Blocks

“Blocks” in Brandcast are reusable design components that you can create and save, to help you quickly build new page layouts. Any collection of elements can be saved as a new block. If you save a block to your team’s account, it will automatically become available for the other users on your team to use, too. Blocks can be made of whatever elements you’d like: grids and containers, text content, images or videos, link lists, even interactions. You can include as many elements as you want within a block, as long as they are all contained within a single parent element. Once saved, your blocks will appear within the block library, where you can organize them into folders, or drag them onto the page to add them to your website.

Border / Stroke

The Stroke Panel is used to add borders to elements, and to round their corners. You can control the weight of a border (the thickness of the line), the style (dotted, dashed, grooved, double, ridged, inset or outset), and the layout (which sides of the element will have the border applied.) This panel is also used to set the border radius, in pixels or as a percentage, which will round the corners of the element overall.

Box Fill

These toggles allow you to quickly set the element’s dimensions to match height of the browser, the full width of the browser, or the full width of the website.

Box Shadow Panel

The Box Shadow Panel lets you apply a shadow to any element on the page. You can use this to make it appear as though the element is floating above the page, to give them a “glow”, or to make them appear as if they are inset within the page. Settings within this panel allow you to specify the size, direction, and spread/blur of the shadow. A drop shadow can be “outset” (appearing behind the selected element), or “inset” appearing within the element.) By default, box shadows are grey, but you can also customize the color using the Color Panel.

Breadcrumbs

The breadcrumbs in Brandcast, located at the bottom left of the window when working in the Design Studio, will appear when you select any element on the page. The breadcrumbs automatically display the hierarchy above the selected element -- if it’s inside of a parent container, for example, that parent will be shown in the breadcrumbs. You can click on any element in the hierarchy to immediately select it.

Break Points

CSS breakpoints are points where the website styling responds according to the device width, allowing you to show the best possible layout to the user. Brandcast has device modes for 3 breakpoints (which allows us to support 4 device “categories”): “desktop”, “tablet landscape” (1024x786), “tablet portrait” (768x1024), and “phone portrait” (375x559). It’s important to understand that the different device modes do not correspond perfectly to actual devices, but rather to screen widths that we’ve chosen because they are generally representative of that type of device.

Case

Case can force all characters to be upper or lower case. This setting is for display only; the capitalization of the actual text that you typed will always be preserved.

Child

A child is an element that is contained withing another element. For example, a container element may contain a text element. In this case the container is the parent element, and the text the child element.

CMYK

The CMYK color model is a subtractive color model, used in color printing, and is also used to describe the printing process itself. CMYK refers to the four inks used in some color printing: cyan, magenta, yellow, and key. This is used for print only, and NOT intended for web use.

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.

Container

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.

Content Mode

The Content Mode is a view in Brandcast that lets you make changes to the content of a website, without the ability to edit its overall design or layout. You can use this mode to easily swap in new copy and imagery into an existing site design or template. While in the Content Editor, you’ll only be able to make changes to text, images, and links. The other design tools in Brandcast won’t be available while you’re working in this mode.

Device Mode

Device mode allows you to make your website responsive by having it automatically adjust its layout and styling based on your visitors’ screen size. There are four Device Modes to choose from: “desktop” (1280x768), “tablet landscape” (1024x786), “tablet portrait” (768x1024), and “phone portrait” (375x559). These modes do not correspond perfectly to actual devices, which have a huge and overlapping range of sizes, but rather to screen widths that are generally representative of that category of device.

Dimensions

The dimensions of an element refer to its height and width. These can be defined in absolute units (like pixels), or relative units (like percentages or vertical-height.) In Brandcast, the dimensions of an element can be adjusted by dragging its edges on the page, or by entering values in the Dimensions Panel.

DNS

Domain name servers, or DNS, maintain a directory of domain names and translate them to Internet Protocol (IP) addresses.

Easing Curve

An easing curve represents how an element should transition between two states over time. It’s represented as a curved line, where the slope of the line corresponds to the speed of the transition. You can adjust easing curves in Brandcast to customize the rate of a hover state or animation by using the Transitions Panel.

Element

Elements are the objects that make up a webpage. Some have a specific use (such as text or video elements) and some are used for layout purposes and will contain other elements (such as containers and grids). All available elements can be found on the left tool bar.

Element Level Styling

Element-level styling is any styling (dimensions, colors, filters, etc.) that you apply to an element after selecting it on the page. Element-level styling can potentially be overridden by styling that has been applied via Global Styles, or inline.

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.)

Export Code

You can use the Code Export feature to save the current version of your website to your computer. It will be downloaded as a zipped folder that contains all of the site’s pages as HTML files. Media assets will not be downloaded.

Export History

Each time you export a site, it will be added to the Export History window. This window opens automatically when you initiate an export, and it’s always available from the “File” menu. Previous exports of a site can be re-dowloaded by clicking the small download icon next to their name.

Fill Color

The fill color of an element is its background color. Any area of an element not obstructed by other elements, or by content such as media or text, will show as its fill color. By default, elements are transparent (no fill color), but this can be adjusted using the Color Panel.

Filters

Filters are CSS-based visual effects that you can apply to elements to modify their visual appearance, including transparency, brightness, blur, and color manipulations. A filter applied to a parent element will also apply to any child elements within it. Be aware that filters may not be supported by older web browsers.

First Line Indent

Controls the amount of indent for the first line of a block of text.

Fix to Page

Fix-to-page is a type of absolute positioning. It can be applied to any element using the Position Panel. This will take the element out of flow: its position will no longer be affected by other elements on the page. Instead, its position will be defined relative to the browser window, remaining in place even when the user scrolls. Use this option if you want to fix an element to a constant location in the browser window, and allow it to cover or overlap other elements.

Fix to Parent

Fix-to-parent is a type of absolute positioning. It can be applied to any element using the Position Panel. This will take the element out of flow: its position will no longer be affected by other elements on the page. Instead, its position will be defined relative to its parent. Use this option if you want to fix an element to a specific location within a grid or container, and allow it to cover or overlap other elements.

Fixed Background

This option locks a background image in place as the user scrolls down the page, creating a parallax-like effect. Not supported on some mobile devices (i.e. iPhone.)

Focus Frame

The highlighted area around the edges of a selected element. It indicates what you have selected on a page and allows you to control the margin, size and padding via the handles. You can also drag an element to a new location by clicking within its focus frame.

Follow

Checking the “follow” box allows search engines to crawl the adjoining pages of your website. Unchecking this box effectively tells search engines not to crawl to the next page. This is typically used to describe unsponsored vs. sponsored links.

Font Manager

Brandcast provides a small set of fonts that are available by default when you create new websites. However, you’re not limited to these! Using the Font Manager, you can add additional fonts from different typography foundries (currently Google, Adobe, and Hoefler) and use them immediately. When adding more fonts, you have the option of adding them to the specific website you’re working with, or to your account. Adding a font to your account will make it available, by default, to every new website that’s created.

Font Size

This controls the size of the font as it appears on screen. Brandcast supports fixed units such as pixels (px) and points (pt), as well as scalable units such as ems (em) and percent (%). By default, if you type in a number it will assume to be pixels (px).

Font Weight

This property controls the thickness of the lines in a font. You can specify which weights you want to make available for each font you’re using via the Font Manager. (Be aware that using too many font weights on your website can have an adverse affect on page performance as they all must be loaded separately.)

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.) For example, setting the style of your <H1> headers in the Global Styles Panel will change the appearance of every heading on your entire site -- and any new headings that you add in the future will automatically have the same styling applied by default. ​ The global styling of text can be overridden by applying inline styling (directly selecting the text in the text element and then making changes.) You can also adjust global styles on a per-device basis, by changing between Device Modes. For example, you may wish to make your headers appear larger on desktop devices, or reduce the padding around paragraphs for users on mobile phones.

Grid

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.

Gutter

As in print publishing, gutters are the whitespace between columns. The size of the gutters in a grid element can be controlled with the gutter slider, or by entering a value.

H Values (H1-H6)

Headings are a way to definite certain text blocks as being more important to the page. They are used by search engines to help parse and rank your page, and they’re also important for accessibility and ADA compliance, as they’re relied upon by screen readers. You can define any text on your page as a heading by selecting it, then choosing a class (<h1> through <h6>.) The default styling for each of these heading classes can be customized using the Global Styles Panel.

Height

The height of an element is defined in pixels (px) by default. If you’d like to set the height to be a percentage of the screen, you can enter it as view height (vh) where 100vh is the full height of your screen, 50vh is 50%, etc. ​ An element’s contents can force its height to increase beyond the value that you’ve set, so that text or other content doesn’t get cropped. You can use the Hide Overflow option to prevent this from happening.

Hide Overflow

The overflow property specifies what happens if the content inside an element is too large to fit. Checking this box will automatically hide (clip) any content that overflows past the edge of the element. Content will only overflow if it is absolutely positioned (fixed-to-parent or fixed-to-page.) Normally positioned elements will force the height of the parent element to increase, so that it doesn’t get cropped.

History Panel

The History Panel is a complete history of every edit made to your page design over the course of your current Brandcast session. The history includes changes that you’ve made to the design of the page, but not to text edits that you’ve made within a text element. The moment that you close the website you’re working on, or refresh your page, you will no longer be able to undo or redo your changes.

Horizontal Link List (HLL)

You can specify whether the Link List element displays in a vertical, or horizontal orientation. A horizontally-oriented link list can be styled using the Global Styles Panel. You can apply styling to the element overall (‘Horizontal Link List’), to the individual list items within it (‘H LL Item’), to the container of its submenus (‘H LL Sub-List’) and to the individual sub-list items within that (‘H LL Sub-List Item’.)

Hover Mode

Hover states allow you to change the styling of any individual element when the user’s mouse cursor “hovers” over it. Hover states can be set on individual elements, or via your global styles. If you want all page elements of a certain type to have the same hover effect, it’s a good idea to use the Global Styles Panel. If you’d like multiple elements to change when you hover, then that would be created in the interaction panel. Note that your hover styles will not be visible on mobile devices (since it’s not possible to ‘hover’ on a touchscreen.)

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

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.

Index

Checking the “index” box allows search engines to crawl and index your page, thus allowing your page to show up in search results. This can be done either at the website level or at the page level. Your page and site are set to be indexed by default.

Inheritance

One of the core concepts of designing on the web, inheritance means that ‘child’ elements on the page can inherit the styling of their ‘parents.’ In Brandcast, elements can inherit their styling in three important ways: from the element they are inside of (a parent), from the website’s Global Styles, or from a larger screen size (by using Device Mode.) The characteristics that can be inherited include a lot of things that don’t always intuitively feel like ‘styling’ -- width/height, margin, padding, absolute positioning, filters, and transforms, in addition to more obvious things like font styles, colors, backgrounds, and borders. Inheritance is useful! It means that you don’t have to manually style every single element on your page. Instead, you can take advantage of inheritance (in particular via your global styles) to automatically control the appearance of many elements at once.

Inline Styling

Styling in Brandcast can be applied via global styles, at the element level, or inline. Inline styling can only be applied to text. You can style your text inline by directly selecting the portion of text that you want to edit, then making your changes. Inline styling will override any styling that would otherwise be inherited from the element level, from a parent, or from Global Styles. This is very useful because it gives you the flexibility to deviate from your global stylesheet if you need to -- but if you want the element to default to the global styling once again, you’ll have to remove the inline styling first.

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.

Letter Spacing

Letter spacing controls the spacing between each character in a word.

Line Height

This controls the space above and below lines of text. You may need to adjust this to prevent lines of text from overlapping as the font size increases. It can be expressed in fixed units such as pixels (px), as well as scalable units such as ems (em) and percent (%). By default, if you type in a number it will assume to be pixels (px).

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.

Mappable

Mappable elements are elements that are given a name in content editor and left unlocked on a template. ​ They will be able to be updated by the Brandcast Salesforce app or via the APIs.

Margin

The margin property defines the amount of empty space around the outside of an element. (In contrast, padding determines the amount of empty space within the edges of an element.) Margin values can be set for each side of an element using the Dimensions Panel.

Max Width

Use this input to set the maximum width of the element. This prevents the element from becoming wider than the max-width value, regardless of how wide the browser window gets. You can enter a pixel value, or a percentage of the parent container. Using max width is very helpful in keeping your designs intact across very large screens and monitors -- you can use it to ensure that elements of your page never get stretched past a certain point.

Master Pages

A Master Page is like a wrapper around the content on the pages of your website. You can use a Master Page to add content above and/or below as many pages as you want by simply dragging the Master Page onto the destination pages in the site map. Objects on a master appear on all pages with that master applied, and any changes you make to a master are automatically applied to associated pages. Masters commonly contain repeating logos, headers, and footers.

Media Library

The media library is the repository for all the website’s creative assets -- images, videos, and files. After uploading your assets to the media library, you can add images and videos to the page by dragging and dropping them onto elements. Non-media files (i.e. PDFs) cannot be added directly to the page, but you can link to them to allow your site visitors to download documents.

Negative Space

The space between graphics, columns, images, text, margins and other elements. It is the space left untouched in order to smooth things out and transform a page into something elegant. It can be used to create a break in the page, highlight a centralized message, direct the flow of a page, and make specific visual elements ‘pop’.

Normal Positioning

The default positioning for all elements is ‘normal’. This means that an element’s location on the page is determined by its relation to other elements: if it’s higher up in the page structure, it will sit naturally above the elements that come after it. If it’s lower down in the page structure, the elements above it will push it further down the page. This is one of the ways that web pages can automatically adapt to different screen sizes, by allowing their contents to flex and flow with the browser window. Positioning can be changed from normal to absolute using the Position Panel.

Padding

The padding property defines the amount of empty space around the within the edges of an element. (In contrast, margin determines the amount of empty space outside of an element.) Paddings values can be set for each side of an element using the Dimensions Panel.

Page Settings

The Page Settings include general information and metadata about each page in your website, some of which is very important for SEO and social sharing. Settings include the page name, the page slug (URL), the page description, the social image, and the ability to specify whether search engines should index or follow the page. ​ All these settings can also be defined at the Website Level; page-level settings will inherit those settings unless you override them at a per-page level.

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.

Parent

A parent is an element that contains another element. For example, a grid element (parent) may contain a text element (child.)

Pixel

The smallest area of programmable color on a computer display. It is the basic unit of measurement used in web design. Pixel is often shortened to “px”.

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.

Preview Mode

Before publishing your site, you may want to preview what it’s going to look like when it’s live. Preview mode will hide the design studio UI and allow you to see your site as it will appear to visitors on the web. You can choose a device type to preview the page as it will appear on four different screen sizes.

Publish

A Brandcast website will not be accessible to be viewed outside of the Design Studio until it is published. Publishing a page makes it immediately available to web traffic. Brandcast websites will automatically publish to a unique subdomain that’s been assigned to your account; optionally, you can connect them to a custom domain if you have one registered.

Redirects

URL Redirects (or forwarding) are used to automatically redirect your website visitors from one location to another. This is most commonly used when you’ve made changes to your website and a previously-existing URL no longer exists. In these cases, you can set up a redirect to auto-forward your visitors to a different location. Creating a redirect also helps preserve SEO that the old URL had accrued in search engines.

Remove All Element Styles

This will remove all styling that has been applied to an element at the block level. It will not affect any inline styling, or Global Styles.

Remove Element Hover Styles

This will remove all of the hover styling that has been applied to an element at the block level. It will not affect any inline styling, or Global Styles

Responsive

A responsive website responds to the size of the screen that it’s being viewed on, so that it’s always legible and usable. Visitors to your site may be using a variety of different devices, each of which has a different screen width. Designing a website that responds to its environment by slightly changing its layout and appearance to maintain usability is essential. In Brandcast, you can use Device Mode to define styling changes that will apply at different screen sizes to ensure your site is responsive.

RGB

RGB (red, green, and blue) refers to a system for representing the colors to be used on a computer display. Red, green, and blue can be combined in various proportions to obtain any color in the visible spectrum. All images used on the web should be RBG.

Robot Meta Tag

Meta robots tag is a tag that tells search engines what to follow and what not to follow. It gives you the power to decide about what pages you want to hide from search engine crawlers and what pages you want them to index and look at.

SEO

Search Engine Optimization (SEO) is a process used to advance organic search rankings for your website on search engines. The best thing you can do to improve your SEO is to produce and share quality content on a regular basis -- this brings more visitors to your site, increases the amount of time people spend on your site, and increases the number of referrals to your site. You can also leverage social media, emails, and other services to share your site by including “like” buttons and twitter links on your page design. And remember that it’s important to use relevant keywords and strong descriptions for your site and pages.

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 reponsive 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.

Site Map Tree View

When you open a website, the first thing you’ll see is the site map. This is a visual representation of all the pages in the site, and their relationship to each other. The relative position of the pages in this view, and the grey lines that connect them, indicate the hierarchical relationship between pages. This hierarchy is also reflected in the URL for each page. The text underneath each page displays the name of the page, and the Master Page it is currently using (if any.) The site map defaults to Tree View. You can toggle to List View in the upper left hand corner.

Site Map List View

When you open a website, the first thing you’ll see is the site map. The site map defaults to Tree View. You can toggle to List View in the upper left hand corner. List View displays a flat list of every page on the site, making it easier to quickly scan and locate a specific page, especially on larger sites. Each page will display its name, slug, and the Master Page that is currently applied. At the right-hand side, you can edit the page metadata, including the description, search engine indexing settings, and social image.

Slug

A ‘slug’ is the part that comes at the very end of a URL, referring to a specific page of the website. For example, if you add a page titled “Contact,” its automatic URL slug is http://www.yourdomain.com/contact. Keeping your page slugs descriptive can improve your SEO rankings, as well as making it easy for site visitors to understand what the content of the page will be.

Space below / after

This controls the amount of space below or above a block of text.

Split / Stack Grid

A grid element can be displayed in three possible ways. In its default state, it displays all of its columns in a single row. You can also toggle it to a split layout, so that it displays its columns 2-across, or to a stacked layout, where all its columns will appear in a single vertical stack. Changing the grid layout between different Device Modes is a good way to ensure your website is optimized for users with smaller screens.

Sticky

Sticky positioning means that the element will behave as normally positioned, until it hits the top of the browser. At that point, it will become anchored to the top of the window, and remain there as the users scrolls down the page. It will only scroll off the page when the bottom of its parent element scrolls out of view. This is very handy for creating a header that “sticks” to the top of the browser.

Studio Mode

Studio Mode is the default view when opening a page to edit. It provides you with full access to all of Brandcast’s design tools: you can add, move, and delete elements, and you can use all of the styling panels to edit their appearance. A toggle lets you switch between this mode and Content Mode.

Templates

Instead of creating a new website from scratch, you can use pre-existing templates as the basis for a new project. To see what templates are available for use, click the “Templates” button on the Welcome Screen, or choose “New Website from Template…” from the “File” menu. This will open the Template Gallery, which contains some pre-made Brandcast templates, as well as any custom templates that your team has created.

Text Alignment

Aligns the text to the left, center, or right side of its parent, or justifies it. This applied to the text within a text element (not to the text element itself.)

Text Element

One of the basic layout elements, used for adding text content to your page.

Text Indent

Controls the amount of indent for the first line of a block of text.

Text 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.

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.

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.

UL / OL lists

UL stands for unordered lists and have no specific order. By default unordered lists are bullet points. OL stands for ordered lists, which are typically numbered and show that there is some order to each line.

Vertical Link List

You can specify whether the Link List element displays in a vertical, or horizontal orientation. A vertically-oriented link list can be styled using the Global Styles Panel. You can apply styling to the element overall (‘Vertical Link List’), to the individual list items within it (‘V LL Item’), to the container of its submenus (‘V LL Sub-List’) and to the individual sub-list items within that (‘V LL Sub-List Item’.)

Video

The Video Element allows you to add a video to a page, including player controls that your site visitors can use to start and stop playback or adjust the volume. You can add your own uploaded videos to this element, or stream a video via an external link. Uploads to Brandcast are limited to 30mb, so if your video is very large, you should upload it to YouTube or Vimeo first, then paste the link into the video element.

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.

View Height

The height of you browser, can be thought of a percentage. 100vh would be 100% of your screen height, 50vh would be 50%, and so on.

View Width

The width of your browser.

Website Settings

From the “Studio” menu in the top bar, select “Website Settings” to manage the name, domain/subdomain name, tags, favicon, social image, and password protection for your website. This window also contains controls for publishing and unpublishing your site.

Width

Assigns an exact width to any element or grid. You can enter a pixel value, or a percentage of the ​ parent container.

Z Order

When you used fixed positioning to set the location of elements on the page, it’s possible for them to overlap or even completely cover each other. To account for this, you can use the z-index to define the stack ordering of elements, and set which one will appear “on top.” A higher number means the elements is “higher” in the stack. (For example, if two elements overlap, an item with a z-index of 5 would appear “on top” of an item with a z-index of 3.)

© 2021 TIME Sites