The Login Link Block provides a dynamic navigation element that displays different content based on the user’s authentication status. This Pro block automatically shows login options for logged-out users and account access for logged-in users, with complete customization over text, icons, and styling.
Adding the Login Link Block
Navigate to the post or page where you want to add the login functionality. Click the block inserter (+) and search for “Login Link” in the DigiBlocks Theme category. The block displays both logged-out and logged-in previews in the editor, showing how it will appear to different user types on the frontend.
Login Settings Configuration
Login State Options
Configure what logged-out users see in the Login Settings panel:
Login Text – Set the text that appears for users who need to log in, such as “Login” or “Sign In”
Login Icon – Choose from FontAwesome icons to accompany the login text
Icon Position – Position the icon to the left or right of the text
Login URL – Specify where the login link directs users:
- Leave empty to use the default WordPress login page
- Enter a custom URL for third-party login systems
- Configure link options including “Open in new tab” and rel attributes
Logged-In State Options
Set up the experience for authenticated users in the Logged In Settings panel:
Logged In Text – Define text for logged-in users, such as “Account” or “Dashboard”
Logged In Icon – Select an icon that represents the logged-in state
Icon Position – Control icon placement relative to the text
Logged In URL – Direct logged-in users to their account area, dashboard, or profile page with full link control options
Position and Alignment
Content Alignment
Use the Position section to control how the login link appears:
Alignment – Choose from left, center, or right alignment with responsive controls for different screen sizes
The alignment affects the overall positioning of the login link within its container, ensuring proper integration with your site’s layout.
Typography and Styling
Typography Control
Customize text appearance in the Typography style panel:
Font Family – Select from Google Fonts integration
Font Size – Set responsive font sizes for desktop, tablet, and mobile
Font Weight – Choose from available font weights
Font Style – Apply italic or normal styling
Text Transform – Control capitalization (uppercase, lowercase, capitalize)
Text Decoration – Add underlines or remove default link styling
Line Height – Adjust vertical spacing between lines
Letter Spacing – Fine-tune character spacing
Icon Sizing
Icon Size – Control the dimensions of icons with responsive settings, ranging from 8px to 48px
Color Customization
Configure link colors in the Colors style panel:
Text Color – Set the default color for the login link text and icons
Text Hover Color – Define the color change when users hover over the link
Colors apply to both the text and icons, maintaining visual consistency across both logged-in and logged-out states.
Responsive Visibility
Device-Specific Display
Control when the login link appears using visibility options:
Hide on Desktop – Prevent display on desktop devices (992px and above)
Hide on Tablet – Hide on tablet devices (768px to 991px)
Hide on Mobile – Remove from mobile devices (767px and below)
Hidden elements appear with reduced opacity in the editor for easy identification while remaining completely hidden on the frontend.
Advanced Configuration
HTML Customization
HTML Anchor – Create a unique identifier for direct linking to the login link section
Additional CSS Classes – Add custom CSS classes for advanced styling or third-party integration
Link Attributes
Both login and logged-in states support comprehensive link configuration:
- Target options for opening links in new tabs
- Rel attributes for SEO and security considerations
- Custom URL handling for integration with membership plugins or external authentication systems
Usage Scenarios
The Login Link Block adapts to various site configurations:
Custom Header – If you use our DigiFusion theme with DigiFusion Pro, you can create custom headers very easily and add it to it.
Membership Sites – Direct users to member areas or registration pages
E-commerce Integration – Link to customer accounts or checkout processes
Custom Authentication – Support third-party login systems and SSO solutions
Multi-Purpose Sites – Provide different experiences for different user types
The block automatically detects user authentication status and displays the appropriate content, making it ideal for creating dynamic, user-aware navigation elements that enhance the overall user experience.