Placeholder

The Placeholder tool provides a quick and easy way to mock up content for testing layouts and showing clients a work in progress without using Lorem Ipsum type.

Examples

Placeholder

Placeholder

It does not do to dwell on dreams and forget to live.

Lorem Ipsum is usually the standard placeholder text, which has been used for decades. Many find that clients become confused regarding this filler text. The Placeholder tool takes the text out of it, but clearly shows mocked up content where they can visualize their own text living.

Settings

The Placeholder tool allows for more than mocked up "text blocks." You can also insert mocked up headers, buttons and images. These are all added as child items within the Placeholder parent tool..

Parent Tool

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

Styling

Pulsate Entire Placeholder

Adds a pulsating effect to the placeholder elements within the Placeholder tool.

HTML Comment

HTML Comment

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

Custom

This field allows you to replace the default HTML Comment with your own text.

Child Items - Paragraph

Size

Paragraph Size

Here you can select from varoius preset paragraph lengths for your placeholder text.

Alignment

Align

Allows you to align the mocked up, faux paragraph text in this child item. You can align it to the left, center or right.

Styling

Text Style

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the mock placeholder text.

Pulsate

Enabling this feature adds a pulsating effect to the placeholder paragraph mock text.

Child Items - Header

General

Tag

Allows you to choose the tag for your mocked up header. This will determine the height of the faux header.

Header Width

Lets you adjust the width of the mocked up header for variety.

Alignment

Align

Allows you to align the mocked up, faux header. You can align it to the left, center or right.

Styling

Text Style

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the mock header text.

Pulsate

Enabling this feature adds a pulsating effect to the placeholder header.

Child Items - Image

Size

Image Height

Mock images will be 100% of the width of the parent container. Here you can adjust the height of the image. The unit of measure here is Pixels (px).

Styling

Pulsate

Enabling this feature adds a pulsating effect to the placeholder header.

Child Items - Button

General

Button Width

Lets you adjust the width of the mocked up button for variety.

Alignment

Align

Allows you to align the mocked up, faux button. You can align it to the left, center or right.

Styling

Button Style

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the mock button.

Pulsate

Enabling this feature adds a pulsating effect to the placeholder button.