Footer
Targeting
The footer of a web page is the final section, containing a variety of information, including:
- Brief Description: It provides a concise description that helps visitors understand the nature of the app or content available on the page.
- Download Button: This button guides visitors to download the app or content provided on the page, making it easier for them to access the content quickly.
- Social Media Links: These links allow visitors to connect with you and learn more about app details and news through social media platforms.
- Privacy Policy Page: It offers information on how personal data is collected and used, along with details of the privacy policies followed on the page.
- Copyright Text: It clarifies intellectual property and copyright rights related to the content and materials available on the page.
The footer represents the endpoint of the visitor's interaction with your page, providing them with additional information and links to enhance communication and fully benefit from the app's content.
Track
The term "path" here refers to the main JSON file in the API directory used to modify component content.
You can access the editing file by following these steps:
- Open the "content" folder.
- Open the "api" folder.
- Open the "footer.json" file.
The path is as follows:
You will find this content:
{
"SectionOne": [
{
"description": "Medium Description To attract more users to download your application"
}
],
"socialMedia": [
{
"title": "twitter",
"icon": "fi fi-brands-twitter",
"link": "#"
},
{
"title": "facebook",
"icon": "fi fi-brands-facebook",
"link": "#"
},
{
"title": "instagram",
"icon": "fi fi-brands-instagram",
"link": "#"
},
{
"title": "tiktok",
"icon": "fi fi-brands-tik-tok",
"link": "#"
}
],
"SectionTwo": [
{
"copyright": "Copyright 2023, All Rights Reserved"
}
]
}
json file original (API)
What is meant here is the content of the original file is empty, here you can copy the content of the file in case any information or content is lost or to verify.
{
"SectionOne": [
{
"description": ""
}
],
"socialMedia": [
{
"title": "",
"icon": "",
"link": "#"
}
],
"SectionTwo": [
{
"copyright": "Copyright [year], All Rights Reserved"
}
]
}
Explanation of the amendment
File partitions
This file is divided into three different sections:
- SectionOne: you will find the description
- socialMedia: Here you will find a list of socialMedia
- SectionTwo: Here you will find copyright
After opening the modification file as mentioned earlier, follow these editing steps:
- To change the data, edit the text within the quotation marks (OBJECT ADDRESS). For instance, you can modify the title to "New Title" and the description to "New Description."
OBJECT ADDRESS | THE CONTENT BEING MODIFIED |
---|---|
Section 1 | SectionOne |
description | Medium Description To attract more users to download your application |
------------ | ------------ |
Section 2 | socialMedia |
title | One social media: The name of the social networking site |
icon | Put the appropriate icon for the features |
link | Social media account link |
------------ | ------------ |
Section 3 | SectionTwo |
copyright | Copyright year, All Rights Reserved |
Every time you want to add a new social media icon, you can copy this code
,{
"title": "",
"icon": "",
"link": "#"
}
- Once you finish the edits, save the file by clicking on "File" in the upper-left corner. Then choose "Save" or use the shortcut Ctrl + S (on Windows) or Command + S (on macOS).
Now you can observe the changes you made in your application when you reload or run it.
Icons
When dealing with icons, you need to use an external website that contains various icons.
- You can visit the following website: https://www.flaticon.com/uicons/interface-icons
- Upon reaching the website, you can use the search box to type the name of the icon you're looking for or any related keywords.
- Once you find the appropriate icon, you will find a code that represents it. Copy this code, and you can use it in your application. As an example, here is the code for the home icon: fi fi-brands-tik-tok
{
"icon": "fi fi-brands-tik-tok"
},