How to Create a Website Using Recruit Craft

Recruit Craft allows you to create and customize a website from scratch without any coding. You can start a new project using either a blank canvas or a pre-built template, then personalize it by editing pages, updating text and styling, adding sections and elements, and creating additional pages beyond the default homepage, job listing, and job description pages.

Use this feature when:

Log in to Recruit Craft and navigate to the Projects page. Click + Project in the top right corner, select Build Full Website, then choose one of the following:

If you're using a template, click View to preview it, then select Edit Template to begin customizing it.

Use the page navigation within the editor to switch between the Homepage, Job Listing, Job Description, About Us, or any other page you want to customize.
​

Every part of a page is editable. Simply click the element you want to modify, such as text, an image, a button, or another component. Once selected, the relevant configuration options will appear in the panel on the right.

From the right-hand panel, you can customize the selected element based on its type. For example, when editing a text element, you can modify options such as:

Other elements, such as images, buttons, sections, or forms, display their own configuration options, allowing you to customize their appearance and behavior.

Review the page after making your changes to ensure the content, layout, and styling appear as expected.

To add new content to a page, open Elements from the left panel and select the component you want to insert. Recruit Craft offers a variety of elements, including:

After adding an element, click it to customize its appearance and behavior using the right panel. Depending on the element type, you can configure options such as:

Note: The available customization options vary depending on the selected element. For example, forms allow you to configure fields, layouts, and submission behavior, while videos provide playback and display settings.

To quickly build your page layout, open Sections from the left-hand panel and drag the section you want onto your page. Recruit Craft includes several pre-built sections, including layouts with ready-to-use form components, such as:

These ready-to-use sections include predefined layouts, making it easy to build pages without creating every section from scratch.

Once a section has been added, you can:

Sections use the same sizing, shadow, effect, and fill controls as elements. Flexbox and Grid sections also include layout options for arranging the elements inside them.

If you prefer to create a completely custom layout, start with a Grid or Flexbox section and build it by adding elements manually.
​

Repeat the same editing process for the Job Listing and Job Description pages by updating their content, layout, elements, and sections. Review each page to ensure the design and navigation remain consistent across your website, and save your changes regularly.

To create pages beyond the default ones, open Pages from the left-hand panel and click Add New Page. Enter a name for the page, then customize its content, layout, and design using the same editing tools available throughout the website editor.
​

When you select an element or section, the design panel provides controls to customize its layout, spacing, appearance, text, and links. Depending on the element or section, you can adjust properties such as width and height, alignment, flow, spacing, padding, borders, background, shadows, effects, typography, colors, and link settings. The available controls vary depending on the selected element or section.

Every element and section that supports sizing gives you a Width and Height field, each with a unit dropdown:

To control how much an element can grow or shrink:

Minimum and maximum values are useful for keeping layouts stable across screen sizes. For example, a maximum width stops a section from stretching too wide on large screens.
​

💡 Tip: Click the lock icon above the Height field to keep width and height proportional. When the lock is on, changing one value adjusts the other automatically.

To remove a shadow, click the x next to the shadow value.

📌 Please note: Text elements use a simpler shadow with X Position, Y Position, Blur, and Color only. Position and Spread are not available for text.

Effects change how an element looks while a visitor interacts with it on your published website.

📌 Please note: Available effect settings depend on the element. Buttons and sections support all settings. Text elements, commonly used for links, support Opacity, Scale, and Shadow.

For buttons and sections, click the Background Color field to open the Fill picker. Choose a fill type from the icons at the top:

For solid colors and gradients, you can enter a hex value and set the opacity percentage next to it.

When you choose Image, click Choose Image, then select how the image fits using the Type dropdown:

The Image element offers the same Fill, Cover, and Contain options for controlling how an image sits within its frame.

Select a Flexbox section to access these layout options:

💡 Tip: Keep Wrap set to Yes for sections with several elements so they stack neatly on smaller screens instead of overflowing.

Some fields can hold a separate value for each device, so you can fine tune how your website looks on every screen size.

The following fields support separate values per device:

⚠️ Important: All other settings, such as color, border, background, shadow, and effects, stay the same across devices. Header, Footer, Space, and Custom HTML use the same values on every device.