🇬🇧 English

🇯🇵 日本語

Illustfolio Lumina Docs


Getting Started

Posting Works

Customizing

Creating Pages

Publishing the Site

Recommended Settings

Update the Theme

FAQ

Release Notes


Illustfolio Lumina - The Portfolio Site Template for Illustrators

Illustfolio Lumina / Legal

What is a Page

The "Pages" feature on Tumblr allows you to create pages for fixed information separate from your blog.

It is suitable for organizing and providing information that is independent of the main content of the blog, such as "About (Profile)," "Contact," "FAQ (Frequently Asked Questions)," etc.

Creating a Page

In the "Edit Theme" screen, click on "Add a Page."

https://prod-files-secure.s3.us-west-2.amazonaws.com/7d4dae6a-6078-4b08-81a4-4a5d38eae500/837ece71-52c5-4490-b0c3-25d60a20eb24/スクリーンショット_2024-07-10_21.57.05.png

Page Settings

In the "Edit Page" screen, perform the following operations:

https://prod-files-secure.s3.us-west-2.amazonaws.com/7d4dae6a-6078-4b08-81a4-4a5d38eae500/bc9fd8ac-1c43-4e8f-a9c6-1ab037644934/スクリーンショット_2024-07-10_21.45.07.png

Creating the Page Content

Enter the title and content of the page.

After entering the necessary information, save and publish it. This will display it as a page.

Embedding a Contact Form

Let's set up a contact form to accept work inquiries.

This allows you to receive messages without publicly revealing your email address.

We'll use Google Forms as an example.

<aside> ℹ️ Any service that can generate embed codes can be embedded, not just Google Forms.

</aside>

Create a Google Form

Create a Google Form and add the necessary fields.

Get the Embed Code

Once the form is complete, click the "Send" button at the top right.

Click the "<>" icon (embed).

An embed code will be displayed, so copy it.

Embedding in the Page

In Tumblr's page editor, click "HTML" on the toolbar to switch to HTML editing mode.

Paste the copied embed code into the page.

Click the "Update Preview" button, and if the form displays correctly, click "Save" to save it.

https://prod-files-secure.s3.us-west-2.amazonaws.com/7d4dae6a-6078-4b08-81a4-4a5d38eae500/5ee8403d-4c82-4613-987f-1d3018d810db/スクリーンショット_2024-07-10_23.53.45.png

How to Insert Headings in a Page

<aside> ℹ️ This section requires basic knowledge of HTML.

</aside>

In page editing, you can add images and insert links from the toolbar.

However, "headings" like those in the image below cannot be added from the toolbar. To add headings, you need to switch to HTML editing mode.

https://prod-files-secure.s3.us-west-2.amazonaws.com/7d4dae6a-6078-4b08-81a4-4a5d38eae500/0f352df4-b1db-477f-8b12-13aa0d88392d/スクリーンショット_2024-07-10_21.44.56.png

Adding Headings in HTML Mode

Click "HTML" on the toolbar to switch to HTML editing mode.

https://prod-files-secure.s3.us-west-2.amazonaws.com/7d4dae6a-6078-4b08-81a4-4a5d38eae500/0cbcb463-a36a-4124-bd1f-541aace47a01/スクリーンショット_2024-07-10_22.01.22.png

In HTML editing mode, you can directly write heading tags within the content. For example:

<h2>Heading</h2>
<h3>Subheading</h3>

You can also write other HTML tags as needed.

Example

Below is an example of adding headings to a page.

<h2>Profile</h2>
<h3>John Smith</h3>
<p>Freelance illustrator.</p>
<p>Born in ZZ Prefecture. Responsible for character design for smartphone games, magazine illustrations, and light novel illustrations. Specializes in drawing unique characters and captivating scenes.</p>
<p>Awarded the Excellence Prize in the XXth YY Company Illustration Contest. Favorite genres are "○○○︎," "□□□︎," and "△△△."</p>
<h2>Awards</h2>
<ul>
<li>XXth YY Company Illustration Contest ZZZ Prize</li>
<li>XXth YY Company Illustration Contest ZZZ Prize</li>
<li>XXth YY Company Illustration Contest ZZZ Prize</li>
</ul>
<h2>Work History</h2>
<h3>Illustration</h3>
<ul>
<li>"Skills Hack of the Reincarnated One" (XXX) Cover and Illustrations</li>
<li>"The Strongest Sage of the Magic Academy" (XXX) Cover and Illustrations</li>
<li>"Adventures of the Dungeon Explorer" (XXX) Cover and Illustrations</li>
<li>"When I Reincarnated, I Became the Strongest Saint" (XXX) Cover and Illustrations</li>
<li>"The Strongest Adventurer in Online Game" (XXX) Cover and Illustrations</li>
</ul>
<h3>Games</h3>
<ul>
<li>"Magical Kingdom Quest" (XXX) Several character designs</li>
<li>"Monster Madness" (XXX) Several character designs</li>
<li>"Starlight City Showtime" (XXX) Several character designs</li>
<li>"Mysterious Adventure Maze" (XXX) Several character designs</li>
<li>"Animal Adventure Explorers" (XXX) Several character designs</li>
<li>"Wizard Academia Quest" (XXX) Several character designs</li>
</ul>

<aside> ℹ️ It is recommended to use <h2> and <h3> tags as <h1> is used for the page title.

</aside>

Next Step

<aside> 🤯 Having trouble?

Did you encounter any difficulties? Please let me know! You can inform me through the ‘Feedback/Contact’ section on the top page of this document.

</aside>