Go to the Setup icon and search for Visualforce Pages. Click on New and create a simple Visualforce page:
You have an option, Available for Lightning Experience, Lightning Communities, and the mobile app, which is deselected by default. We will not be selecting it. We will replace the a Visualforce Markup with a simple outputText component, Visualforce component, and a simple styling part. Quick Save means we have saved it in edit mode. Click on Save. Take a look at the following code:
You can click on the Preview button to check how the Visualforce page will look. The following is a preview of the Visualforce page:
Now let's try to use the Visualforce page in the Lightning App Builder. So, on the account record page, click on Edit page. In the standard components, you have Visualforce. Try to drag and drop the Visualforce component somewhere, and it will show Invalid Component.
Click on the Visualforce component that you have dragged into the account record page; on the right side, within the configuration of the Visualforce page. No Visualforce pages are available. Let's enable the Visualforce page for Lightning. Going to the Visualforce page Edit mode, Select the Available for Lightning Experience, Lightning Communities, and the mobile app option and then click on Save:
Let's come back to the App Builder; try to reload the page. Now scroll down to the Visualforce page and drag and drop it to wherever you want to put it. Once you click on it, you will receive all the Visualforce pages that are enabled for Lightning Experience. Click on Save; once you have saved, go back and test it. You can use this Visualforce page with other types of templates too:
If the Visualforce developers have made any changes here, for example, they have put the global variable for the user's first name and last name, then the user can see their details. Now, when the System Amin user is logged in, when they use their page, the user will see their name over there. If a test user logs in, they will also find their name over there. The Visualforce developers have made some changes; let's check Lightning Experience. Reload the page. You should see Hello System Admin and the user's first name and last name:
