EN한국어

Guides / Finipage / Editing pages

Turn an HTML Template Into Your Own Company Page

By the Qorlize team · Last reviewed

Finipage guide · Edit HTML files without code. Open Finipage

A good HTML template saves weeks. You download a zip, open index.html, and there is a polished page for a company called "Agency" with a smiling stock-photo team and an office at "123 Main Street, New York". Turning that into your page is mostly replacement work, but the parts people forget are the ones that embarrass them later: a demo blog page still reachable from the menu, a phone number that rings nobody, or the template author's analytics code counting your visitors.

This guide goes through the work in the order that causes the least backtracking.

Read the license before you change anything

Templates come with very different terms, and the file you need is usually called LICENSE, license.txt or readme.txt, or the terms are on the page you downloaded from. Look for three things:

  • Attribution. Many free templates require you to keep a credit line in the footer, such as "Design by …". Some let you remove it only if you pay. Deleting a required credit is a license breach, not a cleanup.
  • Commercial use. Some free templates are for personal use only. A company page is commercial use.
  • Number of sites. Marketplace licenses often cover one end product. If you plan to reuse the template for a second brand or a client, check whether that needs another license.

Also check the parts inside the template. Photos, icon sets and fonts may have their own licenses, and demo photos in particular are often included only for preview, not for use. Plan to replace every demo image anyway.

Learn the folder before you edit

Unzip the template into its own folder and look at it before opening any file. A typical layout:

index.html
about.html
blog.html
contact.html
css/style.css
js/main.js
images/logo.png
images/hero.jpg
fonts/

Keep this structure. The HTML refers to css/style.css and images/hero.jpg by relative path, so moving or renaming folders breaks styles and images. If you are unsure how paths and folders relate, the guide to HTML file structure explains it.

Make a copy of the untouched template first, named something like template-original. When you break a section later, you can compare against the original instead of downloading again. Keeping versions of HTML files covers a simple routine for this.

Then decide what pages you actually need. Many templates ship ten pages: home, about, services, portfolio, portfolio detail, blog, blog post, pricing, FAQ, contact. A small company often needs only the home page and maybe a contact page.

Replace logo, text, images and contact details

Work through one category at a time across all pages. It is easier to check "every logo is replaced" than "page three is finished".

  1. Logo. Save your logo with the same file name and roughly the same proportions as the template's, for example over images/logo.png. Then every page picks it up without HTML changes. If your logo is much wider or taller, you will need to adjust its width once. Check the footer too; templates often have a second, light-colored logo there, such as logo-white.png.
  2. Text. Replace headings and paragraphs with your own. Write to the length of the original roughly; a three-word heading slot rarely survives a fifteen-word heading on a phone.
  3. Images. Replace demo photos with your own, resized for the web. A 4 MB phone photo in a hero slot makes the page slow; see making images smaller for the web. Do not forget the alt text, which templates often leave as "image" or empty.
  4. Contact details. Phone, email, address, map, business hours and social links. These usually appear in at least three places: the header, the contact section and the footer. Search the file for the demo phone number and email to find every copy.
  5. Page title and description. The <title> and meta description often still say the template name. These are what appears in search results and browser tabs.

Remove demo sections and unused pages

A template is designed to show everything it can do. Your page should show what you have. Testimonials from invented clients, a pricing table you do not use, a "Latest news" block with three sample posts, a counter claiming "1,250 happy customers": delete them rather than leaving them half-filled.

When you delete a section, delete the whole block, not just its text. An emptied section still takes up space and padding. In the HTML, a section usually starts with something like <section id="testimonials"> and ends at the matching </section>.

Then fix the menu. If the navigation still has a "Testimonials" item pointing to #testimonials, clicking it does nothing. If it points to blog.html and you deleted that file, visitors get a "404 Not Found" page. Remove the menu items, and check the footer links too, which often repeat the menu.

Delete the unused HTML files from the folder as well, rather than just unlinking them. A file that is uploaded is reachable by anyone who guesses the address, and search engines may find and index it.

Doing the visual part in Finipage

You can do all of the above in a text editor such as Notepad or VS Code, and for search-and-replace across many files that is the fastest way. If you prefer clicking on the page itself, Finipage is a free browser editor that opens the HTML file and lets you change it visually.

  • Click Link folder at the top and choose the template folder, so images and CSS referenced with relative paths show up while you edit.
  • Double-click text to change it, and drop an image file onto a picture in the page to replace it.
  • Click a demo section and press Delete. If you only selected an inner box, use the parent-select button or the Layers panel to select the whole section first.
  • The Document section of the properties panel has fields for the page title and meta description.

Finipage edits one HTML file at a time, so open index.html and contact.html separately. The template's JavaScript does not run while you edit (sliders and animations may look frozen) but it is kept when you save.

A final check for leftovers

Open each remaining HTML file in a text editor and search for these. Every one of them turns up regularly in published pages.

  • Placeholder text: "Lorem ipsum", "dolor sit amet", "Your Company", "Company Name", "John Doe", "Agency", the template's own name.
  • Demo contact data: "123 Main", "555-", "info@example.com", "yourdomain".
  • Demo links: href="#", example.com, links to the template author's site or social accounts, and the theme's own demo URL. The guide to fixing links and buttons covers how to test them all.
  • Tracking and analytics: search for gtag, googletagmanager, analytics, fbq, pixel and any <script src> pointing to a domain you do not recognize. Some templates include the author's tracking ID from their demo site. Delete those blocks, or replace the ID with your own if you use the same service. Finipage keeps scripts as they are and does not edit source, so this step is for a text editor.
  • Metadata: the meta name="author" tag, Open Graph tags with the demo title and image, and a favicon that is the template's logo. See favicons and link previews.

When the search comes back empty, open the page in a browser, click through every menu item, and look at it on a phone. Then it is ready to publish.

Want to try it on your own file? Open the Finipage editor. It runs in your browser and your file stays on your device.

Related guides