Adicione uma seção de vídeos à sua página para incluir facilmente seus vídeos do YouTube/Vimeo que serão reproduzidos na página. Essa é uma ótima maneira de manter os visitantes do seu site engajados.
Pixpa suporta a incorporação de vídeos do YouTube ou Vimeo. Você não pode enviar um vídeo diretamente para o seu site. Além desta seção, você também pode adicionar seus vídeos a Galeria Bandeira.
Pixpa permite-lhe partilhar o seu perfil do YouTube ou Vimeo no links sociais. Você também pode adicionar seus arquivos de música hospedados no Soundcloud na seção Música.
Pontos a serem observados:
- Você pode enviar um arquivo .gif sempre que houver suporte para vídeos.
- Caso o vídeo que você adicionou carregue muito, clique no botão play e pause por alguns minutos. Em seguida, retome o vídeo. Dessa forma, ele carrega melhor com menos buffering.
Neste artigo:
- O que é a seção de Vídeos?
- Adicionar uma seção de vídeo
- Adicionar e editar itens da lista
- Sequenciando itens da lista
- Excluindo itens da lista
- Gerenciar Elementos
- Alteração do layout da seção
- Opções de estilo
- O cartão completo e o cartão de texto
Seção de vídeos
Lista de vídeos é uma coleção de vídeos onde você pode adicionar uma descrição para o vídeo e adicionar um link ou botão para conectar a lista de vídeos a qualquer outra página do site ou qualquer outro link.
Seção Adicionar vídeos
- Uma seção pode ser adicionada a uma página. Você pode adicionar uma seção a uma página já existente ou crie uma nova página dentro do seu site.
- Na sua página, Clique no ícone + azul para adicionar um Nova Seção para sua página.
- Você vai agora ver o categorias de seção no lado esquerdo.
- Clique no Conteúdo (1) opção e Vídeo (2) aba.
- Agora, você verá layouts diferentes que acontecerá no marco da Seção de vídeos (3).
- Escolha qualquer layout de seção e clique nele para adicioná-lo à sua página.
Adicionar e editar itens de lista
Adicionar item da lista de vídeos
Depois de adicionar a seção
- Clique no Editar conteúdo (1) botão para abrir o painel de itens da lista.
- Clique na Adicionar Item (2) botão para adicionar um novo item da lista.
- Você terá a opção de Duplicar e excluir (3) os itens da lista.
Editar item da lista de vídeos
Clique no item da lista que você deseja editar. Ele abrirá as opções de edição de itens de lista específicos.
- Adicione seu link de vídeo do YouTube/Vimeo (1).
Para adicionar um vídeo ao seu site Pixpa, você precisa fazer o upload do vídeo para o YouTube ou Vimeo e inserir o URL aqui.
- Defina o vídeo para reproduzir em um lightbox ou apenas na página (2).
- Carregar ou Excluir (3) a imagem em miniatura do item da lista.
- Adicionar uma Título (4), Subtítulo (5), e Descrição (6) do item da lista. Você pode não encontrar a opção de Legenda e Descrição em determinados itens da lista, dependendo do layout escolhido.
7. Ação no clique
Você pode personalizar o comportamento de clique de itens individuais no Lista de vídeo seção. Abaixo estão as opções disponíveis:
- Ir para um link
Selecionar esta opção abre o Criador de links, permitindo que você adicione um hyperlink a este item. O link pode direcionar os usuários para outra página dentro do seu site ou para uma URL externa. Saiba mais sobre Criador de links. - Nenhuma Ação
Selecione esta opção para tornar o item não clicável. Quando selecionado, clicar no item não acionará nenhuma ação.
8. Abrir link em nova janela: Defina o Link para abrir em um nova aba ou na mesma aba. Isso só ficará visível quando Ir para um link opção é selecionada em Ação no clique menu.
9. Botões e links: Adicione qualquer tipo de de vidrio para o item da lista. Você pode adicionar um Botão/Link de imagem/Ícone social/Link de texto. Saiba Mais.
10. Substituição de estilo de cartão
Você pode substituir as configurações globais de estilo de cartão na seção Configurações de estilo e personalize o cartão de cada item individualmente na seção Lista de Vídeos. Isso permite aplicar estilos exclusivos a diferentes itens da lista para melhor personalização.
Saiba Mais sobre a opção Cartões em seções dinâmicas.
11. Substituição de estilo de forma
Use a opção Substituir para atribuir um formato diferente a cada miniatura individualmente na seção Lista de vídeos, dando a você maior controle sobre o estilo visual de cada item. Saiba Mais sobre a Shape Mask.
12. Salvar: Após fazer as personalizações, salve as alterações.
Veja a edição de um item de lista de vídeos em ação:
Itens da Lista de Sequência
- Você pode facilmente arrastar e soltar os itens da lista para alterar a sequência.
Excluir um item da lista
Depois de adicionar um item da lista, você pode editá-lo e excluí-lo.
- Clique no Apagar ícone ao lado do item Lista de vídeos.
- Clique no Apagar botão no pop-up de confirmação.
- Economize suas mudanças.
O item da lista, uma vez excluído, não pode ser recuperado.
Gerenciar elementos da lista de vídeos
A seção Lista de vídeos inclui um Aba Elementos que permite que você gerencie a visibilidade de vários elementos dentro da seção com facilidade. Usando interruptores de alternância simples, você pode habilitar ou desabilitar elementos específicos sem ter que excluir ou modificar os elementos em si.
- Clique no Editar conteúdo (1) botão.
- Escolha o elementos (2) aba.
- Após fazer as alterações, clique em Economize (3) botão.
Opções de seção
- Mostrar manchete: Ativa ou desativa a visibilidade do título da seção Lista de vídeos.
- Mostrar botões: Controle se os botões são exibidos no nível da seção.
Opções de itens
- Mostrar vídeo: Alterne a visibilidade dos vídeos.
- Mostrar título: Controle se o título é exibido.
- Mostrar legenda: Habilitar ou desabilitar legendas.
- Mostre a descrição: Gerencie a visibilidade das descrições dos itens.
- Mostrar botões: Decida se os botões para itens individuais devem ser exibidos.
Layout da seção
- Clique no Editar conteúdo (1) botão para abrir o painel de edição da Lista de Vídeos.
- Escolha o traçado (2) aba.
- Selecione o Layout para sua seção e Economize (3) suas mudanças.
Estilize sua seção
- Clique no Editar conteúdo (1) botão para abrir o painel de edição da Lista de Vídeos.
- Escolha o Sessão de Fotos (2) opção.
- Altere o estilo dos elementos da seção e Economize (3) suas mudanças.
Você terá várias opções de estilo para a seção:
Ecrã
- Escolha Mostrar itens in Linhas e colunas or carrossel
- Se você escolheu o Linhas e colunas opção, os itens da lista serão organizados em linhas e colunas. Nesse caso, você precisa especificar o número de linhas e colunas.
- Se você escolheu o carrossel opção, os itens da lista serão apresentados como uma apresentação de slides. Saiba mais.
- Colocou o Numero de colunas para a lista de vídeos. Você pode escolher de 1 a 10 colunas.
- Especifique o Espaço Entre Colunas dos itens da lista.
- Especifique o Espaço entre linhas dos itens da lista.
Se a opção Carrossel for selecionada na Etapa 1, você verá as seguintes opções adicionais:
- Ativar rolagem suave: Permite a rolagem contínua de itens dentro do carrossel para uma experiência perfeita e visualmente atraente.
- Deslizamento automático: Gira automaticamente os slides sem interação do usuário.
- Mostrar progresso da reprodução automática: Exibe um indicador de progresso enquanto a reprodução automática está ativa para melhor visibilidade.
- Atraso de reprodução automática: Define o intervalo de tempo entre cada transição de slide quando a reprodução automática está ativada.
- Loop de carrossel: Permite o loop contínuo de slides, para que o carrossel reinicie perfeitamente após o último slide.
- Controles do carrossel: Escolha o Controles de navegação. Você pode escolher entre Sem controles, Setas – Centro inferior/Centro superior direito/Inferior direito, Chevron, Pontos e Rolagem horizontal.
Display para celular
- Defina o número de Colunas da grade para dispositivos móveis. Você pode configurá-lo para no máximo 3 colunas.
- Definir o Espaçamento entre grades (em pixels).
Layout de coluna específico do dispositivo com base nas configurações do Studio:
Ataques XDR
- Alinhar o conteúdo horizontalmente na Lista de Vídeos. Você pode configurá-los para serem alinhados à esquerda, à direita ou ao centro.
- Alinhar o conteúdo verticalmente na Lista de Vídeos. Você pode configurá-los para serem alinhados na parte superior, central e inferior.
- Escolha o Ordem do conteúdo ou seja, as imagens dos itens da lista a serem exibidos primeiro ou o texto associado.
Tamanho do texto
- Clique no Alterar Estilo do Texto botão para visitar o Design seção e gerencie seus tamanhos e estilos de fonte.
- Colocou o Título estilo de fonte para os itens de lista da seção.
- Colocou o Legenda estilo de fonte para os itens de lista da seção.
- Definir o padrão Descrição estilo de fonte para os itens de lista da seção.
- Ative esta opção para animar quaisquer números presente no Título e Legenda campos. Quando ativada, os valores numéricos aparecerão com uma animação de contagem dinâmica, tornando-os visualmente mais atraentes.
Espaçamento
- Especifique o Largura da imagem para itens de lista.
- Especifique o Largura do conteúdo para os itens da lista.
- Especifique o Espaço abaixo do título da seção em px.
- Especifique o Espaço abaixo das imagens dos itens da lista (em %).
- Especifique o Espaço abaixo dos títulos dos itens da lista (em %).
- Especifique o Espaço abaixo das legendas dos itens da lista (em %).
Título da Seção
- Alinhar horizontalmente o texto do título da seção. Você pode defini-lo como Esquerda, Centro e Direita.
- Habilitar/Desabilitar o Divisor entre o título da seção e o conteúdo da seção.
- Colocou o espessura do divisor (em pixels).
- Especifique o Cor Divisória do seletor de cores.
- Escolher Estilo Divisor da lista suspensa.
- Colocou o Largura do título para definir a largura que o título da seção deve ter, começando com um mínimo de 50%.
Opções de imagem
- Escolha o recorte de imagem para os itens da lista. Você pode definir as imagens como Quadrado, Círculo, Paisagem, Retrato e Dinâmico.
- Escolha ter um raio de canto comum ou raio de canto diferente para cada lado dos itens da lista e defina um número (em px) para o raio de canto das imagens dos itens da lista. Saiba mais.
Dica
Com o raio de canto campo, você pode criar diferentes formas de imagens de itens de lista. Caso você especifique 500 px aqui, as imagens serão exibidas em forma de círculo.
- Caso tenha escolhido cantos divididos, você pode definir diferentes raios de canto para cada canto.
Máscara de forma
- Máscara de forma: Ative esta opção para aplicar uma máscara de forma às miniaturas de vídeo na seção Lista de Vídeos. Uma vez ativada, a forma selecionada recortará visualmente a miniatura para esse formato.
- Selecione a forma: Escolha entre vários formatos predefinidos para aplicar às suas miniaturas. Isso permite estilizar seu conteúdo de forma criativa, exibindo imagens em formatos exclusivos, como arredondado, losango, gota, etc.
- A opção Máscara de forma depende do layout – Pode não aparecer em layouts onde texto como título ou subtítulo é exibido sobre a imagem.
- A configuração Stretch depende de vários fatores - Incluindo tamanho da imagem, alinhamento e configurações de corte definido na aba Estilo.
- Se o corte da imagem estiver definido como Original, as dimensões reais da imagem determinarão se ela será esticada verticalmente ou horizontalmente.
Opções de foco de imagem
- Escolha o Cor do foco da imagem para ser o cor de destaque ou ser especificada. Se você escolheu o cor de destaquee especifique o opacidade. Você pode especificar a cor de destaque para cada item de Editar item painel.
- Se você escolheu o especifique a cor opção, em seguida, defina o Sobreposição de cor e opacidade.
- Colocou o Sobreposição de cor do texto que aparece no hover.
- Escolha Animar as imagens dos itens da lista ao passar o mouse clicando em Sim. Verifique esse recurso em uma página ao vivo.
- Escolha um Estilo de Animação para imagens quando o cursor passa sobre elas.
Borda da imagem
- Ativar/desativar borda em torno das imagens alternando o botão de alternância.
- Escolha ter um fronteira comum em todos os lados das imagens ou você pode especificar o fronteiras separadamente para cada lado.
- Especifique o largura da fronteira. Se estiver definido como 0, a borda não aparecerá. Você também tem a opção de definir a largura da borda individualmente para cada lado da imagem.
- Selecione os Cor da margem do seletor de cores.
- Selecione um preferido Estilo da Borda da lista suspensa.
- Determinar o largura da borda para celular dispositivos, alinhando-o com a largura escolhida para desktop.
Opções de cartões
- Veja como para gerenciar cartões.
Opções de sombra
- Ecrã – Escolha mostrar a sombra atrás dos itens da lista sempre ou apenas ao passar o mouse.
- Sessão de Fotos – Escolha entre as predefinições existentes ou crie uma sombra personalizada.
Caso tenha escolhido a opção Personalizado, então visite este Gerador de sombra de caixa para criar uma sombra personalizada. Por fim, copie e cole o sombra de caixa CSS. - Caso você tenha escolhido a opção de presets, então Escolha estilos de sombra da lista suspensa.
Botões e links
- Veja como para gerenciar o estilo de Botões e links.
- Economize todas as mudanças de estilo.
O cartão completo e o cartão de texto
Quando você liga o Cartão Completo/Texto sobre sua lista de vídeos, os itens da lista terão um contorno e fundo com a cor do cartão que você selecionou na Design seção.
Veja também: Cores e espaçamento do site.
Cartão Completo
Quando a opção de cartão completo é selecionada, a cor do cartão é aplicada a todo o cartão, ou seja, a miniatura do vídeo e o texto com ele.
Dar uma olhada:
Cartão de texto
Quando a opção de cartão de texto é selecionada, a cor do cartão é aplicada apenas ao texto presente na miniatura do vídeo.
Dar uma olhada:
