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
TypefacesConfigure 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
ColorsConfigure 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
TypographyConfigure Your Buttons and Link Styles
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.
More about
Button & Link StylesOnce 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 PartsCreate Your Footer
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 PartsStep 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!