Customize your Rekaz website theme, colors and fonts

Use Colors and Fonts to change the website appearance, and Sections to choose layouts for individual sections. In the builder shown here, these tools customize the existing website; section cards do not replace the entire site with a new theme. Preview, save and check the live website.

If by theme you mean the colors, typography and presentation of content, these controls let you customize them. The example uses a blue primary color, an off-white background and Cairo, preserving the page content and order. Choosing a layout for one section is separate from changing the general appearance.

Before you start

Open Website Builder from the Rekaz dashboard and confirm the business website address at the top.

• Use an account that can edit the website and save changes. Confirm the correct business website.

• Record the existing color codes and selected font before editing so you can restore them. Have your brand color code ready if available.

1. Choose the primary color

Open Website Builder, then Colors and Primary Color. Choose a shade in the picker or enter its code below. The example uses #1d4ed8; use your own brand color when appropriate.

2. Check text and background

Select Text Color to review or change the text color, then choose a Background Color. The example keeps dark text, #09252c, and selects Off-white. Check that text and buttons remain easy to read.

3. Select the website font

Open Fonts and select the required font card. The example uses Cairo. Check headings, body text and line wrapping in the preview.

4. Understand the section options

Open Sections to view the available layouts. These cards add individual sections to the current page; they are not whole-site themes. If you only need a color or font change, browse without adding a section.

5. Preview desktop and mobile

Return to Colors and check Mobile preview and Desktop preview. Review contrast, long headings and buttons. Check both languages if your website uses them.

6. Save the appearance

Select Save Changes at the top and wait for completion. To restore an earlier saved appearance, re-enter its values and save again.

7. Verify the live result

Open Visit Website and inspect the font, background and a link or button color. The example shows Cairo, an off-white background and blue links. Check important pages and mobile as well.

Result

The selected colors and font appear on elements that use the website appearance settings, while page text and services remain unchanged.

A whole-site theme and a section layout are different. Cards under Sections add a layout to the selected page, such as Centered gradient, Wide split image or Text over image. Selecting a section card is not a whole-site theme switch.

Primary Color affects elements linked to the brand color, such as the example links and buttons. It does not necessarily recolor every area: some sections and images have their own colors.

Select Primary Color or Text Color before editing the code below the picker. Use a hexadecimal color code, such as #1d4ed8. A color name alone does not identify the same shade.

The shown background choices are White, Off-white and Black. Check text and button contrast after changing the background, especially when moving between light and dark backgrounds.

Selecting a font card applies it to headings and body text that use the website font. Shown options include Cairo, Tajawal, Almarai and IbmPlex. A different font can change line wrapping and section height, so check mobile afterward.

Colors and fonts are general website settings, not settings only for the page currently previewed. Section content, layout and order belong to the page you edit. Review important pages after an appearance change.

Changing the builder language does not translate service names or text you entered. Arabic content can remain in the English preview. Review typography and contrast in both languages.

Mobile preview and Desktop preview change the preview area. They do not automatically create separate color settings for each device. Check the actual website at a narrow width too.

CSS is available for advanced styling. You do not need it for the color and font changes in this guide. Existing custom styling can explain why particular elements differ from general settings; review it with the person who maintains it.

Sections includes groups such as Service lists, Features, Customer Reviews, FAQ and Content. Browse them without adding a section if you only want to change the site branding.

Wait for Save Changes to succeed, then open Visit Website. If the old appearance remains, refresh after a short interval and confirm the correct site and page. Do not rely only on the editor preview.

To restore the previous appearance, re-enter its color codes, select its font and save. Undo can reverse a recent change; if that change was already saved, save the restored state too. Deleting a section does not undo a color or font choice.

This procedure changes website appearance. It does not change service prices, booking times or the mobile app name. Manage those settings in their respective areas.