Site Members: Changing the Design of the Default Signup and Login Forms
8 min read
Design the window that visitors see when signing up or logging in to your Members Area. This also applies to any password-protected page on your site.
The default form is already designed for you. It matches your site colors and fonts so your design stays consistent. While you can't customize the design of the default form from scratch, you can still control some design elements by customizing your site styles.
In this article, learn how to change the:
Using a custom signup / login form?
This article refers to the default forms. If you are using custom forms, you can click below to learn how to customize:
Changing the font of the page's title
The font for the title text on the password window is taken from the Heading 2 text theme. If you want to change the font, you can customize the text theme for your site.
Important:
This also changes any other text with the Heading 2 theme on your site.
To change the Heading 2 font:
Wix Editor
Studio Editor
- Click Site Design
on the left side of the editor. - Click Text theme.
- Click Customize heading styles.
- Hover over Heading 2 and click the Edit icon
. - Choose a new font.
- Click Apply to save your changes.
Changing the font of other text elements on the page
The font for all other text elements on the password window is taken from the Paragraph 2 text theme. If you want to change the font, you can customize the text theme for your site.
Important:
This also changes any other text with the Paragraph 2 theme on your site.
To change the Paragraph 2 font:
Wix Editor
Studio Editor
- Click Site Design on the left side of the editor.
- Click Text theme.
- Click Customize paragraph styles.
- Hover over Paragraph 2 and click the Edit icon .
- Choose a new font.
- Click Apply to save your changes.
Changing the text color
Pick a different color for the title and text of the password window by customizing the darkest shade of your Base / Background & Text colors in your site's palette.
Important:
This also changes the color of any other elements on your site where this shade is applied.
To change the color for text elements:
Wix Editor
Studio Editor
- Click Site Design on the left side of the editor.
- Click Color theme.
- Click the darkest color under Base colors.
- Use the color picker in the Custom Color box to change the color.
- (Optional) Use the sliders to change the Saturation and Brightness.
- Click Apply.
Changing the button and link color
Choose a different color for links and buttons by customizing a specific shade in your site's Accent / Action colors. This shade is used across your site for many actionable elements like buttons, links and menu items.
Important:
This also changes the color of any other elements on your site where this shade is applied.
To change the color for buttons and links:
Wix Editor
Studio Editor
- Click Site Design on the left side of the editor.
- Click Color theme.
- Click the first color in the Accent colors section.
- Use the color picker in the Custom Color box to change your accent color.
- (Optional) Use the sliders to change the Saturation and Brightness.
- Click Apply.
Changing the background color
To change the background color of the password window, adjust the lightest shade of your Base colors / Background & Text colors in your site's color theme. This shade is automatically used across your site, mostly for page and element backgrounds.
Important:
This also changes the color of any other elements on your site where this shade is applied.
To change the color for page backgrounds:
Wix Editor
Studio Editor
- Click Site Design on the left side of the editor.
- Click Color theme.
- Click the lightest color under Base colors.
- Use the color picker in the Custom Color box to change the background color.
- (Optional) Use the sliders to change the Saturation and Brightness values.
- Click Apply.
Tip:
Click Publish to view the changes on your live site. You won't be able to see the password window by previewing your site.
Did this help?
|