mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Documentation for Tabler Emails (#2163)
Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>
This commit is contained in:
BG-Software
GitHub
5
.changeset/seven-yaks-pull.md
Normal file
5
.changeset/seven-yaks-pull.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Add documentation for Tabler Emails
|
||||||
14
docs/emails/index.mdx
Normal file
14
docs/emails/index.mdx
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
---
|
||||||
|
title: Tabler Emails
|
||||||
|
seoTitle: Tabler Emails - premium email templates
|
||||||
|
order: 4
|
||||||
|
description: Customizable email templates for over 90 clients and devices.
|
||||||
|
summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. They are compatible with over 90 email clients and devices.
|
||||||
|
seoDescription: Tabler Emails is a collection of 80 premium, customizable HTML templates. They are compatible with over 90 email clients and devices.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Tabler Emails
|
||||||
|
|
||||||
|
*Change below image!*
|
||||||
|
|
||||||
|
|
||||||
29
docs/emails/introduction/compiled-html.mdx
Normal file
29
docs/emails/introduction/compiled-html.mdx
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
---
|
||||||
|
title: Compiled templates
|
||||||
|
order: 2
|
||||||
|
seoTitle: Tabler Emails - How to use the compiled HTML email templates
|
||||||
|
description: Learn how to use the compiled HTML email templates from the Tabler Emails package.
|
||||||
|
summary: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
|
||||||
|
seoDescription: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
|
||||||
|
---
|
||||||
|
|
||||||
|
## Compiled version of the template
|
||||||
|
|
||||||
|
If you only want to change a content - text or images - of the email template, you can just use the compiled HTML files - `compiled.html`. They are ready to use, and you need only a basic knowledge of HTML to modify them.
|
||||||
|
|
||||||
|
## How to modify the compiled HTML files
|
||||||
|
|
||||||
|
1. Open the `compiled.html` file in your favorite code editor.
|
||||||
|
2. Find the content you want to change inside the `<body>` element.
|
||||||
|
3. Modify the content as needed:
|
||||||
|
* Change the text, which is mostly placed inside the `<p>` or `<h1>` tags.
|
||||||
|
* Change the images by replacing the `src` attribute of the `<img>` tag.
|
||||||
|
* Change the links by replacing the `href` attribute of the `<a>` tag.
|
||||||
|
* Remove the HTML elements you don't need, but only if you're sure that they are not necessary for the email template to work correctly.
|
||||||
|
4. If you changed the images, make sure to replace them in the `assets/` folder.
|
||||||
|
5. Remove all the images you don't use from `assets/` to reduce the size of the email template.
|
||||||
|
|
||||||
|
## How to use the compiled HTML files
|
||||||
|
|
||||||
|
After changing the templates as needed, you can use them in your email campaigns.
|
||||||
|
The `compiled.html` file with the `assets/` folder should be sent to your email marketing tool, like Mailchimp, SendGrid, or any other.
|
||||||
63
docs/emails/introduction/contents.mdx
Normal file
63
docs/emails/introduction/contents.mdx
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
---
|
||||||
|
title: Contents
|
||||||
|
order: 1
|
||||||
|
seoTitle: Tabler Emails - Content of the package
|
||||||
|
description: Content of the Tabler Emails package.
|
||||||
|
summary: The Tabler Emails package contains files which can be used by everyone, even without great knowledge of HTML.
|
||||||
|
seoDescription: todo
|
||||||
|
---
|
||||||
|
|
||||||
|
## Folder structure
|
||||||
|
|
||||||
|
Once you unzip the downloaded file, you will see the following structure:
|
||||||
|
|
||||||
|
```
|
||||||
|
tabler-emails/
|
||||||
|
├── emails/
|
||||||
|
| ├── absence/
|
||||||
|
| | ├── assets/
|
||||||
|
| | ├── compiled.html
|
||||||
|
| | ├── compiled-dark.html
|
||||||
|
| | ├── source.html
|
||||||
|
| | ├── source-dark.html
|
||||||
|
| | ├── screenshot.jpg
|
||||||
|
| | ├── screenshot-dark.jpg
|
||||||
|
| | ├── screenshot-mobile.jpg
|
||||||
|
| | └── screenshot-mobile-dark.jpg
|
||||||
|
| ├── access-token/
|
||||||
|
| ├── account-deleted/
|
||||||
|
| ├── .../
|
||||||
|
| ├── welcome/
|
||||||
|
| └── whishlist/
|
||||||
|
├── images/
|
||||||
|
| ├── chart-donuts/
|
||||||
|
| ├── icons/
|
||||||
|
| ├── illustrations/
|
||||||
|
| └── overlays/
|
||||||
|
├── license.txt
|
||||||
|
└── readme.html
|
||||||
|
```
|
||||||
|
|
||||||
|
## Understanding the file structure in Tabler Emails
|
||||||
|
|
||||||
|
The **Tabler Emails** package is organized into a clear and efficient folder structure to streamline the use of its assets. Below is a breakdown of its key directories:
|
||||||
|
|
||||||
|
### 1. Email Templates: `emails/`
|
||||||
|
This folder contains <EmailsCount /> email subfolders, each with a specific template. Each email folder contains the following files:
|
||||||
|
* Compiled HTML files for light and dark themes. Read more about its usage in the [Compiled HTML](/docs/emails/compiled-html) section.
|
||||||
|
* Source HTML files for light and dark themes. Find more information in the [Source HTML](/docs/emails/source-html) section.
|
||||||
|
* Screenshot images for desktop and mobile views.
|
||||||
|
* Assets folder with images used in the email template and the CSS file with styles
|
||||||
|
|
||||||
|
### 2. Images: `images/`
|
||||||
|
It contains 4 subfolders with images used across the different email templates:
|
||||||
|
* `chart-donuts/`: Images of donut charts with different fill.
|
||||||
|
* `icons/`: [Tabler Icons](/icons) used in the email templates, in PNG version.
|
||||||
|
* `illustrations/`: PNG versions of [Tabler Illustrations](/illustrations) for light and dark themes.
|
||||||
|
* `overlays/`: overlay images used in the email templates.
|
||||||
|
|
||||||
|
### 3. License: `license.txt`
|
||||||
|
This file contains the license information for the Tabler Emails package.
|
||||||
|
|
||||||
|
### 4. Readme: `readme.html`
|
||||||
|
This file with the main information about the Tabler Emails package. It contains a brief description of the package and instructions on how to use it.
|
||||||
9
docs/emails/introduction/index.mdx
Normal file
9
docs/emails/introduction/index.mdx
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
---
|
||||||
|
title: Introduction
|
||||||
|
seoTitle: Introduction to Tabler Emails
|
||||||
|
description: Base information about Tabler Emails package.
|
||||||
|
summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. They are compatible with over 90 email clients and devices.
|
||||||
|
seoDescription: Tabler Emails is a collection of 80 premium, customizable HTML templates. They are compatible with over 90 email clients and devices.
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
26
docs/emails/introduction/source-html.mdx
Normal file
26
docs/emails/introduction/source-html.mdx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
---
|
||||||
|
title: Source templates
|
||||||
|
order: 3
|
||||||
|
seoTitle: Tabler Emails - How to use the source HTML email templates
|
||||||
|
description: Learn how to use the source HTML email templates from the Tabler Emails package.
|
||||||
|
summary: The source HTML files from the Tabler Emails package needs a bit more work that the compiled ones. Learn how to use them.
|
||||||
|
seoDescription: The source HTML files from the Tabler Emails package needs a bit more work that the compiled ones. Learn how to use them.
|
||||||
|
---
|
||||||
|
|
||||||
|
## Source version of the template
|
||||||
|
|
||||||
|
If you want to make more advanced changes to the email template, you can use the source HTML files - `source.html` combined with the `theme.css` file. They are ready to use, but you need a basic knowledge of HTML and CSS to modify them.
|
||||||
|
|
||||||
|
## How to modify the source HTML files
|
||||||
|
|
||||||
|
1. Open the `source.html` file in your favorite code editor.
|
||||||
|
2. Open the `theme.css` file from `assets/`* directory in the same editor.
|
||||||
|
3. Change all the content and styles as needed.
|
||||||
|
4. Use a selected tool to inline the CSS styles into the HTML file. There are a lot of options, like:
|
||||||
|
* Online tools like [Juice](https://automattic.github.io/juice/) or [Mailchimp CSS Inliner Tool](https://templates.mailchimp.com/resources/inline-css/).
|
||||||
|
* NPM tools like [juice](https://www.npmjs.com/package/juice) or [inline-css](https://www.npmjs.com/package/inline-css).
|
||||||
|
5. Save the output HTML file.
|
||||||
|
|
||||||
|
## How to use the source HTML files
|
||||||
|
|
||||||
|
To use the modified HTML template send the output file with the `assets/` folder to your email marketing tool.
|
||||||
@@ -11,6 +11,6 @@ Find all the guides and resources you need to develop with Tabler and our other
|
|||||||
<Card title="UI Components" href="/docs/ui" icon="paint">Free and open source web application UI kit based on Bootstrap</Card>
|
<Card title="UI Components" href="/docs/ui" icon="paint">Free and open source web application UI kit based on Bootstrap</Card>
|
||||||
<Card title="Icons" href="/docs/icons" icon="ghost"><IconsCount /> pixel-perfect icons for web design and development</Card>
|
<Card title="Icons" href="/docs/icons" icon="ghost"><IconsCount /> pixel-perfect icons for web design and development</Card>
|
||||||
<Card title="Illustrations" href="/docs/illustrations" icon="brand-figma"><IllustrationsCount /> customizable SVG illustrations for your web project</Card>
|
<Card title="Illustrations" href="/docs/illustrations" icon="brand-figma"><IllustrationsCount /> customizable SVG illustrations for your web project</Card>
|
||||||
<Card title="Email Templates" icon="mail" disabled badge="Coming soon"><EmailsCount /> responsive email templates ready to use in your marketing campaigns</Card>
|
<Card title="Email Templates" href="/docs/emails" icon="mail"><EmailsCount /> responsive email templates ready to use in your marketing campaigns</Card>
|
||||||
<Card title="Avatars" icon="user-circle" disabled badge="Coming soon">Package of over 100 avatars for your next web project</Card>
|
<Card title="Avatars" icon="user-circle" disabled badge="Comming soon">Package of over 100 avatars for your next web project</Card>
|
||||||
</Cards>
|
</Cards>
|
||||||
Reference in New Issue
Block a user