User Login Element

06/08/2019

Avada comes bundled with a group of Login and Registration Elements to allow you to quickly and easily setup custom login, registration and lost password pages. These are the User Login Element, the User Lost Password Element, and the User Register Element. Used together, this suite of tools gives you a powerful and easy ways to administer your users access to your site. Read below to discover more about the User Login Element!

User Register
Sign In
Lost Password

How To Use The User Login Element

Step 1 – Create a new page or edit an existing one.

Step 2 – Add a container then select your desired column layout.

Step 3 – Click the ‘+ Element’ button to bring up the Elements window. Locate the ‘User Login’ Element and click it to bring up its options window.

Step 4 – Work you way one at a time through the options to configure the User Login Element to your liking.

Step 5 – Once you have finished configuring the options, click ‘Save’ to insert the element into the page. Preview the page to view the User Login Element output, and remember you can come back into the element to fine tune it.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > User Login Element section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

  • Text Align – Choose the alignment of all content parts. “Text Flow” follows the default text align of the site. “Center” will center all elements.

  • Form Field Layout – Choose if form fields should be stacked and full width, or if they should be floated.

  • Heading – Choose a heading text.

  • Heading Color – Choose a heading color.

  • Caption – Choose a caption text.

  • Caption Color – Choose a caption color.

  • Show Labels – Controls if the form field labels should be shown.

  • Show Placeholders – Controls if the form field placeholders should be shown.

  • Button Span – Choose to have the button span the full width.

  • Form Background Color – Choose a background color for the form wrapping box. Leave empty for the default value.

  • Link Color – Choose a link color.

  • Show Remember Me Checkbox – Controls if the remember me checkbox should be displayed in the login form.

  • Redirection Link – Add the URL to which a user should be redirected to after form submission. Leave empty to use the same page.

  • Register Link – Add the URL the “Register” link should open.

  • Lost Password Link – Add the URL the “Lost Password” link should open.

  • Element Visibility – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.

  • CSS Class – Add a class to the wrapping HTML element.

  • CSS ID – Add an ID to the wrapping HTML element.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Social Links Element

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • User Login Text Align – Choose the alignment of all content parts. “Text Flow” follows the default text align of the site. “Center” will center all elements.

  • User Login Form Field Layout – Choose if form fields should be stacked and full width, or if they should be floated. IMPORTANT: This option only works for the login and the register form.

  • User Login Show Labels – Controls if the form field labels should be shown.

  • User Login Show Placeholders – Controls if the form field placeholders should be shown.

  • User Login Show Remember Me Checkbox – Controls if the remember me checkbox should be displayed in the login form.

  • User Login Form Background Color – Choose a background color for the form wrapping box. Leave empty for the default value.

View The Options Screen

User Login Element Parameters

Copy to Clipboard
        • text_align – Choose from default, textflow, or center. Sets the text alignment.
        • heading – The heading text.
        • heading_color – Accepts a hexcode ( #000000 ). Sets the heading text’s color.
        • caption – The caption text.
        • caption_color – Accepts a hexcode ( #000000 ). Sets the caption text’s color.
        • button_fullwidth – Choose from default, yes, or no. Sets wether or not the button will span full width.
        • form_background_color – Accepts a hexcode ( #000000 ). Sets the form wrapping box’s background color.
        • link_color – Accepts a hexcode ( #000000 ). Sets the link’s text color.
        • redirection_link – The URL to which the user is redirected to after form submission. Leave empty to use the same page. For example, http://www.example.com/
        • register_link – The URL that the Register link redirects to. For example, http://www.example.com/register.
        • lost_password_link – The URL that the Lost Password link redirects to. For example, http://www.example.com/lost-password
        • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
        • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

        • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.