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. | | Title Logo | Replaces the title with an image.
Transparent PNG is recommended. Please create the image with the following resolution: Width: Up to 512px Height: 96px
*The displayed image will be scaled down to half its original size in both width and height. | | Body Font | Specify the font for the body text.
Default: Favorit
You can also use fonts that are not available on Tumblr. | | Appearance | Select the appearance.
Light: Displays the interface with a bright appearance. (Default) Dark: Displays the interface with a dark appearance.
** If you select [Dark], it is recommended to set a darker background color for the header. (This can be configured in the [Background Color] option.)* | | 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 Style | Select the display style 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. Full Right: A right-aligned version of the "Full" style. Choose this to best fit the composition of your background image.
** Both Landscape and Full display modes may crop a portion of the image. I recommend checking the display on both PC and smartphone.* To reduce the cropped areas, create cover images in the following sizes (though cropping cannot be completely avoided): Landscape: 1200 x 400px Full / Full Right: 1200 x 1000px | | Compact Profile | Displays the profile in a more compact layout.
** Enabling this option hides the cover image.*
Default: Disabled | | Hide Tumblr Menu | Hide the Tumblr menu displayed on the site. Recommended if you want a cleaner display.
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 |
<aside> ℹ️ Logo Image Specifications The maximum display area for the “Title Logo” is as shown in the image below.
</aside>
<aside> ℹ️
Cover Image Layout Options The available layouts for the “Cover Style” setting are shown below.
Note: "Full Right" is the right-aligned version of the "Full" design.
</aside>
Set up the profile section.
| Option Name | Description |
|---|---|
| Position | Enter your job title or position. |
Example: Illustrator & Character Designer | | Name | • Required Enter your name.
Example: John Smith | | Name Subtitle | Enter supplementary text under your name. Use it for things like your social media handle, other aliases or taglines.
Example: @johnsmith(handle), Creating worlds (tagline), .. | | Biography | Enter your self-introduction. There is no character limit, but around 150 characters is well-balanced and recommended.
Note: Do not press the Enter key to create a line break, as this will cause display errors. Please use the <br> tag instead.
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.