Como projetar temas wordpress

ThiSeaches você para personalizar e projetar temas para WordPress.Projetar temas do WordPress do zero pode ser um processo demorado que envolve muita codificação, mas há aplicativos que podem simplificar o processo.Um aplicativo é um plugin do WordPress chamado Element que pode ser instalado no painel WordPress.

Passos

Parte 1 de 11:
Instalando Element
  1. Design intitulado Design Wordpress temas Passo 1
1. Faça o login no WordPress.Depois de ter instalado o WordPress no seu servidor, você pode entrar no painel do WordPress digitando o URL para o seu site em um navegador da Web seguido / WP-admin (por exemplo, meu website.com / wp-admin.Em seguida, digite seu nome de usuário e senha para fazer login.
  • Clique aqui Para ler sobre como instalar o WordPress no servidor da Web.
  • Design intitulado Design WordPress Thormes Passo 2
    2. Clique Plugins.Está na barra lateral à esquerda.É ao lado de um ícone que se assemelha a um plugue elétrico.
  • Design intitulado Design WordPress Thormes Passo 3
    3. Clique Adicionar novo.Está no canto superior esquerdo da página de plugins.
  • Design intitulado Design WordPress Thormes Passo 4
    4. Modelo Elementar Na barra de pesquisa e pressione ↵ Enter.Isso exibirá uma lista de plugins que correspondem à sua pesquisa.
  • Design intitulado Design WordPress Thormes Passo 5
    5. Clique instale agora Na caixa que diz "Construtor de página de elements".É o plugin que tem um ícone roxo e rosa com quatro barras brancas em forma de um capital "E".Isso instalará o Element Page Builder como um plugin para o site do seu WordPress.
  • Design intitulado Design Wordpress temas Passo 6
    6. Clique Ativar.Depois que o element é instalado, este botão aparecerá ao lado do cabeçalho na caixa de plugins de element.
  • Parte 2 de 11:
    Criando uma nova página com element
    1. Design intitulado Design WordPress Thormes Passo 7
    1. Clique Painel.Está no topo da barra lateral à esquerda do WordPress.
  • Design intitulado Design WordPress Thormes Passo 8
    2. Clique + Crie nova página.Está em frente ao element sob o cabeçalho que diz "ELEMENTOR VISÃO GERAL".Está na primeira coluna.Isso abrirá um editor de página visual.
  • Design intitulado Design WordPress Thormes Passo 9
    3. Clique
    Imagem intitulada WindowsSettings.jpg
    .É o ícone que se assemelha a uma engrenagem no canto inferior esquerdo da barra lateral.Isso abrirá o menu Configurações.
  • Design intitulado Design WordPress Thormes Passo 10
    4. Digite um título.Use a caixa de texto abaixo "Título" Para digitar o título da sua página.O título irá no topo da página.
  • Se você não deseja ter um título, clique no interruptor "Ocultar título".
  • Design intitulado Design WordPress Thormes Passo 11
    5. Selecione um layout da página.Use o menu suspenso abaixo "Layout da página" Para selecionar um modelo para sua página.
  • Parte 3 de 11:
    Selecionando cores padrão
    1. Design intitulado Design WordPress Thormes Passo 12
    1. Clique .Está no canto superior esquerdo da barra lateral do element.
  • Design intitulado Design WordPress Thormes Passo 13
    2. Clique Cores padrão.É a primeira opção no menu da barra lateral sob o "Estilo" cabeçalho.
  • Design intitulado Design WordPress Thormes Passo 14
    3. Selecione uma paleta de cores.Você pode selecionar uma paleta da lista sob o cabeçalho que diz "Mais paletas", ou clique nas caixas na parte superior da barra lateral para selecionar uma cor para as cores primárias, secundárias, de texto e acento.Use a caixa de cor para selecionar uma cor ou insira o código HEX da cor na barra no topo.
  • Design intitulado Design WordPress Thormes Passo 15
    4. Clique Aplicar.Está no canto superior direito do menu da barra lateral.
  • Parte 4 de 11:
    Selecionando fontes padrão
    1. Design intitulado Design WordPress Thormes Passo 16
    1. Clique .Está no canto superior esquerdo da barra lateral do element.
  • Design intitulado Design WordPress Thormes Etapa 17
    2. Clique Fontes padrão.É a segunda opção sob o "Estilo" cabeçalho na barra lateral.
  • Design intitulado Design Wordpress temas Passo 18
    3. Clique Manchete primário.É a primeira opção no menu Fontes padrão.
  • Design intitulado Design Wordpress temas Passo 19
    4. Selecione uma família de fontes.Use o menu suspenso para selecionar uma família de fontes.
  • Design intitulado Design WordPress Thormes Passo 20
    5. Selecione um peso.Use o menu suspenso para selecionar o quão espessa é a fonte.Você também pode selecionar "Negrito" No menu suspenso.
  • Design intitulado Design WordPress Thormes Passo 21
    6. Clique Manchete secundário.É a primeira opção no menu Fontes padrão.
  • Design intitulado Design Wordpress Thormes Passo 22
    7. Selecione uma família de fontes.Use o menu suspenso para selecionar uma família de fontes.
  • Design intitulado Design Wordpress Thormes Passo 23
    8. Selecione um peso.Use o menu suspenso para selecionar o quão espessa é a fonte.
  • Design intitulado Design wordpress temas Etapa 24
    9. Clique Texto de corpo.É a primeira opção no menu Fontes padrão.
  • Design intitulado Design Wordpress temas Etapa 25
    10. Selecione uma família de fontes.Use o menu suspenso para selecionar uma família de fontes.
  • Design intitulado Design WordPress Thormes Passo 26
    11. Selecione um peso.Use o menu suspenso para selecionar o quão espessa é a fonte.
  • Design intitulado Design Wordpress Thormes Passo 27
    12. Clique Texto de acento.É a primeira opção no menu Fontes padrão.
  • Design intitulado Design WordPress Thormes Passo 28
    13. Selecione uma família de fontes.Use o menu suspenso para selecionar uma família de fontes.
  • Design intitulado Design WordPress Thormes Passo 29
    14. Selecione um peso.Use o menu suspenso para selecionar o quão espessa é a fonte.
  • Design intitulado Design WordPress Thormes Etapa 30
    15. Clique Aplicar.Está no canto superior direito da barra lateral.
  • Parte 5 de 11:
    Adicionando um titular
    1. Design intitulado Design WordPress Thormes Passo 31
    1. Clique fora da barra lateral.Isso retornará a barra lateral para o menu padrão.
  • Design intitulado Design WordPress Thormes Passo 32
    2. Arraste o quadrado de cabeçalho para a seção.A cabeceira é a caixa que tem uma grande capital "T".É no topo do menu da barra lateral.A seção é o quadrado com o contorno pontilhado na página principal.Isso transformará a seção no texto do título.Uma nova seção em branco aparecerá abaixo do título.
  • Design intitulado Design WordPress Thormes Passo 33
    3. Digite o cabeçalho.Você pode clicar no cabeçalho na página principal e digitar o cabeçalho ou usar a caixa de texto na barra lateral para digitar o cabeçalho.
  • Design intitulado Design WordPress Thormes Passo 34
    4. Selecione o tamanho do título.Use o menu suspenso ao lado de "Tamanho" Para selecionar o tamanho do cabeçalho.
  • Você também pode usar a caixa de tag HTML para selecionar o tamanho da fonte.
  • Design intitulado Design WordPress Thormes Passo 35
    5. Selecione Alinhamento.Clique em um dos quatro quadrados na parte inferior do menu da barra lateral para selecionar o alinhamento.Você pode alinhar o texto à esquerda, para o centro, para a direita, ou justificado em toda a seção.
  • Se você deseja usar uma fonte ou cor diferente do padrão, você pode clicar "Estilo" No topo do menu da barra lateral e selecione uma cor e fonte diferentes para o texto.
  • Parte 6 de 11:
    Adicionando texto do corpo
    1. Design intitulado Design WordPress Thormes Passo 36
    1. Clique Nova seção.Isso lhe dará a opção de criar seções dentro de uma seção.Você verá uma lista de maneiras de dividir a seção.
  • Design intitulado Design WordPress Thormes Passo 37
    2. Clique em uma estrutura da seção.Há várias maneiras que você pode dividir a seção.Você pode adicionar várias colunas, ou uma barra lateral à esquerda ou direita, ou ambos.Clique no botão com a imagem que mais se assemelha à maneira como você quer o layout do seu texto do corpo.


  • Design intitulado Design Wordpress Thormes Passo 38
    3. Arraste a caixa de editor de texto para a (s) seção (s) onde você deseja adicionar texto.O editor de texto é a segunda caixa na barra lateral.Tem várias linhas que se assemelham a linhas de texto.Você pode arrastá-lo para qualquer seção na página principal.
  • Design intitulado Design WordPress Thormes Passo 39
    4. Digite o texto do corpo.Use a caixa de texto na barra lateral para digitar seu texto do corpo.A barra de ferramentas na parte superior da caixa de texto permite adicionar listas de em negrito, itálico, sublinhado, numerado e de bala e hiperlinks.O último botão, que se assemelha a dois retângulos com caixas neles expande a barra de ferramentas para mais opções de formatação.
  • Se você deseja usar uma fonte ou cor diferente do padrão, você pode clicar "Estilo" No topo do menu da barra lateral e selecione uma cor e fonte diferentes para o texto.
  • Parte 7 de 11:
    Adicionando uma imagem
    1. Design intitulado Design WordPress Thormes Passo 40
    1. Arraste a caixa de imagem para uma seção.A caixa de imagem tem um ícone que se assemelha a uma foto de montanhas e sol.
  • Design intitulado Design WordPress Thormes Passo 41
    2. Clique Escolha sua imagem.É a grande caixa cinza na barra lateral.Isso exibirá uma janela pop-up.
  • Design intitulado Design WordPress Thormes Passo 42
    3. Clique Selecionar arquivos.É o botão grande no meio da janela pop-up.Isso abrirá um navegador de arquivos que você pode usar para selecionar arquivos de imagem.
  • Design intitulado Design WordPress Thormes Passo 43
    4. Clique em um arquivo de imagem.Usando o navegador de arquivos, navegue até e clique para selecionar uma imagem que você deseja enviar.O tamanho máximo do arquivo é de 2 megabytes.
  • Design intitulado Design WordPress Thormes Passo 44
    5. Clique Abrir.Está no canto inferior direito do navegador de arquivos.Isso fará o upload do arquivo de imagem e exibi-lo na seção.
  • Design intitulado Design WordPress Thormes Passo 45
    6. Selecione o tamanho da imagem.Use o menu suspenso abaixo da imagem para selecionar o tamanho da imagem.Há uma variedade de tamanhos e dimensões para escolher.
  • Design intitulado Design WordPress Thormes Passo 46
    7. Selecione Alinhamento.Use as três caixas abaixo do menu suspenso Tamanho da imagem para escolher o alinhamento da imagem.Você pode alinhar a imagem à esquerda, central ou à direita da seção.
  • Design intitulado Design WordPress Thormes Passo 47
    8. Adicione uma legenda (opcional).Se você deseja adicionar uma legenda à imagem, use a caixa de texto em frente a "Rubrica" Para digitar uma legenda.
  • Design intitulado Design WordPress Thormes Passo 48
    9. Adicione um link (opcional).Se você deseja adicionar um link, use o menu suspenso na parte inferior da barra lateral para adicionar um link a um URL ou arquivo de mídia.
  • Parte 8 de 11:
    Adicionando vídeo
    1. Design intitulado Design WordPress Thormes Passo 49
    1. Arraste a caixa de vídeo para seção.A caixa de vídeo tem um ícone que se assemelha ao logotipo do YouTube.
  • Design intitulado Design wordpress temas Etapa 50
    2. Selecione o tipo de vídeo.Use o menu suspenso em frente "Tipo de vídeo" Para selecionar YouTube ou Vimeo.
  • Design intitulado Design WordPress Thormes Passo 51
    3. Adicionar link de vídeo.Use a caixa sob o link para copiar e colar o link de vídeo do YouTube ou Vimeo.
  • Design intitulado Design Wordpress Thormes Passo 52
    4. Ajuste as opções de vídeo.Use os comutadores para ligar ou desligar as seguintes opções.
  • Reprodução automática vai jogar o vídeo automaticamente quando a página é carregada.
  • Vídeos sugeridos exibirá vídeos sugeridos quando o vídeo terminar de jogar.
  • CONTROLO DE JOGADOR dá ao espectador a opção de parar ou reproduzir o vídeo, bem como pular para certas partes do vídeo.
  • Título do jogador e ações Exibe o título do vídeo e as opções no canto superior direito.
  • Modo de privacidade não vai armazenar dados do visitante quando ativado.
  • Design intitulado Design Wordpress Thormes Passo 53
    5. Adicionar sobreposição de imagem (opcional).Se você quiser adicionar uma sobreposição de imagem, clique em "Overlay da imagem" Na parte inferior da barra lateral.Clique no botão ao lado de "Overlay da imagem" e, em seguida, clique na grande caixa cinza para carregar uma imagem para usar como uma sobreposição.
  • Parte 9 de 11:
    Adicionando botões
    1. Design intitulado Design WordPress Thormes Passo 54
    1. Clique Nova seção.Isso lhe dará a opção de criar seções dentro de uma seção.Você verá uma lista de maneiras de dividir a seção.
  • Design intitulado Design WordPress Thormes Passo 55
    2. Clique em uma estrutura da seção.Há várias maneiras que você pode dividir a seção.Você pode adicionar várias colunas, ou uma barra lateral à esquerda ou direita, ou ambos.Clique no botão com a imagem que mais se assemelha à maneira como você deseja o layout dos seus botões.
  • Design intitulado Design Wordpress Thormes Passo 56
    3. Arraste a caixa de botões para uma seção.A caixa de botão tem um ícone que se assemelha a um cursor do mouse clicando em um botão.
  • Design intitulado Design WordPress Thormes Passo 57
    4. Digite o texto do botão.Digite o que você quer que o botão diga na caixa de texto em frente "Texto".
  • Design intitulado Design WordPress Thormes Passo 58
    5. Adicionar um link de botão.Use a caixa ao lado de "Link" Para adicionar o URL da página, você deseja que o botão link para.
  • Design intitulado Design Wordpress Thormes Passo 59
    6. Selecione o alinhamento do botão.Use as quatro caixas abaixo "Alinhamento" Para alinhar o botão a esquerda, direita, central, ou justificada em toda a seção.
  • Design intitulado Design Wordpress temas Passo 60
    7. Selecione o tamanho do botão.Use o menu suspenso em frente "Tamanho" Para selecionar o tamanho do botão.Você pode selecionar extra pequeno, pequeno, médio, grande ou extra grande.
  • Design intitulado Design WordPress Thormes Passo 61
    8. Selecione o ícone de botão.Use o menu suspenso para selecionar um ícone para ir ao lado do texto do botão.
  • Design intitulado Design Wordpress Thormes Passo 62
    9. Selecione a posição do ícone.Use o próximo menu suspenso para selecionar se você quiser que o ícone seja antes ou depois do texto.
  • Design intitulado Design WordPress Thormes Passo 63
    10. Selecione o estilo do botão (opcional).Se você quiser mais opções para estilizar o botão, você pode clicar "Estilo" No topo da barra lateral.Aqui você pode alterar a cor do botão, cor de texto e fonte, bem como selecionar uma borda para o botão.
  • Parte 10 de 11:
    Adicionando um divisor
    1. Design intitulado Design Wordpress temas Etapa 64
    1. Arraste a caixa de divisor para uma seção.Divisores são linhas de sólidas que vão entre seções em uma página da web.
  • Design intitulado Design WordPress Thormes Passo 65
    2. Selecione o estilo divisor.Use o menu suspenso ao lado de "Estilo" Para selecionar o estilo de linha.Você pode selecionar sólido, duplo, pontilhado ou tracejado.
  • Design intitulado Design WordPress Thormes Passo 66
    3. Selecione o peso.Use a barra deslizante sob "Peso" Para ajustar a espessura da linha.
  • Design intitulado Design Wordpress Thormes Passo 67
    4. Selecione a cor.Clique na caixa em frente a cores para selecionar a cor da linha.
  • Design intitulado Design WordPress Thormes Passo 68
    5. Selecione Largura de Linha.Use a barra deslizante abaixo "largura" Para ajustar quanto da seção a linha ocupará.
  • Design intitulado Design WordPress Thormes Passo 69
    6. Selecione Alinhamento.Clique em uma das três caixas abaixo "alinhamento" Para selecionar o alinhamento da linha.Você pode alinhá-lo à esquerda, à direita ou no centro da seção.
  • Parte 11 de 11:
    Adicionando widgets e publicar
    1. Design intitulado Design WordPress Thormes Etapa 70
    1. Arraste qualquer widget para uma seção desejada.Há muitos widgets na barra lateral que permitem adicionar guias, galerias de imagem, ícones de mídia social, barras laterais e mais.Há muito para brincar e experimentar com.
  • Design intitulado Design Wordpress Thormes Passo 71
    2. Clique Publicar.É o botão verde no canto inferior esquerdo da barra lateral.Clique aqui quando terminar de projetar seu tema e suas páginas.
  • Compartilhe na rede social:
    Semelhante