In this article, I’ll guide you through integrating HTML templates into a Laravel Project in the easiest way possible. If you’re unfamiliar with HTML templates, they’re a design template for websites in HTML format, including the site’s design and demo data. You can purchase and download your HTML template, then follow the steps I guide you through, or you can follow me now and learn how to do the work. The template we are going to use today is an HTML template of an E-commerce website.
Integrate an HTML template into a Laravel project.
Step 1: Extract the template in your directory and copy all its content.
Step 2: Navigate to your project root directory and open the Public Folder. Then, paste all the content into the directory.
Step 3: Open the resources->views and create a new folder with the name you like, and create a file named “index.blade.php“.
Step 4: Navigate to routes/web.php and update the index file from “welcome” to the index file for this project, naming it “folder_name.index”.
Step 5: Open the index file you and paste all the content from the other index.html of the template
Now, after refreshing the site, you can see that your template is running. However, for better editing and site building, you should separate the index file into multiple parts as needed and include all of them in the index file. Let’s separate the index file for a better experience. For this, you can take each section marked with a divider and create a new blade file with the name, for example, the header section. Take all the code from the header section and create a blade file named “header.blade.php” and include it in the main index file so the design won’t change, but you can edit the file easily.
After creating all the parts, it may look like this, and to include all these in the index file, you need to type this command in the index file.
@include(‘home.filename’)
The include should look like this in the index.blade.php.
Congratulations!! Now your Laravel template is successfully implemented on the site. Make sure to change the paths of your CSS and JS parts, like the following image.
In conclusion.
This is how you implement a Laravel website template in your Laravel project in the easiest way possible.
Thanks for visiting the Code Issue Hub
Learn how to create a Login and register page in Laravel using Breeze.