Histórico da Página
| HTML |
|---|
<style type="text/css">
.cards-container {
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-direction: column;
box-sizing: border-box;
justify-items: center;
}
.card {
width: 100%;
height: auto;
display: flex;
margin: auto auto 20px auto;
box-shadow: 0px 2px 4px #00000029;
border-radius: 10px;
}
.card-image {
object-fit: cover;
width: 43%;
max-width: 420px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.card-image.card-image-full {
width: 100%;
max-width: inherit;
border-radius: 10px;
display: block;
}
.card-text-container {
text-align: left;
padding: 30px;
}
.card-label {
color: orange;
font-weight: bold;
font-size: 13px;
}
#card-title-link {
text-decoration: none;
color: #CB1959;
font-weight: bold;
font-size: 17px;
}
#card-title-link:hover {
text-decoration: underline;
}
.card-desc {
margin: 0 !important;
font-size: 15px;
font-weight: 400;
letter-spacing: 0px;
color: #494440;
}
.card-text-margin-bottom {
margin: 0 0 5px 0 !important;
}
</style>
<section class="cards-container">
<div class="card">
<img
class="card-image card-image-full"
src="https://tdn.totvs.com/download/attachments/66618185/central-ajuda.png"
alt=""
>
</div>
</section> |
Navegue por produto
| HTML |
|---|
<style type="text/css">
.products {
display: flex;
justify-content: center;
flex-wrap: wrap;
word-break: break-word;
}
.product {
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 280px;
padding: 15px;
box-shadow: 0px 2px 4px #00000029;
margin: auto auto 30px auto;
border-radius: 10px;
}
.product-image-container {
height: 160px;
position: relative;
}
.product-image {
height: 70%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.product-title {
text-align: center;
margin: 0 0 10px 0 !important;
}
#product-title-link {
font-weight: bold;
font-size: 15pt;
color: #0897E9;
text-decoration: none;
}
#product-title-link:hover {
text-decoration: underline;
}
.product-desc {
margin: 0 !important;
text-align: center;
font-size: 15px;
letter-spacing: 0px;
color: #494440;
}
</style>
<section class="products">
<div id="product-plataforma" class="product">
<div class="product-image-container">
<img class="product-image" src="https://tdn.totvs.com/download/attachments/66618185/plataforma.png" alt="">
</div>
<h2 class="product-title">
<a id="product-title-link" href="https://tdn.totvs.com/x/hYP4Aw">TOTVS Fluig</a>
</h2>
<p class="product-desc">
Unifique processos, pessoas e sistemas com uma interface fácil de usar e intuitiva.
</p>
</div>
<div id="product-flows" class="product">
<div class="product-image-container">
<img class="product-image" src="https://tdn.totvs.com/download/attachments/66618185/Icon%20flows%20TDN-03.png?api=v2" alt="">
</div>
<h2 class="product-title">
<a id="product-title-link" href="https://tdn.totvs.com/x/oFVzL" >TOTVS Flows</a>
</h2>
<p class="product-desc">
Muito mais produtividade com processos pré-definidos, basta instalar e começar a usar.
</p>
</div>
<div id="product-identity" class="product">
<div class="product-image-container">
<img class="product-image" src="https://tdn.totvs.com/download/attachments/66618185/identity.png" alt="">
</div>
<h2 class="product-title">
<a id="product-title-link" href="https://tdn.totvs.com/x/NnA9I" >TOTVS Identity</a>
</h2>
<p class="product-desc">
Tenha autenticação única para acessar sistemas da empresa com <i>single sign-on</i>.
</p>
</div>
</section> |
Saiba o que há de novo!
| HTML |
|---|
<style type="text/css">
.cards-container {
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-direction: column;
box-sizing: border-box;
justify-items: center;
}
.card {
width: 100%;
height: auto;
display: flex;
margin: auto auto 20px auto;
box-shadow: 0px 2px 4px #00000029;
border-radius: 10px;
}
.card-image {
object-fit: cover;
width: 43%;
max-width: 420px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.card-text-container {
text-align: left;
padding: 30px;
}
.card-label {
color: #FEAC0E;
font-weight: bold;
font-size: 13px;
}
#card-title-link {
text-decoration: none;
color: #0897E9;
font-weight: bold;
font-size: 17px;
}
#card-title-link:hover {
text-decoration: underline;
}
.card-desc {
margin: 0 !important;
font-size: 15px;
font-weight: 400;
letter-spacing: 0px;
color: #494440;
}
.card-text-margin-bottom {
margin: 0 0 5px 0 !important;
}
</style>
<section class="cards-container">
<div class="card">
<img
class="card-image"
src="https://tdn.totvs.com/download/attachments/66618185/Crystal_Mist_1.8.2.png"
alt=""
>
<div class="card-text-container">
<p class="card-label card-text-margin-bottom">TOTVS Fluig</p>
<h2 id="card-title" class="card-text-margin-bottom">
<a href="https://tdn.totvs.com/x/YEv9MQ" id="card-title-link">
Atualização Crystal Mist - 1.8.2
</a>
</h2>
<p class="card-desc">Fique por dentro de todas as novidades da última grande atualização do TOTVS Fluig Plataforma para agregar valor ao seu negócio.
</p>
</div>
</div>
<div class="card">
<img
class="card-image"
src="https://tdn.totvs.com/download/attachments/66618185/home-novo-collab.png"
alt=""
>
<div class="card-text-container">
<p class="card-label card-text-margin-bottom">TOTVS Fluig No-Code</p>
<h2 id="card-title" class="card-text-margin-bottom">
<a href="https://tdn.totvs.com/x/a1qVIQ" id="card-title-link">Novo TOTVS Collab: seu aliado na gestão de equipes e projetos!</a>
</h2>
<p class="card-desc">Gerencie suas equipes presenciais e remotas, acompanhe o andamento dos projetos e tarefas, faça videochamadas, anexe documentos do Google Drive e muito mais.</p>
</div>
</div>
<div class="card">
<img
class="card-image"
src="https://tdn.totvs.com/download/attachments/66618185/mfa.png"
alt=""
>
<div class="card-text-container">
<p class="card-label card-text-margin-bottom">TOTVS Identity</p>
<h2 id="card-title" class="card-text-margin-bottom">
<a href="https://tdn.totvs.com/x/A1PDLw" id="card-title-link">Mais segurança para sua empresa e seus usuários</a>
</h2>
<p class="card-desc">Por padrão, o Identity já tem uma série de critérios que os usuários devem respeitar quando trocam a senha. A novidade é que os requisitos de complexidade de senha podem ser personalizados, com requisitos específicos para que a senha seja considerada válida.</p>
</div>
</div>
</section> |
Quer saber mais?
| HTML |
|---|
<style type="text/css">
.cards-container {
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-direction: column;
box-sizing: border-box;
justify-items: center;
}
.card {
width: 100%;
height: auto;
display: flex;
margin: auto auto 20px auto;
box-shadow: 0px 2px 4px #00000029;
border-radius: 10px;
}
.card-image {
object-fit: cover;
width: 43%;
max-width: 420px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.card-image.card-image-full {
width: 100%;
max-width: inherit;
border-radius: 10px;
display: block;
}
.card-text-container {
text-align: left;
padding: 30px;
}
.card-label {
color: #FEAC0E;
font-weight: bold;
font-size: 13px;
}
#card-title-link {
text-decoration: none;
color: #0897E9;
font-weight: bold;
font-size: 17px;
}
#card-title-link:hover {
text-decoration: underline;
}
.card-desc {
margin: 0 !important;
font-size: 15px;
font-weight: 400;
letter-spacing: 0px;
color: #494440;
}
.card-text-margin-bottom {
margin: 0 0 5px 0 !important;
}
</style>
<section class="cards-container">
<div class="card">
<a href="https://academy.fluig.com/" target="_blank">
<img
class="card-image card-image-full"
src="https://tdn.totvs.com/download/attachments/66618185/Academy.png"
alt=""
></a>
</div>
</section> |
| HTML |
|---|
<style type="text/css">
.cards-container {
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-direction: column;
box-sizing: border-box;
justify-items: center;
}
.card {
width: 100%;
height: auto;
display: flex;
margin: auto auto 20px auto;
box-shadow: 0px 2px 4px #00000029;
border-radius: 10px;
}
.card-image {
object-fit: cover;
width: 43%;
max-width: 420px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.card-text-container {
text-align: left;
padding: 30px;
}
.card-label {
color: #FEAC0E;
font-weight: bold;
font-size: 13px;
}
#card-title-link {
text-decoration: none;
color: #0897E9;
font-weight: bold;
font-size: 17px;
}
#card-title-link:hover {
text-decoration: underline;
}
.card-desc {
margin: 0 !important;
font-size: 15px;
font-weight: 400;
letter-spacing: 0px;
color: #494440;
}
.card-text-margin-bottom {
margin: 0 0 5px 0 !important;
}
</style>
<section class="cards-container">
<div class="card">
<div class="card-text-container">
<p class="card-label card-text-margin-bottom">Suporte</p>
<h2 id="card-title" class="card-text-margin-bottom">
<a href="https://suporte.totvs.com/" id="card-title-link" target="blank">Precisa de ajuda e não encontrou por aqui?</a>
</h2>
<p class="card-desc">Entre em contato pelo <a href="https://suporte.totvs.com" target="blank">Portal de clientes</a>. A equipe de atendimento do TOTVS Fluig estará pronta para lhe ajudar.</p>
</div>
</div>
</section> |
Aqui você encontra detalhes técnicos do fluig e ainda fica por dentro de desenvolvimentos sobre a plataforma.
TRANSFORME SUA PLATAFORMA
Existem diversas documentações focadas em ajudar você a codificar de forma ágil e inteligente.
- Desenvolva portais de acordo com a sua necessidade
- Desenvolva layouts e widgets para suas páginas
- Crie formulários personalizados
| Column | ||
|---|---|---|
| ||
...
| width | 40% |
|---|
RELEASE NOTES
Saiu quentinho do forno! Confira o Release Notes da última atualização do fluig:
Documentações fluig 1.6.1:
Configurar Instagram no widget Slideshow
Componente Seleção de usuários
... e muito mais!
| Column | ||
|---|---|---|
| ||
...
| width | 10% |
|---|
SAIBA MAIS AGORA! Vídeos
Conector de Widget width 500 url https://www.youtube.com/watch?v=8hjtUTNllzA&feature=youtu.be
| width | 500 |
|---|---|
| url | https://www.youtube.com/watch?v=8hjtUTNllzA&feature=youtu.be |
...
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas