Components

​

Basic components

Several components come standard with the Makeswift default host. These are the 4 most common components you’ll use to build your site:

​

Box

The Box is your most valuable and versatile tool in the toolbar. It’s works exactly as described, like a box you can place things in, but you can use it for so much more. If you’re familiar with HTML, the easiest way to conceptualize a box is like a <div>. From a developer perspective, boxes can also be synonmous with Slots. Use boxes to configure different layouts.

​

Text

Double-click on any text component on your page to start editing it directly, similar to Google Docs. Text components use the “paragraph” block tag by default, but you can change it to a heading or list in the panels sidebar. Text components can also be styled with text styles.

The block panel applies to an entire paragraph and correlates to the HTML tag used on the live page. Block options include:

• Paragraph
• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6
• Bulleted list
• Numbered list
• Blockquotes

Block tags affect a page’s SEO, so make sure to use the appropriate options throughout your site.

​

Image

The image component is placed directly as content on your page, unlike a background image that goes behind content. Think of an image as framed art on a wall, whereas the background image is the wallpaper behind it.

To place an image, select an image element on your page and click “Choose” or “Replace” in the panels sidebar. Select an existing image from the files manager, or upload a new one.

Alt text is used to provide descriptions of an image and increases the accessibility of your website for visually impaired visitors. Images can also be given links, similar to buttons.

Images will automatically be optimized and resized when published, increasing the performance of your site.

​

Button

Use buttons to create links within your pages. The following are the link options for buttons:

• Open a Makeswift page
• Open an external URL
• Compose an email
• Call a phone number
• Scroll to an element

​

Open page

When linking to other pages within your site, you’ll select from a list of existing pages. Once a page is selected, the page’s URL will be used for the button link. If the page’s URL is updated in the future, the button link will automatically update as well.

​

Scroll to element

To use “Scroll to element” you must first give the target element a custom name. This name will now appear in the dropdown found in the button’s “On click” panel.

You can also select the screen position of the scrolled to element.

​

Styling buttons

You can select from a list of premade styles for your buttons. Along with styles, you can customize the size, shape, color and text styles.

​

Custom element name and ID

Elements are instances of components you manage in the canvas. Name an element by selecting it and changing the default name at the top of the panels sidebar. Custom names must be alphanumeric and cannot contain any spaces.

Custom names are displayed in breadcrumbs, also making it easier to discern between nested boxes.

Elements with custom names can also be scrolled to with buttons, images, and text links. All elements with custom names will appear in the scroll to dropdown found in on click panels.

Custom names also serve as IDs added to the element’s HTML that can be targeted by custom CSS and JavaScript.

​

Element actions

Actions for selected elements can be found at the top right of the panels sidebar or by using keyboard shortcuts.

• Duplicating an element, or pressing ⌘ + D, creates an exact copy, including nested elements, either below or next to the original.
• Copy an element or press ⌘ + C to save it to your clipboard. When pasting ⌘ + V, you will be able to select exactly where to place the copied element, similar to sorting.
• Delete any selected element by pressing delete or backspace.

​

Global components

Global components are groups of elements that can be saved and reused across your entire site. If you make an update to a global component, every instance of that component on your site will be updated as well.

​

Creating a global component

Let’s start by dropping in a navbar instant layout from the toolbar. Feel free to edit the styles of the navbar, as well as any links or styles in the navigation component. Select the navbar box and click on the cube icon found at the top of the panels sidebar.

Name your global component and click “Yes, continue” to convert the navbar into an instance of your new global component.

Navigate to a different page in the same site. In the toolbar to the left of the builder, you’ll find another cube icon. Hovering over the icon will display all the global components available in your site. Like any other component, click and drag your new global component and place it on the page.

​

Editing a global component

To edit a global component select any instance of that component in your site and click “Edit component” in the sidebar.

While editing a global component, you have full control over the content and styles for all elements found in that component. You can add or remove elements, and even place other global components inside.

When you are done with edits, click the “Save” button at the top right of the global component overlay.

​

Managing global components

You can manage your global components from within the global element tray accessed in the toolbar. You can rename or delete any global component. If a global component is deleted, all instances of that component in your site will be replaced with an error message and will need to be manually removed.

You can also detach any instance from it’s global component, allowing you to make changes to those detached elements.