1LD Tutorials & Blogs

Tutorials

Pattern Maker Canvas Breakdown

After adding the Pattern Maker stack to the editor you will see a Canvas above a “Drop stacks here” section. This canvas is where you are able to design a new pattern. The canvas is surrounded by a Preview Area that allows you to see the pattern duplicated in every direction.

Initially, a single circle shape is added to the Canvas in the center. When you select a shape by clicking on it, a number representing its Index out of the Total number of Shapes will show in the top right. More shapes can be added by clicking the Add New Shape Button or by copying and pasting (Cmd+c Cmd+v) a shape that is already in the canvas.

Adding Content

The Pattern Maker stack is for creating background patterns and requires content to where the pattern will be applied. And any stacks content to the “Drop stacks here” section and the pattern will be used as the background for that content.

You may also instead download the created pattern as an image that you can use anywhere images are accepted, most notably in any other stack that allows you to add background images. Learn more about how to download a pattern you have created in the “Downloading a Pattern Image” tutorial below.

Selecting and editing a shape

You can select a shape simply by clicking on it. If a shape is overlapped by another and you are unable to select it, you can use the arrow keys to navigate through the shapes by index number.

Open the Inspector to see the shapes settings panel.

Shape Settings Panel Breakdown

Category
Select from 3 different shape categories. There is also an option to use an image instead of one provided shapes.

Shape #
Each shape categories has 24 different shapes to choose from. Use this slider to select a shape.

Stroke
Increase the stroke of a shape to switch between solid and outlined shapes. Every value over 0 defines the width of the stroke.

Size
Adjusts the overall size or scale of the shape in pixels.

Color
Select from 3 different color categories. The Major, Minor, and Accent categories are defined in the Pattern Maker stack settings panel. You may also optionally define a custom color for the selected shape.

Shadow Color & Spread
If the shadow spread value is greater than 0 a shadow will display around the edges of the shape spread out by the defined pixel amount. Use the shadow color option to change the intensity and color of the shadow.

Blur
If the blur value is greater than 0 the entire shape will blur by the defined pixel amount.

Left/Right & Top/Bottom
Adjust the position of the shape in the canvas. Shapes are positioned by a pixel value based on an origin at the center of shape. The canvas is 200×200 pixels in size, though the size it displays at when published and in preview is defined in the Pattern Maker stack settings panel.

Rotate
Adjust the rotation of the shape in degrees.

Z-index
Adjust the stacking order of the shapes relative to one another. Higher z-index values will display on top of lower z-index values.

Pattern Maker Settings

Select the Pattern Maker stack and open the Page Inspector – settings panel.

Pattern Size
Adjust the overall scale and size of the created pattern. The pattern size can only be viewed when published or by switching to preview mode.

Shape Colors
The Major, Minor, and Accent color categories can be defined here. These colors can be applied to individual shapes by selecting a shape and clicking on a color category in the settings panel.

Use Image
Enable this option to use a pattern image instead of the pattern currently in the canvas.

Downloading a Pattern Image

By default, every pattern you design with the Pattern Maker stack will automatically be converted to a temporary image that will be used as the background for the stack. This temporary image is generated every time the page is loaded. This will not put a significant load our your website but the pattern may take a noticeable amount of time to load if you have multiple patterns throughout the stacks page.

It is recommended that you download the generated pattern image and use it as a background instead. To download a pattern image you will just need to preview the Stacks page by pressing Cmd+p (while the RapidWeaver app is active). Click on the “Download Pattern” button to download the image. If you are using the RapidWeaver preview mode you will need to drag and drop the image into a folder or the desktop.

After downloading the image, switch back to edit mode and select the Pattern Maker stack. In the settings panel enable the “Use Image” setting. Drag and drop the pattern image to apply the pattern. The download pattern button is only visible in preview mode and will not be present on a published website.

Once this is done, the pattern will no longer need to be generated. The downloaded pattern image can also be used anywhere images are accepted.

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Vivid Titles

Create stunning, uniquely-shaped content effortlessly with Vivid Tiles. Tailor your website’s appearance with customizable top and bottom edges, and arrange these elements seamlessly in rows.

Vivid Titles RapidWeaver Stack

Robust Customization

  • Create rows of uniquely-shaped content elements.
  • Customize each one independently.
  • Add almost any type of content.

Diverse Edge Options

  • Edges support 9 shape options with 4 layouts.
  • Mix and match edge shapes and layouts on top and bottom.
  • Incorporate images, icons, or text inside edge design.

Effortless Setup

  • Minimal setup required for immediate results.
  • Customizable style options to fit any website design.
  • Control element size and colors with ease.

Simply Responsive

  • Tiles automatically adapt to browser and device width.
  • Full control over tile horizontal and vertical alignment.
  • Automatically make all tiles in a single row the same height.

Eye-Catching Styles

  • Each edge shape has two unique background layers.
  • Adjust edge layer visibility, placement, and offset.
  • Apply subtle, attention-grabbing in-view animations.

CHECK IT OUT!

Latest News

Newsletter

Join our newsletter to get notified of new releases, updates, and discounts.

Subscribe

Popular Links

Free Stacks & Themes
See Order History
Product Tutorials
FAQs

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software