Byline is a bento grid landing page template built for investigative journalists who need their digital presence to work as hard as their reporting. It combines a cinematic full-screen video header, a scroll-assembled bento grid, and a segmented newsletter call to action into one visually engaging, press-ready page that speaks directly to editors, podcast producers, and fellowship committees.
by Rocket studio
Loading preview…
Quick summary
Byline is the newsroom bold longform journalist blog landing page template designed for reporters who file from conflict zones and publish investigations that matter. The page feels like a freshly printed broadsheet, bold headlines, ink-black type, newsprint cream backgrounds, and electric indigo accents that reward a reader's curiosity at every hover. It is built to earn trust before it ever asks for anything.
Who this template is for
This template is built for a specific kind of journalist. Not a generalist blogger, not a lifestyle writer. The kind who carries a press lanyard and a notebook full of shorthand into places most people never go.
Investigative reporters who need a digital newsroom that matches the authority of their byline and showcases longform work to editors at national mastheads.
Freelance stringers and correspondents looking to convert a press page visit into a commission, a fellowship application, or a podcast guest slot.
Journalism fellows and grant applicants who need a visually appealing, credibility-first portfolio that speaks to committee members on desktop screens.
What problem this template solves
Most news websites built for individual journalists look like WordPress blogs from a decade ago. They bury the best work, front-load navigation nobody uses, and ask for an email before they have earned any trust. A journalist's landing page should do the opposite.
Credibility before the ask: The template loads three full tiles of published work, an embedded field audio clip, a video interview embed, and a masthead logo wall before the newsletter call to action ever enters the viewport.
Clarity for decision-makers: Editors and fellowship committees need to scan fast. A clear visual hierarchy surfaces the strongest work immediately, with headline, dateline, and reading time visible at a glance.
A press page that actually converts: Rather than a static list of press releases and contact details, this template functions as a living online newsroom that segments readers and guides them toward the work.
What you get with this template
Every section in this template is designed to solve a specific problem in investigative journalist website design. Nothing is decorative for its own sake. Every web design element earns its place on the page.
Theme
Ink & Paper
Creative direction
Cinematic Sequence
Color system
Electric Indigo
Style
Bento Grid
Direction
Content/Resource
Page Sections
Cinematic Full-screen Video Header
Scroll-assembled Bento Grid Layout
Sticky Indigo Call-to-action Bar
Segmented Newsletter Capture Tile
Masthead Logo Wall and Accolades Row
Deep Archive and Video Interview Embed
Related questions
Do I need coding knowledge to use this template?
Can I use this template as a press page for media inquiries?
Is this template suitable for covering international news?
How does the newsletter toggle work?
Does the template support a dark mode option?
A full-screen video header with a desaturated handheld footage loop, a massive serif surname centered in the frame, and an animated blinking cursor that makes the name feel like it is still being typed.
A scroll-assembled bento grid that reveals tiles one by one as the visitor scrolls, mimicking a newspaper being laid out on a light table, with a latest investigation tile, a field audio tile, a photo essay tile, and a masthead logo row.
A sticky indigo call-to-action bar that appears after the first scroll fold and stays visible throughout, with a segmented newsletter capture tile that lets readers choose between investigations and dispatches.
Feature list
This template packs a focused set of capabilities drawn directly from the brief. Each one is built to serve news website design that is honest, purposeful, and visually engaging.
Full-Screen Cinematic Video Header
The website's header runs a loop of handheld field footage, a keyboard in a dim hotel room, a press lanyard against a flak jacket, a notebook filling with shorthand under UN briefing lights. Every clip is desaturated except for an electric indigo wash that unifies the footage into one mood. A massive Fraunces serif surname sits centered and still against the moving image, with a blinking cursor beside it. This is how bold typography makes a first impression without saying a word.
Scroll-Assembled Bento Grid
As the visitor scrolls, bento tiles assemble with a 200ms staggered fade, never bouncing or overshooting. The rhythm mirrors a film edit: establishing shot, close-up, wide, close-up. Each tile serves a distinct content role, latest investigation with headline and reading time, field audio clip, horizontal parallax photo essay, and a deeper archive row of awards and past series. Visual signals of freshness like datelines and reading time markers help users identify the newest news items instantly.
Sticky Call-to-Action Bar
After the first scroll fold, a bold indigo bar locks to the top of the screen with a single primary action: "Read the Latest Investigation." This contrasting, always-visible button ensures the most important action is never more than one click away, no matter how deep a visitor scrolls. It is the no-nonsense conversion path that keeps users engaged without interrupting the editorial experience.
Segmented Newsletter Capture Tile
The bottom-right bento tile holds a minimal email capture form with a single toggle: "Send me investigations" or "Send me dispatches." This allows the journalist to segment readers by appetite from day one, building two distinct audience lists without any additional tools. It is one of the key elements that turns a press page into a genuine content management and reader engagement surface.
Masthead Logo Wall and Media Mentions Row
Before the newsletter tile ever appears, a full row of publication logos loads inside the grid. Displaying logos of reputable publications validates journalism instantly. This media mentions row functions like a press page trust signal, establishing credibility with editors and fellowship committees who need visual proof of placement history before they reach out.
Deep Archive and Video Interview Embed
Deeper in the grid, a video interview embed and an awards and accolades row shift the indigo saturation slightly warmer, pulling the visitor from breaking news into archival depth. This section organizes content by gravity rather than just recency, past series, origin-story profiles, and recognized work all surface in a way that keeps readers engaged long after the hero has scrolled out of view.
Page sections overview
Section
Purpose
Full-Screen Video Header
Cinematic identity statement with animated surname and blinking cursor
Latest Investigation Tile
Surfaces newest longform piece with headline, dateline, and reading time
Field Audio Tile
Embedded audio clip from a field recording adds multimedia content depth
Photo Essay Tile
Horizontal parallax on hover creates an interactive content moment
Masthead Logo Row
Media mentions wall establishes trust before any call to action
Deep Archive Row
Video interview embed plus awards and accolades organize content by gravity
Sticky call to action Bar
Indigo bar anchors primary call to action across all scroll depths
Newsletter Capture Tile
Email form with investigation/dispatch toggle segments reader lists
Footer
Horizontal flow footer with contact details and social links
Design & branding system
The Ink and Paper theme gives this template its editorial authority. The color system draws from the physical world of print journalism and pushes it into a digital pulse. Every palette choice is intentional, and every typographic decision supports readability at depth.
Color palette: Newsprint cream (#F5F0E8) dominates the background like an endless scroll of paper stock. Press black (#0D0D12) anchors body type. Electric indigo (#4B0082) leads headlines and bylines. Sharp highlight violet (#7C3AED) fires only on hover states and pull quotes, rewarding curiosity without distracting from the content.
Typography: Fraunces serif handles all headlines and the hero surname, bringing a broadsheet weight to the digital screen. DM Sans handles body copy and user interface elements, keeping the reading experience clean and the brand identity coherent.
Motion and pacing: Animation is restrained by design. Tiles fade up with a 200ms stagger. The photo essay parallaxes horizontally on hover. The cursor blinks. Nothing bounces or overshoots. The visual hierarchy guides the eye through the page the way a film editor guides attention through a scene.
Mobile & speed optimization
This template is desktop-first by design, built for editors and committee members who review portfolios on large screens. However, it is fully responsive, and the layout adapts cleanly for mobile visitors without losing its editorial character.
Responsive layout: The bento grid collapses gracefully for smaller screens, maintaining a clear content hierarchy and readable type. Responsive design is essential for news websites because readers arrive from every device. Text is set at sizes that meet readability standards on mobile, and touch-friendly interactive elements keep the experience smooth.
Lightweight animation approach: Scroll-linked animations use a minimal JavaScript footprint. Server Components handle static content, and multimedia content like the audio player and video interview embed are loaded efficiently to support fast page performance. Mobile optimization is built in, not bolted on.
Optimized asset delivery: High quality images in the photo essay tile and field footage in the header are structured to load progressively. The goal is to optimize images so that the visual experience lands fast, keeping users engaged rather than watching a spinner.
How this template helps you convert
The conversion architecture in this template is deliberate. Trust is earned in layers. The ask comes last. Every scroll depth is a step in a sequence designed to move a skeptical editor from curious to convinced.
Layer credibility before the call to action: Three tiles of published work, one embedded audio clip, one video interview, and a full masthead logo row all load before the newsletter capture tile enters the viewport. By the time a visitor sees the email form, they have already consumed enough evidence to make a decision. This is how you establish credibility with people who read for a living.
Keep the primary action always visible: The sticky indigo bar anchors the "Read the Latest Investigation" call to action across every scroll position on the page. A prominent, contrasting button for the primary action is always reachable. Reader engagement does not depend on the visitor remembering to scroll back up.
Segment readers from the first touch: The newsletter toggle splits the audience into two lists at the point of capture. This simple form supports meaningful content management without requiring any additional setup. Readers who choose investigations get a different experience than those who choose dispatches, making every future send more relevant and improving long-term reader engagement.
Other information about this template
This template is a single landing page, not a multi-page site. It is designed to function as a complete digital newsroom in one scroll, from the cinematic header to the newsletter footer. Below are additional details that help clarify scope, context, and practical use.
Compared to free templates: Most free templates for journalist portfolio news websites offer generic blog layouts with little visual hierarchy and no press page structure. This template is purpose-built for investigative journalism, with a press page section, media kits awareness, and a visual architecture that reflects the seriousness of the work.
Brand presence on the page: The template is designed for a single byline. It is not a publication-wide news site. Think of it less like a news aggregator and more like a long read in the New York Times magazine or a feature profile in the Los Angeles Times, where one voice commands the entire page. The art newspaper sensibility of ink on paper runs through every design decision.
Content management considerations: Because this is a landing page template, content management is handled through direct editing of the template files. There is no built-in content management system or database. Journalists who need a robust CMS for managing many news posts across several categories should pair this landing page with a headless content solution or keep the page as a curated highlight reel updated manually.
Press page and media kit use: The masthead logo row and accolades tiles serve as a lightweight press page for media inquiries. Journalists can add contact details, downloadable press releases, and media kits to the footer or a dedicated tile without altering the overall layout. The press page function is built into the grid's structure, not an afterthought.
Audience and search visibility: This template is designed for a target audience of editors, podcast producers, and fellowship committees. Structured data can be added to news articles linked from this page to improve search engine visibility and click-through rates. Search visibility benefits from a well-organized landing page that signals authority to both human readers and search engine crawlers. Using structured data alongside this page helps search engines understand the content and context of linked news articles.
Online journalism context: In online journalism, a journalist's personal page is often the first thing a commissioning editor visits. This template treats that visit as a high-stakes editorial moment, not a formality. It is built for the reality that most news websites that belong to individual journalists are judged in under ten seconds by people who have seen hundreds of them. Fast company decisions get made on first impressions. This template makes that impression count.
Interactive content and reader interaction: The audio player, photo essay parallax, and newsletter toggle are the interactive content elements built into the template. Reader interaction is intentional and minimal, so it adds texture without distracting from the longform work. Users engaged by the audio tile are more likely to click through to the full investigation.
Revenue generation context: This template does not include advertising slots or paywall mechanics. Revenue generation for journalists using this template is expected to come through newsletter growth, speaking or podcast guest opportunities, and direct commission inquiries, all of which the template is designed to support through its conversion architecture.
Breaking news and trending topics: The latest investigation tile is the natural home for breaking news or trending topics. Because the tile is the first bento cell the visitor encounters after the hero, it acts as the page's front page. Updating that tile with new news stories keeps the page feeling live even though the overall layout stays static.
