Project Details Element
The Project Details Element shows the key facts of a portfolio project: its skills, categories and tags, the project link, the copyright link and the author. It is a Layout Builder element: you place it in a Layout Builder section for single portfolio items (Tirenoa > Layouts), and it fills in the details of the project being viewed automatically.
It saves you from building a details box by hand for every project. Each detail appears only when the project actually has it, so the box stays tidy for projects with fewer details, and the same layout section works for your whole portfolio.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Project Details Element
Add the Project Details Element to a column of a single portfolio layout section, typically next to or below the project content. There is nothing to fill in: the element reads the project’s Portfolio Skills, Portfolio Categories and Portfolio Tags, and the project URL and copyright link entered in the project’s own options.
On the Design tab, Enable Heading shows or hides the “Project Details” heading above the list, and HTML Heading Tag chooses its tag. Show Author adds a “By:” line with a link to the author’s posts. Use Margin to set the space around the element.
The element renders only on portfolio items; on other post types it outputs nothing. The project URL and copyright lines appear only when both the link and its text are filled in for the project, and whether these links open in a new tab follows the portfolio link setting in Global Options. Each detail label (Skills Needed, Categories, Tags, Project URL, Copyright, By) is an H4 heading.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Enable Heading | Turn on if you want to display default heading. |
| HTML Heading Tag | Choose HTML tag of the heading, either div, p or the heading tag, h1-h6. |
| Show Author | Choose to show or hide the author in the Project Details. |
| Margin | In pixels or percentage, for example 10px or 10%. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Pick the HTML Heading Tag to fit the page structure: if the project title is the H1 and the content uses H2 sections, an H3 heading for the details box keeps the order correct.
- Fill in both the project URL and its link text in the project options; with only one of them the line is not shown.
- Turn off Show Author on sites where all projects are published by the same account, since the line then adds little for visitors.
- Assign skills, categories and tags consistently across projects so the details box looks the same on every project page.