Published:March 11, 2022
Updated: November 28, 2023
Views: 752
Landtamic is the all-in-one solution for building fast and creative websites with Statamic. It has more than 100 sets that you can use to build thousands of different website designs all looking different from each other. You may build an elegant landing page, a complex blog, a personal website or a SaaS. Add your logo, choose your preferred design components and write some content. That's it, as simple as that. You can build your website while drinking your morning coffee.
We have put all our efforts to build an entirely dynamic Starter Kit, so that you don't have to make any changes to the code. Just use the control panel to build your website and modify the content. We have thoroughly tested all the sets and other design elements to make sure that they adapt to the different screen sizes. Plus, if you do change the primary colors then you can make even more combinations and your websites will look amazing. Landtamic can be found at the Statamic Marketplace.
More than 100 sets
Easy customizable with Tailwind
Component driven approach, ready-made antlers components for Buttons, Headings, etc.
Working page builder to build the entire website from CP.
Navigation Builder, easily create navigations with Buttons / Social Media or any other variation.
Footer Builder, easily create a small footer with copyright or add a footer menu complete with logos, dividers etc.
Working Contact Form with all the fields styled ( text, textarea, asset, radio, checkbox etc )
SEO optimized
Favicon's and Sitemap configuration
Taxonomies for Posts Categories.
Super fast loading time
Responsive images partial.
Unicons used as Icons
Single or Multiple Authors
Breakpoint debugger plugin for Tailwind
Tailwind Typography and Forms
Alpine.js used for interactions
To install Landtamic, simply follow the Starter Kit installation instructions. Note that you will need to be running Statamic 3.2+.
php please starter-kit:install lucky-media/landtamic
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
We have given our best effort to make Landtamic is ready made with everything you need. Simply access the control panel and start making changes. We will make sure that Landtamic runs smoothly with future Statamic updates.
After installing Landtamic, you will see that we have preconfigured the landing page and posts, just so it doesn't feel empty for you. But, you can easily delete or modify everything that we did. The Starter Kit has the following collections: Pages and Posts.
Apart from these, you have many ready made components that can be used for creating your website. Each component has about 5 ~ 7 different variants of design that you can choose from. We have designed the following components:
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
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.
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.
We have grouped the globals into 'Theme' where you can modify the content to fit your needs:
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 ).
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.
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.
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: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 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.
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 a free add-on called Seotamic which you can read about it below this section. Note that for Posts we use a custom ViewModel on App\ViewModels\OgImage.php and we inject it to the Posts collection in order to dynamically add a OG Image based on the Image. If you don't need this feature and you want to set the OG Image manually on each post please remove this View Model.
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
Image - If not set, the general image will be used.
By default we make use of the SEOtamic addon which is installed together with the kit. You can control your SEO general settings here. Make sure to read the instructions on each input. This 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 and Description
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
We use JIT Mode by default.
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..
We use Font Source for offline fonts to score better points on Google Lighthouse. Working with them its easy, just go to their website and search for your desired font, use npm to install it and then include it to the site.js file.
More info on the official documentation of Font Source.
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.
npm run production - to compile assets for production.
Video Tutorial
More color schemes examples
FAQ Section
Knowledge Base
E-Commerce Starter Kit
A separate starter kit that installs additional views for e-commerce on top of Landtamic
Please refer to the issues tab to submit a Bug or a Feature Request.
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
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.
Lucky Media is proud to be recognized as the #1 best Statamic Agency by Clutch, a leading B2B ratings and reviews platform.
At Lucky Media, we offer a range of services including website development, web application development, and mobile apps development. We specialize in Statamic, React Native, Next.js, AI and ML solutions. We also provide staff augmentation and TALL stack development services.
For more insights into our work, check out our case studies on revolutionising lead generation with AI, customized coaching site, healthcare digitization, next-level performance, lead generation and patient journey, WordPress to Statamic migration, and improving user experience. These case studies provide a glimpse into how we tailor our technology choices to meet specific client needs and deliver exceptional results.
Related Posts
Stay up to date
Be updated with all news, products and tips we share!