Customize sales pages

Here’s how you can adjust the width of the column.

1. Hover your mouse over the vertical line separating the columns.
2. Select and drag to manually adjust the width of both sides.

To add new rows, follow these steps. This adds a one-block blank row to your page.

1. Select a row.
2. Select the plus icon above or below it to add a new row before or after the selected row.

If you want to embed a link to your page, you can add it as a button. It can work as a shortcut to open a specific website, send an email or SMS, or call a phone number.

To add a button block to a column, follow these steps.

1. From the page editor, select Contents.
2. Select and drag Button to the column where you want to place it.
3. To change the label, select the Button Text. You can further customize the text if you want to change the font, font size, or if you want the text to appear as bold, italicized, underlined, or strikethroughed.

Refer to this table to customize the content and design of the button.

Property group
Action	This allows you to set a specific action the button will perform once it's selected. By default, it is set to open a website. If you want to change it, select the  Action Type dropdown. Open Website : Enter the website URL in its corresponding field. In the Target dropdown, select if you want your viewers to be routed to a new or just the same tab. Send Email : Enter the email address that will handle your customer inquiries. You can also set up a default subject and body of the email your customers or students can use when sending their emails.  Call Phone Number: You can also use the button as a shortcut to call a phone number like your customer service. Enter the phone number in the corresponding field.  Send SMS: If you want to direct your customers to send an SMS, enter the phone number in the corresponding field.
Button Options	Colors: If you want to change the color of the text or the button itself, select the corresponding color picker and choose a color. Auto-width : This is enabled by default to auto-adjust the width of the button depending on the column or block width. You can further customize its width by disabling the Auto-width toggle. Alignment : You can choose if you want the text to show as centered, left or right indented, or justified in the button.
Spacing	Line Height: You can use the counter to adjust or to enter a value for the height of the button. Padding : This allows you to customize the width of the spaces between the button’s border and the text. To edit each side, select the More Options toggle. Border : You can edit the sides of the button. You can choose if you want it to show as a solid, dotted, or dashed line from the AllSides dropdown. Consecutively, you can adjust the width and color of your borders. If you want to customize it per side, select the More Options toggle. Rounded Border: By default, the borders of your button are sharp, but you can always customize how round you want it to be. To edit the roundness of each corner, select the More Options toggle.
General	The  container padding property allows you to add distance or space between the block and the button. To customize each side, select the More Options button.
Responsive Design	You can choose if you want to show this row on the website’s desktop view or not. Select the  Hide on Desktop toggle if you want to do so.This is helpful if you want to hide the content on the desktop view, especially on button actions that provide better user experience on the mobile platform such as sending SMS or calling a phone number.

Dividers allow you to add a horizontal line in between rows or content blocks. This element helps you organize your contents better to help your viewers absorb and navigate your page.

To add a divider block, follow these steps.

1. From the page editor, select Contents.
2. Select and drag Divider to where you want to place it on your page.

Refer to this table to further customize your divider.

Property group	Properties
Line	Width: You can adjust the width of your line using the slider opposite to it. This helps you choose if you want the divider to show from end to end of your page. Line : You can choose if you want it to show the line as solid, dotted, or dashed. Consecutively, you can adjust its height and color using the counter and the color picker, respectively. Align : This allows you to choose if you want the line to show as centered, left or right indented, or justified.
General	The  container padding property allows you to add distance or space between the block and the line. To customize each side, select the More Options button.
Responsive Design	You can choose if you want to show this row on the website’s desktop view or not. Select the  Hide on Desktop toggle if you want to do so.

A heading provides information about the content of your page or its sections. It can help your viewers or readers to navigate quickly on your page and see the content they are looking for.

Follow these steps to add a heading block.

1. From the page editor, select Contents.
2. Select and drag Heading to where you want to place it on your page.
3. By default, the text shows as “Heading.” Select the text to edit it according to your content. You can further customize the text and do the following:
   • Bold, italicize, underline, or strikethrough the texts
   • Add subscripts and superscripts
   • Add or remove hyperlinks
   • Insert emojis

Refer to this table to further customize your headings.

Property group	Properties
Text	Heading Type: Select the appropriate heading type from H1 to H4 depending on the level of importance or the hierarchy of your contents. We usually start with H1 as the most important part or main sections of the content, then you can use H2 and so on to add subsections. Font Family : By default, it is set to Arial, but you can always select the font you want to use from its dropdown. Font Size : Use the counter to adjust or enter a value for your font size. Color: This will be the color of the text. By default, it is set to automatic or black, but you can always use the color picker to select a color. Text Align: This allows you to choose if you want your heading to show as centered, left or right indented, or justified in the block. Line Height: Use the counter to adjust or enter the value for your line height.
Links	The  Inherit Body Styles property, if enabled, allows you to use the text styles you set as default from the Body menu of the page editor.
General	The  container padding property allows you to add distance or space between the block and the heading. To customize each side, select the More Options button.
Responsive Design	You can choose if you want to show this row on the website’s desktop view or not. Select the  Hide on Desktop toggle if you want to do so.

Using HTML helps you have more control over the design of your page. You can use this to add contents that are not available from the existing editor tools.

Follow these steps to add an HTML as a content.

1. From the page editor, go to Contents.
2. Select and drag HTML to where you want to place it on your page.
3. By default, the sample code and text you’ll see is “Hello, world!” Select the text to start editing it.

Refer to this table for its properties.

Property group	Properties
HTML	This is where you can enter your HTML codes and customize the layout and design of your contents.
General	The  container padding property allows you to add distance or space between the block and the HTML output. To customize each side, select the More Options button.
Responsive Design	You can choose if you want to show this row on the website’s desktop view or not. Select the  Hide on Desktop toggle if you want to do so.

Adding an image to your page makes it more enticing to your viewers and readers. You can add an image that is relevant to the purpose of the page you’re creating.

To add an image block, follow these steps.

1. From the page editor, go to Contents.
2. Select and drag Image to where you want to place it on your page.
3. Select the image to start uploading a file from your computer.

Refer to this table to further customize your image.

Property group	Properties
Image	Image: Select Upload Image to upload an image file from your computer. You can also drag it from your files to its designated area. Image URL : The URL is auto generated once you have already uploaded the image.  Auto-width : This automatically adjusts your image based on its resolution. If you want to manually adjust it, select the toggle to disable it then adjust the width using the slider. Align: This allows you to choose if you want your image to show as centered, left or right indented, or justified in the block. Alternate Text: You can add a short description of the image, detailing what it is and why it is relevant to your page.
Action	You can use the image to perform certain tasks similar to the button such as opening a website, sending emails or SMS, or calling a phone number. Open Website : Enter the website URL in its corresponding field. In the Target dropdown, select if you want your viewers to be routed to a new or just the same tab. Send Email : Enter the email address that will handle your customer inquiries. You can also set up a default subject and body of the email your customers or students can use when sending their emails.  Call Phone Number: You can also use the button as a shortcut to call a phone number like your customer service. Enter the phone number in the corresponding field.  Send SMS: If you want to direct your customers to send an SMS, enter the phone number in the corresponding field.
General	The  container padding property allows you to add distance or space between the block and the image. To customize each side, select the More Options button.
Responsive Design	You can choose if you want to show this row on the website’s desktop view or not. Select the  Hide on Desktop toggle if you want to do so.This is helpful if you want to hide the content on the desktop view, especially on button actions that provide better user experience on the mobile platform such as sending SMS or calling a phone number.

Menus work similarly as the buttons, except that they have different presentations to your viewers or readers. You can add multiple links or actions in a menu block compared to a button that utilizes the whole block or column for just one action.

To add a menu block, follow these steps.

1. From the page editor, go to Contents.
2. Select and drag Menu to where you want to place it on your page.

Refer to this table for more customization options.

Property group	Properties
Menu Items	You can add multiple items with different actions using the menu.  Select Add New Item. Enter the label of the first item in the Text field. Select the Action Type dropdown to set an action. Open Website: Enter the website URL in its corresponding field. In the Target dropdown, select if you want your viewers to be routed to a new or just the same tab. Send Email: Enter the email address that will handle your customer inquiries. You can also set up a default subject and body of the email your customers or students can use when sending their emails.  Call Phone Number: You can also use the button as a shortcut to call a phone number like your customer service. Enter the phone number in the corresponding field.  Send SMS: If you want to direct your customers to send an SMS, enter the phone number in the corresponding field. Repeat the same steps to add a new item.
Styles	Font Family: Select the dropdown to choose a font for the text. Font Size : Use the counter to adjust or enter a value for the font size. Text Color : Use the color picker to select a color for the text. Link Color: Use the color picker to select a color for the links. This applies to the items with embedded hyperlinks. Align: This allows you to choose if you want your menu items to show as centered, left or right indented, or justified in the block. Layout: This allows you to choose whether you want to present your menu items vertically or horizontally. Use the dropdown to select your preferred layout. Padding: This allows you to customize the width of the spaces between the menu’s border, the texts, and in-between each menu item. To edit each side, select the More Options toggle.
General	The  container padding property allows you to add distance or space between the block and the menu content. To customize each side, select the More Options button.
Responsive Design	You can choose if you want to show this row on the website’s desktop view or not. Select the  Hide on Desktop toggle if you want to do so. This is helpful if you want to hide the content on the desktop view, especially on button actions that provide better user experience on the mobile platform such as sending SMS or calling a phone number.

Primarily, you’ll use text to add the contents and information about the course, event, or donation campaign you’re making the page for. This is what your viewers and readers will look for as this is where they’ll see most of the details they’re looking for. 

To add a text to your column or block, follow these steps.

1. From the page editor, go to Contents.
2. Select and drag Text to where you want to place it on your page.
3. By default, it shows a sample text saying, “This is a new Text block. Change the text.” Select this text to edit it and its properties. You can do the following:
   • Change the font style, size, and color.
   • Make the text bold, italicized, underlined, or strikethroughed.
   • Add subscripts or superscripts.
   • Insert emojis.
   • Change the text alignment. 
   • Add ordered or unordered lists using numbers or buttons, respectively.
   • Highlight the text.
   • Add or remove hyperlinks.

Refer to this table for more customization options.

Property group	Properties
Text	Color: Use the color picker to select a color for your text. Align : This allows you to choose if you want the text to show as centered, left or right indented, or justified in the block. Line Height : Use the counter to adjust or enter the value for your line height.
Links	The  Inherit Body Styles property, if enabled, allows you to use the text styles you set as default from the Body menu of the page editor.
General	The  container padding property allows you to add distance or space between the block and the text. To customize each side, select the More Options button.
Responsive Design	You can choose if you want to show this row on the website’s desktop view or not. Select the  Hide on Desktop toggle if you want to do so.