Como criar um placar de jogo com o pacote de layout de clube de futebol da Divi

Todas as semanas, fornecemos pacotes de layout Divi novos e gratuitos que você pode usar em seu próximo projeto. Para um dos pacotes de layout, também compartilhamos um caso de uso que o ajudará a levar seu site para o próximo nível. Esta semana, como parte de nossa iniciativa de design Divi em andamento, vamos mostrar como criar um placar de jogo legal usando o Pacote de Layout de Clube de Futebol da Divi. Vamos criar este placar do jogo mais recente usando as opções integradas do Divi apenas, então vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado final em diferentes tamanhos de tela.

Faça upload do pacote de layout do Soccer Club Layout Pack

Para criar este tutorial, usaremos a página de destino do Soccer Club Layout Pack, então vá em frente e adicione uma nova página usando este layout.

Adicionar nova seção

Em seguida, adicione uma nova seção aqui:

Cor de fundo

Abra as configurações da seção e adicione uma cor de fundo a seguir.

• Cor de fundo: # f4f4f4

Espaçamento

Brinque com os valores de espaçamento também.

• Preenchimento superior: 55 px
• Preenchimento inferior: 140 px

Clonar linha e colocar na seção

Localizar linha e criar clone

Para economizar tempo, vamos clonar a linha do título na próxima seção.

Colocar na Nova Seção

Mudar o Texto

Altere a cópia do Módulo de texto na linha para corresponder à nova seção.

Adicionar linha # 2

Estrutura da Coluna

Logo abaixo da linha anterior, vá em frente e adicione uma nova linha usando a seguinte estrutura de coluna:

Cor de fundo

Abra as configurações de linha e altere a cor de fundo.

• Cor de fundo: #ffffff

Cor de fundo da coluna 1

Adicione também uma cor de fundo da coluna 1.

• Cor de fundo da coluna 1: #fcfcfc

Cor de fundo da coluna 3

Repita a mesma etapa para a coluna 3.

• Cor de fundo da coluna 3: #fcfcfc

Dimensionamento

Altere também as configurações de dimensionamento.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize a altura da coluna: Sim

Espaçamento

Remova todo o preenchimento padrão a seguir.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Fronteira

Para combinar com o pacote de layout, adicione uma borda superior e inferior à linha.

• Largura da borda inferior: 8 px
• Cor da borda inferior: # 00aaff

Sombra da caixa

Por último, adicione uma sombra de caixa sutil para criar profundidade na página.

• Posição vertical da sombra da caixa: 20 px
• Força do desfoque de sombra da caixa: 80 px
• Força de propagação da sombra da caixa: -20px
• Cor da sombra: rgba (0,0,0,0.56)

Adicione o Módulo de Texto # 1 à Coluna 1

Adicionar conteúdo

É hora de começar a adicionar módulos! Comece com um Módulo de Texto na coluna 1 e adicione algum conteúdo.

Cor de fundo

Altere a cor do plano de fundo a seguir.

• Cor de fundo: # E8E8E8

Configurações de texto

Continue brincando com as configurações de texto.

• Fonte do texto: Squada One
• Estilo da fonte do texto: maiúsculas
• Cor do texto: # 333333
• Tamanho do texto: 20px
• Orientação do Texto: Centro

Espaçamento

Em seguida, adicione alguns valores de espaçamento personalizados.

• Enchimento superior: 10 px
• Preenchimento inferior: 10 px
• Preenchimento esquerdo: 10 px
• Preenchimento direito: 10 px

Adicione o Módulo de Texto # 2 à Coluna 1

Adicionar conteúdo

Adicione um novo Módulo de Texto logo abaixo do Módulo de Texto anterior na coluna 1. Depois de fazer isso, adicione conteúdo à caixa de conteúdo.

Configurações de texto

Altere as configurações de texto a seguir.

• Fonte do texto: Open Sans
• Peso da fonte do texto: negrito
• Cor do texto: # 333333
• Tamanho do texto: 18 px
• Orientação do Texto: Centro

Espaçamento

Brinque com os valores de espaçamento também.

• Enchimento superior: 20 px
• Preenchimento inferior: 20 px

Adicionar Módulo de Imagem à Coluna 1

Carregar logotipo do clube

O último módulo necessário na coluna 1 é um Módulo de Imagem contendo o logotipo do clube de uma das equipes competidoras.

Dimensionamento

Depois de fazer o upload da imagem do logotipo do clube, vá para as configurações de dimensionamento e faça algumas alterações.

• Largura: 45% (desktop), 16% (tablet), 28% (telefone)
• Alinhamento do Módulo: Centro

Espaçamento

Continue adicionando valores de margem personalizados nas configurações de espaçamento.

• Margem superior: 20px
• Margem inferior: 50px

Clonar Módulos e Colocar Duplicados na Coluna 3

Depois de concluir todos os três módulos da coluna 1, você pode cloná-los e colocar as duplicatas na terceira coluna.

Mudar o Conteúdo

Claro, você precisará alterar o conteúdo de cada módulo clonado.

Adicionar Módulo de Texto # 1 à Coluna 2

Adicionar conteúdo

Na segunda coluna, colocaremos a data e a pontuação final. Comece adicionando um Módulo de Texto com uma data.

Cor de fundo

Adicione uma cor de fundo que corresponda ao pacote de layout a seguir.

• Cor de fundo: # 00aaff

Configurações de texto

Altere também as configurações de texto.

• Fonte do texto: Squada One
• Estilo da fonte do texto: maiúsculas
• Cor do texto: #FFFFFF
• Tamanho do texto: 42px
• Orientação do Texto: Centro

Espaçamento

Em seguida, vá para as configurações de espaçamento e dê ao módulo um pouco mais de preenchimento.

• Enchimento superior: 30px
• Preenchimento inferior: 30 px

Visibilidade

Por último, desative o módulo no telefone e no tablet.

Adicionar Módulo de Texto # 2 à Coluna 2

Adicionar conteúdo

O segundo Módulo de Texto na coluna 2 deve conter a pontuação do jogo.

Configurações de texto

Depois de adicionar o conteúdo, altere as configurações de texto.

• Fonte do texto: Squada One
• Cor do texto: # 333333
• Tamanho do texto: 150px
• Altura da linha de texto: 1em
• Orientação do Texto: Centro

Espaçamento

Continue modificando os valores de espaçamento.

• Margem superior: 40px (desktop), 20px (tablet e telefone)
• Margem inferior: 20 px (tablet e telefone)
• Preenchimento esquerdo: 10 px
• Preenchimento direito: 10 px

Visibilidade

Oculte este módulo no telefone e no tablet também. Na próxima parte, vamos criar a alternativa para telas menores.

Clonar ambos os módulos e colocar na coluna 1

Clone os dois módulos que você pode encontrar na coluna 2 e coloque as duplicatas na primeira coluna acima dos outros módulos.

Alterar Visibilidade

Estamos usando esses dois módulos para obter um melhor resultado no tablet e no telefone. Para garantir que esses módulos apareçam apenas em telas menores, desative-os na área de trabalho.

Adicionar linha # 3

Estrutura da Coluna

Na próxima linha, exibiremos os diferentes objetivos no desktop. Use a seguinte estrutura de coluna:

Cor de fundo

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere a cor de fundo.

• Cor de fundo: #FFFFFF

Cor de fundo da coluna 2

Altere a cor de fundo da coluna 2 também.

• Cor de fundo da coluna 2: # f7f7f7

Dimensionamento

Remova todo o espaço entre as colunas nas configurações de dimensionamento a seguir.

• Usar largura de calha personalizada: Sim
• Largura da calha: 0
• Equalize a altura da coluna: Sim

Espaçamento

Adicione valores de espaçamento personalizados também.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento inferior da coluna 1: 100 px
• Preenchimento direito da coluna 1: 10 px
• Preenchimento esquerdo da coluna 3: 10 px

Fronteira

Em seguida, adicione uma borda inferior sutil à linha.

• Largura da borda inferior: 8 px
• Cor da borda inferior: # 00aaff

Sombra da caixa

Para criar profundidade na página, adicione uma sombra de caixa de linha.

• Posição vertical da sombra da caixa: 20 px
• Força do desfoque de sombra da caixa: 80 px
• Força de propagação da sombra da caixa: -20px
• Cor da sombra: rgba (0,0,0,0.56)

Visibilidade

Conforme mencionado antes, estamos usando esta linha para exibir metas apenas no desktop, então vá em frente e desative a linha no telefone e no tablet. Posteriormente na postagem, criaremos uma alternativa para tablet e telefone.

Adicione o Módulo de Texto # 1 à Coluna 1

Adicionar conteúdo

Adicione um novo Módulo de Texto à primeira coluna que contém os detalhes da primeira meta.

Configurações de texto

Altere as configurações de texto a seguir.

• Fonte do texto: Squada One
• Estilo da fonte do texto: maiúsculas
• Cor do texto: # 333333
• Tamanho do texto: 27 px
• Orientação do texto: direita

Espaçamento

Brinque com os valores de espaçamento também.

• Margem superior: 100px
• Preenchimento inferior: 20 px

Fronteira

Continue adicionando uma borda inferior sutil.

• Largura da borda inferior: 1 px
• Cor da borda inferior: # 333333

Clonar Módulo de Texto Duas Vezes

Alterar espaçamento de duplicados

Clone o módulo de texto que você acabou de criar duas vezes e altere os valores de espaçamento de ambas as duplicatas.

• Margem superior: 200px
• Preenchimento inferior: 20 px

Clone o módulo de texto nº 1 e coloque a duplicata na coluna 3

Alterar configurações de texto

Clone o primeiro Módulo de Texto na coluna 1 novamente e coloque a duplicata na coluna 3. Continue alterando a orientação do texto.

• Orientação do Texto: Esquerda

Alterar espaçamento

A margem superior também precisa ser aumentada.

• Margem superior: 200px

Clonar Módulo de Texto na Coluna 3

Agora você pode clonar este Módulo de Texto mais uma vez.

Adicionar linha # 4

Estrutura da Coluna

É hora de adicionar a última linha! Escolha a seguinte estrutura de coluna:

Cor de fundo

Altere a cor de fundo da linha.

• Cor de fundo: #FFFFFF

Dimensionamento

Remova todo o espaço entre as colunas a seguir.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Adicione um pouco de preenchimento extra superior e inferior.

• Enchimento superior: 100px
• Preenchimento inferior: 100px

Fronteira

Também precisaremos de uma borda inferior sutil para esta linha.

• Largura da borda inferior: 8 px
• Cor da borda inferior: # 00aaff

Sombra da caixa

Em seguida, adicione uma sombra de caixa à linha.

• Posição vertical da sombra da caixa: 20 px
• Força do desfoque de sombra da caixa: 80 px
• Força de propagação da sombra da caixa: -20px
• Cor da sombra: rgba (0,0,0,0.56)

Visibilidade

Por último, oculte a linha na área de trabalho.

Adicionar Módulo de Texto # 1

Adicionar conteúdo

Adicione um novo Módulo de Texto à coluna da linha e adicione os detalhes da meta.

Configurações de texto

Altere as configurações de texto a seguir.

• Fonte do texto: Squada One
• Estilo da fonte do texto: maiúsculas
• Tamanho do texto: 27 px
• Orientação do texto: direita

Espaçamento

Use valores de espaçamento personalizados a seguir.

• Marign direito: 150px
• Preenchimento inferior: 20 px

Fronteira

Estamos adicionando uma borda inferior sutil também.

• Largura da borda inferior: 1 px
• Cor da borda inferior: # 333333

Clonar Módulo de Texto

Alterar configurações de texto

Clone o Módulo de Texto que você criou e altere a orientação do texto da duplicata.

• Orientação do Texto: Esquerda

Espaçamento

Modifique os valores de espaçamento também.

• Marign superior: 200px
• Margem esquerda: 150px

Clone os dois módulos de texto quantas vezes forem necessárias

Agora você pode clonar esses módulos quantas vezes quiser para mostrar todos os objetivos diferentes.

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Pensamentos finais

Neste post, mostramos como criar um placar de jogo usando o Pacote de Layout de Clube de Futebol da Divi. Essa é uma ótima maneira de adicionar mais incentivos ao seu site e conectar-se com o seu público. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!