![\"Imagem](\"https:\/\/marciorodrigues.dev.br\/blog\/wp-content\/uploads\/2024\/05\/adicionando-um-id-css-em-um-conteiner-no-elementor-1024x490.jpg\")
<\/figure>\n\n\n\nAtivando o efeito Sticky no Elementor<\/h2>\n\n\n\n
Ainda na edi\u00e7\u00e3o do cont\u00eainer, vamos agora fixar nosso cont\u00eainer no topo da p\u00e1gina. Para isso, navegue at\u00e9 o menu Efeitos de Movimento e na op\u00e7\u00e3o Fixo selecione Superior. No campo Fixo em voc\u00ea pode (caso queira) selecionar apenas algumas telas para que o efeito seja aplicado. No meu caso irei deixar o padr\u00e3o que j\u00e1 foi carregado.<\/p>\n\n\n\n Agora, vamos adicionar um Widget de T\u00edtulo ao nosso cont\u00eainer.<\/p>\n\n\n\n O pr\u00f3ximo passo \u00e9 editarmos o nosso t\u00edtulo para darmos o nome da nossa marca e aplicarmos o estilo. E por se tratar de um logo, eu tamb\u00e9m vou marcar a op\u00e7\u00e3o Tag HTML como SPAN pra n\u00e3o interferir no SEO da p\u00e1gina.<\/p>\n\n\n\n Ainda na edi\u00e7\u00e3o do Widget de T\u00edtulo, v\u00e1 at\u00e9 a guia Avan\u00e7ado, e na op\u00e7\u00e3o Classes CSS adicione uma classe com o nome de logo-menu (n\u00e3o utilize ponto antes do nome, pois n\u00e3o \u00e9 necess\u00e1rio).<\/p>\n\n\n\n Por fim, vamos voltar a edi\u00e7\u00e3o do cont\u00eainer, ent\u00e3o, pra isso, clique l\u00e1 nos 6 pontinhos na parte em rosa do cont\u00eainer, e aqui vamos procurar na guia Avan\u00e7ado a op\u00e7\u00e3o CSS Personalizado (Talvez voc\u00ea precise do Elementor PRO pra fazer isso), se n\u00e3o estiver com o pro, v\u00e1 no menu Apar\u00eancia, Personalizar Tema e l\u00e1 voc\u00ea vai encontrar ao local pra adicionar o seu CSS Personalizado.<\/p>\n\n\n\n No campo CSS Personalizado, adiciona o seguinte c\u00f3digo:<\/p>\n\n\n\n Neste meu exemplo, minha LOGO \u00e9 preta e vou alterar a cor pra azul (c\u00f3digo hexadecimal #0000ff) e estou refor\u00e7ando com o valor !important de que \u00e9 pra mudar pra essa cor. Selecione a cor hexadecimal da cor que voc\u00ea quer adicionar e substitua apenas este valor neste c\u00f3digo. E lembre-se de ter alterado a Tag Html pra SPAN l\u00e1 na edi\u00e7\u00e3o do T\u00edtulo, sen\u00e3o, n\u00e3o vai funcionar caso tenha deixado o padr\u00e3o que \u00e9 o H2.<\/p>\n\n\n\n Pronto, nosso trabalho est\u00e1 finalizado. Para ver o efeito, caso j\u00e1 tenha conte\u00fado na sua p\u00e1gina abaixo do menu, j\u00e1 pode realizar o teste rolando a p\u00e1gina. Caso o menu seja o primeiro cont\u00eainer da sua p\u00e1gina, adicione o restante do conte\u00fado da p\u00e1gina e depois fa\u00e7a o teste.<\/p>\n\n\n\n Espero que este conte\u00fado tenha lhe ajudado. Deixe um coment\u00e1rio pra eu saber se deu certo pra voc\u00ea. Aproveita e se inscreva tamb\u00e9m no meu canal TriboWP para ver mais conte\u00fados relacionado ao uso do WordPress e Elementor.<\/p>\n\n\n\n Um forte abra\u00e7o e fique com Deus!<\/p>\n","protected":false},"excerpt":{"rendered":" Eu j\u00e1 te ensinei a como alterar uma Logo (imagem) ao rolar uma p\u00e1gina l\u00e1 no meu canal no YouTube. E aqui neste artigo r\u00e1pido vou te ensinar como alterar a Logo (no formato de texto) ao rolar p\u00e1gina.<\/p>\n","protected":false},"author":1,"featured_media":1606,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"Alterar a cor de um Logo (Texto) no Header ao rolar a p\u00e1gina","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[5],"tags":[47,29],"class_list":["post-1587","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-elementor","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/marciorodrigues.dev.br\/blog\/wp-json\/wp\/v2\/posts\/1587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marciorodrigues.dev.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marciorodrigues.dev.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marciorodrigues.dev.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marciorodrigues.dev.br\/blog\/wp-json\/wp\/v2\/comments?post=1587"}],"version-history":[{"count":1,"href":"https:\/\/marciorodrigues.dev.br\/blog\/wp-json\/wp\/v2\/posts\/1587\/revisions"}],"predecessor-version":[{"id":1607,"href":"https:\/\/marciorodrigues.dev.br\/blog\/wp-json\/wp\/v2\/posts\/1587\/revisions\/1607"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marciorodrigues.dev.br\/blog\/wp-json\/wp\/v2\/media\/1606"}],"wp:attachment":[{"href":"https:\/\/marciorodrigues.dev.br\/blog\/wp-json\/wp\/v2\/media?parent=1587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marciorodrigues.dev.br\/blog\/wp-json\/wp\/v2\/categories?post=1587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marciorodrigues.dev.br\/blog\/wp-json\/wp\/v2\/tags?post=1587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/marciorodrigues.dev.br\/blog\/wp-content\/uploads\/2024\/05\/fixando-um-conteiner-no-topo-da-pagina-com-elementor-2-1024x490.jpg\")
<\/figure>\n\n\n\nAdicionando o texto que iremos usar como Logo.<\/h2>\n\n\n\n
![\"\"](\"https:\/\/marciorodrigues.dev.br\/blog\/wp-content\/uploads\/2024\/05\/adicionando-um-widget-de-titulo-ao-conteiner-1024x490.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/marciorodrigues.dev.br\/blog\/wp-content\/uploads\/2024\/05\/editando-o-widget-de-titulo-1024x490.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/marciorodrigues.dev.br\/blog\/wp-content\/uploads\/2024\/05\/adicionando-uma-classe-ao-widget-de-titulo-1024x490.jpg\")
<\/figure>\n\n\n\n#header.elementor-sticky--effects .logo-menu span {color: #0000ff !important;}<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/marciorodrigues.dev.br\/blog\/wp-content\/uploads\/2024\/05\/adicionando-css-personalizado-ao-container-1024x490.jpg\")
<\/figure>\n\n\n\n