Get inside access to design tips from a pro! Subscribe to Design to Dollars

GenerateBlocks

How to Quickly Copy Styles Across Blocks with GenerateBlocks

Adam Wright

by Adam Wright

Using GenerateBlocks’ Copy Styles feature is a fantastic way to streamline your website builds by quickly duplicating design elements without having to recreate them from scratch. Here’s how you can use this powerful feature to speed up your workflow:

Step 1: Identify the Styled Block

  • On your page, locate the block that has the styling you want to replicate. In this example, the left column has a styled headline, text block, and button.

Step 2: Copy the Styles

  • Headlines: Click on the headline block you want to copy. In the block settings toolbar, you’ll see a small icon with two overlapping squares. Hover over it to see the option for Copy Styles. Click on this.
  • Text Blocks: Repeat the same process for any text blocks. Click on the block, hover over the same icon, and select Copy Styles.
  • Buttons: For buttons, follow the same steps. Click the button block, copy the styles, and you’re ready to paste them onto another block.

Step 3: Apply the Styles

  • Headlines: Now, click on the headline block in the adjacent column where you want to apply the styles. In the toolbar, click the same icon and select Paste Styles. The new block will instantly adopt the same styling as the original.
  • Text Blocks: Do the same for your text blocks. Click the target block, paste the styles, and see the changes take effect.
  • Buttons: Finally, apply the styles to your button block by pasting them in the same way.

Step 4: Apply Styles to Containers

  • If you want to copy styles from one container to another, this feature works just as effectively. Select the container with the styling you want, click Copy Styles, and then paste the styles onto your new container. This will carry over any padding, margins, or other design elements you’ve set.

Example Workflow

  1. Copy Headline Styles: Click on the headline in the styled column, select Copy Styles.
  2. Paste Styles to New Headline: Click on the headline in the unstyled column, select Paste Styles.
  3. Repeat for Text and Buttons: Follow the same steps for the text and button blocks to quickly match the design across your layout.

Final Thoughts

The Copy Styles feature in GenerateBlocks is a simple yet powerful tool that can save you time and effort when building or updating your site. It ensures consistency across your design and lets you focus on what matters most—creating a great website.

Keep experimenting with this feature to speed up your design process, and enjoy the efficiency it brings to your workflow!

Subscribe

Follow My YouTube Channel for More Tutorials

Subscribe to Channel
Adam Wright

About the Author

Adam Wright

Adam is a California native, now living in Middle Tennessee. A long-time creative at heart, his passion for design and growing his small business, AWD, is always evident. When he's not writing code or sketching logos, he enjoys spending time with family, playing basketball, or watching just about any motorsports. Find him on LinkedIn.