Arlind Musliu
March 11, 2022 · 10 min read · 795 views
March 11, 2022 · 10 min read · 795 views
Landtamic is your gateway to effortlessly crafting beautiful, high-performance websites. Designed for use with Statamic, a flat-file content management system, Landtamic offers a vast library of over 100 customizable sets, enabling you to create thousands of distinct website designs. Whether you're aiming to establish an elegant landing page, a detailed blog, a personal portfolio, or a full-fledged SaaS platform, Landtamic streamlines the process. Simply add your logo, select your desired design components, and populate your content. Crafting a unique website with Landtamic is as easy and enjoyable as sipping 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.
Our design elements are rigorously tested to ensure they respond seamlessly to various screen sizes, enhancing the user experience across all devices. Furthermore, by altering the primary color scheme, you unlock a spectrum of visual combinations, guaranteeing that your website will not only function flawlessly but also look stunning.
Discover Landtamic on the Statamic Marketplace and transform your web presence today.
Versatile Design Sets: Choose from over 100 design sets to craft a unique look for your site.
Tailwind Customization: Easily tailor your site's aesthetics with the power of Tailwind CSS.
Ready-Made Components: Utilize pre-built antlers components for buttons, headings, and more to accelerate your design process.
Intuitive Page Builder: Seamlessly construct your entire website using the control panel (CP).
Effortless Navigation: Create custom navigations effortlessly with options for buttons, social media, and other variations.
Flexible Footer Builder: Design a footer that suits your site, from minimalistic copyright statements to comprehensive footer menus.
Fully-Styled Contact Form: Engage with your audience through a beautifully styled contact form.
SEO Optimization: Landtamic comes SEO-ready to help your site reach its target audience effectively.
Favicon and Sitemap Setup: Manage your site's favicons and sitemap configurations with ease.
Taxonomy Management: Organize your blog posts with a robust taxonomy system for categories.
Rapid Loading Speeds: Enjoy lightning-fast loading times, enhancing user retention and satisfaction.
Responsive Images: Implement responsive images to ensure 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: Utilize 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.
Getting started with Landtamic is straightforward. Follow the provided Starter Kit installation instructions, ensuring you have Statamic 3.2 or higher. Whether you choose to install Landtamic into an existing site or via the Statamic CLI Tool, the process is streamlined for your convenience.
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
Once installed, Landtamic is ready to go with minimal setup required. The control panel is your central hub for all modifications, and we're committed to ensuring compatibility with future Statamic updates.
Landtamic comes preconfigured with sample landing pages and posts to help you visualize the possibilities. Every aspect is customizable, from deleting the defaults to modifying components to suit your needs. You'll find a diverse array of components, each with several design variants, allowing for unparalleled customization.
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. Here's a glimpse of what you can create:
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.
MetaTitle - 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.
SocialOpen Graph TitleOpen Graph DescriptionTwitter TitleTwitter DescriptionImage - If not set, the general image will be used.
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 TailwindCSSWe use JIT Mode by default.Edit the config tailwind.config.jsFont 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 KitA 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.
Technologies:
Related Posts
Stay up to date
Be updated with all news, products and tips we share!