Criar um sítio Web personalizado: utilização avançada do editor Elementor e do tema WoodMart (05)

A edição anterior apresentouIntrodução básica ao editor ElementorEmparelhado com o tema WoodMart, hoje vamos mergulhar na forma de utilizar o editor Elementor com o tema WoodMart para uma personalização mais avançada do design do sítio Web. Quer seja novo no design ou experiente à procura de um layout mais refinado, esta publicação fornecer-lhe-á passos e dicas práticas.

Etapas: Front-end do sítio → Editar com o Elementor → deslize para a frente do rodapé(ou a adição de um módulo poderia ser)

Como mostrado acima, existem quatro botões, nomeadamente Add, Template File, ai Build, Theme Template Options

Geralmente, o mais utilizado é o primeiro, o segundo ficheiro de modelo, a menos que guarde um módulo, e depois queira adicioná-lo a um determinado local, mas este pertence às definições de alto nível, o novato geral não pode ser utilizado, o terceiro ai build não é recomendado para utilizar, o quarto tema de modelos, de acordo com o tema não é o mesmo, é claro, o conteúdo do diferente, o acima mostra o tema WoodMart

Quando clicamos em adicionar, obtemos as seguintes opções

O estilo do contentor apresentado acima pode ser selecionado de acordo com a situação real.

A diferença óbvia é que a grelha (grid) é necessária para definir a primeira para definir a segunda grelha, a Flexbox (caixa flexível) não precisa, mas haverá uma diferença, é que se adicionar uma caixa flexível começou a selecionar apenas o todo, não separar, selecionar dois ou três, ele não pode selecionar, a menos que re-adicionado, mas se a grelha será capaz de alternar entre os vários formatos em si. Escolha o formato de acordo com a situação atual

Depois de adicionar um contentor, existem três botões na parte superior do contentor: Adicionar, Editar e Fechar.

No início do artigo, foi referido que quaisquer adições de contentores também podem adicionar contentores, exceto o rodapé na parte inferior da página, que pode ser adicionado.

A segunda é o editor, que tem algumas opções para definições de contentores.

O terceiro está fechado, não precisa de dizer mais nada

Concentremo-nos na segunda edição, como se segue

Os outros estão emPrevious Previous post.Introduziu para não dizer, como mostrado acima, esta função geralmente não é usada por novatos, mas se você quiser recipientes mais bonitos ou ajustar a diversidade deve ser, na verdade, a tradução é escrita muito claramente, por isso é fácil de entender, a caixa vermelha tem um projeto, há uma direção abaixo, a imagem acima mostra para baixo, porque você adiciona o recipiente é selecionado é para baixo o outro são algumas das orientações do visor, vamos de acordo com a situação real para ajustar!

O estilo também está emArtigo anteriorApresentado, e não há muito mais a dizer aqui

Uma das caraterísticas não ditas da narrativa atual avançou

Como mostrado acima, a fim de entender melhor, eu uso a imagem chinesa para dizer, deve ser melhor entender alguns dos chineses básicos explicaram as opções, devemos ser "pegajoso" mais confuso, porque a tradução é imprecisa, na verdade, no recipiente você pode optar por fixar a parte superior ou inferior, ou o significado de não fixo!

Transforme: Contentor (Container) de alguns efeitos especiais, vamos de acordo com a tradução para escolher, geralmente não tem que se mover!

Ponto de contentor para adicionar, pode escolher o módulo, o lado esquerdo terá o contentor (Layout), e a função básica (Basic), e oElementor Caraterísticas da versão PRO (Pro)

As funções básicas de cada tema são diferentes, se o seu site tiver outros plug-ins, também estará na função básica do ecrã

Mas as funções básicas para satisfazer a sua construção básica de um sítio Web, podem não ser suficientemente bonitas, e efeitos coloridos, então precisa da versão paga Pro para o conseguir, precisa de adicionar que módulo, clique no módulo que precisa de arrastar para o contentor no interior!

Descrição do módulo:

Passos: Front-end do sítio Web → Editar com o Elementor → Container (Contentor) → Título

Título: título, entendido como um título grande, o seguinte quadro, pode definir o título do texto (Título), bem como o link (link) e o tamanho do título (Tag HTML), bem como a direção do título (Alinhamento), o título da cor (Cor do texto), o layout da fonte (Tipografia) tamanho ou estilo da fonte, tamanho e assim por diante!

Passos: Front-end do sítio → Editar com Elementor → Container (Contentor) → Editor de texto

Editor de texto: editor de texto (se o texto for mais recomendado para usar este, como a introdução de alguns produtos, a introdução da empresa, etc.) o seguinte gráfico, o conteúdo do texto, a repartição do texto (Colunas), pode ser entendido como o texto em todo o recipiente ocupa quanto, intervalo entre colunas (se não definir a repartição do texto, não precisa de ajustar)

Como mostrado acima, existe também um estilo de editor de texto que lhe permite ajustar o esquema de cores, a orientação do texto, a cor do título do texto, a disposição do texto, o alinhamento do conteúdo, a largura do conteúdo, etc.

Passos: Front-end do sítio → Editar com Elementor → Container (Contentor) → Editor de texto

imagem：Galeria de fotos

Escolher imagem: escolha uma imagem, pode optar por carregá-la a partir da biblioteca multimédia do sítio Web ou localmente

Resolução da imagem: o tamanho da resolução da imagem, pode escolher entre uma vasta gama de resoluções.

Legenda: título, pode ser visualizado ou não

Ligação: ligação, pode mostrar uma ligação personalizada ou uma ligação multimédia

Como mostrado acima, Alinhamento (posição da imagem), Largura (largura da imagem), Largura máxima (largura máxima da imagem), Altura (altura da imagem), Normal (estado predefinido), Hover (estado de hover, estado de clique do rato), dois estados diferentes podem ser ajustados, e o outro de acordo com a tradução da compreensão na linha!

Passos: Contentor (Container) → selecionar a disposição de duas colunas → grelha de seleção de imagens sob a forma de seleção de duas colunas

Se pretender obter o efeito apresentado acima, tem de utilizar a funcionalidade Avançadas da imagem.Tenha em atenção que se trata da imagem e não do contentor.Se necessitar de definir o valor deslocado na Margem (moldura exterior) na figura seguinte, mas desligue os símbolos da ligação, se não desligar, então as quatro direcções são alteradas em conjunto, tal como na figura acima, uma polarização para a esquerda para baixo, uma polarização para a direita para cima, na direção correspondente para definir o valor na linha!

É claro que existe uma forma simples de fazer uma fotografia deste tipo de inserção direta, que será mais simples do que o meu método, que escolhemos de acordo com as suas necessidades

Passos: Front-end do sítio → Editar com Elementor → Container (Contentor) → Botão

Botão: botão, pode saltar para o botão de ligação, é uma caraterística essencial, e bonita!

Tipo, geralmente a predefinição, também pode escolher outros

Texto (nome do botão), escreva conforme adequado

Botão de ligação para saltar para uma ligação

Ícone (ícone), pode definir o ícone ou nenhum ícone, dependendo da situação real para ajustar o

Botão lD (ID do botão), geralmente não precisa de definir o

Posição: a direção do botão

Tipografia: disposição dos botões

Cor do texto: cor do texto
Tipo de fundo
Cor: Cor

Normal: Predefinição
Hover: Hover

Dois estados diferentes são ajustados separadamente

Passos: Front-end do sítio Web → Editar com Elementor → Container (Contentor) → Espaçador

Espaçador. Pode entendê-lo como o espaço entre a mancha superior e inferior ou o contentor

Passos: Front-end do sítio Web → Editar com Elementor → Contentor (Container) → Divisor

Divisor.

Pode definir a largura e a cor, bem como a altura, a diferença entre ele e o espaçador (Spacer) é que a função será um pouco mais poderosa, a função de espaçador (Spacer) é apenas um espaço, como mostrado abaixo, o efeito de dividir a linha (Divider) não será o mesmo!

Mais módulos

Vídeo: inserção de vídeo

Google Maps: inserção de mapas

ícone: ícone

Estas definições são relativamente simples de configurar, pelo que pode configurá-las de acordo com a tradução

Nesta edição, falámos sobre as caraterísticas básicas do editor Elementor e sobre a partilha de algumas experiências. Através do tutorial de hoje, esperamos que possa dominar a aplicação avançada do editor Elementor com o tema WoodMart, de modo a criar um site bonito e cheio de funcionalidades. Na próxima edição, apresentaremos as funcionalidades da versão paga do Elementor, por isso fique atento a mais dicas profissionais e orientações aprofundadas!