Illustfolio Lumina - The Portfolio Site Template for Illustrators
Let's proceed with customizing the theme!
It's best to save your work frequently as you go.
Set the overall appearance.
| Option Name | Description |
|---|---|
| Title | * Required |
| The name of your blog. |
Example: John’s Portfolio | | Description | Blog description within Tumblr services (including mobile app). It is not displayed in Illustfolio Lumina, but I recommend setting it up as it will look better when displayed within Tumblr.
Example: Illustrator John Smith’s portfolio site | | Header Image | Header image within Tumblr services (including mobile app). It is not displayed in Illustfolio Lumina, but I recommend setting it up as it will look better when displayed within Tumblr. It will also be used as the image when the homepage is shared on social media.
2048 x 1152px (16:9 aspect ratio) with a file size of less than 10MB is recommended. | | Profile Picture | Profile picture. Displayed in the header and footer. | | Profile Picture Shape | Not supported currently. | | Title Font | Change the font of the "Name".
You can also use fonts that are not available on Tumblr. | | Background Color | Change the background color of the header. If the text is hard to read with a dark background color, enable the theme option "Invert Header Text Color". | | Title Color | Change the text color of the "Name". | | Accent Color | Change the accent color (e.g., link text color). | | Display Header Image | Not supported currently. | | Enlarge Header Image | Not supported currently. | | Display Profile Picture | Not supported currently. | | Display Title | Not supported currently. | | Display Description | Not supported currently. |
| Option Name | Description |
|---|---|
| Title | The name of your blog displayed when shared on SNS. |
Example: John’s Portfolio | | Description | The description of your blog displayed when shared on SNS.
Example: Illustrator John Smith’s portfolio site |
| Option Name | Description |
|---|---|
| Cover | * Required |
| The cover image (the large image displayed in the header). |
1024 x 1024px square image with a file size of less than 1MB is recommended. *Larger file sizes may slow down page loading times. | | Cover 2, 3 | Specify the second and third images as cover images and display them in a slideshow.
1024 x 1024px square image with a file size of less than 1MB is recommended. *Larger file sizes may slow down page loading times. | | Body | Specify the font for the body text.
Default: Favorit
You can also use fonts that are not available on Tumblr. | | Gallery Layout | Choose how to display the gallery.
Masonry: Display illustrations without cropping. Grid: Align illustrations in a square format. | | Corner Style | Select whether to round the corners of images and buttons.
Square: No rounded corners. Rounded: Rounded corners. | | Cover SIze | Select the display size for the cover image.
Square: Displays the image in a square shape. (Default) Portrait: Displays the image larger in both width and height compared to Square. Landscape: Displays the image stretched to the full width of the browser. Full: Displays the image stretched to the full width and height of the browser.
Default: Enabled | | Enable Infinite Scroll | Enable infinite scroll. Automatically loads the next page when you scroll to the bottom of the screen. Recommended to enable.
Default: Enabled | | Enable Quick Preview | Enable Quick Preview. You can quickly check the post directly on the homepage by clicking on a thumbnail.
Default: Enabled | | Invert Header Text Color | Invert the header text color (to white). Enable if the text is hard to read with a dark background color.
Default: Disabled | | Show Illustfolio Lumina Branding | A small “Made with Illustfolio Lumina” label will be displayed in the footer. Displaying it is entirely optional, but enabling it would make the creator very happy.
Default: Enabled |
Set up the profile section.
| Option Name | Description |
|---|---|
| Position | Enter your job title or position. |
Example: Illustrator | | Name | • Required Enter your name.
Example: John Smith |
| Biography | Enter your self-introduction.
There is no character limit, but around 150 characters is well-balanced and recommended. You can use the <br> tag for line breaks.
Example:
Freelance illustrator from ZZ Prefecture.<br>
Responsible for character design for smartphone games, magazine illustrations, light novel illustrations, etc. Skilled in drawing unique characters and captivating scenes.<br>
Winner of the ZZZ Award in the XXth YY Company Illustration Contest.<br>
Favorite genres are "AAA", "BBB", and "CCC". |
Set up the social accounts section.
| Option Name | Description |
|---|---|
| X URL | Enter to display a link to your X account. |
Example: https://x.com/example | | Instagram URL | Enter to display a link to your Instagram account.
Example: https://instagram.com/example | | Pixiv URL | Enter to display a link to your pixiv account.
Example: https://pixiv.net/users/example | | Bluesky URL | Enter to display a link to your Bluesky account.
Example: https://bsky.app/profile/example | | Threads URL | Enter to display a link to your Threads account.
Example: https://threads.net/example | | Facebook URL | Enter to display a link to your Facebook account.
Example: https://facebook.com/example | | YouTube URL | Enter to display a link to your YouTube channel.
Example: https://youtube.com/channel/example | | Website URL | Enter to display a link to your website.
Example: https://example.com |
Set up the CTA buttons. You can display up to two buttons.
<aside> ℹ️ CTA buttons are something that prompts visitors to take some action. Recommended uses include guiding visitors to a detailed self-introduction page or a contact page.
</aside>
| Option Name | Description |
|---|---|
| CTA Button 1 Label | Enter the label (text) for the first button displayed in the header. |
| For more details, please see “Creating Pages.” |
Example: About | | CTA Button 1 Path | Enter the link destination for the first button. For more details, please see “Creating Pages.”
Example: about | | CTA Button 2 Label | Enter the label (text) for the second button displayed in the header. For more details, please see “Creating Pages.”
Example: Contact | | CTA Button 2 Path | Enter the link destination for the second button. For more details, please see “Creating Pages.”
Example: contact |
Set up the category navigation (a function that allows you to display works by category).
This is useful for organizing illustrations and also has the benefit of showcasing what types of illustrations you can create.
<aside> ℹ️ This function categorizes based on the tags attached to the posts. If you have not tagged your posts, refer to "Posting Works" and start by tagging your posts.
</aside>
| Option Name | Description |
|---|---|
| Category 1 ~ 10 Label | Enter the labels (text) for the category navigation. You can enter up to 10. |
Example: Original Character Design Fanart … | | Category 1 ~ 10 Tag | Enter the tags you want to associate with the "Category 1 ~ 10 Label". Only one tag can be associated with each category.
Example: Original Character Design Fanart … |
To prevent mishaps, make sure to thoroughly check the operation. Use the following checklist for confirmation.
<aside> ℹ️ The key to checking is to "actually click on links and buttons" and "check on both PC and smartphone".
</aside>
<aside> ✅ Checklist
<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>