During the setup of a Member Profile Page the third step is called the "Page Designer". This step will allow you to
customize the design and layout of your profile page by selecting which widgets to use, what information they should display and how they should be styled.
The designer will show all the available page widgets on the left column and the right column will display the widgets currently being displayed on your donation page. Widgets can be dragged and dropped from either column to the other. The widgets on the right will also be displayed in the order they will appear on the donation page, top to bottom.
Just above the designer you will find several settings on the right. Please see below for each settings description.
Page Preview – This button will allow you to see a full screen preview of the widgets below on the profile page as they would show to a Member.
Page Settings – This setting will allow for you to apply various options to your profile page such as:
Reset Colors – Click to reset the colors of this widget back to their default selections.
Sync with Theme Colors – After changing the “Theme” you can update this widgets styling to match the selected “Theme”.
Settings:
Show Default Logo – Select Yes, to display the default logo from your account settings.
Show Other Logo – Select Yes, to upload an alternative logo to be displayed.
Logo Alignment – Select which alignment the logo should use.
Show Company Name – Select Yes, to display the name of your organization.
Styles:
Page Styles – Select the Font and styling for the pages error message.
Text – Select the default Color, Font and styling for the page text.
Background – Select the background color for the page.
Boarder – select the color and size for the page boarder if desired.
Spacing: Insert Padding and Margin in pixels for the page.
Layout – This dropdown field will allow for you to select from different layout orientations. Allowing you to choose from the number of columns and overall width of the widgets on the page.
Theme – This dropdown field will allow you to select from predesigned color themes that can be applied to the widgets included in the Designer. You will also find an option in the picklist to create your own customer theme by choosing your desired colors and font settings.
Use Dark Mode? – This toggle setting will allow you to switch between light and dark modes for each of the themes selected under the “Theme” dropdown field. The default light mode will be based on a white background color. Where the dark mode will be based on a black background color.
Designer Functions
Moving Widgets:
Each widget can be dragged and dropped with your mouse to the desired location on the designer. Each widget displaying on the designer board you will see in the left corner a four-way arrow icon. Clicking on this icon and dragging the widget will provide the best way to move the widget. Widgets can be move above or below other widgets or when the width of your widgets has been reduced that can be moved into the same row as other widgets. Changing the “Layout” can make the process of making multiple column rows easier. Once you have dragged the widget into its desired location just release your mouse.
To change the width of your widget place your mouse on the widgets right edge, your mouse should change into a two way (right & left) arrow curser. You can now drag the edge to the desired width. Similar to the width you can also change the height of you widget. Move your mouse to the bottom edge of the widget, again your mouse should change to a two way (up & down) arrow curser. You can now drag the edge of the widget to the desired height.
To remove a widget from the Designer and return it back to the available widget column you can click the “X” icon in the top right corner of that widget.
Widget Menu:
Clicking on the three blue dots in the top left corner of a widget on the Designer will give you access to its menu. Below are the menu options:
Widget Settings – Access all the settings and styling options for that Widget.
Alignment – Select the alignment for this widget. This setting can only be used if the widget is the only one in its row and is set to a width that is smaller than the total width of that row.
Toggle Preview Mode – See the preview of that widget to see how it will look to the member.
Widget Overview
The following is a list of all Profile Page widgets and their abilities:
Logo Image
This widget allows for the inclusion of a member’s profile image.
Widget Settings
Style: Edit the Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Member Name
This widget allows for the inclusion of the Member’s Full Name.
Widget Settings
Setting: Page Title Alignment – Choose which alignment the title should be displayed as.
Style: Edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Member Info
This widget allows for the inclusion of the Member’s membership information.
Widget Settings
Setting: Page Title Alignment – Choose which alignment the title should be displayed as.
Show Fields: Member Level, Membership Since Date, Emblem
Style: Edit the Widget's Title and Value Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Contact Info
This widget allows for the inclusion of the Member’s email address and phone number.
Widget Settings
Setting: Page Title Alignment – Choose which alignment the title should be displayed as.
Show Fields: Email and Phone
Style: Edit the Widget's Title and Value Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Address
This widget allows for the inclusion of the Member’s mailing address.
Widget Settings
Setting: Page Title Alignment – Choose which alignment the title should be displayed as.
Show Fields: Address 1, Address 2, City, State, Zip Code, Country
Style: Edit the Widget's Title and Value Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Company Info (Organization Only)
This widget allows for the inclusion of the Company Member’s Description and Primary Contact’s Contact info.
Widget Settings
Setting: Page Title Alignment – Choose which alignment the title should be displayed as.
Show Fields: Company Description, Primary Contact Name, Email and Phone
Style: Edit the Widget's Title and Value Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Social Media
This widget allows for the inclusion of the Member’s social media, website and blog URLs.
Widget Settings
Setting: Page Title Alignment – Choose which alignment the title should be displayed as.
Show Fields: Website, Blog, Facebook, X, LinkedIn, Instagram
Style: Edit the Widget's Title and Value Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Additional Information
This widget allows for the inclusion of the Member’s other profile fields not included in the other widgets.
Widget Settings
Setting: Page Title Alignment – Choose which alignment the title should be displayed as.
Show Fields: Multiple
Style: Edit the Widget's Title and Value Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
HTML Block
Include custom HTML coding to display what you want on the donation form.
Widget Settings
Settings: Enter the HTML code.
Style: Edit the Widget's Title Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
YouTube Video
Embed a video from YouTube using the Share URL for that video.
Widget Settings
Settings:
Allow Member to Add/Change Video – Select if you would like to allow your members to use their own YouTube video to display on their profile page.
Youtube Video URL – Enter in the “Share” URL for the desired YouTube video you wish to display on the donation form.
Video Caption – Enter any text you wish to display as the videos caption.
Style: Edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Picture Gallery
Upload images to be displayed on the Member Profile Page.
Widget Settings
Settings:
Allow Member to Add/Change Image – Select if you would like to allow your members to use their own Pictures to display on their profile page.
Upload Images – Click Select Files to open your file browser to select which image you wish to upload into the gallery. Once an image has been uploaded you can add a caption by clicking the pencil and paper icon or click the Trashcan Icon to remove/delete the image from the gallery.
Style: Edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Custom Text
Include text to be displayed on the donation form as a message to the donor.
Widget Settings
Settings:
Allow Member to Add/Change Text – Select if you would like to allow your members to use their own text to display on their profile page.
Settings: Enter the text you wish to display on the donation form. Within the text body you will also have styling options to choose Font, Font Size, alignment, Font Color and much more.
Style: Edit the Widget's Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Empty Block
This widget can be used as a spacer between two sections of content. Insert where ever you would like blank space.
Widget Settings
Style: Edit the Widget's Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Once the design of you profile page is completed click the green “Save & next” button to continue on to the final step.