{"id":43,"date":"2014-05-16T01:22:34","date_gmt":"2014-05-16T01:22:34","guid":{"rendered":"http:\/\/cashlinqsupport.com\/helpdesk\/?p=43"},"modified":"2014-05-16T01:22:34","modified_gmt":"2014-05-16T01:22:34","slug":"custom-page-design-overview","status":"publish","type":"post","link":"https:\/\/www.cashlinqhelpdesk.com\/?p=43","title":{"rendered":"Custom Page Design Overview"},"content":{"rendered":"<p>The custom page designer allows you to set up the look and feel for your payment page, what information you want to collect, and the communications you want to send out.<\/p>\n<p>Click [Save] to save your changes.<\/p>\n<p>&nbsp;<\/p>\n<h4>Layout &amp; Design<\/h4>\n<p>Set up the page styling for your Custom Page like the background and foreground color and the button styling.\u00a0 You can also save and load page styles as templates that can be used on additional pages later.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Templates<\/strong><\/p>\n<p>You can upload a layout template into the page designer by selecting Load next to the template name.\u00a0 You can edit an existing template by selecting Edit next to the desired template.<\/p>\n<p>To save the current page settings as a template so you can use it later, Click Save Existing Design As A Template.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Page Background<\/strong><\/p>\n<p>Page Background enables you to change the background (outer border) settings.<\/p>\n<ul>\n<li>Background Image:\u00a0 You can use an image for the outer border.\u00a0 Click + Add New to upload a new image, click Select Existing icon to choose an image file from your existing library, or click the Remove icon to remove a currently selected image.\u00a0 If an image is uploaded, you can control the image repetition horizontally (Repeat Across), vertically (Repeat Down), or you can tile the image (Repeat Both).<\/li>\n<li>Background Color:\u00a0 Set the background color for the outside border.\u00a0 You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.<\/li>\n<\/ul>\n<p>Click [Apply] to save your changes.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Page Foreground<\/strong><\/p>\n<p>Page Foreground enables you to edit the inner background and font attributes.<\/p>\n<ul>\n<li>Foreground Color:\u00a0 Set the background color for the Custom Page.\u00a0 You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.<\/li>\n<li>Foreground Opacity:\u00a0 Set the opacity for the entire foreground so the background can show through.\u00a0 This setting affects all the foreground elements including the Header, Footer, Text, Data Fields, etc.<\/li>\n<li>Rounded Corners:\u00a0 Set the degree of roundness to the section corners.<\/li>\n<li>Border Size:\u00a0 Set the thickness of the section border.<\/li>\n<li>Border Color: \u00a0\u00a0Set the color for the section border.\u00a0 You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.<\/li>\n<li>Shadow Distance:\u00a0 Set the section shadow distance in pixels (shadow falls to the right).<\/li>\n<li>Shadow Color:\u00a0 Set the color for the shadow.\u00a0 You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.<\/li>\n<li>Font Type:\u00a0 Select a font from the drop-down.<\/li>\n<li>Font Size:\u00a0 Adjust the size of the font.<\/li>\n<li>Font Weight:\u00a0 Set normal or <strong>Bold<\/strong> text.<\/li>\n<li>Font Style:\u00a0 Set normal or <em>Italic<\/em> text.<\/li>\n<li>Font Color:\u00a0 Set the color for the font.\u00a0 You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.<\/li>\n<li>Headline Opacity:\u00a0 Set the opacity for the section headlines.<\/li>\n<\/ul>\n<p>Click [Apply] to save your changes.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Buttons<\/strong><\/p>\n<p>Set the look and feel for the buttons on your page.<\/p>\n<p><span style=\"text-decoration: underline\">All Buttons<\/span><\/p>\n<ul>\n<li>Background Color:\u00a0 Set the color for the buttons on the page.\u00a0 You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.<\/li>\n<li>Rounded Corners:\u00a0 Set the degree of roundness for the button corners.<\/li>\n<li>Border Size:\u00a0 Set the thickness of the button border.<\/li>\n<li>Border Color: \u00a0\u00a0Set the color for the button border.\u00a0 You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.<\/li>\n<li>Font Type:\u00a0 Select a button font from the drop-down menu.<\/li>\n<li>Font Weight:\u00a0 Set normal or <strong>Bold<\/strong> text.<\/li>\n<li>Font Style:\u00a0 Set normal or <em>Italic<\/em> text.<\/li>\n<li>Font Color:\u00a0 Set the color for the button font.\u00a0 You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.<\/li>\n<\/ul>\n<p><span style=\"text-decoration: underline\">Submit and Reset Buttons<\/span><\/p>\n<ul>\n<li>Size:\u00a0 Set the size for the buttons.<\/li>\n<li>Font Size:\u00a0 Adjust the size of the button font.<\/li>\n<\/ul>\n<p>Click [Apply] to save your changes.<\/p>\n<p>&nbsp;<\/p>\n<h4>Page Content<\/h4>\n<p>You can select the elements to include on your Custom Page and edit the specific settings for that element.\u00a0 To include the element, simply check the Include box.\u00a0 Select Edit next to an element in the list or in the Page Preview to edit that section.\u00a0 You can change the order of the sections.\u00a0 To do this, click and hold the Edit button next to the section you want to move in the Page Preview, then drag and drop the section in the desired location.\u00a0 A few sections are fixed on the page and cannot be moved, for instance the payment information will always be at the bottom of the page, followed by the footer.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Header<\/strong><\/p>\n<p>You can include a header to your Custom Page.<\/p>\n<ul>\n<li>Background Image:\u00a0 You can use an image for the header.\u00a0 Click + Add New to upload a new image, click Select Existing icon to choose an image file from your existing library, or click the Remove icon to remove a currently selected image.\u00a0 The ideal banner width is 900 pixels, but Qsuite will resize to fit the width, unless you check the box to maintain the original dimensions.\u00a0 If an image is uploaded, you can control the image repetition horizontally (Repeat Across), vertically (Repeat Down), or you can tile the image (Repeat Both).<\/li>\n<li>Height:\u00a0 Set the height (in pixels) of the header to accommodate your image header or add additional space for text if needed.Background Color:\u00a0 Set the color for the header.\u00a0 You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.<\/li>\n<li>Text:\u00a0 Set a title or other text that will appear in the header.<\/li>\n<li>Font Type:\u00a0 Select a font for the header text.<\/li>\n<li>Font Size:\u00a0 Set the font size for the header text.<\/li>\n<li>Font Weight:\u00a0 Set normal or <strong>Bold<\/strong> text.<\/li>\n<li>Font Style:\u00a0 Set normal or <em>Italic<\/em> text.<\/li>\n<li>Font Color:\u00a0 Set the color for the font.\u00a0 You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.<\/li>\n<li>Alignment:\u00a0 Set the header text alignment to Left, Center, or Right.<\/li>\n<li>Vertical Alignment:\u00a0 Set the header text vertical alignment to Top, Middle, or Bottom.<\/li>\n<\/ul>\n<p>Click [Apply] to save your changes.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Footer<\/strong><\/p>\n<p>You can include a footer on your Custom Page.<\/p>\n<ul>\n<li>Background Image:\u00a0 You can use an image for the footer.\u00a0 Click + Add New to upload a new image, click Select Existing icon to choose an image file from your existing library, or click the Remove icon to remove a currently selected image.\u00a0 If an image is uploaded, you can control the image repetition horizontally (Repeat Across), vertically (Repeat Down), or you can tile the image (Repeat Both).<\/li>\n<li>Height:\u00a0 Set the height (in pixels) of the footer.<\/li>\n<li>Background Color:\u00a0 Set the color for the footer.\u00a0 You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.<\/li>\n<li>Text:\u00a0 Set a title or other text that will appear in the footer.<\/li>\n<li>Font Type:\u00a0 Select a font for the footer text.<\/li>\n<li>Font Size:\u00a0 Set the font size for the footer text.<\/li>\n<li>Font Weight:\u00a0 Set normal or <strong>Bold<\/strong> text.<\/li>\n<li>Font Style:\u00a0 Set normal or <em>Italic<\/em> text.<\/li>\n<li>Font Color:\u00a0 Set the color for the font.\u00a0 You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.<\/li>\n<li>Alignment:\u00a0 Set the footer text alignment to Left, Center, or Right.<\/li>\n<li>Vertical Alignment:\u00a0 Set the footer text vertical alignment to Top, Middle, or Bottom.<\/li>\n<li>Include Powered by Q and Security Metrics logos checkbox:\u00a0 You can include \u201cPowered by Q\u201d and the \u201cSecurity Metrics Credit Card SAFE\u201d logos in the footer.<\/li>\n<\/ul>\n<p>Click [Apply] to save your changes.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Name and Address<\/strong><\/p>\n<ul>\n<li>Section Title:\u00a0 Set the title of the name and address section (i.e. Billing Address, Personal Information, etc.)<\/li>\n<li>Display:\u00a0 Select the display layout as well as the optional fields you want to include on the page.\u00a0 To include an optional field, click and drag the arrow icon into the \u201cOn Page\u201d column in the order you want the field to appear.\u00a0 You can edit the display name for a field by typing your custom label in the text box.<\/li>\n<li>Required Fields:\u00a0 You can make optional fields required by checking the box next to included fields.<\/li>\n<\/ul>\n<p>Click [Apply] to save your changes.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Recurring Payments \u2013 Frequency and Duration<\/strong><\/p>\n<ul>\n<li>Section Title:\u00a0 Set the title for the frequency and duration section.<\/li>\n<li>Dates:\u00a0 Use the checkboxes to allow transactions to be scheduled to run on a future date when submitted, and\/or remove the duration options from recurring.\u00a0 If the second option is checked, then recurring transactions will run indefinitely until cancelled.<\/li>\n<li>Display:\u00a0 Use the check box to allow recurring transactions on the payment page.\u00a0 If checked, then select your display, frequency, and duration options.<\/li>\n<\/ul>\n<p>Click [Apply] to save your changes.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Payment<\/strong><\/p>\n<p>Select the payment options available for your Custom Page.<\/p>\n<ul>\n<li>Section Title:\u00a0 Set the title for the payment section (ie. Payment Information).<\/li>\n<li>Payment Methods:\u00a0 Select the payment options you want available on your Payment Page and customize the labels of the payment fields as needed.\u00a0 Note- if no payment option is selected, Debit\/Credit Card information will be collected on the Giving Page as a default.<\/li>\n<\/ul>\n<p>Click [Apply] to save your changes.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Comments<\/strong><\/p>\n<p>Include an additional comments section at the end of the payment form (just above the payment section).\u00a0 Note- the maximum number of characters that can be stored in comments is 500.<\/p>\n<ul>\n<li>Section Title:\u00a0 Set the title for the comments section.<\/li>\n<\/ul>\n<p>Click [Apply] to save your changes.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Custom Fields<\/strong><\/p>\n<p>Add any custom fields you want to include on your custom page.<\/p>\n<ul>\n<li>Section Title:\u00a0 Set the title for the custom field section.<\/li>\n<li>Select A Control Type:\u00a0 Select the type of control you want for your custom field (ie. Text field, or a List), depending on what you want to use the custom field for.\u00a0 Text fields can collect up to 50 characters on the Payment Page.\u00a0 Lists can be either radio buttons or drop down menus.\u00a0 Use the Add\/Remove \u00a0action to create your list selections.\u00a0 You can make a custom field required and\/or hidden by using the appropriate checkbox.\u00a0 Hidden fields can be used to collect data points that aren\u2019t visible on the payment form, but get passed using the form post.\u00a0 Click -&gt; Add to List to add your custom field to the page.<\/li>\n<li>Control List:\u00a0 You can change the display order for your custom fields by click and dragging the field in the list.<\/li>\n<\/ul>\n<p>Click [Apply] to save your changes.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Information Grid<\/strong><\/p>\n<p>Display tabular data on your Custom Page.<\/p>\n<ul>\n<li>Section Title:\u00a0 Set the title for the information grid section.<\/li>\n<\/ul>\n<p>To display the table, pass the name \u201cGridLineItem\u201d in your form post.\u00a0 The value for GridLineItem in your post is a delimited string (sample code is listed on screen for reference).\u00a0 You may pass as many rows and columns as you wish.<\/p>\n<p>Click [Apply] to save your changes.<\/p>\n<p>&nbsp;<\/p>\n<h4>Communication<\/h4>\n<p>You can customize the communications that originate from this Custom Page by clicking Edit.<\/p>\n<ul>\n<li>New Transaction:\u00a0 The email receipt that is sent to the payer.<\/li>\n<li>Confirmation Giving Page:\u00a0 The on-screen confirmation message that a payer sees on a successful transaction submission.<\/li>\n<\/ul>\n<hr \/>\n<div role=\"form\" class=\"wpcf7\" id=\"wpcf7-f1655-o1\" lang=\"en-US\" dir=\"ltr\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fposts%2F43#wpcf7-f1655-o1\" method=\"post\" class=\"wpcf7-form init\" novalidate=\"novalidate\" data-status=\"init\">\n<div style=\"display: none;\">\n<input type=\"hidden\" name=\"_wpcf7\" value=\"1655\" \/>\n<input type=\"hidden\" name=\"_wpcf7_version\" value=\"5.6.3\" \/>\n<input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/>\n<input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f1655-o1\" \/>\n<input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/>\n<input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/div>\n<p>Did this article answer your question?<br \/>\n    <span class=\"wpcf7-form-control-wrap\" data-name=\"menu-810\"><select name=\"menu-810\" class=\"wpcf7-form-control wpcf7-select wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\"><option value=\"Yes\">Yes<\/option><option value=\"No\">No<\/option><\/select><\/span> <\/p>\n<p>How can we improve this article?<br \/>\n    <span class=\"wpcf7-form-control-wrap\" data-name=\"improve\"><textarea name=\"improve\" cols=\"40\" rows=\"10\" class=\"wpcf7-form-control wpcf7-textarea\" aria-invalid=\"false\"><\/textarea><\/span> <\/p>\n<p>Your Name (optional)<br \/>\n    <span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input type=\"text\" name=\"your-name\" value=\"\" size=\"40\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" \/><\/span> <\/p>\n<p>Your Email (optional)<br \/>\n    <span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input type=\"email\" name=\"your-email\" value=\"\" size=\"40\" class=\"wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email\" aria-invalid=\"false\" \/><\/span> <\/p>\n<p><input type=\"submit\" value=\"Send\" class=\"wpcf7-form-control has-spinner wpcf7-submit\" \/><\/p>\n<div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div><\/form><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The custom page designer allows you to set up the look and feel for your payment page, what information you want to collect, and the communications you want to send out. Click [Save] to save your changes. &nbsp; Layout &amp; Design Set up the page styling for your Custom Page like the background and foreground color and the button styling.\u00a0 You can also save and load page styles as templates that can be used on <a class=\"blog-more btn btn-xxs btn-primary\" href=\"https:\/\/www.cashlinqhelpdesk.com\/?p=43\">Read more<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-43","post","type-post","status-publish","format-standard","hentry","category-customq"],"_links":{"self":[{"href":"https:\/\/www.cashlinqhelpdesk.com\/index.php?rest_route=\/wp\/v2\/posts\/43","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cashlinqhelpdesk.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cashlinqhelpdesk.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cashlinqhelpdesk.com\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cashlinqhelpdesk.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=43"}],"version-history":[{"count":0,"href":"https:\/\/www.cashlinqhelpdesk.com\/index.php?rest_route=\/wp\/v2\/posts\/43\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.cashlinqhelpdesk.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=43"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cashlinqhelpdesk.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=43"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cashlinqhelpdesk.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}