Customize Page Font
The SETTING tab in the work panel allows you to customize page-wide elements, including fonts, backgrounds, and padding.
Currently, only a limited set of font types is available for selection, but we plan to add more in the future.
Text Customization
Click on a text block to edit it in the side work panel.
General: Customize text content, color, size, line height, alignment, and decoration.
Background: Add a background color or image. To remove a background color, type "transparent" in the field.
Block Options: Adjust margins (spacing) around the text block. Toggle More Options to adjust the margins for all four sides separately.
Image Customization
Background Images
Click on a block to replace its background image.
In the right sidebar, click the Edit icon to upload a new image. To remove a background image, click the red Delete icon.
Non-Background Images
Click on an image to replace it.
In the right sidebar, click Change Image button to upload a new one. The system automatically crops the image to fit the frame without stretching, so it’s best to use an image with dimensions close to the intended frame.
- Image Link: Attach a URL to make the image clickable.
Button Customization
Button Text
Select a button, then edit the text in text editor of the General section.
Button URL
In the ACTION section, check "Link to" and enter the desired URL.
Example: To scroll to the donation form section on your page after clicking a button, use:[domain]/[Page Name]#amount_section
(e.g., worldaid.payments2us.com/giving_day#amount_section)
Button Styles
Predefined Button Style: Click Abc in the Button Style section to select from the style library.
Line height: Adjust the button height.
Border radius: Use + / - to increase or decrease corner roundness.
Border: Set the border style (e.g., Solid) and adjust weight and color. Use + / - to increase or decrease border weight. Use the color picker to set border color.
Background color: Use the color picker or upload a background image.
Padding: Adjust spacing between text and button edges. Enable More Options to set different padding values for each side.
Add Layouts & Widgets
The right sidebar offers Widgets and Layouts to enhance your page design.
Layouts
Pre-designed sections tailored for donation pages, including:
- Donation Progress Bar
- Countdown Timer
- Impact Displays
- Content Sections
- …
Widgets
General elements such as:
- Text Blocks
- Images & videos
- Social Links
- Headers & Footers
- …
How to use
Drag and drop a layout or widget onto your page, then click to customize its appearance, colors, images, and spacing.
- You can only place layouts and widgets at the page level. This means a widget can be added directly to the page but cannot be placed properly inside most of another layout or section.
Advanced Placement (For users familiar with HTML)
If you need to move a widget inside another layout or section, follow these steps:
- Drag and drop the widget onto the page.
- Click the widget, then select the < > (Edit Code) button—this will open the code editor.
- Copy the widget's code from the code editor, then close it.
- Choose the block or area within a section or layout where you want to move the widget. Click the < > (Edit Code) button for that area to open its code editor.
- In the help article, we demonstrated how to replace an existing element with a specified widget. However, you can also add a widget alongside an element by pasting the code within the outermost
<div></div>of the existing structure.
- Save and check the changes on your page.
Customize Header & Footer
There are three ways to customize your header and footer:
- Adjust the default template header and footer.
- Use widgets.
- Add custom code.
Adjust default header and footer in template
All templates have a default header and footer.
Logo: The system updates this automatically if you change your organization logo under Settings → Branding. Otherwise, upload an image manually.
Menu Items: Click an item to edit, duplicate, or delete it.
- To duplicate, ensure you're selecting "Element" and not "Link"—otherwise, it won’t duplicate properly.
- To select Element, you can also click Link first then click the up arrow.
- You can edit menu items one by one or select the TEXT part of the header and edit them all in the General text editor.
The same applies to the footer.
Use Widgets for Header & Footer
If you prefer a simple header or footer, delete the default ones and add a widget instead. Available widgets include:
- Logo Widget
- Page Header Widget
- Footer Widget
Logo Widget:
Page Header Widget:
Footer Widget:
Add Custom Code
Select the default template header or footer, then click the last icon (<>).
Only HTML and CSS are supported. JavaScript will not work here.