{"id":190665,"date":"2020-08-17T04:10:05","date_gmt":"2020-08-17T04:10:05","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=190665"},"modified":"2022-03-11T00:46:43","modified_gmt":"2022-03-11T00:46:43","slug":"custom-login-page-branda","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/custom-login-page-branda\/","title":{"rendered":"Impress Clients Before They Even Log In With a Custom Login Page From Branda"},"content":{"rendered":"<p><a href=\"https:\/\/wordpress.org\/plugins\/branda-white-labeling\/\" rel=\"noopener\" target=\"_blank\">Branda<\/a> is the ultimate tool for white labeling the front and back-end of your WordPress site. One of the many tricks up her sleeve is the ability to create custom login pages to ensure that every inch of your site is true to your brand.<\/p>\n<p>If you have a beautiful and well-polished website, it makes sense to continue this theme right up to the front door &#8211; your login page.<\/p>\n<p>We\u2019re here to show you how you can create the perfect page to showcase your brand right from the get-go. This guide shows you how to:<\/p>\n<ul>\n<li><a href=\"#template\">Choose a Template<\/a><\/li>\n<li><a href=\"#logo\">Change Your Logo and Background<\/a><\/li>\n<li><a href=\"#labels\">Add Custom Labels<\/a><\/li>\n<li><a href=\"#color\">Create a New Color Scheme<\/a><\/li>\n<\/ul>\n<h2 id=\"login\">Create a Custom Login Page for Your Brand<\/h2>\n<p>The login page is the first thing your client will see when they get the keys to their new site, so if you want to dazzle them, you can create a custom login page that honors their brand perfectly.<\/p>\n<video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/login-pages-webm.webm\" type=\"video\/webm\"><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/login-pages-mp4.mp4\" type=\"video\/mp4\"><\/video>\n<p style=\"text-align: center;\"><small>Your clients will be impressed with their site before they even log in.<\/small><\/p>\n<p>Whatever your business, Branda can help you create a befitting login page.<\/p>\n<h3 id=\"template\">1. Choose a Template<\/h3>\n<p>If your site isn\u2019t tied to a business, or if you simply want a refreshed login page without being too corporate, you can use one of Branda\u2019s preset templates to breathe some life into your login page.<\/p>\n<figure id=\"attachment_190748\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190748\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/login-page-templates-1.png\" alt=\"Screenshot of the preset login page templates.\" width=\"600\" height=\"465\" \/><figcaption class=\"wp-caption-text\">If none of these take your fancy, you can create your own<\/figcaption><\/figure>\n<h3 id=\"logo\">2. Change Your Logo and Background<\/h3>\n<p>If you choose to start from scratch, you\u2019ll need to select your logo and background.<\/p>\n<figure id=\"attachment_190749\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190749\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/logo-upload.png\" alt=\"Screenshot of the logo upload section.\" width=\"600\" height=\"293\" \/><figcaption class=\"wp-caption-text\">You can even hide the logo completely if you\u2019d prefer.<\/figcaption><\/figure>\n<p>Logos can be uploaded either through the media library or a URL, and you have the option to enter alt text for the image.<\/p>\n<p>After you have uploaded your logo, you can scroll further down the page to make further edits to it. This includes the size, placement, and opacity.<\/p>\n<figure id=\"attachment_190750\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190750\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/logo-size.png\" alt=\"Screenshot of two different sizes of logos, on 85px the other 320px.\" width=\"600\" height=\"498\" \/><figcaption class=\"wp-caption-text\">You can increase the size of your logo up to a maximum of 320px.<\/figcaption><\/figure>\n<p>Once your logo has been added and set to your liking, you can upload a background image to complement it.<\/p>\n<figure id=\"attachment_190751\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190751\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/background-upload.png\" alt=\"Screenshot of the background image upload.\" width=\"600\" height=\"211\" \/><figcaption class=\"wp-caption-text\">Just make sure it\u2019s a minimum of 1024px wide.<\/figcaption><\/figure>\n<p>If you want to take it a step further, you can turn the background into a slideshow by uploading multiple images. You can then set the duration of each image and make little tweaks to how it\u2019s displayed.<\/p>\n<p>Your background and logo will, of course, have the biggest impact on your custom login screen, so when you&#8217;re happy with them, you can move onto the form and links.<\/p>\n<h3 id=\"labels\">3. Add Custom Labels<\/h3>\n<p>Branda has tons of options to let you customize every aspect of your form, including the ability to change each label as well as hide the various links.<\/p>\n<figure id=\"attachment_190752\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190752\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/form-options.png\" alt=\"Screenshot of the form labels and the options which allow you to change the text.\" width=\"600\" height=\"441\" \/><figcaption class=\"wp-caption-text\">Enter your own custom labels and hide unsightly checkboxes.<\/figcaption><\/figure>\n<p>You can even change the padding and margins of the form without touching a line of code.<\/p>\n<figure id=\"attachment_190753\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190753\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/padding-margins.png\" alt=\"Screenshot of the padding and margin options\" width=\"600\" height=\"621\" \/><figcaption class=\"wp-caption-text\">Branda gives you so much control over the smaller details.<\/figcaption><\/figure>\n<h3 id=\"color\">4. Create a New Color Scheme<\/h3>\n<p>No white labeling plugin would be complete without the option to add your own touch of color.<\/p>\n<video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/form-color-webm.webm\" type=\"video\/webm\"><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/form-color-mp4.mp4\" type=\"video\/mp4\"><\/video>\n<p style=\"text-align: center;\"><small>Your clients will be tickled pink&#8230;or blue&#8230;or orange&#8230;or whatever custom color you choose!<\/small><\/p>\n<p>Once you have your login screen looking exactly how you like, you can customize a few extras such as the error messages (shown when someone enters an incorrect password, for example) the login redirect link, and even add your own CSS.<\/p>\n<p>The possibilities are almost endless &#8211; it\u2019s a simple and easy way to keep your sites organized and impress clients with your white labeling prowess.<\/p>\n<figure id=\"attachment_190754\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190754\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/finished-login.png\" alt=\"Screenshot of a customized login page for 'Sophie's Flowers'\" width=\"1893\" height=\"925\" \/><figcaption class=\"wp-caption-text\">Whatever your brand, Branda can help you bring it to life.<\/figcaption><\/figure>\n<h2>Brand Every Inch of Your Site<\/h2>\n<p>Customizing your front-facing pages is just the start. Branda allows you to completely transform your WordPress admin experience, removing everything too &#8216;WordPress-y&#8217; and replacing it with your own unique brand.<\/p>\n<p>If building your own custom login page has got you in the mood for some more of Branda&#8217;s brilliance, check out the full <a href=\"https:\/\/wpmudev.com\/docs\/wpmu-dev-plugins\/branda\/\" target=\"_blank\">documentation<\/a> to see what else she is capable of, and keep an eye on the <a href=\"https:\/\/wpmudev.com\/roadmap\/\" target=\"_blank\">roadmap<\/a> to find out what&#8217;s in the pipeline.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Branda is the ultimate tool for white labeling the front and back-end of your WordPress site. One of the many tricks up her sleeve is the ability to create custom login pages to ensure that every inch of your site is true to your brand. If you have a beautiful and well-polished website, it makes [&hellip;]<\/p>\n","protected":false},"author":801248,"featured_media":190773,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"4","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263,11260,11259],"tags":[],"tutorials_categories":[11230],"class_list":["post-190665","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-wpmu-dev-products","category-wpmudev-tutorials","tutorials_categories-branda-pro"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/190665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/801248"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=190665"}],"version-history":[{"count":56,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/190665\/revisions"}],"predecessor-version":[{"id":191324,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/190665\/revisions\/191324"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/190773"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=190665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=190665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=190665"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=190665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}