Landtamic - The best Statamic Starter Kit

2025 UPDATE

We have updated this blog post to include the new features available up to 2025 since its original publication in 2020.

We’ve just released a major upgrade with our new Landtamic Pro.

Landtamic

Landtamic is your gateway to easily creating beautiful, high-performance websites. Designed to work with Statamic, a flat-file CMS, Landtamic offers a huge library of over 100 customizable sets, letting you make thousands of different website designs. Whether you want to make a stylish landing page, a detailed blog, a personal portfolio, or a complete SaaS platform, Landtamic makes the process simple. Just add your logo, choose your design elements, and add your content. Making a unique website with Landtamic is as simple and fun as drinking your morning coffee.

Why Landtamic?

We’ve put in a lot of effort to build a fully dynamic Starter Kit, so you don’t have to change any code. Just use the control panel to build your website and modify the content.

Our design elements are well-tested to make sure they work well on different screen sizes, making the user experience better on all devices. Also, by changing the main color scheme, you can create a range of visual styles, ensuring that your website won’t just work well but also look great.

Discover Landtamic on the Statamic Marketplace and transform your web presence today.

Features of Landtamic

• Flexible Design Sets: Choose from over 100 design sets to create a unique look for your site.

• Tailwind Customization: Easily change your site’s look with the power of Tailwind CSS.

• Ready-Made Components: Use pre-built Antlers components for buttons, headings, and more to speed up your design process.

• Intuitive Page Builder: Build your entire website using the control panel (CP).

• Effortless Navigation: Create custom navigations easily with options for buttons, social media, and other variations.

• Flexible Footer Builder: Design a footer that fits your site, from minimalistic copyright statements to complex footer menus.

• Fully-Styled Contact Form: Engage with your audience through a beautifully styled contact form.

• SEO Optimization: Landtamic is SEO-ready to help your site reach its audience effectively.

• Favicon and Sitemap Setup: Manage your site’s favicons and sitemap configurations with ease.

• Taxonomy Management: Organize your blog posts with a solid taxonomy system for categories.

• Rapid Loading Speeds: Enjoy fast loading times, improving user retention and satisfaction.

• Responsive Images: Implement responsive images so visual content looks great on any device.

• Icon Integration: Access a selection of Unicons icons to add visual flair to your site.

• Author Profiles: Feature single or multiple authors with extended profiles.

• Tailwind Plugins: Use Tailwind Typography and Forms for a consistent design language.

• Alpine.js: Enhance site interactivity with lightweight Alpine.js scripts.

• Installation Flexibility: Install Landtamic through the Statamic CLI Tool or directly into an existing site.

Installation and Configuration Made Simple

Starting with Landtamic is easy. Follow the Starter Kit installation instructions, making sure you have Statamic v5 or higher. Whether you’re installing Landtamic into an existing site or using the Statamic CLI Tool, the process is easy.

Installing into an existing site

php please starter-kit:install lucky-media/landtamic

Installing via the Statamic CLI Tool

If you have Statamic’s CLI Tool installed, you can create a new Statamic installation with the Landtamic Starter Kit in one line:

statamic new my-site lucky-media/landtamic

Configuration

Once installed, Landtamic is ready with just a little setup needed. The CP is where you make all changes, and we make sure it stays compatible with future Statamic updates.

Content

Landtamic comes with sample landing pages and posts to show you what’s possible. Everything is customizable, from deleting defaults to changing components as you like. There’s a wide range of components, each with several design options, for great customization.

Besides these, you have many ready-made components for building your website. Each component has about 5 to 7 different design options to choose from. Here’s a look at what you can make:

• Hero Section (7 sets)

• Page Header (5 sets)

• Logo Cloud (7 sets)

• Testimonial (7 sets)

• Stats (7 sets)

• Steps (7 sets)

• Multiple Features (7 sets)

• Single Feature (7 sets)

• Multiple Projects (7 sets)

• Single Project (7 sets)

• Call To Action (7 sets)

• Pricing (5 sets)

• Team Section (5 sets)

• Contact Section (3 sets)

• Header (More than 7 variants possible)

• Footer (More than 10 variants possible)

• Single Post View

• 404 Page ( Can be configured from CP to different variants )

• Standard Text from Tailwind Typography

Authors

By default we have modified the Users blueprint to include some extra fields for the Authors such as Position, Biography etc. For each post if you select an author it will be displayed in the end of the post.

Icons and Images

For all the sections where there is an icon there is an image field that allows you to select an icon. We shipped some icons on the assets/icons folder in case you want to use pre-made icons that work with Landtamic.

For demo purposes we included images from unDraw and Freepik, if you decide to use them for Production make sure to give correct attribution in the Footer.

Globals

We have grouped the globals into ’Theme’ where you can modify the content to fit your needs:

General

• Logo Normal - Normal light version of the logo (preferably SVG).

• Logo Dark - Dark version of the logo (preferably SVG).

• Logo Mark - Used as a divider or overlay in footers, it is recommended here to upload a short version of the logo ( preferably SVG ).

Menu

• Logo Position - Should the logo be displayed in the left side or center.

• Menu Position - Select the position of the menu items, right side is default but you can also set it to left or center.

• Show Links - In this section you can add different links that will be display along the Logo and Menu. The position of these items will depend on the alignment of the logo/menu

  • Button: Select from the default Button that comes with Landtamic, think of these buttons as Login / Signup or CTA Buttons.

  • Image Link: Add an image to act as a Button in the header, common examples links to Apple Store / Play Store, podcasts etc.

  • Social Media: Toggle this to enable social media links in the header.

Footer - is completely customized based on the options that you select.

• Has Menu - If enabled, you will have the option to select a menu for the Footer. We have already included an example menu footer so you can have an idea on how it works.

• Custom Columns - If you want to add a custom column to the Menu, here you have the ability to have 3 sets:

  • Image - Can be used to upload the brand logo.

  • Text - Can be used as a copyright text or any other disclaimers that you might have.

  • Social Media - Display a list of Social Media links.

• Logo Overlay: If enabled will display a logo overlay on the footer menu. The logo used here is set on the Global -> Theme -> General -> Logo Mark. You can also adjust the position to left or right side of the footer menu.

• Footer Copyright - If has_menu is disabled you still have the option to include a small footer, suitable for small websites / landing pages. Here you have the following options:

  • Footer Divider - Divider is useful when you have the footer menu enabled and you want to distinguish the small footer with the footer menu. Here you have 3 options: Contained ( inside the container ), Full Width and Logo Divider.

  • Footer Items: A replicator field to add / remove footer items based on your preference. Copyright - To add a copyright text. Image - If you want an image / preferably logo to be displayed in the footer. Menu - Suitable to display a small horizontal menu in the footer for small websites / landing pages.

Favicon

We have created all the required favicon versions, but with our Landtamic logo. Feel free to add your own. The favicon’s were generated using Real Favicon Generator, note that you don’t need to include site.webmanifest as we generate this on the fly with Statamic.

404 Page - Configure the default settings for the 404 Page:

• 404 Title - Set the Title

• 404 Description - Description used under the title.

• 404 Image - We have included a default image, which can be aligned to either left or right side.

• 404 Button - Optionally include a button which will send the user to a different page.

Sitemap

• Sitemap collections - Choose which collection should be included in your sitemap (default is set for Pages and Posts).

• Change Frequency - How often do you want to instruct search engines to crawl?

• Priority - It lets the search engines know which pages you deem most important for the crawlers.

SEO

When you edit a page on the control panel, you can see that each page has the SEO section in the entry editor. For SEO we use our own SEO called LuckySEO which you can read about it below this section.

• Meta

  • Title - It can be used to determine the title used on search engine results pages.

  • Title prepend - Prepends to title the text set in General SEO settings.

  • Title append - Appends to title the text set in General SEO settings.

  • Meta Description - It can be used to determine the text used under the title on search engine results pages. If empty, search engines will automatically generate this text.

  • Canonical - By default it will be set to the page url.

• Social

  • Open Graph Title

  • Open Graph Description

  • Twitter Title

  • Twitter Description

  • OG Image - If not set, the general image will be used.

LuckySEO

By default, we use our own LuckySEO which comes together with the kit. You can control your SEO general settings here. Make sure to read the instructions on each input. These settings can be overridden on specific entries/pages as shown on the SEO section above.

• Meta

  • Title - While the title tag doesn’t start with "meta," it is in the header and contains information that's very important to SEO. You should always have a unique title tag on every page that describes the page.

  • Prepend on Title - This will be PREPENDED to all of the titles.

  • Append on Title - This will be APPENDED to all of the titles.

  • Meta Description - It is used for one major purpose: to describe the page to searchers as they read through the SERPs. Can be overridden on pages, if left blank, search engines will generate their own content for this field.

• Social

  • Image - Use your logo or any other branded image for the rest of your pages.

  • Display Open Graph tags - Open Graph meta tags are snippets of code that control how URLs are displayed when shared on social media.

  • Site name

  • Title - Keep it short to prevent overflow. 40 characters for mobile and 60 for desktop is roughly the sweet spot. Use the raw title.

  • Description - General Description, can be overridden on specific pages. Complement the title to make the snippet as appealing and click-worthy as possible. Copy your meta description here if it makes sense. Keep it short and sweet. Facebook recommends 2–4 sentences, but that often truncates.

  • Display Twitter Tags - Title, Handle and Description

Styling

The design of Landtamic is done entirely with TailwindCSS. We have added many different colors on the Tailwind Config file and you can change the primary colors to make a different color combination for your website.

• Configuration of TailwindCSS

  • Edit the config tailwind.config.js

  • Font Family - default is sans: Manrope.

  • Colors - primary, secondary, info color names, because it makes it easier to apply different colors.

Fonts

We use Font Source for offline fonts to score better points on Google Lighthouse. Working with them is easy, just go to their website and search for your desired font, use npm to install it and then include it in the site.js file.

More info on the official documentation of Font Source.

Compiling Assets

By default we make use of Laravel Mix to compile all the assets. Make sure to run the following commands after installing the starter-kit.

• npm install - to install all the required dependencies.

• npm run dev - to run in development mode.

• npm run watch - to run in development with hot reload.

Conclusion

Landtamic was brought to you by the lovely team at Lucky Media. We are a digital agency focused on professional, innovative, user-oriented web design & development. If you have any project in mind, feel free to contact us.

Last but not least thanks to the creators/contributors of the following packages which made Landtamic a reality:

• Statamic CMS

• Tailwind CSS

• Alpine.js

• SEOtamic

Bring Your Ideas to Life 🚀

Kickstart Your Statamic Project with the #1 Statamic Agency

Are you planning a new Statamic project or thinking about migrating your WordPress site to Statamic? Learn more about our expertise as a renowned Statamic development agency.