existirConstrutor de sítios Web WordPressA personalização e a otimização da funcionalidade do seu sítio Web requerem normalmenteAdicionar trechos de código personalizadosO Elementor fornece uma poderosa funcionalidade de "Código personalizado" que facilita a adição de estilos específicos e funcionalidades interactivas ao seu sítio Web, como o código do Google Analytics ou o código do Facebook Pixel. Estes snippets de código podem ajudá-lo a rastrear os dados do seu sítio Web, melhorar a experiência do utilizador e até adicionar estilos específicos e funcionalidades interactivas.Trechos de código HTML, JavaScript e CSSAdicione-o ao seu sítio Web.
Introdução à funcionalidade de código personalizado
ElementorA funcionalidade de código personalizado permite-lhe adicionar diferentes tipos de fragmentos de código ao seu sítio Web, tais como HTML, JavaScript e CSS:
- Ajustar o DOM: através deManipulação JavaScript de elementos DOMO conteúdo da página Web pode ser alterado dinamicamente de acordo com as acções do utilizador ou outras condições.
- Adicionar evento: podeUtilizar o JavaScript para adicionar eventos de clique, de passagem do rato e outros a elementos Web para melhorar a interatividade.
- Aplicar estilos personalizados: através deCódigo CSS para adicionar estilos personalizados a elementos específicos de acordo com as necessidades do sítio.
A função de código personalizado não suporta snippets de código PHP. Isto significa que não pode adicionar ganchos personalizados ou efetuar operações PHP com esta funcionalidade, mas pode fazê-lo com ofunctions.phpficheiros ou plug-ins de terceiros para implementar estas funcionalidades.
Como adicionar código personalizado
Para adicionar código personalizado ao seu sítio WordPress, siga estes passos:
1,Navegue até à página de código personalizado do Elementor
- No menu backend, aceda a
Elementor > Código personalizado. É apresentada a página Gestão de códigos personalizados, onde podem ser adicionados, editados ou eliminados fragmentos de códigos personalizados.
2,Adicionar novo código personalizado
- Clique no botão "Adicionar novo código personalizado" para aceder à página de edição do novo código. Aqui, tem de definir o título, a posição e a prioridade do fragmento de código.
3,Introduzir o título
- Introduza um título descritivo para o fragmento de código, para que possa ser facilmente identificado mais tarde. O título pode ser uma descrição da funcionalidade do fragmento de código, como "Código de rastreamento do Google Analytics" ou "Script de pop-up personalizado".
4,Selecionar a localização do código
- Determine em que parte da página o código será inserido. O Elementor fornece as seguintes opções:
<head>Inserção de código na etiqueta de cabeçalho da página, normalmente para estilos ou scripts globais.<body> - inícioInserir o código no início do corpo da página, adequado para alguns scripts que precisam de ser executados imediatamente quando a página é carregada.<body> - FimInserção de código no final do corpo da página, normalmente para pequenos scripts ou estilos.
5,Definir a prioridade
- É possível criar uma lista para oOs trechos de código definem prioridades (1-10). Se forem atribuídos vários scripts à mesma localização, a prioridade determinará a ordem pela qual esses scripts são carregados. Quanto menor o número, maior a prioridade. Por exemplo, um script com uma prioridade de 1 será executado antes de um script com uma prioridade de 5.
6,Trecho de código de entrada
- O verificador de código integrado do Elementor verificará automaticamente o seu código e notificá-lo-á se encontrar um erro.
7,Definição das condições de libertação
- Na área Publicação, clique em Editar para definir as condições de exibição do snippet de código. Estas condições controlam as páginas ou secções do site em que o código é apresentado. Por exemplo, pode definir o código para ter efeito apenas em determinadas páginas ou para determinados tipos de utilizadores, como administradores ou visitantes.
8,Publicar código personalizado
- Depois de concluir as etapas acima, clique em "posto" para aplicar o código ao seu sítio Web. Existe também a opção de guardar o código personalizado como um rascunho ou definir uma data e hora para o publicar mais tarde.
Adicionar estilos CSS utilizando código personalizado
Para além do código JavaScript, os estilos CSS podem ser adicionados a um sítio Web através da funcionalidade de código personalizado. Para aplicar CSS a condições específicas, o código CSS pode ser envolvido num código HTML<style>entre etiquetas e adicioná-las ao sítio com a funcionalidade de código personalizado. Segue-se um exemplo:
.botão-personalizado {
cor de fundo: #1B61E6;
cor: #fff;
padding: 10px 20px;
border-radius: 5px; text-align: centre; custom-button { background-color.
text-align: centre; cursor: pointer; text-align: pointer
cursor: ponteiro; }
}
</styleNo código acima, definimos um ficheiro chamadobotão personalizadoe definir alguns estilos para ela. Uma vez adicionados através da funcionalidade de código personalizado, estes estilos serão aplicados aos elementos do sítio com base nas condições definidas.
chegar a um veredito
Integre facilmente snippets de código HTML, JavaScript e CSS no seu sítio Web WordPress com a funcionalidade de código personalizado do Elementor. Quer esteja a adicionar código de rastreio, funcionalidade dinâmica ou estilos personalizados, esta funcionalidade ajuda-o a melhorar a funcionalidade do seu sítio Web e a experiência do utilizador sem necessidade de programação aprofundada.
