Build Process

Last updated:

Getting Started with Refoundry

Welcome to smoother, faster website projects with Refoundry! Follow these steps to download and set up the free version of the Refoundry plugin, and the blank theme, to kickstart your building journey.

Step 1: Download, Upload, and Install Refoundry

Set Up the Refoundry Plugin

Download the Refoundry zip file you received in your email. In your WordPress admin dashboard, navigate to Plugins > Add New. Click “Upload Plugin”, select the downloaded zip file, and click “Install Now.”

After installation, be sure to activate the plugin to enable its features.

Set Up the Blank Refoundry Theme

Next, download the Blank Refoundry theme zip file that you also received in your email. Go to Appearance > Themes, click “Add New,” then “Upload Theme.” Select the downloaded zip file to install it.

This is a blank theme. It comes without any pre-configured styles, templates, or layouts, meaning it’s not controlling anything or adding excess code – it’s just a clean slate for WordPress work. As result, it’s going to look a little rough at first, but keep reading for easy steps to get building fast!

Step 2: Set Up Your Design Elements

Now that you have the basic framework in place, it’s time to set up your design elements.

Configure Your Typefaces

Choose and configure your typefaces using either Google Fonts or Adobe Fonts. To do this, navigate to Refoundry > Global Styles > Typography and input your selected font families. This ensures your site has the desired typography across all headings, paragraphs, and other text elements.

More about

Typefaces

Configure Your Colors

Define your color palette in Refoundry > Global Styles > Colors. Use HEX, HSL, or RGB values to set your primary, secondary, and neutral colors. This step is crucial for maintaining a consistent visual identity throughout your site.

More about

Colors

Configure Your Type Styles

Create custom text styles for headings (H1-H6), body text, and other typographic elements. This will help in maintaining consistent font sizes, weights, and line heights across your site.

More about

Typography

Establish the appearance of buttons throughout your site by defining properties like color, border, padding, and hover effects. This ensures a cohesive and user-friendly experience. Find these in Refoundry > Component Styles.

Once all of these elements are configured, anything you add to your site will begin to look branded and visually correct. Then it’s time to structure it.

Step 3: Build Your Site Structure

With your design elements in place, you can start adding pages, posts, and taxonomies.

Create Your Pages

Use the WordPress block editor to set up empty core pages, so they are available to add to navigation in the next steps.

Register Custom Post Types and Taxonomies

We recommend using the Custom Post Type UI plugin for this task. This plugin simplifies the creation of custom post types and taxonomies, allowing you to expand your content management capabilities.

Create your Header with Navigation

Navigate to Appearance > Editor > Patterns > Template Parts to get started. Build your site’s header using the Refoundry blocks, especially our Navigation Block.

More about

Template Parts

Navigate to Appearance > Editor > Patterns > Template Parts to get started. Set up the footer with relevant links or navigation options to provide users with quick access to important pages, including contact information and a privacy policy for SEO.

More about

Template Parts

Step 4: Start Building Sections with Refoundry Blocks

Now you’re ready to build out all of the awesome content sections on your pages and posts using Refoundry blocks! Here are some guidelines to help you along the way.

Include a Primary Full-Width Wrapper Container: This container should be set to 100% width to manage section backgrounds easily. It’s also the best place to define your sectional spacing, allowing for consistent padding and margins.

Include an Inner Max-Width Container: Use this container to hold your content, ensuring proper alignment and spacing. Set a max-width (e.g., 1200px) to maintain readability on larger screens.

Optimize for Tablet and Phone Versions: Before copy-pasting sections, make sure to adjust layouts for tablet and mobile views. This ensures your design is responsive and user-friendly across all devices.

Utilize Copy-Pasting: Leverage the ability to copy and paste whole sections, including their settings, as a faster method for producing consistent layouts throughout your site.

Build a Library: As you develop your site, consider using Patterns to create a library of reusable designs. If you want even more capabilities, think about upgrading to Pro for access to Reusable Component Blocks and the full library of 60+ components, which can speed up your development process.

If you have any questions or need assistance, don’t hesitate to use the support form or book a demo. We’re here to help you succeed!

Related
Resources

Find more support docs in this specific category, or just level up your Refoundry knowledge with deeper reading.

All Support Resources

Try Now for Free

Not yet a Refoundry client? Download the plugin and get started building better sites today!

Get Refoundry

Contact Support

Can’t find what you’re looking for? Reach out any time, and one of our real humans will respond.

Contact Support