Mautic Know-How
Mautic Know-How
Mautic Tutoriais para Iniciantes & Dicas para Especialistas

Alterar o estilo padrão dos itens do Mautic Focus

Foco itens que correspondem ao seu próprio design e podem ser mantidos sem conhecimento de HTML – um sonho para cada editor Mautic! Com alguns truques você pode ajustar o estilo padrão individualmente para cada instalação Mautic.

A Mautic oferece um vasto repertório de possibilidades para interagir com potenciais clientes no site. O mais conhecido e mais difundido é o chamado "Item de Foco" – uma forma de notificação que se move animadamente na janela

Infelizmente, os Itens de Foco no kit de construção padrão da Mautic só podem ser individualizados com muito pouco: As alterações individuais de layout no editor só podem ser feitas em HTML – o pesadelo de todos os editores

A solução elegante para uma aparência individual de Item de Foco: Altere o estilo Mautic "hard" para toda a instância Mautic. Os itens de foco podem, assim, ser adaptados ao design do site e, em seguida, são criados nessa variante por padrão quando o editor cria um Item de Foco.

Responsáveis pela aparência dos diferentes Estilos de Item de Foco são diferentes ficheiros php, que podem ser encontrados no seguinte diretório: Bar, Modal, Notification e Page.

"plugins/MauticFocusBundle/Views/Builder". Existem alguns ficheiros de estilo geral usados ​​para cada item de foco, bem como quatro pastas para cada tipo:

Ao ajustar os ficheiros php nas respectivas pastas, as alterações podem ser feitas nos estilos padrão dos itens de foco.

Aqui está um exemplo ilustrativo:

A tarefa: O Estilo de Item de Foco "Notificação" deve ser ajustado. Há mais um recurso especial: o estilo "Notificação" usa o HTML do estilo "Modal". Portanto, as alterações devem ser feitas na pasta Modal e na pasta Notificação.

Primeiro você tem que editar o ficheiro "index.html.php" na pasta Modal e, neste caso, adicionar um logotipo como uma imagem. A cor de fundo do item de foco deve ser controlada pela cor primária no Mautic-Builder – para fazer isso funcionar, adicione o seguinte estilo ao div com a classe "mautic-focus":

style="background-color: #<?php echo $props['colors']['primary']; ?>;"

A variável "$props" pode ser usada, por exemplo, para acessar as cores e conteúdos armazenados no item de foco.

A seguir você edita o ficheiro "style.less.php" na pasta Notificação e adiciona o estilo para o texto e o botão via CSS. Agora apenas as cores devem ser ajustadas no Mautic-Builder e o Item de Foco está pronto.

Aqui está um exemplo de uma comparação antes e depois:


Sem estilo individual:

Com estilo individual:


Atenção: Atualmente não existe uma forma "à prova de atualização", ou seja, os ficheiros processados ​​do Item de Foco são sobrepostos por todas as atualizações Mautic! Eles devem, portanto, ser armazenados em backup nos diretórios apropriados após a atualização. Não é o ideal, mas solucionável por um pequeno automatismo – e o uso justifica esse desagrado e o gasto.

Your browser is outdated!

Please update your browser to see this website correct. Update your browser now