Documentation

Featured Image Styles

The Featured Image Style panel gives you complete control over the “hero” visuals of your portfolio. These settings ensure your project thumbnails are consistently sized, perfectly cropped, and react beautifully when a visitor interacts with them.

• Width & Height: Define the exact footprint of your project images. Adjusting these ensures your grid remains uniform, even if the original source images vary in size.
• Scale Mode:
  • Cover: Fills the entire container by cropping the edges of the image. This is the gold standard for clean, uniform grids.
  • Contain: Shows the entire image without cropping, which may result in letterboxing if the image aspect ratio doesn’t match the container.
  • Fill: Stretches the image to fit the dimensions, which may cause distortion.
• Margin Top & Bottom: Add external white space above or below the image to separate it from titles or other grid elements.
• Border Radius: Use the slider to round the corners of your images. Small values offer a subtle professional touch, while a maximum value can create circular or pill-shaped thumbnails.
• Image Hover Effect: Zoom In animation that trigger when a user moves their cursor over the project.
• Overlay Color: Apply a semi-transparent color tint that appears on hover. This is particularly useful in the With Overlay layout to ensure white text remains readable against light-colored images.

Portfolio Title Styles

• Typography
  • Font Family & Size: Select the typeface and scale that best matches your site’s design system.
  • Font Weight: Control the thickness (e.g., Bold for emphasis or Light for a modern look).
  • Letter Case: Force the labels to Uppercase, Lowercase, or Capitalize without editing the form code.
  • Decoration: Apply styles like Underline or Line-through if needed for specific design cues.
  • Line Height & Letter Spacing: Fine-tune the vertical breathing room and horizontal character density.

Overlay Content Style

Note: This Panel is active if the layout is set to ‘With Overlay’.

• Wrapper Padding: Adjust the inner spacing for a more breathable layout
• Button:
  • Padding: Adjust the inner spacing for a more breathable layout
  • Typography
    • Font Family & Size: Select the typeface and scale that best matches your site’s design system.
    • Font Weight: Control the thickness (e.g., Bold for emphasis or Light for a modern look).
    • Letter Case: Force the labels to Uppercase, Lowercase, or Capitalize without editing the form code.
    • Decoration: Apply styles like Underline or Line-through if needed for specific design cues.
    • Line Height & Letter Spacing: Fine-tune the vertical breathing room and horizontal character density.
• Color:
  • Text Color: Sets the primary color for your project titles and excerpts. If using an overlay, ensure this color provides high contrast against your hover background.
  • Button Default & Hover: Define the color of the text inside the button. A common practice is to use a neutral color for the default state and a brand-specific “pop” color for the hover state.
  • Button Background (Default & Hover): Controls the solid or transparent fill of the button. You can create a “Ghost Button” by setting the default background to transparent and adding a solid color on hover.
  • Button Border Hover: This allows you to change the color of the button’s outline specifically when a user interacts with it, adding an extra layer of tactile feedback.

Portfolio Modal Styles

The Portfolio Modal Styles panel provides deep customization for the popup window that appears when a user clicks a project. This interface uses four navigation buttons to toggle between specific styling categories, ensuring you can polish every detail of the project showcase without a cluttered workspace.

• Padding: Adjust the inner spacing for a more breathable layout
• Typography
  • Font Family & Size: Select the typeface and scale that best matches your site’s design system.
  • Font Weight: Control the thickness (e.g., Bold for emphasis or Light for a modern look).
  • Letter Case: Force the labels to Uppercase, Lowercase, or Capitalize without editing the form code.
  • Decoration: Apply styles like Underline or Line-through if needed for specific design cues.
  • Line Height & Letter Spacing: Fine-tune the vertical breathing room and horizontal character density.
• Color
  • Text: Sets the primary color for the main project description. Choose a color that offers high contrast against your modal background for easy reading.
  • Category: Defines the color of the text inside your project tags or category labels.
  • Category Background: Controls the fill color of the category “pills,” allowing you to create badges that stand out from the rest of the content.
  • Post Title: The color for the main project headline. This is usually the boldest color in your palette to establish a clear visual hierarchy.
  • Field Title: Specifically styles the labels of your metadata (e.g., “Client” or “Year”). Using a more muted tone here helps differentiate labels from the actual data.
  • Field Subtitle: Sets the color for the data values within your metadata fields. This should be distinct from the Field Title to make the information scannable.
  • Link (Default): The base color for any clickable external URLs or links within your project description.
  • Link (Hover): The color a link changes to when a user hovers over it, providing essential interactive feedback.
  • Background: The solid or semi-transparent color of the modal window itself where all the project content sits.
  • Overlay: The color of the “curtain” that covers your website in the background while the modal is open, helping to dim distractions.
  • Close Icon: Defines the color of the “X” button in the corner, ensuring users can clearly see how to exit the project view.

Layout Gallery Styles

The Layout Gallery Style panel provides specific design controls for the interactive elements of the image slider. This interface is organized into three navigation buttons, allowing you to independently style the hover triggers, the exit interface, and the slider navigation to ensure a cohesive visual language across the entire gallery experience.

• Icon Styles: The Icon Styles define the appearance of the trigger that appears when a user hovers over an image in the gallery grid. You can control the Box Width and Box Height to create the icon’s container, while Padding and Icon Size allow you to balance the graphic within that space. For a more polished look, you can add a Border or use the Border Radius slider to transform a standard square container into a smooth circle or a rounded badge, ensuring the “view” prompt matches your site’s UI.
• Typography: The Close Icon settings give you precision control over the “X” button that appears within the image modal. Beyond basic dimensions like Box Width, Box Height, and Icon Size, this section features Vertical and Horizontal Offset sliders. These allow you to nudge the close button into the perfect position—whether you want it tucked into the corner or floating outside the image frame. You can also style the button’s Border and Border Radius to make the exit path unmistakable for the user.
• Gallery Navigation Styles: The Gallery Navigation Styles manage the “Previous” and “Next” arrows used to cycle through your portfolio. Much like the other icons, you can adjust the Box Width, Box Height, and Padding to create a comfortable click target for users. The Border and Border Radius controls allow you to frame these arrows as buttons, while the Icon selector lets you choose the specific arrow style that best fits your design aesthetic, ensuring a seamless browsing flow from one project to the next.
• Color
  • Icon (Default & Hover): Sets the color of the primary “view” icon that appears on the gallery grid. The hover state allows the icon to change color as the user moves their cursor, providing a clear interactive cue.
  • Icon Background (Default & Hover): Controls the fill color of the shape behind the grid icon. You can use a transparent background for a minimal look or a solid color that shifts on hover to make the icon “pop” against the image.
  • Icon Border (Hover): Defines the color of the icon’s outline when active. This adds an extra layer of visual feedback, helping the icon stand out against complex image backgrounds.
  • Close Icon (Default & Hover): Manages the color of the “X” button within the slider. Choosing a high-contrast color ensures that users can always find the exit path effortlessly.
  • Close Icon Background (Default & Hover): Sets the background color of the close button’s container. Styling the hover state helps the button feel more responsive when the user prepares to close the gallery.
  • Close Icon Border (Hover): Controls the border color of the close button during interaction, allowing you to match the styling of your other UI elements.
  • Navigation (Default & Hover): Sets the color of the “Previous” and “Next” arrows. Ensuring these change color on hover makes the navigation process more intuitive for the visitor.
  • Navigation Background (Default & Hover): Controls the color of the buttons housing the navigation arrows. You can use this to create subtle or bold directional triggers at the edges of the slider.
  • Navigation Border (Hover): Adjusts the outline color of the navigation buttons during a hover event, adding a professional, polished finish to the slider interface.
  • Pagination: Sets the color of the dots or numbers that indicate the user’s current position within the image sequence.
  • Overlay: Defines the color and transparency of the backdrop that appears behind the image slider, dimming the rest of your website to minimize distractions.