{"id":23262,"date":"2025-04-05T12:47:22","date_gmt":"2025-04-05T04:47:22","guid":{"rendered":"https:\/\/www.szlogic.net\/?p=23262"},"modified":"2025-04-05T12:47:25","modified_gmt":"2025-04-05T04:47:25","slug":"wordpress-teaching","status":"publish","type":"post","link":"https:\/\/www.szlogic.net\/pt\/learn\/wordpress\/wordpress-teaching\/","title":{"rendered":"Ensino de WordPress Construa p\u00e1ginas personalizadas do zero usando o editor Elementor"},"content":{"rendered":"<h1 class=\"wp-block-heading has-text-align-center\" style=\"margin-bottom:30px;font-size:31px\">Ensino de WordPress: Cria\u00e7\u00e3o de P\u00e1ginas com o Elementor<\/h1>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"463\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/wordpress\u6559\u7a0b.png\" alt=\"wordpress\u6559\u7a0b\" class=\"wp-image-23271\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/wordpress\u6559\u7a0b.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/wordpress\u6559\u7a0b-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">Se voc\u00ea deseja criar uma p\u00e1gina em <strong><a href=\"https:\/\/www.szlogic.net\/pt\/learn\/wordpress\/what-is-wordpress\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/learn\/wordpress\/what-is-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress<\/a><\/strong> que seja profissional e personalizada, mas n\u00e3o quer se complicar com c\u00f3digos complexos, ent\u00e3o o <strong><a href=\"https:\/\/www.szlogic.net\/pt\/learn\/wordpress\/basic-configuration\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/learn\/wordpress\/basic-configuration\/\" target=\"_blank\" rel=\"noreferrer noopener\">editor Elementor<\/a><\/strong> \u00e9 a ferramenta ideal para voc\u00ea. Este tutorial ir\u00e1 gui\u00e1-lo passo a passo desde o in\u00edcio, ensinando como utilizar o Elementor para criar layouts de p\u00e1gina e construir elementos, deixando seu site WordPress mais bonito e funcional. Este \u00e9 um artigo pr\u00e1tico de cria\u00e7\u00e3o e edi\u00e7\u00e3o de p\u00e1ginas WordPress a partir do zero: come\u00e7aremos criando uma nova p\u00e1gina no <strong><a href=\"https:\/\/www.szlogic.net\/pt\/learn\/wordpress\/wordpress-use\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/learn\/wordpress\/wordpress-use\/\" target=\"_blank\" rel=\"noreferrer noopener\">painel de administra\u00e7\u00e3o do WordPress<\/a><\/strong> e, em seguida, construiremos o cabe\u00e7alho, o conte\u00fado principal e o rodap\u00e9, utilizando os componentes visuais do Elementor para realizar a diagrama\u00e7\u00e3o, adicionar conte\u00fado e ajustar estilos. Este n\u00e3o \u00e9 apenas um guia b\u00e1sico, mas tamb\u00e9m uma oportunidade pr\u00e1tica de aprendizado. Embora seguir os passos normalmente leve a resultados satisfat\u00f3rios, o desenvolvimento de elementos de p\u00e1gina muitas vezes envolve imprevistos, como conflitos entre plugins ou anomalias de estilo. Por isso, al\u00e9m de aprender a usar o Elementor, \u00e9 importante que o leitor desenvolva habilidades de observa\u00e7\u00e3o e resolu\u00e7\u00e3o de problemas, a fim de dominar verdadeiramente essa poderosa ferramenta. Seja voc\u00ea um iniciante no WordPress ou algu\u00e9m que deseja aprimorar suas habilidades de edi\u00e7\u00e3o de p\u00e1ginas, este artigo trar\u00e1 orienta\u00e7\u00f5es pr\u00e1ticas para ajud\u00e1-lo a projetar e criar p\u00e1ginas de forma mais eficiente. A seguir, vamos dar uma olhada no \u00edndice deste artigo e ent\u00e3o mergulhar no tema.<\/p>\n\n\n\n<p>Para facilitar o aprendizado e a consulta dos leitores de forma mais eficiente, o autor organizou de maneira sistem\u00e1tica o conte\u00fado de \u300aEnsino de WordPress: Construa p\u00e1ginas personalizadas do zero usando o editor Elementor\u300b, estruturando-o em uma lista de cap\u00edtulos clara e objetiva. Cada se\u00e7\u00e3o n\u00e3o apenas apresenta visualmente a hierarquia do artigo, mas tamb\u00e9m incorpora links \u00e2ncora, permitindo que voc\u00ea salte diretamente para o conte\u00fado de seu interesse e volte ou aprofunde o estudo a qualquer momento. Seja para quem deseja aprender o conte\u00fado de forma completa do in\u00edcio ao fim, seja para quem precisa localizar rapidamente um passo espec\u00edfico durante a pr\u00e1tica, este \u00edndice atende a todas as formas de leitura, garantindo um processo de aprendizado mais fluido e eficiente.\nO \u00edndice detalhado \u00e9 o seguinte:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"#new\">Criar uma nova p\u00e1gina no painel do WordPress<\/a><\/strong>\n<ol class=\"wp-block-list\">\n<li><a href=\"#fill\">Preencher o t\u00edtulo da p\u00e1gina<\/a><\/li>\n\n\n\n<li><a href=\"#custom\">Personalizar o sufixo da URL da p\u00e1gina<\/a><\/li>\n\n\n\n<li><a href=\"#level\">Configurar a hierarquia da p\u00e1gina<\/a><\/li>\n\n\n\n<li><a href=\"#publish\">Publicar a nova p\u00e1gina criada no WordPress<\/a><\/li>\n\n\n\n<li><a href=\"#use\">Editar a p\u00e1gina usando o Elementor<\/a><\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong><a href=\"#header\">Criar o arquivo de modelo do cabe\u00e7alho (Header e barra de navega\u00e7\u00e3o) no gerador de temas do Elementor<\/a><\/strong>\n<ol class=\"wp-block-list\">\n<li><a href=\"#generate\">Acessar o gerador de temas do Elementor<\/a><\/li>\n\n\n\n<li><a href=\"#template\">Criar um novo arquivo de modelo na \u00e1rea de gest\u00e3o de templates de Header no Elementor<\/a><\/li>\n\n\n\n<li><a href=\"#select\">Escolher um estilo de Header existente ou criar um totalmente personalizado<\/a><\/li>\n\n\n\n<li><a href=\"#navigation\">Usar cont\u00eaineres do Elementor para estruturar o layout do cabe\u00e7alho e da barra de navega\u00e7\u00e3o<\/a><\/li>\n\n\n\n<li><a href=\"#edit\">Editar e criar o conte\u00fado dos elementos do cabe\u00e7alho e da barra de navega\u00e7\u00e3o<\/a><\/li>\n\n\n\n<li><a href=\"#settings\">Publicar o arquivo de Header e definir as condi\u00e7\u00f5es de exibi\u00e7\u00e3o<\/a><\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong><a href=\"#element\">Construir a estrutura principal da p\u00e1gina e adicionar elementos de conte\u00fado usando o Elementor<\/a><\/strong>\n<ol class=\"wp-block-list\">\n<li><a href=\"#block\">Se\u00e7\u00e3o de banner<\/a><\/li>\n\n\n\n<li><a href=\"#business\">Se\u00e7\u00e3o de descri\u00e7\u00e3o dos servi\u00e7os<\/a><\/li>\n\n\n\n<li><a href=\"#product\">Se\u00e7\u00e3o de produtos e servi\u00e7os<\/a><\/li>\n\n\n\n<li><a href=\"#core\">Se\u00e7\u00e3o de destaques dos principais diferenciais<\/a><\/li>\n\n\n\n<li><a href=\"#brand\">Se\u00e7\u00e3o de hist\u00f3ria da marca<\/a><\/li>\n\n\n\n<li><a href=\"#information\">Se\u00e7\u00e3o de \u00faltimas novidades<\/a><\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong><a href=\"#file\">Criar o arquivo de modelo do rodap\u00e9 (Footer) no Elementor<\/a><\/strong>\n<ol class=\"wp-block-list\">\n<li><a href=\"#common\">Formatos comuns de layout de rodap\u00e9 (Footer)<\/a><\/li>\n\n\n\n<li><a href=\"#component\">Componentes comuns utilizados no rodap\u00e9 (Footer)<\/a><\/li>\n\n\n\n<li><a href=\"#display\">Publicar o arquivo de Footer e definir as condi\u00e7\u00f5es de exibi\u00e7\u00e3o<\/a><\/li>\n\n\n\n<li><a href=\"#show\">Apresenta\u00e7\u00e3o da p\u00e1gina finalizada usando o editor Elementor<\/a><\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading new\" id=\"new\" style=\"margin-bottom:30px\">um\u3001Criar uma nova p\u00e1gina no painel do WordPress<\/h2>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img decoding=\"async\" width=\"800\" height=\"350\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/WordPress\u540e\u53f0\u521b\u5efa\u65b0\u9875\u9762.png\" alt=\"Criar uma nova p\u00e1gina no painel do WordPress\" class=\"wp-image-23277\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/WordPress\u540e\u53f0\u521b\u5efa\u65b0\u9875\u9762.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/WordPress\u540e\u53f0\u521b\u5efa\u65b0\u9875\u9762-18x8.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Antes de iniciar a constru\u00e7\u00e3o das p\u00e1ginas do WordPress com o editor Elementor, o primeiro passo \u00e9 garantir que a p\u00e1gina tenha sido criada no painel do WordPress. O caminho para acessar a gest\u00e3o de p\u00e1ginas no WordPress \u00e9 mostrado na imagem acima.\nNesta se\u00e7\u00e3o, come\u00e7aremos utilizando a fun\u00e7\u00e3o de gerenciamento de p\u00e1ginas do WordPress, explicando em detalhes como criar uma nova p\u00e1gina e preencher as informa\u00e7\u00f5es necess\u00e1rias, como o t\u00edtulo da p\u00e1gina, a configura\u00e7\u00e3o da URL, a defini\u00e7\u00e3o da hierarquia da p\u00e1gina e a publica\u00e7\u00e3o. A cria\u00e7\u00e3o correta da p\u00e1gina \u00e9 a base para toda a constru\u00e7\u00e3o do site; configurar adequadamente as propriedades da p\u00e1gina melhora a efici\u00eancia na edi\u00e7\u00e3o posterior e evita problemas de layout ou compatibilidade ao usar o Elementor.\nUma vez que a p\u00e1gina esteja preparada, podemos mudar suavemente para o modo de edi\u00e7\u00e3o do Elementor e come\u00e7ar a organizar e projetar os elementos da p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"fill\" style=\"margin-bottom:30px\">1. Preencher o t\u00edtulo da p\u00e1gina<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2546\" height=\"1303\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u586b\u5199\u9875\u9762\u6807\u9898.png\" alt=\"Preencher o t\u00edtulo da p\u00e1gina\" class=\"wp-image-23281\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u586b\u5199\u9875\u9762\u6807\u9898.png 2546w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u586b\u5199\u9875\u9762\u6807\u9898-18x9.png 18w\" sizes=\"(max-width: 2546px) 100vw, 2546px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">No painel do WordPress, acesse a \u00e1rea de gerenciamento de p\u00e1ginas e clique no bot\u00e3o \"Nova P\u00e1gina\" no topo da tela, conforme mostrado na imagem acima. No campo de entrada de t\u00edtulo (destacado em vermelho na imagem), insira o t\u00edtulo personalizado da p\u00e1gina.\nNo sistema WordPress, esse t\u00edtulo n\u00e3o apenas ser\u00e1 exibido na gest\u00e3o de p\u00e1ginas, mas tamb\u00e9m aparecer\u00e1 no campo 'title' do c\u00f3digo-fonte da p\u00e1gina no frontend. Portanto, ao definir o t\u00edtulo, \u00e9 importante levar em considera\u00e7\u00e3o o seu impacto em SEO.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"custom\" style=\"margin-bottom:30px\">2. Personalizar o sufixo da URL da p\u00e1gina<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"409\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u81ea\u5b9a\u4e49\u9875\u9762URL\u540e\u7f00.png\" alt=\"Personalizar o sufixo da URL da p\u00e1gina\" class=\"wp-image-23282\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u81ea\u5b9a\u4e49\u9875\u9762URL\u540e\u7f00.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u81ea\u5b9a\u4e49\u9875\u9762URL\u540e\u7f00-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Conforme mostrado na imagem acima, ap\u00f3s inserir o t\u00edtulo da p\u00e1gina, clique no link \"Link\" destacado em vermelho no lado direito. O sistema abrir\u00e1 uma caixa de entrada para personalizar a URL da p\u00e1gina.\nPor padr\u00e3o, o WordPress usa automaticamente o t\u00edtulo da p\u00e1gina como sufixo da URL. No entanto, essa abordagem padr\u00e3o muitas vezes n\u00e3o atende \u00e0s boas pr\u00e1ticas de SEO, pois o t\u00edtulo pode conter caracteres n\u00e3o ingleses ou ser muito longo, o que prejudica a leitura dos usu\u00e1rios e a otimiza\u00e7\u00e3o para motores de busca.\nO ideal \u00e9 que a URL seja o mais curta poss\u00edvel, composta por palavras em ingl\u00eas, para melhorar a legibilidade e a compatibilidade com os motores de busca.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"level\" style=\"margin-bottom:30px\">3. Configurar a hierarquia da p\u00e1gina<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"412\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9875\u9762\u7684\u5c42\u7ea7\u8bbe\u7f6e.png\" alt=\"Configurar a hierarquia da p\u00e1gina\" class=\"wp-image-23286\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9875\u9762\u7684\u5c42\u7ea7\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9875\u9762\u7684\u5c42\u7ea7\u8bbe\u7f6e-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">A configura\u00e7\u00e3o da hierarquia da p\u00e1gina serve para definir a rela\u00e7\u00e3o de subordina\u00e7\u00e3o entre p\u00e1ginas no WordPress.\nDiferente dos posts, que podem ser atribu\u00eddos a categorias, as p\u00e1ginas suportam estrutura hier\u00e1rquica.\nPor exemplo, a estrutura de URL szlogic\/web-design representa a p\u00e1gina de design web da \"Logic Digital Technology\". Se esta p\u00e1gina for definida como uma p\u00e1gina pai, os URLs das p\u00e1ginas filhas seguir\u00e3o o formato szlogic\/web-design\/seu-sufixo-de-url.\nPara definir a hierarquia da p\u00e1gina, conforme mostrado na imagem acima, v\u00e1 at\u00e9 a se\u00e7\u00e3o \"P\u00e1gina\" no lado direito da tela de edi\u00e7\u00e3o e clique na op\u00e7\u00e3o \"Pai\". Um menu ser\u00e1 aberto permitindo que voc\u00ea selecione a p\u00e1gina pai apropriada.\nAp\u00f3s a escolha, o sistema ajustar\u00e1 automaticamente a estrutura da URL para refletir a hierarquia.\nVale ressaltar que definir uma hierarquia de p\u00e1ginas \u00e9 opcional; se n\u00e3o for necess\u00e1rio vincular a p\u00e1gina a uma p\u00e1gina pai, basta deixar a configura\u00e7\u00e3o padr\u00e3o.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"publish\" style=\"margin-bottom:30px\">4. Publicar a nova p\u00e1gina criada no WordPress<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"411\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03WordPress\u65b0\u589e\u9875\u9762.png\" alt=\"Publicar a nova p\u00e1gina criada no WordPress\" class=\"wp-image-23288\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03WordPress\u65b0\u589e\u9875\u9762.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03WordPress\u65b0\u589e\u9875\u9762-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Ap\u00f3s concluir todas as informa\u00e7\u00f5es necess\u00e1rias da p\u00e1gina, podemos proceder \u00e0 publica\u00e7\u00e3o.\nSomente p\u00e1ginas publicadas passam a integrar oficialmente a estrutura do site e podem ser acessadas via URL.\nClique no bot\u00e3o \"Publicar\" destacado em vermelho na imagem acima; a opera\u00e7\u00e3o levar\u00e1 voc\u00ea a uma tela de confirma\u00e7\u00e3o antes da publica\u00e7\u00e3o.\nClique novamente em \"Publicar\" nesta tela para concluir o processo de publica\u00e7\u00e3o da nova p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"use\" style=\"margin-bottom:30px\">5. Editar a p\u00e1gina usando o Elementor<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"422\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7f16\u8f91\u9875\u9762.png\" alt=\"Editar a p\u00e1gina usando o Elementor\" class=\"wp-image-23290\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7f16\u8f91\u9875\u9762.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7f16\u8f91\u9875\u9762-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">A defini\u00e7\u00e3o do Elementor como editor da p\u00e1gina \u00e9 o \u00faltimo passo na cria\u00e7\u00e3o de uma nova p\u00e1gina no WordPress.\nAo acessar a p\u00e1gina pela primeira vez, \u00e9 necess\u00e1rio clicar no bot\u00e3o \"Editar com Elementor\", como mostrado em destaque na imagem acima, ainda no modo de gerenciamento do WordPress.\nAp\u00f3s essa primeira autoriza\u00e7\u00e3o, nas pr\u00f3ximas vezes ser\u00e1 poss\u00edvel acessar diretamente o modo de edi\u00e7\u00e3o pelo frontend do site, sem precisar retornar ao painel de administra\u00e7\u00e3o.\nO motivo \u00e9 que, na primeira vez, \u00e9 necess\u00e1rio conceder permiss\u00e3o para que o Elementor possa gerenciar e editar essa p\u00e1gina.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"header\" style=\"margin-bottom:30px\">dois\u3001Criar o arquivo de modelo do cabe\u00e7alho (Header e barra de navega\u00e7\u00e3o) no gerador de temas do Elementor<\/h2>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"423\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684\u4e3b\u9898\u751f\u6210\u5668\u4e2d\u521b\u5efaheader\uff08\u9875\u7709\uff09\u6a21\u677f\u6587\u4ef6.png\" alt=\"\u5728Elementor\u7684\u4e3b\u9898\u751f\u6210\u5668\u4e2d\u521b\u5efaheader\uff08\u9875\u7709\uff09\u6a21\u677f\u6587\u4ef6\" class=\"wp-image-23296\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684\u4e3b\u9898\u751f\u6210\u5668\u4e2d\u521b\u5efaheader\uff08\u9875\u7709\uff09\u6a21\u677f\u6587\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684\u4e3b\u9898\u751f\u6210\u5668\u4e2d\u521b\u5efaheader\uff08\u9875\u7709\uff09\u6a21\u677f\u6587\u4ef6-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">No <strong><a href=\"https:\/\/www.szlogic.net\/pt\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/\" target=\"_blank\" rel=\"noreferrer noopener\">site WordPress<\/a><\/strong>, o cabe\u00e7alho (Header) e a barra de navega\u00e7\u00e3o s\u00e3o elementos globais fundamentais, que n\u00e3o apenas influenciam o estilo geral do site, mas tamb\u00e9m impactam diretamente a experi\u00eancia de navega\u00e7\u00e3o do usu\u00e1rio. Como o cabe\u00e7alho geralmente precisa ser consistente em todas as p\u00e1ginas, podemos utilizar o recurso de construtor de temas do Elementor para criar um modelo de cabe\u00e7alho reutiliz\u00e1vel, garantindo a exibi\u00e7\u00e3o uniforme em todo o site. Neste cap\u00edtulo, vamos apresentar como usar a fun\u00e7\u00e3o de gerenciamento de modelos do Elementor para projetar, do zero, um cabe\u00e7alho que atenda \u00e0s necessidades do seu site. Voc\u00ea aprender\u00e1 como adicionar elementos comuns como logotipo, menu de navega\u00e7\u00e3o e caixa de pesquisa, al\u00e9m de realizar ajustes personalizados utilizando a opera\u00e7\u00e3o de arrastar e soltar do Elementor. Ap\u00f3s concluir o design do modelo, durante a publica\u00e7\u00e3o do arquivo, tamb\u00e9m explicaremos como configurar a condi\u00e7\u00e3o de exibi\u00e7\u00e3o para \"Aplicar em todo o site\", garantindo que o cabe\u00e7alho seja aplicado automaticamente a todas as p\u00e1ginas. Ao dominar essa t\u00e9cnica, voc\u00ea poder\u00e1 criar um cabe\u00e7alho bonito e funcional, e futuramente realizar atualiza\u00e7\u00f5es com apenas um clique, sem a necessidade de editar cada p\u00e1gina individualmente. Agora, vamos come\u00e7ar a criar o cabe\u00e7alho exclusivo para o seu site!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"generate\" style=\"margin-bottom:30px\">1\u3001Acessar o gerador de temas do Elementor<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2558\" height=\"1146\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Elementor\u4e3b\u9898\u751f\u6210\u5668\u5165\u53e3.png\" alt=\"Acessar o gerador de temas do Elementor\" class=\"wp-image-23298\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Elementor\u4e3b\u9898\u751f\u6210\u5668\u5165\u53e3.png 2558w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Elementor\u4e3b\u9898\u751f\u6210\u5668\u5165\u53e3-18x8.png 18w\" sizes=\"(max-width: 2558px) 100vw, 2558px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px;margin-bottom:30px\">Ao acessar a p\u00e1gina que publicamos no navegador, se voc\u00ea permanecer logado no painel administrativo do WordPress no mesmo navegador, ver\u00e1 na parte superior da p\u00e1gina uma barra de ferramentas de administra\u00e7\u00e3o, como mostrado na imagem acima.\nAo posicionar o cursor sobre o link \"Editar com Elementor\", ser\u00e1 exibido um menu suspenso com op\u00e7\u00f5es adicionais.\nA entrada para o \"Gerador de Temas\" do Elementor est\u00e1 escondida nesse menu.\nClique no link \"Gerador de Temas\" destacado em vermelho na imagem acima para acessar a p\u00e1gina de gerenciamento dos arquivos de modelo de tema do Elementor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"template\" style=\"margin-bottom:30px\">2. Criar um novo arquivo de modelo no Gerenciador de Cabe\u00e7alhos (Header) do Elementor<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"421\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684Header\u6a21\u677f\u6587\u4ef6\u7ba1\u7406\u754c\u9762\u65b0\u589e\u6a21\u677f\u6587\u4ef6.png\" alt=\"Criar um novo arquivo de modelo na \u00e1rea de gest\u00e3o de templates de Header no Elementor\" class=\"wp-image-23295\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684Header\u6a21\u677f\u6587\u4ef6\u7ba1\u7406\u754c\u9762\u65b0\u589e\u6a21\u677f\u6587\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684Header\u6a21\u677f\u6587\u4ef6\u7ba1\u7406\u754c\u9762\u65b0\u589e\u6a21\u677f\u6587\u4ef6-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Depois de acessar a p\u00e1gina inicial do Gerador de Temas do Elementor, clique na categoria \"Header\" no topo do menu lateral de categorias de modelos.\nVoc\u00ea ser\u00e1 levado \u00e0 interface de gerenciamento dos modelos de Header, como mostrado na imagem acima.\nSem necessidade de configura\u00e7\u00f5es adicionais, basta clicar no bot\u00e3o \"Add New\" (Adicionar Novo) no canto superior direito da interface (destacado em vermelho na imagem) para criar um novo arquivo de modelo de Header.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"select\" style=\"margin-bottom:30px\">3. Escolher um estilo de modelo de Header ou criar um estilo totalmente personalizado<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"418\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9009\u62e9header\uff08\u9875\u7709\uff09\u6a21\u677f\u6837\u5f0f\u6216\u521b\u5efaHeader\u6837\u5f0f.png\" alt=\"\u9009\u62e9header\uff08\u9875\u7709\uff09\u6a21\u677f\u6837\u5f0f\u6216\u521b\u5efaHeader\u6837\u5f0f\" class=\"wp-image-23297\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9009\u62e9header\uff08\u9875\u7709\uff09\u6a21\u677f\u6837\u5f0f\u6216\u521b\u5efaHeader\u6837\u5f0f.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9009\u62e9header\uff08\u9875\u7709\uff09\u6a21\u677f\u6837\u5f0f\u6216\u521b\u5efaHeader\u6837\u5f0f-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Ap\u00f3s clicar no bot\u00e3o \"Add New\" na interface de gerenciamento de modelos de Header, voc\u00ea ser\u00e1 redirecionado automaticamente para a tela de sele\u00e7\u00e3o de m\u00f3dulos de Header do Elementor, como mostrado na imagem acima.\nNessa tela, podemos ver que o pr\u00f3prio Elementor oferece alguns modelos prontos de Header que podem ser usados diretamente.\nO leitor pode clicar e selecionar qualquer um dos modelos de Header oferecidos para carreg\u00e1-lo automaticamente, ou clicar no bot\u00e3o \"X\" no canto superior direito da janela de sele\u00e7\u00e3o para fechar a sele\u00e7\u00e3o e criar um Header\/NavBar totalmente personalizado do zero.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"navigation\" style=\"margin-bottom:30px\">4. Usando Containers do Elementor para o layout do cabe\u00e7alho e da barra de navega\u00e7\u00e3o<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"454\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7684\u5bb9\u5668\u5bf9\u9875\u7709\u53ca\u5bfc\u822a\u680f\u5e03\u5c40.png\" alt=\"Usar cont\u00eaineres do Elementor para estruturar o layout do cabe\u00e7alho e da barra de navega\u00e7\u00e3o\" class=\"wp-image-23302\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7684\u5bb9\u5668\u5bf9\u9875\u7709\u53ca\u5bfc\u822a\u680f\u5e03\u5c40.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7684\u5bb9\u5668\u5bf9\u9875\u7709\u53ca\u5bfc\u822a\u680f\u5e03\u5c40-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">O estilo do cabe\u00e7alho organizado usando containers do Elementor no modo de edi\u00e7\u00e3o do modelo de Header \u00e9 mostrado na imagem acima. No n\u00edvel do c\u00f3digo de desenvolvimento front-end, toda a estrutura de uma p\u00e1gina da web \u00e9 composta por elementos em bloco (geralmente apresentados com a tag div), que no layout em <strong><a href=\"https:\/\/html.com\/\" data-type=\"link\" data-id=\"https:\/\/html.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">HTML<\/a><\/strong> s\u00e3o comumente chamados de \"modelo de caixa\". O Elementor, como um editor visual de p\u00e1ginas, tamb\u00e9m segue essa l\u00f3gica, mas oferece uma interface de opera\u00e7\u00e3o visual e o componente Container, que nos ajuda a construir a estrutura b\u00e1sica da p\u00e1gina e a organizar os demais elementos de forma ordenada dentro dela. Portanto, antes de adicionar formalmente os elementos de cabe\u00e7alho (Header) e barra de navega\u00e7\u00e3o (Navbar), precisamos primeiro planejar adequadamente a estrutura e usar o componente de Container do Elementor para configurar o layout. Para utilizar os Containers de forma flex\u00edvel, \u00e9 necess\u00e1rio dominar profundamente as configura\u00e7\u00f5es de par\u00e2metros dos containers e as t\u00e9cnicas de aninhamento de containers apresentadas nesta subse\u00e7\u00e3o. Como n\u00facleo da estrutura de layout, o container n\u00e3o apenas determina o modo de organiza\u00e7\u00e3o do conte\u00fado, mas tamb\u00e9m influencia a responsividade da p\u00e1gina e a experi\u00eancia do usu\u00e1rio. Al\u00e9m disso, a quantidade de containers est\u00e1 relacionada ao n\u00famero de elementos na p\u00e1gina; normalmente, cada container acomoda um \u00fanico elemento. Os componentes de elemento mais comuns na parte do cabe\u00e7alho s\u00e3o: Site Logo, WordPress Menu e Search, correspondendo respectivamente ao logotipo do site, ao menu do WordPress e \u00e0 caixa de pesquisa.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) Configura\u00e7\u00e3o da Largura do Container<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"603\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5bbd\u5ea6\u8bbe\u7f6e.png\" alt=\"\u5bb9\u5668\u5bbd\u5ea6\u8bbe\u7f6e\" class=\"wp-image-23316\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5bbd\u5ea6\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5bbd\u5ea6\u8bbe\u7f6e-16x12.png 16w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Como mostrado na imagem acima, a configura\u00e7\u00e3o da largura do container determina a \u00e1rea de exibi\u00e7\u00e3o dos elementos da p\u00e1gina. Muitos iniciantes podem enfrentar problemas onde os elementos n\u00e3o s\u00e3o exibidos em tela cheia ao editar a p\u00e1gina. A causa principal desse problema geralmente \u00e9 que a largura do container n\u00e3o est\u00e1 configurada para \"largura total\" e o preenchimento do container n\u00e3o foi ajustado para 0. Se desejar que os elementos da p\u00e1gina tenham margens, pode-se escolher o \"layout de caixa\". Caso queira exibi\u00e7\u00e3o em tela cheia, a largura do container deve ser ajustada para \"largura total\", garantindo que o preenchimento do container seja ajustado para 0 de acordo com o m\u00e9todo abaixo. Ambas as configura\u00e7\u00f5es devem ser feitas corretamente para que o conte\u00fado ocupe toda a tela.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(2) Configura\u00e7\u00e3o do Preenchimento e Margem do Container<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"610\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5185\u8ddd\u5916\u8ddd\u7684\u8bbe\u5b9a.png\" alt=\"\u5bb9\u5668\u5185\u8ddd\u5916\u8ddd\u7684\u8bbe\u5b9a\" class=\"wp-image-23315\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5185\u8ddd\u5916\u8ddd\u7684\u8bbe\u5b9a.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5185\u8ddd\u5916\u8ddd\u7684\u8bbe\u5b9a-16x12.png 16w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Como mostrado na imagem acima, as configura\u00e7\u00f5es de margem e preenchimento do container do Elementor est\u00e3o localizadas na guia \"Configura\u00e7\u00f5es Avan\u00e7adas\". A \u00e1rea superior oferece op\u00e7\u00f5es de ajuste da margem para as quatro dire\u00e7\u00f5es. Por padr\u00e3o, o Elementor bloqueia os valores de margem e preenchimento, fazendo com que as quatro dire\u00e7\u00f5es fiquem consistentes. Para ajustar a dist\u00e2ncia de uma dire\u00e7\u00e3o espec\u00edfica, \u00e9 necess\u00e1rio clicar no \u00edcone de \"cadeado\" destacado em vermelho para desbloquear, e ent\u00e3o inserir o valor desejado na dire\u00e7\u00e3o correspondente. Al\u00e9m disso, o usu\u00e1rio pode clicar na unidade \"px\" (unidade padr\u00e3o) acima do \u00edcone de cadeado e, no menu suspenso, escolher outras unidades de medida, como em, rem, %, etc., para atender a diferentes necessidades de design. Vale ressaltar que o Elementor define o preenchimento como 10px por padr\u00e3o. Ao desbloquear, o sistema ajustar\u00e1 automaticamente o valor do preenchimento para 0, sendo necess\u00e1rio definir manualmente o valor adequado conforme as necessidades.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(3) M\u00e9todo de Aninhamento de Containers<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"408\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5d4c\u5957\u65b9\u6cd5.png\" alt=\"\u5bb9\u5668\u5d4c\u5957\u65b9\u6cd5\" class=\"wp-image-23314\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5d4c\u5957\u65b9\u6cd5.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5d4c\u5957\u65b9\u6cd5-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Como mostrado na imagem acima, h\u00e1 duas maneiras de realizar o aninhamento de containers no Elementor. Ambas s\u00e3o eficazes, sendo elas o m\u00e9todo de arrastar e soltar e o m\u00e9todo de copiar e colar no navegador. O m\u00e9todo de arrastar e soltar \u00e9 mais intuitivo, ideal para criar estruturas desde o in\u00edcio, enquanto o m\u00e9todo de copiar e colar \u00e9 mais adequado para ajustar rapidamente e reutilizar containers em layouts j\u00e1 existentes.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Arrastar e Adicionar Subcontainer<\/h5>\n\n\n\n<p>Como mostrado na imagem acima, voc\u00ea pode arrastar diretamente o componente de container da barra de ferramentas \u00e0 esquerda do Elementor para dentro do container pai desejado. O novo container ser\u00e1 automaticamente atribu\u00eddo a esse container pai, criando uma estrutura hier\u00e1rquica.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Copiar e Colar o Container<\/h5>\n\n\n\n<p>No painel do navegador \u00e0 direita da interface do Elementor, primeiro selecione o container que deseja aninhar e execute a opera\u00e7\u00e3o de copiar. Em seguida, selecione o container pai desejado, clique com o bot\u00e3o direito e cole o container copiado. O novo container ser\u00e1 colocado dentro do container pai, tornando-se um subcontainer.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(4) Defini\u00e7\u00e3o da Dire\u00e7\u00e3o de Alinhamento do Subcontainer<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"403\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5b50\u5bb9\u5668\u7684\u6392\u5217\u65b9\u5411\u8bbe\u5b9a.png\" alt=\"\u5b50\u5bb9\u5668\u7684\u6392\u5217\u65b9\u5411\u8bbe\u5b9a\" class=\"wp-image-23313\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5b50\u5bb9\u5668\u7684\u6392\u5217\u65b9\u5411\u8bbe\u5b9a.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5b50\u5bb9\u5668\u7684\u6392\u5217\u65b9\u5411\u8bbe\u5b9a-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">A dire\u00e7\u00e3o de alinhamento do subcontainer no Elementor \u00e9 determinada pelo container pai, e essa configura\u00e7\u00e3o fica localizada na guia \"Layout\", conforme mostrado na imagem acima. Na se\u00e7\u00e3o \"Itens\", \u00e9 poss\u00edvel escolher o m\u00e9todo de alinhamento do container, incluindo alinhamento horizontal e vertical, al\u00e9m de ajustar a dire\u00e7\u00e3o espec\u00edfica de alinhamento. Quando a op\u00e7\u00e3o de alinhamento horizontal \u00e9 escolhida, os subcontainers s\u00e3o alinhados horizontalmente, podendo ser configurados para aparecer da esquerda para a direita ou da direita para a esquerda, conforme a necessidade do layout. Quando a op\u00e7\u00e3o de alinhamento vertical \u00e9 escolhida, os subcontainers ser\u00e3o empilhados verticalmente e podem ser ajustados para aparecer de cima para baixo ou de baixo para cima. Essas configura\u00e7\u00f5es de dire\u00e7\u00e3o afetam diretamente o layout dos subcontainers dentro do container pai. Uma configura\u00e7\u00e3o adequada n\u00e3o s\u00f3 permite uma disposi\u00e7\u00e3o flex\u00edvel dos elementos da p\u00e1gina, mas tamb\u00e9m aumenta a sensa\u00e7\u00e3o de profundidade no design geral.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"edit\" style=\"margin-bottom:30px\">5. Editando e Criando o Conte\u00fado dos Elementos do Cabe\u00e7alho e da Barra de Navega\u00e7\u00e3o<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"429\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u7f16\u8f91\u521b\u5efa\u9875\u7709\u53ca\u5bfc\u822a\u680f\u7684\u5143\u7d20\u5185\u5bb9.png\" alt=\"\u7f16\u8f91\u521b\u5efa\u9875\u7709\u53ca\u5bfc\u822a\u680f\u7684\u5143\u7d20\u5185\u5bb9\" class=\"wp-image-23307\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u7f16\u8f91\u521b\u5efa\u9875\u7709\u53ca\u5bfc\u822a\u680f\u7684\u5143\u7d20\u5185\u5bb9.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u7f16\u8f91\u521b\u5efa\u9875\u7709\u53ca\u5bfc\u822a\u680f\u7684\u5143\u7d20\u5185\u5bb9-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Ap\u00f3s concluir o layout b\u00e1sico do cabe\u00e7alho e da barra de navega\u00e7\u00e3o, o pr\u00f3ximo passo \u00e9 adicionar os componentes espec\u00edficos para que eles possuam funcionalidade completa de navega\u00e7\u00e3o e exibi\u00e7\u00e3o de marca. O Elementor oferece v\u00e1rios componentes para cabe\u00e7alhos, entre os quais o Site Logo (Logo do Site), o WordPress Menu (Menu de Navega\u00e7\u00e3o) e o Search (Caixa de Pesquisa) s\u00e3o os tr\u00eas mais comuns e \u00fateis. Ao arrastar esses componentes para o container correspondente e carregar as imagens e configura\u00e7\u00f5es necess\u00e1rias, podemos criar uma estrutura de cabe\u00e7alho funcional. A imagem acima mostra o resultado ap\u00f3s o upload do logotipo para o componente Site Logo e a configura\u00e7\u00e3o do menu de navega\u00e7\u00e3o no WordPress Menu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"settings\">6. Publicar o arquivo de modelo de Cabe\u00e7alho (Header) e definir as condi\u00e7\u00f5es de exibi\u00e7\u00e3o<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-top:30px;margin-bottom:30px\">(1) Publicar o arquivo de modelo de Cabe\u00e7alho<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"465\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03Header\u6a21\u677f\u6587\u4ef6.png\" alt=\"\u53d1\u5e03Header\u6a21\u677f\u6587\u4ef6\" class=\"wp-image-23306\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03Header\u6a21\u677f\u6587\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03Header\u6a21\u677f\u6587\u4ef6-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Ap\u00f3s concluir o layout da se\u00e7\u00e3o de cabe\u00e7alho utilizando o componente de container do Elementor, adicionar os componentes comuns e fazer o upload dos materiais, j\u00e1 \u00e9 poss\u00edvel publicar o arquivo de modelo de cabe\u00e7alho (Header) para aplic\u00e1-lo oficialmente \u00e0s p\u00e1ginas do site. No modo de edi\u00e7\u00e3o do Elementor, o bot\u00e3o \u201cPublicar\u201d est\u00e1 localizado na parte inferior da barra lateral esquerda, conforme destacado no ret\u00e2ngulo vermelho da imagem acima. Ap\u00f3s clicar no bot\u00e3o \"Publicar\", o sistema exibir\u00e1 uma janela para configura\u00e7\u00e3o das condi\u00e7\u00f5es de exibi\u00e7\u00e3o, orientando o usu\u00e1rio a definir o escopo de aplica\u00e7\u00e3o do modelo de cabe\u00e7alho.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(2) Definir as condi\u00e7\u00f5es de exibi\u00e7\u00e3o do arquivo de modelo de Cabe\u00e7alho<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"451\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6.png\" alt=\"\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6\" class=\"wp-image-23308\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Na janela de configura\u00e7\u00e3o das condi\u00e7\u00f5es de exibi\u00e7\u00e3o, como mostrado na imagem acima, o usu\u00e1rio pode escolher aplicar o cabe\u00e7alho (Header) em todo o site, em p\u00e1ginas espec\u00edficas, em categorias de posts ou sob outras condi\u00e7\u00f5es personalizadas. Como o modelo de cabe\u00e7alho \u00e9 uma parte global do site WordPress, \u00e9 importante garantir que ele seja aplicado a todas as p\u00e1ginas. Seguindo a ordem das a\u00e7\u00f5es mostradas na imagem, deve-se selecionar no painel de configura\u00e7\u00f5es de exibi\u00e7\u00e3o: Include &gt; Entire Site (Incluir &gt; Todo o Site). Isso significa que o cabe\u00e7alho ser\u00e1 aplicado a todas as p\u00e1ginas do site. Ap\u00f3s fazer essa sele\u00e7\u00e3o, clique no bot\u00e3o \u201cSave &amp; Close\u201d para aplicar as configura\u00e7\u00f5es e fechar a janela. O sistema aplicar\u00e1 automaticamente o modelo de cabe\u00e7alho a todas as p\u00e1ginas do site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"element\" style=\"margin-bottom:30px\">tr\u00eas\u3001Construir a estrutura principal da p\u00e1gina e adicionar elementos de conte\u00fado usando o Elementor<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"533\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u6784\u5efa\u9875\u9762\u4e3b\u4f53\u6846\u67b6\u5e76\u6dfb\u52a0\u5185\u5bb9\u5143\u7d20.png\" alt=\"Construir a estrutura principal da p\u00e1gina e adicionar elementos de conte\u00fado usando o Elementor\" class=\"wp-image-23324\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u6784\u5efa\u9875\u9762\u4e3b\u4f53\u6846\u67b6\u5e76\u6dfb\u52a0\u5185\u5bb9\u5143\u7d20.png 1000w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u6784\u5efa\u9875\u9762\u4e3b\u4f53\u6846\u67b6\u5e76\u6dfb\u52a0\u5185\u5bb9\u5143\u7d20-18x10.png 18w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Ap\u00f3s finalizar a estrutura e a cria\u00e7\u00e3o do cabe\u00e7alho e da barra de navega\u00e7\u00e3o, o pr\u00f3ximo passo \u00e9 construir a \u00e1rea principal de conte\u00fado da p\u00e1gina. De forma semelhante \u00e0 se\u00e7\u00e3o anterior, \"Usando containers do Elementor para estruturar o cabe\u00e7alho e a barra de navega\u00e7\u00e3o\", o design da \u00e1rea principal tamb\u00e9m se baseia no uso dos componentes de container do Elementor. A diferen\u00e7a \u00e9 que a parte principal geralmente inclui uma variedade maior de elementos de conte\u00fado, como textos, imagens, \u00edcones, v\u00eddeos, bot\u00f5es e formul\u00e1rios, todos dispon\u00edveis como componentes no Elementor.\n\nNa pr\u00e1tica, ao dominar de forma flex\u00edvel o ajuste da largura dos containers, a configura\u00e7\u00e3o de margens e preenchimentos, e os m\u00e9todos de aninhamento de subcontainers, \u00e9 poss\u00edvel criar uma grande variedade de layouts de p\u00e1gina. Por exemplo, utilizando layouts de colunas adequados, \u00e9 poss\u00edvel distribuir o conte\u00fado de forma organizada. Combinando ajustes de largura adapt\u00e1vel e espa\u00e7amento, a p\u00e1gina manter\u00e1 uma boa apar\u00eancia visual em diferentes tamanhos de tela. Esta \u00e9 uma das maiores vantagens do Elementor: permitir que usu\u00e1rios criem estruturas de p\u00e1gina diversificadas sem a necessidade de codifica\u00e7\u00e3o.<\/p>\n\n\n\n<p>Portanto, ao projetar a \u00e1rea principal da p\u00e1gina, planejar adequadamente a estrutura dos containers \u00e9 essencial. Uma hierarquia de containers clara e organizada n\u00e3o apenas garante um layout bonito, mas tamb\u00e9m melhora a responsividade, oferecendo uma excelente experi\u00eancia de navega\u00e7\u00e3o em diferentes dispositivos. A seguir, o autor explicar\u00e1 passo a passo como usar os componentes de container do Elementor para estruturar a parte principal da p\u00e1gina de cima para baixo, aplicando elementos de conte\u00fado e tornando a p\u00e1gina mais din\u00e2mica e rica em camadas!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"block\" style=\"margin-bottom:30px\">1. Se\u00e7\u00e3o de Banner<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"537\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Banner\u533a\u5757.png\" alt=\"Banner\u533a\u5757\u7684\u5e03\u5c40\u548c\u5185\u5bb9\u7f16\u8f91\" class=\"wp-image-23322\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Banner\u533a\u5757.png 1000w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Banner\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Geralmente, a se\u00e7\u00e3o de Banner precisa apenas de um \u00fanico componente: o componente Slides do Elementor. O Slides \u00e9 o componente usado para criar blocos de carrossel de imagens e j\u00e1 possui fun\u00e7\u00f5es integradas para configurar t\u00edtulo, texto e links. Assim, a se\u00e7\u00e3o de Banner n\u00e3o precisa de m\u00faltiplos containers aninhados \u2014 basta colocar um \u00fanico container no topo da p\u00e1gina.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">(1) Configura\u00e7\u00f5es comuns do componente Slides<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-top:30px;margin-bottom:30px\">Configura\u00e7\u00e3o dos par\u00e2metros de fundo<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"725\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u80cc\u666f\u7684\u53c2\u6570\u8bbe\u7f6e.png\" alt=\"Configura\u00e7\u00e3o dos par\u00e2metros de fundo\" class=\"wp-image-23326\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u80cc\u666f\u7684\u53c2\u6570\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u80cc\u666f\u7684\u53c2\u6570\u8bbe\u7f6e-13x12.png 13w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Como mostrado na imagem acima, ao expandir a aba de op\u00e7\u00f5es de Slides, surgir\u00e1 a \u00e1rea destacada em vermelho onde \u00e9 poss\u00edvel configurar os par\u00e2metros de fundo. Nesta \u00e1rea, voc\u00ea pode fazer o upload da imagem de fundo para o carrossel, definir uma cor de fundo, e tamb\u00e9m, na aba \u201cContent\u201d (Conte\u00fado) no topo, adicionar o t\u00edtulo, a descri\u00e7\u00e3o e o texto dos bot\u00f5es, al\u00e9m de configurar o endere\u00e7o URL do bot\u00e3o.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-bottom:30px\">Configura\u00e7\u00f5es de par\u00e2metros de posicionamento de conte\u00fado<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"609\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5185\u5bb9\u5b9a\u4f4d\u53c2\u6570\u8bbe\u7f6e.png\" alt=\"Configura\u00e7\u00f5es de par\u00e2metros de posicionamento de conte\u00fado\" class=\"wp-image-23327\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5185\u5bb9\u5b9a\u4f4d\u53c2\u6570\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5185\u5bb9\u5b9a\u4f4d\u53c2\u6570\u8bbe\u7f6e-16x12.png 16w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Na \u00e1rea de configura\u00e7\u00f5es de par\u00e2metros do componente Slides, na aba \"Estilo\", \u00e9 poss\u00edvel definir o posicionamento personalizado do conte\u00fado. De cima para baixo, os par\u00e2metros de posicionamento que podem ser configurados s\u00e3o: largura do conte\u00fado, padding (espa\u00e7amento interno), alinhamento horizontal, alinhamento vertical e alinhamento do texto. Atrav\u00e9s dessas configura\u00e7\u00f5es de posicionamento, \u00e9 poss\u00edvel personalizar a posi\u00e7\u00e3o do t\u00edtulo, do texto descritivo e do bot\u00e3o.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-bottom:30px\">Configura\u00e7\u00f5es de estilo do texto<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"599\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7684\u6837\u5f0f\u8bbe\u7f6e.png\" alt=\"Configura\u00e7\u00f5es de estilo do texto\" class=\"wp-image-23329\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7684\u6837\u5f0f\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7684\u6837\u5f0f\u8bbe\u7f6e-16x12.png 16w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">As configura\u00e7\u00f5es de estilo do texto, conforme mostrado na imagem acima, tamb\u00e9m est\u00e3o localizadas na aba \"Estilo\", assim como as \"Configura\u00e7\u00f5es de par\u00e2metros de posicionamento de conte\u00fado\" mencionadas anteriormente. Na imagem, as \u00e1reas de texto (t\u00edtulo, descri\u00e7\u00e3o e bot\u00e3o) s\u00e3o destacadas com uma moldura vermelha; clicando no tipo de texto correspondente, \u00e9 poss\u00edvel abrir as configura\u00e7\u00f5es de estilo <strong><a href=\"https:\/\/www.w3.org\/Style\/CSS\/Overview.en.html\" data-type=\"link\" data-id=\"https:\/\/www.w3.org\/Style\/CSS\/Overview.en.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">CSS<\/a><\/strong> para personalizar propriedades como tamanho da fonte e cor do texto.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"business\" style=\"margin-bottom:30px\">2. Bloco de descri\u00e7\u00e3o de servi\u00e7os<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"409\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4e1a\u52a1\u63cf\u8ff0\u533a\u5757.png\" alt=\"Se\u00e7\u00e3o de descri\u00e7\u00e3o dos servi\u00e7os\" class=\"wp-image-23332\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4e1a\u52a1\u63cf\u8ff0\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4e1a\u52a1\u63cf\u8ff0\u533a\u5757-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Os elementos do bloco de descri\u00e7\u00e3o de servi\u00e7os podem ser compostos de forma flex\u00edvel utilizando v\u00e1rios tipos de componentes, de acordo com as necessidades espec\u00edficas de design da p\u00e1gina. De modo geral, quanto mais rico for o conte\u00fado do bloco de descri\u00e7\u00e3o, maior ser\u00e1 a quantidade de componentes necess\u00e1ria. Diferentemente do componente Slides comumente usado na se\u00e7\u00e3o de Banner, outros blocos da p\u00e1gina n\u00e3o possuem uma quantidade fixa de componentes obrigat\u00f3rios, permitindo uma combina\u00e7\u00e3o livre conforme as necessidades de conte\u00fado. Tomando como exemplo o bloco de descri\u00e7\u00e3o de servi\u00e7os mostrado na imagem acima, essa se\u00e7\u00e3o utiliza apenas o componente de t\u00edtulo e o componente de bot\u00e3o, resultando em um design geral simples e direto. A seguir, o autor explicar\u00e1 em detalhes as configura\u00e7\u00f5es de par\u00e2metros mais comuns desses dois componentes, para ajudar voc\u00ea a dominar melhor suas t\u00e9cnicas de aplica\u00e7\u00e3o.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">(1) Configura\u00e7\u00f5es comuns do componente de T\u00edtulo<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-top:30px;margin-bottom:30px\">Configura\u00e7\u00f5es na aba \"Conte\u00fado\" do componente de T\u00edtulo<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"465\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"Configura\u00e7\u00f5es na aba &quot;Conte\u00fado&quot; do componente de T\u00edtulo\" class=\"wp-image-23335\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">Ao selecionar o componente de t\u00edtulo no Navegador do Elementor, conforme mostrado na imagem acima, a \u00e1rea de configura\u00e7\u00f5es do componente no lado esquerdo exibir\u00e1, por padr\u00e3o, a aba \"Conte\u00fado\". Nesta aba, h\u00e1 tr\u00eas configura\u00e7\u00f5es importantes: o campo de entrada para o conte\u00fado do t\u00edtulo, o campo de entrada para o link do t\u00edtulo e a configura\u00e7\u00e3o da tag HTML Hn. A entrada do conte\u00fado do t\u00edtulo \u00e9 obrigat\u00f3ria, pois determina o texto que ser\u00e1 exibido na p\u00e1gina. J\u00e1 o campo de link \u00e9 opcional; adicionar ou n\u00e3o um link depende da necessidade espec\u00edfica, e na maioria dos casos, os t\u00edtulos n\u00e3o possuem links. A configura\u00e7\u00e3o da tag HTML Hn \u00e9 crucial para a <strong><a href=\"https:\/\/www.szlogic.net\/pt\/seo\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/seo\/\" target=\"_blank\" rel=\"noreferrer noopener\">otimiza\u00e7\u00e3o de SEO<\/a><\/strong>, pois escolher corretamente entre H1, H2, H3, etc., ajuda os mecanismos de busca a identificar a estrutura da p\u00e1gina. Um ajuste adequado pode melhorar a legibilidade do site e seu desempenho nos rankings de busca. Portanto, ao editar o componente de t\u00edtulo, al\u00e9m de garantir a precis\u00e3o do conte\u00fado, \u00e9 necess\u00e1rio configurar as tags HTML de maneira apropriada de acordo com a estrutura da p\u00e1gina e as necessidades de SEO<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-bottom:30px\">Configura\u00e7\u00f5es de estilo na aba \"Estilo\" do componente de T\u00edtulo<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"380\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879.png\" alt=\"Configura\u00e7\u00f5es de estilo na aba &quot;Estilo&quot; do componente de T\u00edtulo\" class=\"wp-image-23337\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Se at\u00e9 aqui voc\u00ea ainda n\u00e3o dominou o padr\u00e3o de localiza\u00e7\u00e3o das configura\u00e7\u00f5es de estilo dos componentes no Elementor, o autor deixa uma dica: todas as configura\u00e7\u00f5es de estilo dos componentes no Elementor est\u00e3o localizadas na aba \"Estilo\" do painel de configura\u00e7\u00f5es do componente. Embora os detalhes das op\u00e7\u00f5es de estilo possam variar de um componente para outro, o caminho de configura\u00e7\u00e3o \u00e9 sempre o mesmo. Tomando o componente de t\u00edtulo como exemplo, conforme destacado no ret\u00e2ngulo vermelho da imagem, as configura\u00e7\u00f5es de estilo mais comuns incluem alinhamento do t\u00edtulo, cor do texto do t\u00edtulo e configura\u00e7\u00f5es de tipografia. Na se\u00e7\u00e3o de tipografia, \u00e9 poss\u00edvel ajustar o tipo de fonte, o tamanho da fonte, o peso da fonte (bold), a altura da linha, entre outros estilos, para garantir que a apar\u00eancia do t\u00edtulo esteja alinhada ao design geral da p\u00e1gina. Compreendendo este padr\u00e3o, ser\u00e1 poss\u00edvel localizar rapidamente as op\u00e7\u00f5es de estilo ao editar n\u00e3o apenas t\u00edtulos, mas tamb\u00e9m bot\u00f5es, imagens e outros componentes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">(2) Configura\u00e7\u00f5es comuns do componente de Bot\u00e3o<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-top:30px;margin-bottom:30px\">Configura\u00e7\u00f5es na aba \"Conte\u00fado\" do componente de Bot\u00e3o<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"396\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6309\u94ae\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"Configura\u00e7\u00f5es na aba &quot;Conte\u00fado&quot; do componente de Bot\u00e3o\" class=\"wp-image-23339\"\/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Na aba \"Conte\u00fado\" do componente de bot\u00e3o, como destacado no ret\u00e2ngulo vermelho da imagem acima, as configura\u00e7\u00f5es mais comuns s\u00e3o: texto, link e \u00edcone. Dentre esses, alguns s\u00e3o obrigat\u00f3rios e outros opcionais. A entrada de texto \u00e9 obrigat\u00f3ria, pois define o nome do bot\u00e3o. A configura\u00e7\u00e3o de link tamb\u00e9m \u00e9 essencial, j\u00e1 que um bot\u00e3o sem link perde sua funcionalidade. A configura\u00e7\u00e3o de \u00edcone, no entanto, \u00e9 opcional: se o design do bot\u00e3o n\u00e3o exigir \u00edcones, basta manter a configura\u00e7\u00e3o padr\u00e3o. Caso queira adicionar um \u00edcone ao bot\u00e3o, \u00e9 poss\u00edvel clicar no bot\u00e3o correspondente para acessar a biblioteca de \u00edcones do Elementor e escolher um \u00edcone dispon\u00edvel ou fazer o upload de um arquivo de \u00edcone personalizado.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-bottom:30px\">Configura\u00e7\u00f5es de estilo na aba \"Estilo\" do componente de Bot\u00e3o<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"409\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6309\u94ae\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879.png\" alt=\"Configura\u00e7\u00f5es de estilo na aba &quot;Estilo&quot; do componente de Bot\u00e3o\" class=\"wp-image-23340\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6309\u94ae\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6309\u94ae\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">A aba \"Estilo\" do componente de bot\u00e3o inclui diversas op\u00e7\u00f5es de configura\u00e7\u00e3o, como mostrado na imagem acima. Em compara\u00e7\u00e3o com o componente de t\u00edtulo, as op\u00e7\u00f5es de estilo do bot\u00e3o s\u00e3o mais ricas e abrangem v\u00e1rios par\u00e2metros importantes para ajustar com precis\u00e3o a apar\u00eancia visual e a experi\u00eancia de intera\u00e7\u00e3o. Primeiramente, h\u00e1 a configura\u00e7\u00e3o de alinhamento, que determina a posi\u00e7\u00e3o do bot\u00e3o dentro do container (centralizado, alinhado \u00e0 esquerda ou \u00e0 direita). As op\u00e7\u00f5es de tipografia s\u00e3o semelhantes \u00e0s de outros componentes, permitindo ajustes no tipo de fonte, tamanho, peso da fonte, entre outros estilos.<\/p>\n\n\n\n<p>A configura\u00e7\u00e3o de cor do texto permite definir cores diferentes para o estado normal e para o estado de hover (quando o usu\u00e1rio passa o mouse sobre o bot\u00e3o), garantindo boa legibilidade e feedback visual adequado. Al\u00e9m disso, a configura\u00e7\u00e3o de bordas arredondadas controla o grau de arredondamento dos cantos do bot\u00e3o, podendo criar bot\u00f5es com cantos retos, arredondados ou at\u00e9 totalmente circulares. O efeito de sombra de caixa (box shadow) pode ser utilizado para adicionar profundidade ao bot\u00e3o, tornando-o mais atrativo e intuitivo para o clique. Por fim, o ajuste de padding (preenchimento interno) define o espa\u00e7o entre o texto e as bordas do bot\u00e3o, o que permite otimizar o tamanho e o equil\u00edbrio visual do bot\u00e3o. Combinando todas essas configura\u00e7\u00f5es de forma apropriada, \u00e9 poss\u00edvel criar bot\u00f5es esteticamente agrad\u00e1veis e otimizados para a experi\u00eancia do usu\u00e1rio, de acordo com as necessidades do design da p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"product\" style=\"margin-bottom:30px\">3\u3001Se\u00e7\u00e3o de produtos e servi\u00e7os<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"427\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u548c\u670d\u52a1\u533a\u5757.png\" alt=\"Se\u00e7\u00e3o de produtos e servi\u00e7os\" class=\"wp-image-23342\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u548c\u670d\u52a1\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u548c\u670d\u52a1\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">A estrutura de cont\u00eaineres no bloco de produtos e servi\u00e7os \u00e9 mais complexa e possui uma hierarquia mais rica, em compara\u00e7\u00e3o com os blocos que foram apresentados anteriormente. Como mostrado na imagem acima, o cont\u00eainer filho do lado direito do bloco usa o componente Galeria (Gallery), exibindo 3 imagens relacionadas aos produtos ou servi\u00e7os. Cada imagem est\u00e1 acompanhada de informa\u00e7\u00f5es textuais para melhorar a express\u00e3o visual e a explica\u00e7\u00e3o do conte\u00fado. No cont\u00eainer filho da esquerda, o componente de t\u00edtulo \u00e9 combinado com v\u00e1rios componentes de bot\u00e3o, proporcionando uma orienta\u00e7\u00e3o textual clara e efeitos interativos.<\/p>\n\n\n\n<p>O componente Galeria oferece diversos layouts e par\u00e2metros de configura\u00e7\u00e3o, como mostrado na \u00e1rea de configura\u00e7\u00f5es \u00e0 esquerda da imagem. \u00c9 poss\u00edvel ajustar o arranjo das imagens, n\u00famero de colunas, espa\u00e7amento, tipo de link, entre outros. No exemplo mostrado, a galeria usa um layout de 4 colunas e tem o recurso de Lazy Load (carregamento pregui\u00e7oso) ativado para melhorar o desempenho da p\u00e1gina. O componente de t\u00edtulo no cont\u00eainer da esquerda foi configurado com uma fonte maior para garantir um efeito visual marcante. E os v\u00e1rios componentes de bot\u00e3o abaixo servem para guiar os usu\u00e1rios para explorar diferentes categorias de produtos e servi\u00e7os. A cor do bot\u00e3o, estilo de borda e texto podem ser ajustados na aba \"Estilo\", garantindo que fiquem alinhados com o design geral. Nas se\u00e7\u00f5es anteriores, o autor j\u00e1 detalhou as configura\u00e7\u00f5es de par\u00e2metros e estilo dos componentes de t\u00edtulo e bot\u00e3o. Agora, vamos nos concentrar no componente Galeria (Gallery), abordando sua configura\u00e7\u00e3o de par\u00e2metros e ajustes de estilo para ajudar a utilizar este componente de forma flex\u00edvel na disposi\u00e7\u00e3o das imagens.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) Configura\u00e7\u00f5es na aba \"Conte\u00fado\" do componente Galeria<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"514\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"\u753b\u5eca\u7ec4\u4ef6\u201c\u5185\u5bb9\u201d\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879\" class=\"wp-image-23346\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Na aba \"Conte\u00fado\", o componente Galeria oferece v\u00e1rias op\u00e7\u00f5es de configura\u00e7\u00e3o essenciais para personalizar a exibi\u00e7\u00e3o das imagens. Primeiramente, na op\u00e7\u00e3o Type (Tipo), \u00e9 poss\u00edvel escolher o formato de exibi\u00e7\u00e3o da galeria, como imagem \u00fanica (Single) ou grade (Grid), atendendo \u00e0s diferentes necessidades de layout da p\u00e1gina. A seguir, na \u00e1rea de sele\u00e7\u00e3o de imagens, s\u00e3o exibidas as imagens j\u00e1 adicionadas. O usu\u00e1rio pode clicar no \u00edcone de \"+\" para enviar novas imagens ou remover as desnecess\u00e1rias. A op\u00e7\u00e3o Order By (Ordenar por) permite configurar a ordem das imagens, por exemplo, em sequ\u00eancia padr\u00e3o ou aleat\u00f3ria. A op\u00e7\u00e3o Lazy Load (Carregamento pregui\u00e7oso) permite ativar ou desativar o carregamento gradual das imagens, o que melhora o desempenho, especialmente em galerias com muitas imagens.<\/p>\n\n\n\n<p>A op\u00e7\u00e3o Layout (Layout) define a forma de arranjo das imagens. No exemplo mostrado, foi escolhido o layout de grade (Grid). A op\u00e7\u00e3o Columns (Colunas) configura o n\u00famero de colunas na galeria, permitindo ajustar a disposi\u00e7\u00e3o das imagens conforme a largura da p\u00e1gina. A op\u00e7\u00e3o Spacing (Espa\u00e7amento) controla a dist\u00e2ncia entre as imagens, podendo ser ajustada atrav\u00e9s de um controle deslizante para otimizar o efeito visual. Na op\u00e7\u00e3o Link (Link), o usu\u00e1rio pode configurar o comportamento do clique nas imagens da galeria, por exemplo, abrindo o arquivo de m\u00eddia original ou direcionando para uma p\u00e1gina espec\u00edfica. A op\u00e7\u00e3o Lightbox (Efeito de caixa de luz) permite exibir as imagens em uma janela pop-up para uma melhor experi\u00eancia de visualiza\u00e7\u00e3o. Por fim, a op\u00e7\u00e3o Aspect Ratio (Propor\u00e7\u00e3o) define a propor\u00e7\u00e3o da exibi\u00e7\u00e3o das imagens. No exemplo mostrado, a propor\u00e7\u00e3o 9:16 foi escolhida para exibir as imagens em formato vertical. Com essas op\u00e7\u00f5es, o usu\u00e1rio pode personalizar a exibi\u00e7\u00e3o do componente Galeria de acordo com as necessidades de design da p\u00e1gina e melhorar a performance visual do site.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(2) Configura\u00e7\u00f5es na aba \"Estilo\" do componente Galeria<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"529\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"\u753b\u5eca\u7ec4\u4ef6\u201c\u6837\u5f0f\u201d\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879\" class=\"wp-image-23347\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Na aba \"Estilo\", o componente Galeria oferece v\u00e1rias op\u00e7\u00f5es de personaliza\u00e7\u00e3o da apar\u00eancia. A se\u00e7\u00e3o Image (Imagem) permite ajustar o estilo da borda das imagens, cantos arredondados, anima\u00e7\u00f5es ao passar o mouse, entre outros. Nas configura\u00e7\u00f5es de Image (Imagem), \u00e9 poss\u00edvel alternar entre os estados Normal e Hover (ao passar o mouse) e aplicar estilos diferentes em cada um deles. No estado Normal, \u00e9 poss\u00edvel ajustar a cor da borda (Border Color), a largura da borda (Border Width) e o raio da borda (Border Radius) para controlar o estilo da borda da imagem. Al\u00e9m disso, h\u00e1 suporte para filtros CSS, permitindo aplicar efeitos como brilho, contraste, satura\u00e7\u00e3o, etc., para aumentar a percep\u00e7\u00e3o visual.<\/p>\n\n\n\n<p>No estado Hover, \u00e9 poss\u00edvel adicionar efeitos de intera\u00e7\u00e3o, como Anima\u00e7\u00f5es de Hover (Hover Animation), com v\u00e1rias op\u00e7\u00f5es de anima\u00e7\u00e3o para modificar a imagem quando o usu\u00e1rio passar o mouse sobre ela. A op\u00e7\u00e3o Animation Duration (Dura\u00e7\u00e3o da anima\u00e7\u00e3o) permite ajustar a velocidade da anima\u00e7\u00e3o, garantindo que ela esteja alinhada \u00e0 experi\u00eancia do usu\u00e1rio. Al\u00e9m disso, h\u00e1 as op\u00e7\u00f5es de Overlay (Sobreposi\u00e7\u00e3o) e Content (Conte\u00fado), que permitem personalizar o efeito de sobreposi\u00e7\u00e3o da galeria e a exibi\u00e7\u00e3o de texto nas imagens, aprimorando ainda mais o efeito visual. Com essas configura\u00e7\u00f5es, \u00e9 poss\u00edvel ajustar o estilo geral da galeria para atender ao design do site e aos requisitos interativos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"core\" style=\"margin-bottom:30px\">4. Bloco de Apresenta\u00e7\u00e3o das Principais Vantagens do Produto<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"457\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u6838\u5fc3\u4f18\u52bf\u5f15\u5bfc\u533a\u5757.png\" alt=\"Se\u00e7\u00e3o de destaques dos principais diferenciais\" class=\"wp-image-23348\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u6838\u5fc3\u4f18\u52bf\u5f15\u5bfc\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u6838\u5fc3\u4f18\u52bf\u5f15\u5bfc\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">O bloco de apresenta\u00e7\u00e3o das principais vantagens do produto usa os mesmos componentes do bloco de \"Descri\u00e7\u00e3o do Neg\u00f3cio\" que foi apresentado anteriormente. A \u00fanica diferen\u00e7a \u00e9 que este bloco tem um elemento adicional de imagem de fundo no cont\u00eainer. Esta altera\u00e7\u00e3o introduz um novo conceito, ent\u00e3o o autor explicar\u00e1 como adicionar uma imagem de fundo ao cont\u00eainer neste segmento. Para as configura\u00e7\u00f5es e funcionalidades dos componentes de t\u00edtulo, editor de texto e bot\u00e3o, o usu\u00e1rio pode se referir \u00e0s configura\u00e7\u00f5es e pr\u00e1tica do \"Bloco de Descri\u00e7\u00e3o do Neg\u00f3cio\" para treinamento.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) Como adicionar uma imagem de fundo ao cont\u00eainer<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"524\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u6dfb\u52a0\u80cc\u666f\u56fe\u7247\u7684\u64cd\u4f5c\u65b9\u6cd5.png\" alt=\"\u5bb9\u5668\u6dfb\u52a0\u80cc\u666f\u56fe\u7247\u7684\u64cd\u4f5c\u65b9\u6cd5\" class=\"wp-image-23355\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u6dfb\u52a0\u80cc\u666f\u56fe\u7247\u7684\u64cd\u4f5c\u65b9\u6cd5.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u6dfb\u52a0\u80cc\u666f\u56fe\u7247\u7684\u64cd\u4f5c\u65b9\u6cd5-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px;margin-bottom:30px\">Para adicionar uma imagem de fundo a um componente de cont\u00eainer no Elementor, \u00e9 necess\u00e1rio acessar a aba \"Estilo\" nas configura\u00e7\u00f5es do cont\u00eainer. Primeiramente, selecione o cont\u00eainer que voc\u00ea deseja adicionar uma imagem de fundo, e na \u00e1rea de configura\u00e7\u00f5es \u00e0 esquerda, mude para a aba \"Estilo\". Na se\u00e7\u00e3o de \"Fundo\", voc\u00ea ver\u00e1 a op\u00e7\u00e3o \"Fundo sobreposto\" (Background Overlay). Escolha a op\u00e7\u00e3o de tipo \"Imagem\" e envie ou selecione uma imagem da biblioteca de m\u00eddia. Ap\u00f3s escolher a imagem, \u00e9 poss\u00edvel ajustar como ela ser\u00e1 exibida. A resolu\u00e7\u00e3o da imagem pode ser mantida como \"original\" ou ajustada conforme necess\u00e1rio. Em \"Posicionamento\", escolha o alinhamento adequado, como \"Centro\" para garantir que a imagem sempre fique centralizada. A op\u00e7\u00e3o \"Fundo fixo\" define se a imagem vai se mover ao rolar a p\u00e1gina; se voc\u00ea deseja que ela permane\u00e7a fixa, escolha o modo \"fixo\". Em \"Repeti\u00e7\u00e3o de fundo\", pode-se escolher \"N\u00e3o repetir\" para evitar que imagens pequenas se repitam no fundo. Al\u00e9m disso, em \"Tamanho da exibi\u00e7\u00e3o\", escolher \"Cobrir\" faz com que a imagem preencha completamente o cont\u00eainer, sem deixar espa\u00e7os em branco. Com essas configura\u00e7\u00f5es, o usu\u00e1rio pode controlar com precis\u00e3o a exibi\u00e7\u00e3o da imagem de fundo no cont\u00eainer para que ela se ajuste \u00e0s necessidades de design da p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"brand\" style=\"margin-bottom:30px\">5. Bloco de Hist\u00f3ria da Marca<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"430\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u54c1\u724c\u6545\u4e8b\u533a\u5757.png\" alt=\"Se\u00e7\u00e3o de hist\u00f3ria da marca\" class=\"wp-image-23352\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u54c1\u724c\u6545\u4e8b\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u54c1\u724c\u6545\u4e8b\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">O layout do cont\u00eainer e os componentes usados no bloco de hist\u00f3ria da marca s\u00e3o semelhantes aos do \"Bloco de Produtos e Neg\u00f3cios\". Ele tamb\u00e9m utiliza os componentes de t\u00edtulo, bot\u00e3o e galeria para exibir o conte\u00fado, e a estrutura geral continua sendo a de um cont\u00eainer pai com dois cont\u00eaineres filhos. O leitor pode aplicar os par\u00e2metros de cont\u00eainer, os m\u00e9todos de layout aninhado e as configura\u00e7\u00f5es de estilo e par\u00e2metros dos componentes de t\u00edtulo, bot\u00e3o e galeria para reproduzir o layout do \"Bloco de Hist\u00f3ria da Marca\" conforme mostrado na imagem acima.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"information\" style=\"margin-bottom:30px\">6. Bloco de Informa\u00e7\u00f5es Recentes<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"432\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6700\u65b0\u4fe1\u606f\u533a\u5757.png\" alt=\"Se\u00e7\u00e3o de \u00faltimas novidades\" class=\"wp-image-23354\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6700\u65b0\u4fe1\u606f\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6700\u65b0\u4fe1\u606f\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Para exibir os metadados (Meta Data) do componente Post do Elementor no formato em ingl\u00eas na p\u00e1gina, \u00e9 necess\u00e1rio ajustar o idioma do site WordPress para o ingl\u00eas. Isso ocorre porque a interface de edi\u00e7\u00e3o do Elementor e alguns metadados geralmente leem a configura\u00e7\u00e3o de idioma do site e exibem as informa\u00e7\u00f5es de acordo. Assim, como mostrado na captura de tela acima, as configura\u00e7\u00f5es de par\u00e2metros e estilo do componente Post tamb\u00e9m se tornam em ingl\u00eas. Em seguida, o autor explicar\u00e1 as configura\u00e7\u00f5es principais de funcionalidade e os m\u00e9todos de ajuste de estilo do componente Post, para que todos possam aplicar este componente de maneira mais eficaz.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) Configura\u00e7\u00f5es na aba \"Conte\u00fado\" do componente Post<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"434\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"post\u7ec4\u4ef6\u201c\u5185\u5bb9\u201d\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879\" class=\"wp-image-23359\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">No componente Post do Elementor, a aba \"Conte\u00fado\" oferece uma s\u00e9rie de configura\u00e7\u00f5es chave para controlar o layout e a forma de exibi\u00e7\u00e3o da lista de artigos. Abaixo est\u00e3o os detalhes de cada configura\u00e7\u00e3o; atrav\u00e9s delas, os usu\u00e1rios podem ajustar de forma flex\u00edvel a maneira como o conte\u00fado do componente Post \u00e9 exibido, alinhando-o melhor ao estilo de design da p\u00e1gina:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"translation-block\"><strong>Layout:<\/strong> A se\u00e7\u00e3o de layout permite que o usu\u00e1rio escolha o estilo de exibi\u00e7\u00e3o dos posts. A op\u00e7\u00e3o \"Skin\" define a apar\u00eancia geral, como o modo \"Cards\", que organiza o conte\u00fado dos artigos em formato de cart\u00f5es. Em seguida, a op\u00e7\u00e3o \"Columns\" especifica o n\u00famero de colunas na lista de posts, enquanto \"Posts Per Page\" determina quantos artigos ser\u00e3o exibidos por p\u00e1gina.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Imagem (Image):<\/strong> As configura\u00e7\u00f5es de imagem incluem o bot\u00e3o \"Show Image\", que controla a exibi\u00e7\u00e3o da miniatura dos artigos; a op\u00e7\u00e3o \"Masonry\" ativa um layout em grade flu\u00edda, onde imagens e blocos de artigos se organizam de acordo com diferentes alturas para criar um efeito visual din\u00e2mico. \"Image Resolution\" permite definir a resolu\u00e7\u00e3o da imagem, como \"Medium 0.3x\" para reduzir o peso do carregamento, e \"Image Ratio\" ajusta a propor\u00e7\u00e3o largura\/altura da imagem para garantir harmonia no layout.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>T\u00edtulo (Title):<\/strong> A se\u00e7\u00e3o de t\u00edtulo oferece o bot\u00e3o \"Show\" para decidir se o t\u00edtulo do artigo ser\u00e1 exibido e permite selecionar a tag HTML via \"Title HTML Tag\", como H3, influenciando o peso de SEO e a hierarquia de estilo.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Resumo (Excerpt):<\/strong> A se\u00e7\u00e3o de resumo configura a exibi\u00e7\u00e3o do resumo do artigo. O bot\u00e3o \"Show\" define se o resumo ser\u00e1 mostrado, enquanto \"Excerpt Length\" controla o n\u00famero de caracteres exibidos, mantendo o layout da p\u00e1gina limpo. Al\u00e9m disso, \"Apply to custom Excerpt\" permite aplicar essas configura\u00e7\u00f5es tamb\u00e9m a campos de resumo personalizados.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Metadados (Meta Data):<\/strong> Na se\u00e7\u00e3o de metadados, \u00e9 poss\u00edvel configurar a exibi\u00e7\u00e3o de informa\u00e7\u00f5es como data, hora, categorias, tags e autor dos artigos, tornando a lista de posts mais completa e rica em informa\u00e7\u00f5es. Na captura de tela, informa\u00e7\u00f5es como data (Date), hora (Time) e n\u00famero de coment\u00e1rios (Comments) est\u00e3o habilitadas.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(2) Configura\u00e7\u00f5es da aba \"Estilo\" do componente Post<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"427\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"post\u7ec4\u4ef6\u201c\u6837\u5f0f\u201d\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879\" class=\"wp-image-23358\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">No componente Post do Elementor, a aba \"Estilo\" disponibiliza uma s\u00e9rie de op\u00e7\u00f5es para ajustes visuais, abrangendo layout geral, estilo de imagem, estilo de texto e configura\u00e7\u00f5es de espa\u00e7amento, assegurando que o visual da lista de artigos esteja alinhado com o design do site. A seguir, os detalhes das personaliza\u00e7\u00f5es dispon\u00edveis na aba \"Estilo\" do Post:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"translation-block\"><strong>Layout:<\/strong> A se\u00e7\u00e3o de layout permite ajustar o tamanho geral do componente Post, incluindo par\u00e2metros de largura e altura dos cart\u00f5es. Estas configura\u00e7\u00f5es ajudam a otimizar o posicionamento dos blocos de artigos para melhor se adaptarem a diferentes layouts de p\u00e1gina.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Imagem (Image):<\/strong> Na se\u00e7\u00e3o de imagem, \u00e9 poss\u00edvel ajustar detalhadamente o estilo da miniatura do artigo, como o raio da borda (Border Radius), a borda (Border) e os efeitos de sombra (Box Shadow). Esses ajustes permitem que as imagens apresentem estilos visuais variados, como bordas retas, cantos arredondados ou design com sensa\u00e7\u00e3o de profundidade.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Conte\u00fado (Content):<\/strong> Esta se\u00e7\u00e3o trata das configura\u00e7\u00f5es de estilo dos elementos internos dos artigos, como t\u00edtulo, resumo, bot\u00e3o \"Leia Mais\" e metadados (Meta Data). Em \"T\u00edtulo (Title)\", o usu\u00e1rio pode ajustar o tamanho da fonte, cor, peso da fonte e espa\u00e7amento, tornando os t\u00edtulos mais hier\u00e1rquicos na lista. A se\u00e7\u00e3o de \"Resumo (Excerpt)\" tamb\u00e9m permite ajustar o estilo da fonte, garantindo boa legibilidade e est\u00e9tica. Al\u00e9m disso, a se\u00e7\u00e3o de \"Metadados (Meta Data)\" possibilita a personaliza\u00e7\u00e3o de fonte e cor para informa\u00e7\u00f5es como data, categorias e tags, deixando a hierarquia informativa da lista de artigos mais clara.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"file\" style=\"margin-bottom:30px\">quatro\u3001Criando o arquivo de modelo de rodap\u00e9 (Footer) com Elementor<\/h2>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"399\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u521b\u5efafooter\uff08\u9875\u811a\uff09\u6a21\u677f\u6587\u4ef6.png\" alt=\"Criar o arquivo de modelo do rodap\u00e9 (Footer) no Elementor\" class=\"wp-image-23364\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u521b\u5efafooter\uff08\u9875\u811a\uff09\u6a21\u677f\u6587\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u521b\u5efafooter\uff08\u9875\u811a\uff09\u6a21\u677f\u6587\u4ef6-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">A se\u00e7\u00e3o de Footer (rodap\u00e9) \u00e9 a \u00faltima parte desta demonstra\u00e7\u00e3o, onde explicaremos como personalizar a estrutura e os elementos da p\u00e1gina. Ap\u00f3s concluir o layout e o design do rodap\u00e9, a estrutura da p\u00e1gina estar\u00e1 praticamente completa, formando uma p\u00e1gina integral. O ponto de entrada para criar o arquivo de modelo do Footer \u00e9 o mesmo do Header (cabe\u00e7alho): \u00e9 necess\u00e1rio acessar o Gerador de Temas do Elementor na interface frontal da p\u00e1gina. No painel de gerenciamento do Gerador de Temas, voc\u00ea pode encontrar a op\u00e7\u00e3o Footer (rodap\u00e9) no diret\u00f3rio de modelos \u00e0 esquerda, sendo o segundo item da lista. Ao clicar nela, voc\u00ea entrar\u00e1 na interface de gerenciamento do modelo de rodap\u00e9. Dentro dessa interface, clique no bot\u00e3o \u201cAdd New\u201d no canto superior direito para criar um novo modelo de Footer. Durante o processo de cria\u00e7\u00e3o, o Elementor oferece uma s\u00e9rie de estilos de rodap\u00e9 pr\u00e9-definidos que podem ser selecionados para agilizar o design. Se preferir criar um layout totalmente personalizado, basta fechar a janela de sele\u00e7\u00e3o de estilos e usar cont\u00eaineres e componentes livremente para desenhar um rodap\u00e9 de acordo com o estilo do seu site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"common\" style=\"margin-bottom:30px\">1. Formatos comuns de layout do Footer (rodap\u00e9)<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2532\" height=\"1438\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\u5e38\u89c1\u5bb9\u5668\u5e03\u5c40\u5f62\u5f0f.png\" alt=\"Footer\u5e38\u89c1\u5bb9\u5668\u5e03\u5c40\u5f62\u5f0f\" class=\"wp-image-23369\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\u5e38\u89c1\u5bb9\u5668\u5e03\u5c40\u5f62\u5f0f.png 2532w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\u5e38\u89c1\u5bb9\u5668\u5e03\u5c40\u5f62\u5f0f-18x10.png 18w\" sizes=\"(max-width: 2532px) 100vw, 2532px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Atrav\u00e9s dos aprendizados e pr\u00e1ticas anteriores, os leitores devem ter compreendido que, independentemente de ser um layout simples ou complexo, dominando a configura\u00e7\u00e3o de par\u00e2metros do cont\u00eainer pai, a dire\u00e7\u00e3o de ordena\u00e7\u00e3o e o m\u00e9todo de aninhamento dos cont\u00eaineres filhos, qualquer estrutura pode ser realizada. O layout do rodap\u00e9, como mostrado na imagem acima, n\u00e3o \u00e9 complicado: geralmente, ele \u00e9 feito aninhando v\u00e1rios cont\u00eaineres filhos dentro de um cont\u00eainer pai, sendo a dire\u00e7\u00e3o de ordena\u00e7\u00e3o dos filhos definida conforme o design. O layout demonstrado utiliza uma estrutura de tr\u00eas linhas de cont\u00eaineres filhos, e dentro do cont\u00eainer da segunda linha, foram aninhados tr\u00eas cont\u00eaineres em colunas. Ap\u00f3s organizar os cont\u00eaineres, podemos adicionar os elementos apropriados dentro de cada cont\u00eainer filho.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"component\" style=\"margin-bottom:30px\">2. Componentes mais utilizados no Footer (rodap\u00e9)<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"539\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\uff08\u9875\u811a\uff09\u5e38\u7528\u7684\u7ec4\u4ef6.png\" alt=\"Componentes comuns utilizados no rodap\u00e9 (Footer)\" class=\"wp-image-23370\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\uff08\u9875\u811a\uff09\u5e38\u7528\u7684\u7ec4\u4ef6.png 1000w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\uff08\u9875\u811a\uff09\u5e38\u7528\u7684\u7ec4\u4ef6-18x10.png 18w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Apesar de o Footer ser uma \u00e1rea estrutural no final da p\u00e1gina, ele ainda cumpre fun\u00e7\u00f5es pr\u00e1ticas importantes, como exibir informa\u00e7\u00f5es de copyright, contatos, links sociais, navega\u00e7\u00e3o secund\u00e1ria e formul\u00e1rios de inscri\u00e7\u00e3o. O n\u00edvel de complexidade do rodap\u00e9 varia conforme o estilo e as necessidades do site, podendo ser extremamente simples ou relativamente sofisticado. Com base na experi\u00eancia pr\u00e1tica em cria\u00e7\u00e3o de sites, foi desenvolvida uma combina\u00e7\u00e3o eficiente e funcional de componentes para rodap\u00e9s. Mesmo que a identidade de cada site seja diferente, utilizando esses componentes de forma racional \u00e9 poss\u00edvel criar rodap\u00e9s estruturados, bonitos e funcionais sem necessidade de designs excessivamente elaborados. A seguir, apresentarei a configura\u00e7\u00e3o de funcionalidades e o ajuste de estilos desses componentes, para garantir a harmonia entre a est\u00e9tica e o planejamento do design, refletindo o profissionalismo e a qualidade do seu site WordPress.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) Componente Site Logo<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"514\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Site-Logo\u7ec4\u4ef6.png\" alt=\"Site Logo\u7ec4\u4ef6\" class=\"wp-image-23376\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Site-Logo\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Site-Logo\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">O componente Site Logo j\u00e1 foi utilizado na se\u00e7\u00e3o sobre o Header, mas naquela ocasi\u00e3o o foco foi no layout geral e na combina\u00e7\u00e3o de componentes, sem explorar a fundo as funcionalidades e op\u00e7\u00f5es de estilo do Site Logo. Nesta se\u00e7\u00e3o, abordarei separadamente as configura\u00e7\u00f5es das abas \u201cConte\u00fado\u201d e \u201cEstilo\u201d para este componente, auxiliando a utiliza\u00e7\u00e3o flex\u00edvel em diferentes cen\u00e1rios.<\/p>\n\n\n\n<p>Na aba \u201cConte\u00fado\u201d, \u00e9 poss\u00edvel escolher entre usar o logo definido no backend do WordPress ou fazer o upload manual de uma imagem espec\u00edfica como logo. Al\u00e9m disso, \u00e9 poss\u00edvel definir o comportamento do link do logo (por exemplo, se ao clicar leva \u00e0 p\u00e1gina inicial) e ajustar o tamanho da imagem (como tamanho padr\u00e3o, miniatura, tamanho m\u00e9dio, etc.). J\u00e1 na aba \u201cEstilo\u201d, voc\u00ea pode controlar a apar\u00eancia visual do logo, como largura, largura m\u00e1xima para diferentes resolu\u00e7\u00f5es, opacidade, aplica\u00e7\u00e3o de filtros CSS (como escala de cinza, brilho, contraste) para melhor adequa\u00e7\u00e3o ao estilo do site. Tamb\u00e9m \u00e9 poss\u00edvel configurar bordas, cantos arredondados e adicionar sombra ao logo, trazendo mais profundidade visual. Esses ajustes garantem que o logo mantenha sua melhor apresenta\u00e7\u00e3o em qualquer dispositivo e tema.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(2) Componente T\u00edtulo<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"489\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6.png\" alt=\"\u6807\u9898\u7ec4\u4ef6\" class=\"wp-image-23377\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">As configura\u00e7\u00f5es do componente T\u00edtulo j\u00e1 foram detalhadas anteriormente na se\u00e7\u00e3o <strong>\u201cConstruindo a estrutura principal da p\u00e1gina e adicionando elementos de conte\u00fado com Elementor\u201d<\/strong>, no subt\u00f3pico \u201cBloco de descri\u00e7\u00e3o do servi\u00e7o\u201d. Portanto, aqui basta aplicar o que j\u00e1 foi aprendido para utiliz\u00e1-lo corretamente.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(3) Componente Lista de \u00cdcones<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"493\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u56fe\u6807\u5217\u8868\u7ec4\u4ef6.png\" alt=\"\u56fe\u6807\u5217\u8868\u7ec4\u4ef6\" class=\"wp-image-23378\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u56fe\u6807\u5217\u8868\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u56fe\u6807\u5217\u8868\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Na aba \u201cConte\u00fado\u201d do componente Lista de \u00cdcones do Elementor, \u00e9 poss\u00edvel configurar cada item da lista, definindo o \u00edcone (como check, seta, telefone) para melhorar a identifica\u00e7\u00e3o visual. Se preferir uma lista sem \u00edcones, basta excluir o \u00edcone de cada item, como feito nesta demonstra\u00e7\u00e3o. Cada item pode ter um t\u00edtulo e um link personalizados (para outras p\u00e1ginas ou n\u00fameros de telefone, por exemplo).<\/p>\n\n\n\n<p>Na aba \u201cEstilo\u201d, \u00e9 poss\u00edvel personalizar a apar\u00eancia visual da lista: ajustar cor, tamanho, espa\u00e7amento e efeito hover dos \u00edcones; para os textos, \u00e9 poss\u00edvel configurar fonte, tamanho da fonte, altura da linha, cor e espa\u00e7amento entre o \u00edcone e o texto. Se ativado, \u00e9 poss\u00edvel ainda personalizar as linhas divis\u00f3rias entre os itens (espessura, cor e estilo). Essas op\u00e7\u00f5es permitem adaptar a lista ao estilo visual da p\u00e1gina, seja para um design minimalista ou criativo.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(4) Componente \u00cdcones Sociais<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"485\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u793e\u4ea4\u56fe\u6807\u7ec4\u4ef6.png\" alt=\"\u793e\u4ea4\u56fe\u6807\u7ec4\u4ef6\" class=\"wp-image-23379\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u793e\u4ea4\u56fe\u6807\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u793e\u4ea4\u56fe\u6807\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Na aba \u201cConte\u00fado\u201d do componente \u00cdcones Sociais do Elementor, voc\u00ea pode adicionar links para diferentes redes sociais, como Facebook, Twitter, Youtube, entre outros, como mostrado na imagem acima. Cada item pode ter seu \u00edcone personalizado (da biblioteca integrada ou SVG), seu link correspondente, e definir se o link abrir\u00e1 em nova aba. Tamb\u00e9m \u00e9 poss\u00edvel adicionar plataformas personalizadas, escolhendo qualquer \u00edcone e link.<\/p>\n\n\n\n<p>Na aba \u201cEstilo\u201d, \u00e9 poss\u00edvel definir o tamanho, espa\u00e7amento, alinhamento dos \u00edcones e a paleta de cores (cores de marca oficial ou personalizadas). Tamb\u00e9m h\u00e1 op\u00e7\u00f5es para borda, cantos arredondados, cor de fundo e efeitos hover, como invers\u00e3o de cor, anima\u00e7\u00e3o de zoom ou efeitos de sombra, para deixar a intera\u00e7\u00e3o mais din\u00e2mica. Essas configura\u00e7\u00f5es permitem criar desde rodap\u00e9s sociais discretos at\u00e9 \u00e1reas de destaque visual para integra\u00e7\u00e3o de redes sociais.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(5) Componente Editor de Texto<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"491\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7f16\u8f91\u5668\u7ec4\u4ef6.png\" alt=\"\u6587\u672c\u7f16\u8f91\u5668\u7ec4\u4ef6\" class=\"wp-image-23380\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7f16\u8f91\u5668\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7f16\u8f91\u5668\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Na aba \u201cConte\u00fado\u201d do componente Editor de Texto do Elementor, voc\u00ea pode inserir e formatar livremente o conte\u00fado textual. O editor \u00e9 do tipo WYSIWYG (o que voc\u00ea v\u00ea \u00e9 o que voc\u00ea obt\u00e9m), similar ao editor cl\u00e1ssico do WordPress, permitindo aplicar negrito, it\u00e1lico, inserir links, ajustar alinhamentos, etc. Se necess\u00e1rio, tamb\u00e9m \u00e9 poss\u00edvel usar etiquetas din\u00e2micas do Elementor para inserir dados autom\u00e1ticos, como t\u00edtulo de post ou data. Essa aba \u00e9 focada no preenchimento e estrutura\u00e7\u00e3o do conte\u00fado textual, ideal para par\u00e1grafos, descri\u00e7\u00f5es ou informa\u00e7\u00f5es de copyright.<\/p>\n\n\n\n<p>Na aba \u201cEstilo\u201d, \u00e9 poss\u00edvel personalizar a apar\u00eancia do texto, definindo cor, fonte, tamanho da fonte, peso da fonte, altura da linha e espa\u00e7amento entre letras, garantindo que o texto se harmonize com o visual geral da p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"display\" style=\"margin-bottom:30px\">3. Publica\u00e7\u00e3o do arquivo de modelo de Footer (Rodap\u00e9) e configura\u00e7\u00e3o das condi\u00e7\u00f5es de exibi\u00e7\u00e3o<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"451\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6.png\" alt=\"\u9875\u811a\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6\" class=\"wp-image-23308\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">O arquivo de modelo de Footer (rodap\u00e9), assim como o de Header (cabe\u00e7alho), \u00e9 uma parte global do site WordPress. Portanto, a configura\u00e7\u00e3o das condi\u00e7\u00f5es de exibi\u00e7\u00e3o tamb\u00e9m deve ser definida para aparecer em todas as p\u00e1ginas do site. Os leitores podem seguir as etapas e op\u00e7\u00f5es indicadas na imagem acima para concluir a publica\u00e7\u00e3o do arquivo de modelo de rodap\u00e9 e a configura\u00e7\u00e3o das condi\u00e7\u00f5es de exibi\u00e7\u00e3o.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"show\" style=\"margin-bottom:30px\">4. Exibi\u00e7\u00e3o da p\u00e1gina finalizada criada com o editor Elementor<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"3045\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/WordPress\u9875\u9762\u81ea\u5b9a\u4e49\u9875\u9762\u8bbe\u8ba1\u6559\u5b66.png\" alt=\"WordPress\u9875\u9762\u81ea\u5b9a\u4e49\u9875\u9762\u8bbe\u8ba1\u6559\u5b66\" class=\"wp-image-23372\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/WordPress\u9875\u9762\u81ea\u5b9a\u4e49\u9875\u9762\u8bbe\u8ba1\u6559\u5b66.png 1000w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/WordPress\u9875\u9762\u81ea\u5b9a\u4e49\u9875\u9762\u8bbe\u8ba1\u6559\u5b66-4x12.png 4w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\"><strong>Conclus\u00e3o:<\/strong> As capturas de tela da p\u00e1gina completa exibidas acima s\u00e3o exatamente o produto que o autor construiu simultaneamente enquanto redigia este tutorial. Desde a cria\u00e7\u00e3o de uma nova p\u00e1gina no painel do WordPress, passando pela utiliza\u00e7\u00e3o do Elementor para criar separadamente os elementos e estruturas do cabe\u00e7alho, conte\u00fado principal e rodap\u00e9, cada etapa e cada configura\u00e7\u00e3o foram demonstradas com base no processo real de desenvolvimento. Pode-se dizer que o efeito final da p\u00e1gina \u00e9 o produto direto do conte\u00fado deste artigo. Esperamos que este tutorial de cria\u00e7\u00e3o de sites com Elementor, come\u00e7ando do zero, possa oferecer uma refer\u00eancia clara e t\u00e9cnicas pr\u00e1ticas para voc\u00ea que est\u00e1 aprendendo sobre design e desenvolvimento de p\u00e1ginas no WordPress. Se voc\u00ea encontrar problemas durante o processo, sinta-se \u00e0 vontade para voltar ao cap\u00edtulo correspondente para revisar os detalhes; se voc\u00ea j\u00e1 completou todo o processo com sucesso, tamb\u00e9m \u00e9 bem-vindo a adicionar mais designs personalizados e continuar expandindo suas p\u00e1ginas de alta qualidade.<\/p>\n\n\n\n<p class=\"translation-block\">Por fim, se ap\u00f3s ler este tutorial voc\u00ea sentir que ainda \u00e9 necess\u00e1rio aux\u00edlio t\u00e9cnico profissional para a cria\u00e7\u00e3o de sites WordPress, ou se deseja elevar o n\u00edvel de design das p\u00e1ginas feitas com Elementor, convidamos voc\u00ea a conhecer e entrar em contato com a Logic Digital Technology. Somos especializados em <strong><a href=\"https:\/\/www.szlogic.net\/pt\/web-design\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">design e desenvolvimento personalizado de sites WordPress<\/a><\/strong>, com ampla experi\u00eancia pr\u00e1tica, capazes de criar p\u00e1ginas profissionais alinhadas com o posicionamento da marca e as necessidades de neg\u00f3cios, focando na experi\u00eancia do usu\u00e1rio e nos objetivos de convers\u00e3o. Seja para sites corporativos, plataformas de e-commerce ou sites multil\u00edngues para com\u00e9rcio exterior, podemos fornecer solu\u00e7\u00f5es de cria\u00e7\u00e3o de sites eficientes, est\u00e1veis e escal\u00e1veis para voc\u00ea.<\/p>\n\n\n\n<p><strong>Este artigo \u00e9 propriedade da Logic Digital Technology (SZLOGIC). \u00c9 permitida a partilha pessoal para fins de estudo. \u00c9 estritamente proibido utilizar este artigo para qualquer finalidade comercial ou reprodu\u00e7\u00e3o sem autoriza\u00e7\u00e3o.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>WordPress\u6559\u5b66\uff1a\u4ece\u96f6\u5f00\u59cb\u4f7f\u7528Elementor\u7f16\u8f91\u5668\u81ea\u5b9a\u4e49\u6784\u5efa\u9875\u9762 \u5982\u679c\u4f60\u60f3\u6253\u9020\u4e00\u4e2a\u4e13\u4e1a\u53c8\u4e2a\u6027\u5316\u7684Wo [&hellip;]<\/p>","protected":false},"author":1,"featured_media":23270,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[87],"tags":[],"class_list":["post-23262","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.szlogic.net\/pt\/wp-json\/wp\/v2\/posts\/23262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.szlogic.net\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.szlogic.net\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.szlogic.net\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.szlogic.net\/pt\/wp-json\/wp\/v2\/comments?post=23262"}],"version-history":[{"count":73,"href":"https:\/\/www.szlogic.net\/pt\/wp-json\/wp\/v2\/posts\/23262\/revisions"}],"predecessor-version":[{"id":23397,"href":"https:\/\/www.szlogic.net\/pt\/wp-json\/wp\/v2\/posts\/23262\/revisions\/23397"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.szlogic.net\/pt\/wp-json\/wp\/v2\/media\/23270"}],"wp:attachment":[{"href":"https:\/\/www.szlogic.net\/pt\/wp-json\/wp\/v2\/media?parent=23262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.szlogic.net\/pt\/wp-json\/wp\/v2\/categories?post=23262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.szlogic.net\/pt\/wp-json\/wp\/v2\/tags?post=23262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}