) aparece ao lado do logo, sem estilização nenhuma, conforme imagem ao lado. As configurações que podemos realizar, estão no mesmo local onde ativamos o AMP para o site. No menu "Settings" > "Blog" > "Google AMP". Dentre as opções disponíveis, temos: a inclusão de um logo só para a exibição das páginas em AMP, uma cor de background para a faixa do topo e a definição dos padrões de fontes e cores que serão utilizadas no título do header e no conteúdo do post. ## Mas por que não usar o CSS para corrigir o layout? Após algumas pesquisas na comunidade da HubSpot, percebi que [outros usuários também tinham o mesmo problema](https://community.hubspot.com/t5/CMS-Development/AMP-styles-and-header-image/td-p/20203) e sem sucesso na solução do mesmo via CSS, pois a versão do AMP é exatamente utilizada para que a página não esteja vinculada a folhas de estilos e scripts, tornando-as mais leves para serem carregadas. De acordo com a [documentação AMP](https://amp.dev/documentation/guides-and-tutorials/start/create/presentation_layout/?referrer=ampproject.org), é possível personalizar o CSS de uma exibição AMP, inserindo uma chamada de estilo próprio do AMP, no <head> da página. ![Estilo AMP - Alterando CSS](https://www.na5.com.br/hs-fs/hubfs/estilo-amp-codigo-css.png?width=320&name=estilo-amp-codigo-css.png) A questão é que o AMP permitirá que a tag <style amp-custom> seja lida apenas uma única vez e quando ativado nas configurações de conteúdo, ele se torna parte do standard\_header\_includes e é adicionado automaticamente no header de nosso blog HubSpot. Por esse motivo, não é possível adicionar um estilo personalizado fora do que o HubSpot oferece no menu configurações. ## "Corrigindo" o alinhamento dos conteúdos Mesmo que ainda não tenhamos opções nem no menu configurações e nem na edição do CSS do AMP na HubSpot, é possível realizarmos esse alinhamento no mobile. Da mesma forma que o menu de configurações nos limita um pouco na exibição, ele nos deixa subir um arquivo de logo só para as páginas em AMP, com isso, conseguimos separar o logo do título, criando uma adaptação do logo a um PNG de largura 450px, conforme exemplo abaixo: ![arquivo-logo-largura-450px-amp-hubspot](https://www.na5.com.br/hs-fs/hubfs/arquivo-logo-largura-450px-amp-hubspot.png?width=254&name=arquivo-logo-largura-450px-amp-hubspot.png) Dessa forma, o arquivo do logo, de tamanho 450px, ocupa toda a largura de visualização mobile, empurrando automaticamente o título para baixo. Confira no exemplo abaixo: ![Google AMP HubSpot - Configuração](https://www.na5.com.br/hs-fs/hubfs/google-amp-exibicao-configuracao-ajustado.png?width=180&name=google-amp-exibicao-configuracao-ajustado.png) **Espero que esse esse conteúdo tenha sido útil, caso possua alguma dúvida sobre HubSpot, deixe seu comentário abaixo e estarei atento lhe ajudar.** ## Implementação HubSpot Enterprise: sua jornada começa aqui Te ajudamos a implementar HubSpot Enterprise quase que num passe de mágica. [Quero saber mais](https://www.na5.com.br/hubspot/implementacao) [Quero contratar a NA5](https://www.na5.com.br/contato) ## Potencialize seu HubSpot Enterprise Toda terça-feira à tarde, você receberá uma dica para aprender a fazer mais com seu HubSpot Enterprise em menos de 5 minutos.

--- title: "AMP HubSpot: como ajustar o alinhamento do logo com o título • NA5" description: Para quem ativou o AMP na HubSpot, deve estar se deparando com um problema no layout de exibição dos seus posts em AMP. Veja como podemos corrigir! image: https://www.na5.com.br/hubfs/amp-hubspot-como-ajustar-o-alinhamento-do-logo-com-o-titulo-featured.jpg --- [![NA5](https://www.na5.com.br/hubfs/logotipos/na5.svg)](https://www.na5.com.br) ## [Blog NA5](https://www.na5.com.br/blog) # AMP HubSpot: como ajustar o alinhamento do logo com o título ![AMP HubSpot: como ajustar o alinhamento do logo com o título](https://www.na5.com.br/hs-fs/hubfs/amp-hubspot-como-ajustar-o-alinhamento-do-logo-com-o-titulo-featured.jpg?width=731&height=384&name=amp-hubspot-como-ajustar-o-alinhamento-do-logo-com-o-titulo-featured.jpg) Para quem ativou o AMP na HubSpot, deve estar se deparando com um problema no layout de exibição dos seus posts em AMP. Veja como podemos corrigir! Publicado em [07/10/2019 12:56:56](https://www.na5.com.br/dicas/amp-hubspot-ajustar-alinhamento-logo-titulo) por [Daniel Sanchez](https://www.na5.com.br/dicas/author/daniel-sanchez) Para quem ativou o AMP na HubSpot, deve estar se deparando com um problema no layout de exibição dos seus posts em AMP. Na versão do AMP da HubSpot, o título da página (tag ) aparece ao lado do logo, sem estilização nenhuma, conforme imagem ao lado. As configurações que podemos realizar, estão no mesmo local onde ativamos o AMP para o site. No menu "Settings" > "Blog" > "Google AMP". Dentre as opções disponíveis, temos: a inclusão de um logo só para a exibição das páginas em AMP, uma cor de background para a faixa do topo e a definição dos padrões de fontes e cores que serão utilizadas no título do header e no conteúdo do post. ## Mas por que não usar o CSS para corrigir o layout? Após algumas pesquisas na comunidade da HubSpot, percebi que [outros usuários também tinham o mesmo problema](https://community.hubspot.com/t5/CMS-Development/AMP-styles-and-header-image/td-p/20203) e sem sucesso na solução do mesmo via CSS, pois a versão do AMP é exatamente utilizada para que a página não esteja vinculada a folhas de estilos e scripts, tornando-as mais leves para serem carregadas. De acordo com a [documentação AMP](https://amp.dev/documentation/guides-and-tutorials/start/create/presentation_layout/?referrer=ampproject.org), é possível personalizar o CSS de uma exibição AMP, inserindo uma chamada de estilo próprio do AMP, no <head> da página. ![Estilo AMP - Alterando CSS](https://www.na5.com.br/hs-fs/hubfs/estilo-amp-codigo-css.png?width=320&name=estilo-amp-codigo-css.png) A questão é que o AMP permitirá que a tag <style amp-custom> seja lida apenas uma única vez e quando ativado nas configurações de conteúdo, ele se torna parte do standard\_header\_includes e é adicionado automaticamente no header de nosso blog HubSpot. Por esse motivo, não é possível adicionar um estilo personalizado fora do que o HubSpot oferece no menu configurações. ## "Corrigindo" o alinhamento dos conteúdos Mesmo que ainda não tenhamos opções nem no menu configurações e nem na edição do CSS do AMP na HubSpot, é possível realizarmos esse alinhamento no mobile. Da mesma forma que o menu de configurações nos limita um pouco na exibição, ele nos deixa subir um arquivo de logo só para as páginas em AMP, com isso, conseguimos separar o logo do título, criando uma adaptação do logo a um PNG de largura 450px, conforme exemplo abaixo: ![arquivo-logo-largura-450px-amp-hubspot](https://www.na5.com.br/hs-fs/hubfs/arquivo-logo-largura-450px-amp-hubspot.png?width=254&name=arquivo-logo-largura-450px-amp-hubspot.png) Dessa forma, o arquivo do logo, de tamanho 450px, ocupa toda a largura de visualização mobile, empurrando automaticamente o título para baixo. Confira no exemplo abaixo: ![Google AMP HubSpot - Configuração](https://www.na5.com.br/hs-fs/hubfs/google-amp-exibicao-configuracao-ajustado.png?width=180&name=google-amp-exibicao-configuracao-ajustado.png) **Espero que esse esse conteúdo tenha sido útil, caso possua alguma dúvida sobre HubSpot, deixe seu comentário abaixo e estarei atento lhe ajudar.** ## Implementação HubSpot Enterprise: sua jornada começa aqui Te ajudamos a implementar HubSpot Enterprise quase que num passe de mágica. [Quero saber mais](https://www.na5.com.br/hubspot/implementacao) [Quero contratar a NA5](https://www.na5.com.br/contato) ## Potencialize seu HubSpot Enterprise Toda terça-feira à tarde, você receberá uma dica para aprender a fazer mais com seu HubSpot Enterprise em menos de 5 minutos.