Como Criar Um Site

Um artigo completo, objetivo e imperdível que ensina como criar um site no WordPress, um dos gestores de conteúdo mais utilizados. Fique atento, pois ao longo desse artigo eu darei algumas dicas e macetes para deixar o seu site ainda melhor.

VOCÊ ESTÁ SEM TEMPO PARA CRIAR SEU SITE?
Caso você não tenha tempo para criar seu site através dos passos a seguir, clique aqui e confira a ótima proposta para ter o seu site exclusivo feito com WordPress, chat instalado, segurança configurada e bônus, confira agora mesmo!

Como Criar Um Site Não é Difícil e Inicia Com Domínio e Hospedagem

O domínio não apenas é o nome para seu site, bem como é uma identidade, por exemplo: “oficinaalegria.com.br” e esse domínio deve apontar para o servidor de hospedagem onde estará o hospedado seu site. Esse apontamento é feito pelos servidores de nomes de domínio mais conhecidos como DNSs, portanto a hospedagem de sites irá fornecer os DNSs para você estar inserindo em seu provedor de domínios, então lá nos DNSs da hospedagem estará gravado o seu domínio apontando para o endereço IP do servidor onde você anteriormente contratou um dos planos de hospedagem oferecidos.

Obs.: Nesse artigo estaremos utilizando um domínio ilustrativo chamado “digitar.tk”. Para fins de bom desempenho nos buscadores não é recomendado a utilização de domínios gratuitos, mas se você quer criar um site com um domínio gratuito para aprender a criar seu primeiro site, pode acessar o site FreeNom.com. Para registrar um domínio “.br” acesse o site Registro.br.

Conta de E-mail

A hospedagem de sites irá lhe fornecer acesso ao painel de hospedagem, e antes de mais nada, você deve criar seu e-mail digitando na pesquisa do painel (cPanel) “contas de email” como na imagem abaixo:

Obs.: Caso o painel de hospedagem não seja o cPanel, as opções irão permanecer as mesmas, apenas mudando a parte gráfica e distribuição das ferramentas, sendo assim sempre utilize o campo de pesquisa dentro do painel.

Como criar um site - Conta de e-mail

Após clicar na figura “Contas de email” você precisa clicar em “Criar” como na imagem seguinte para criar o seu novo e-mail.

Você poderá acessar seu e-mail para ler e enviar utilizando o RoundCube, indo no link “E-mail” que fica no canto superior direito do site da Hospedagem MEI, www.hospedagemmei.com.br.

Como criar um site - Criar Conta de E-mail

Procure preencher o formulário semelhante ao que foi feito na imagem abaixo tendo total liberdade para dar ao seu e-mail o nome que desejar, em seguida clique em “Criar” e pronto, seu e-mail estará criado:

Como criar um site - Conta de E-mail Formulário

Como Criar Um Site Com Compactação de Conteúdo

Após criar seu e-mail, retorne a tela principal do painel de hospedagem e digite “otimizar” na caixa de busca do painel conforme imagem abaixo, e em seguida ative a opção “Compactar todo o conteúdo“, atualize salvando as configurações:

Como Criar Um Site - Otimizar Site

O WordPress e Outros Gestores de Conteúdo

CMS significa Content Management System, ou seja, sistema de gerenciamento de conteúdo, e na internet há muitos hoje em dia, mas o que mais vem se destacando ao longo dos anos é o WordPress. Só para você ter uma ideia confira os nomes de alguns CMS que podem ser uma opção na hora da criação de um site, mas reiterando, aqui trataremos apenas da criação através do WordPress:

Joomla, PHP-Nuke, PHP-Fusion, Drupal, Mambo, Xoops, Concrete5, etc.

Iremos utilizar o WordPress para criar um excelente site pelo simples fato dessa plataforma nos oferecer mais flexibilidade no trabalho e mais opções de temas e plugins que podem ser instalados diretamente do repositório do projeto por dentro da administração do WordPress.

Iniciando a Como Criar Um Site Com o WordPress

Dentro do painel da hospedagem digite “wordpress” (sem as aspas) na caixa de pesquisa conforme a imagem abaixo:

Como criar um site - Localizando o WordPress

Após clicar na figura WordPress que aparece na pesquisa, clique no botão “Instalar Agora” (Install Now) para abrir o formulário de configuração da instalação.

Como criar um site - Instalando o WordPress Inicio

Agora preencha o formulário semelhante ao que foi preenchido no exemplo abaixo, apenas faça as alterações correspondentes ao seu site, como nome do seu domínio, e-mail, etc e após preenchido clique em “Instalar“.

Obs.: Não esqueça de deixar o campo “Diretório” vazio para o WordPress ser instalado na raiz do seu domínio e também ignore a sessão de escolha do tema, pois utilizaremos um tema profissional considerado um dos melhores do mundo, o tema Divi.

Instalando o WordPress Preenchendo Formulário

Ao concluir a instalação você verá uma tela como a mostrada a seguir confirmando que sua instalação ocorreu tudo bem. Se houver algum problema no preenchimento do formulário, o sistema irá lhe mostrar qual campo precisa ser editado para que você consiga instalar o WordPress corretamente.

Como criar um site - Link da Administração

Agora o próximo passo é você entrar em contato com a Hospedagem MEI através do chat ou e-mail de suporte e pedir a instalação do tema Divi no seu WordPress, será necessário você fornecer o usuário e senha da área de administração do WordPress. Se você preferir, após a instalação do tema Divi você pode alterar sua senha indo no Menu “Usuários ─► Seu Perfil“.

Área da Administração do WordPress

Após a Hospedagem MEI instalar o tema Divi, você acessará a administração do WordPress através do link da imagem acima, considerando apenas alterar o que está em negrito para o seu domínio ficando assim: https://www.seudominio.com.br/wp-admin/. Após logar-se você verá a tela a seguir:

Como criar um site - Administração do WordPress

Observe que no menu existe também uma opção chamada “Divi” que é exclusiva de clientes da Hospedagem MEI, é nesse link que configuraremos muitas coisas do nosso site.

Considerações Antes de Iniciar a Edição do Site

Antes de editarmos nosso novo site, precisamos inserir na plataforma WordPress alguns plugins com funções específicas para que consigamos um ótimo resultado, tanto na edição bem como no visual do seu site, sendo assim instalaremos alguns plugins observando os passos a seguir.

Certamente que se você já conhece ou ouviu falar de ótimos plugins não ficará restrito para utilizá-los.

─► Vá até o Menu “Plugins” e clique em “Adicionar Novo“, na caixa “pesquisar plugins” digite “disable block editor” e clique o botão “Instalar Agora“, posteriormente clique “Ativar“.
(Este plugin desativa o editor de blocos implantado nas novas versões do WordPress e que de certa forma prejudica a edição de páginas através do Divi – Você também pode optar por não usar este plugin e desabilitar o editor de blocos através das configurações do Divi)

─► Em “pesquisar plugins“, agora digite “Disable All WordPress Updates“, “Instalar Agora” e “Ativar“.
(Este plugin desativa todas as opções de atualizar dentro do WordPress deixando um ambiente mais sereno livre de avisos incômodos e desnecessários. Para atualizar o WordPress ou plugins você sempre precisará se programar para isso evitando que partes do seu site fiquem quebradas ou sem funcionar corretamente)

─► Ainda na caixa “pesquisar plugins“, digite “All In One WP Security“, “Instalar Agora” e “Ativar“.
(Este plugin é responsável por boa parte da segurança do seu site)

─► Limpe sua área de plugins removendo os plugins que vem por padrão, o plugin “Akismet Anti-Spam” e o plugin “Hello Dolly”.

Criando a Página Principal do Site

Muitos profissionais já sabem como criar um site corretamente, mas quando somos leigos no assunto precisamos compreender algumas questões, como por exemplo o fato de criarmos um site do tipo OnePage, ou seja, quase todo o site construído em apenas uma única página deixando somente itens como Política de Privacidade e Sobre como novas páginas além da página principal OnePage.

O fator mais importante de se construir um site com apenas uma página principal está relacionado a experiência do usuário final ao navegar, uma vez que ele já carregou todas as informações necessárias daquele site em apenas uma requisição enviada à internet, isso torna a sua experiência muito mais interessante, pois fica mais ágil encontrar o que ele necessita. Obviamente que em sites mais complexos teremos que criar outras páginas, mas não é o nosso caso em se tratando de sites institucionais.

  1. No Menu “Páginas ─► Todas as páginas“, selecione todas as páginas que existem e na caixa “Ações em massa” escolha “Mover para a lixeira” e clique “Aplicar“.
  2. Agora clique no botão superior “Adicionar nova” e no título digite uma frase curta que lembre a função do seu site, por exemplo “Oficina de Carros Alegria em São Paulo“.
  3. Clique no botão “Usar o Construtor Divi” e em seguida clique no botão da direita “Salvar como rascunho“. Tudo estará semelhante a imagem abaixo:

Como criar um site - Criando a Página Principal

Ok, agora vamos clicar no botão principal da direita “Publicar” e vamos aproveitar para desligar a indexação dos buscadores para nosso site uma vez que ele ainda não está pronto.

Acesse o Menu “Configurações ─► Leitura“, clique em “Uma página estática” e selecione a “Página inicial” “Oficina de Carros…” aproveite e já marque a caixa “Evitar que mecanismos de busca indexem este site” e clique em “Salvar alterações“.

Vamos retornar no Menu “Páginas, Todas as páginas” e ao levar o mouse sobre o nome da nossa página clicamos em “Editar” para continuar a edição da nossa página.

Construindo o Layout da Página Principal

Como criar um site não é difícil quando temos a nossa mão as ferramentas corretas.

O construtor Divi fornece várias ferramentes organizadas e dispostas de forma prática para você criar as páginas que desejar no seu site. As linhas em AZUL, LILÁS e LARANJA são as SEÇÕES onde você irá adicionar LINHAS e dentro das LINHAS você adiciona um padrão de COLUNAS e dentro das COLUNAS é que você irá adicionar os MÓDULOS que deseja para cada área da sua página em edição, simples assim.

Por exemplo, se você quer iniciar com um Deslizante (Slider) logo após a barra de logo do seu site, então você deve ter uma sessão simples, depois uma linha de apenas uma coluna e dentro da coluna o módulo DESLIZANTE, então dentro das configurações do módulo deslizante é que você irá adicionar as imagens e textos do Slider que mostrará ao público do seu site. Enfim, a gama de recursos dentro do Construtor Divi é incrível, você altera tudo pelo construtor e o que você não consegue no construtor, ainda terá o recurso de alterar no modelo visual do seu site, ou seja, enquanto você vê como está ficando já tem ferramentas para alteração dos principais itens, falaremos mais adiante sobre isso.

Bom, agora vamos na linha verde do Construtor Divi clicamos em “Inserir Coluna(s)” e selecionamos a primeira opção na esquerda superior que é de apenas uma única coluna, ok.

Em seguida clicamos em “Inserir Módulo(s)” e escolhemos o módulo “Deslizante” conforme a imagem abaixo:

Tema Divi - Módulo Deslizante

Veja abaixo como é a tela de edição do módulo Deslizante:

Configuração do Módulo Deslizante

Agora clique em “Adicionar Novo Slide” mostrado na imagem acima, em seguida:

  1. Em Cabeçalho: Insira um texto para o seu primeiro slide, eu vou inserir “A Melhor Oficina de São Paulo”.
  2. Em Texto do Botão: Insira “Contactar”.
  3. Em Conteúdo: Insira uma frase de chamada para seu slide. Vou inserir “Conheça agora nossos serviços e preços imbatíveis na região!”
  4. Mais adiante em “Imagem do Slide” insira a imagem que desejar. Eu irei inserir uma imagem gratuita encontrada no site de fotos grátis Pixabay.com, você pode fazer o mesmo se quiser, então clique no botão da direita “Enviar uma imagem” e arraste a imagem do seu computador para a aba “Enviar arquivos” e clique em “Definir como imagem do slide”.
  5. Logo abaixo, em Button Link URL: Insira “#contato” que é um apontamento para a sessão contato que será criada na página principal.
  6. Em Plano de Fundo certifique-se de que está transparente na seção da primeira aba, a seção de cor da latinha de tinta. Caso tiver uma cor, leve o mouse até sobre o quadro de cor, clique na engrenagem, selecione a cor branco e depois deslize o segundo deslizante da direita para baixo, tornando o branco transparente.
  7. Em Rótulo do Administrador: Insira “Slide 1 – Saudação”.
  8. Clique em Salvar e em seguida em Salvar e Sair!
  9. Agora vá nas configurações da LINHA AZUL clicando na figura correspondente como na imagem abaixo:

Opções do Construtor Divi

  • Em Plano de Fundo: Clique na terceira aba a fim de adicionar uma imagem de fundo e clique no sinal de mais (+), escolha uma imagem e envie também, mas agora escolhendo “Tamanho completo” na parte inferior direita da janela. Eu escolhi um “background” no site pixabay.com.
  • Ative o efeito Parallaxe trocando para Sim e clique em Salvar e Sair.
  • Para adicionar mais Slides ao Deslizante basta utilizar as configurações do deslizante e adicionar quantos slides desejar.

Agora para não perder seu trabalho, clique no botão do WordPress, na direita, “Atualizar“.

VAMOS VER COMO ESTÁ FICANDO NOSSO SITE?

Ok, então pressione a tecla Ctrl em seu teclado e ao mesmo tempo clique lá no topo onde diz “Ver Página” ou até mesmo em “Link Permanente“. Irá abrir uma nova aba do navegador e se tudo deu certo você verá algo como na imagem abaixo:

Como está ficando o novo site

Observe que nós ainda não alteramos nada no cabeçalho do site e nem no rodapé. Mais adiante estaremos configurando estas regiões, fique atento.

Módulos Existentes no Construtor Divi

Quando você clica em “Inserir módulo(s)“, você tem vários módulos como na imagem abaixo. São muitas opções para a construção de seu site podendo deixá-lo visualmente bem atraente e funcional:

Como criar um site - Módulos do Divi

Adicionando Mais Seções ao Site

Vamos adicionar agora uma nova seção em AZUL onde inseriremos algumas características dos serviços que o nosso site oferece, no caso, serviços de mecânica. Clique em “Seção Padrão” e em seguida escolha o elemento de 3 COLUNAS até que fique algo como a imagem abaixo:

Adicionando mais seções ao site

Clique na primeira coluna da segunda seção “Inserir Módulo(s)” e em seguida clique no módulo “Sinopse” que localiza-se na parte inferior da coluna do meio.

Agora preenchendo o formulário do módulo temos:

  1. Em Título insira um título de característica para seus serviços, eu inseri “Trabalho em Equipe”.
  2. Em Conteúdo você deve colocar uma boa frase que chame a atenção dos seus clientes para características relevantes do serviços prestados. Se for site de produtos, faça o mesmo para produtos. Eu inseri “A Oficina Alegria tem a grata satisfação de atender seus clientes com uma equipe totalmente treinada para a manutenção de qualquer tipo de veículo nas marcas mais conhecidas do mercado”.
  3. Clique “Sim” para “Usar Ícone” e escolha uma figura que esteja relacionada com a descrição que você inseriu ou deixe “Usar Ícone” em “Não” e escolha uma imagem para personalizar melhor a visualização. Eu usei um ícone.
  4. Em “Rótulo do Administrador” insira “Característica 1”. Assim que terminar, clique em “Salvar e Sair“.
  5. Repita o processo para as outras duas colunas criando elementos distintos de características para os serviços oferecidos pelo site, em seguida clique no botão “Atualizar” do WordPress.

Precisamos agora criar um link de atalho para esta seção onde depois a chamaremos quando criarmos o Menu do site, e para fazer isso, clique na figura que corresponde a “Configurações” da seção na parte AZUL da linha das características. Agora vá na aba “Avançado” e no primeiro campo digite “características” e clique “Salvar e Sair”

Criando a Seção Contato

Agora precisamos inserir um módulo de contato para que tenhamos em nosso site uma área para os visitantes entrar em contato conosco.

  • Novamente clicamos “Seção Padrão” e escolhemos o layout de apenas uma coluna e nela clicamos em “Inserir Módulo(s)”.
  • Selecione o módulo “Formulário de Contato“.
  • Agora no campo “Título” colocamos um título atrativo como por exemplo, “Entre em Contato Agora Mesmo”.
  • Em “Mensagem de êxito” insira algo como “Muito obrigado pelo contato, em breve estaremos respondendo seu contato!”.
  • Em “Texto do botão de enviar” vamos inserir algo como “Enviar Solicitação”.
  • No campo “E-mail” insira seu e-mail.
  • Em “” troque para “Sim” e insira o endereço do seu site, no caso aqui, https://www.oficinaalegria.com.br ou então uma outra página com uma oferta ou qualquer outra página que você gostaria de mostrar ao visitante após ele concluir o envio do formulário de contato.
  • Clique “Salvar e Sair” e em seguida no botão “Atualizar” do WordPress.

Nosso layout de seções ficará mais ou menos assim até agora. Você tem liberdade para explorar todos os módulos do tema Divi e aplicá-los ao seu site.

Adicionando a Seção Contato

Precisamos agora criar um link de atalho para esta seção de contato, pois a chamaremos depois no Menu, e para fazer isso, clique na figura que corresponde a “Configurações” da seção na parte AZUL da linha do formulário de contato. Agora vá na aba “Avançado” e no primeiro campo digite “contato” e clique “Salvar e Sair”, em seguida novamente no botão “Atualizar” do WordPress.

Configurando o Cabeçalho do Site

Precisamos agora, nessa etapa, inserir o logo do site, o favicon e também criar o Menu Principal para o usuário navegar em nosso site sem complicações.

Opções do Tema Divi

Se você soubesse antes como criar um site, será que estaria utilizando este tema tão legal que chega a ser divertido? Fica aí uma pergunta bastante interessante.

Dentro da Área de Administração do WordPress, clique no Menu “Divi ─► Opções de Temas” e na aba “Geral” (General) adicione o logo do seu negócio ou logo pessoal no campo “Logotipo”.

Obs.: Para a criação de logo gratuito você pode utilizar a ferramenta web pt.freelogodesign.org. Você pode ainda instalar no seu PC o Libreoffice e criar seu logo com o Libreoffice Draw. Se você precisar fazer alterações na imagem do logo ou em fotos e figuras do seu site semelhantes as alterações feitas com Photoshop, você pode instalar também o Gimp. Todos são softwares gratuitos.

Mais abaixo na tela marque “Habilitar” para “Botão de Voltar ao Topo“.

Agora vá para a aba “Navegação” (Navigation) e em “Excluir páginas na barra de navegação” deixe todas as páginas marcadas com um x vermelho clicando sobre elas.

DesabiliteMostrar link da Página Inicial“.

Agora na aba “Seo” habilite os quatro primeiros itens e em “Título Personalizado da Página Inicial” insira um título para sua página principal do site. Pode ser o mesmo nome da página principal “Oficina de Carros Alegria em São Paulo”.

Em “Descrição meta Página Inicial” insira uma descrição curta de 160 caracteres.

No campo “Palavras-chave meta da Página Inicial” insira até três palavras chave como por exemplo, “oficina mecânica são paulo”, “mecânica em são paulo”, “mecânico em [bairro…]”, etc e clique em “Salvar Mudanças”.

Criando o Menu do Site

Acessando o Menu “Aparência ─► Menus” nós criaremos um menu principal para nosso site, sabendo que também é possível criar mais de um menu, ou seja, podemos criar quantos menus o tema atualmente ativo no WordPress suporta. A tela nos pede para inserirmos um nome para o nosso menu. Vamos digitar “Menu Principal” e clicar em “Criar menu“.

Veja na imagem abaixo que iremos adicionar Links Personalizados ao nosso Menu:

Criando o Menu do Site

A expressão “#características” irá levar o usuário direto para a seção Características do nosso site. Após clicar no botão “Adicionar ao menu”, marque a caixa “Menu Inicial” nas configurações do menu.

Na sequência faça mais duas inserções de Links Personalizados, uma para “Home” com link apontando para a url do seu site, exemplo: https://www.oficinaalegria.com.br e outro apontando dessa forma “#contato” para Contato. Mova com o mouse o Home para o início do menu. Vejamos como ficou:

Adicionando Novos Itens de Menu

Política de Privacidade

Sempre quando um site é desenvolvido para a internet, é altamente recomendado nós criarmos uma política de privacidade, então crie uma outra página chamada Política de Privacidade e insira o conteúdo do gerador de Política de Privacidade obtido através do site politicaprivacidade.com. Geralmente um link para essa página nós adicionamos no rodapé do site.

Como Criar um Site - Política de Privacidade

Configurando o Rodapé do Site

Para deixarmos o rodapé do site mais atraente e personalizado nós iremos editá-lo iniciando pela Barra Inferior do rodapé, onde há a mídias sociais e também os créditos ao WordPress.

O primeiro passo é acessarmos o Menu “Aparência ─► Personalizar“, em seguida clicamos em “Rodapé” e “Barra Inferior”. Nessa tela podemos editar as cores e as fontes dos textos exclusivamente para a barra inferior do rodapé, mas no nosso caso vamos apenas alterar os créditos inserindo na caixa “Editar créditos de roda-pé” o seguinte código html:

© - <a href="https://www.oficinaalegria.com.br">Oficina Alegria</a> | Todos os direitos reservados.

Em seguida no topo da página clicamos em “Publicar” tornando a alteração efetiva.

Editar créditos do rodapé

No rodapé também é possível inserir menus caso você deseje, que não é o nosso caso agora. É possível também no rodapé inserirmos elementos construtivos chamados de “Widgets“, onde podemos posicionar qualquer conteúdo do nosso site ou até de sites externos.

 

Construir Um Site, Agora Tem Editor Visual Divi

O tema Divi tem recursos incríveis e um deles é o Construtor Visual que nos oferece mais uma maneira de criação e edição de nosso site. No Construtor Visual nós podemos ver o site como ele está e ir fazendo alterações extremamente significantes, salvando e vendo o resultado em tempo real.

Até agora nós estavámos editando com o Construtor interno do tema Divi, mas agora nós iremos fazer algumas alterações no nosso site através do Construtor Visual. Na visualização do site, bem no topo, clicamos em “Habilitar Visual Builder” como na imagem abaixo:

Habilitar Divi Visual Builder

Veja como fica a tela após você habilitar o Construtor Visual (Visual Builder):

Configuração de Módulos

  1. Primeiro vamos redimensionar a altura do nosso módulo deslizante (slider) zerando o espaçamento de Topo e da Parte Inferior. Para isso, conforme a imagem abaixo, posicione o mouse na seção mais externa no módulo, ou seja, nas configurações de seção conforme a imagem abaixo até formar na seta do mouse, o ponteiro de seta de redimensionamento mostrado em verde limão, em seguida pressione o mouse e arraste para cima até quando der, pois irá zerar o espaçamento de topo:Redimensionar Bordas do Módulo
  2. Agora faça o mesmo na Parte Inferior da mesma borda azul de redimensionamento zerando-a também.
  3. Ok, agora faça o mesmo com a borda do módulo mais a dentro, a borda verde, faça no topo e também na parte inferior. Você estará removendo os espaços do módulo de slider deixando mais adaptado a visualização economizando espaço de tela do usuário.
  4. Clique em “Salvar”, na barra de configurações inferior do Construtor Visual. Se o botão “Salvar” não estiver aparecendo clique na figura “…” na parte inferior central para mostrar todos os elementos.
  5. Vamos configurar algumas coisas dentro do módulo Deslizante. Clique conforme indica a imagem abaixo, “Configurações de Módulo“:Redimensionar itens do módulo
  6. Um popup de edição abrirá para editar o módulo, clique na figura indicada:Popup Editar Módulo
  7. Clique na aba “Design“, e em seguida na cortina “Espaçamento“, insira 90 para o Topo e 90 para a Parte Inferior.
  8. Agora vá na cortina mais acima “Título Texto” e em “Título Fonte“, selecione a fonte “Verdana“.
  9. Mais abaixo na mesma cortina, em “Título Texto Shadown” escolha a terceira figura para aplicar uma sombra especial.
  10. Agora clique no botão verde na direita inferior, botão verde novamente e na direita inferior da tela “Salvar” para concluir a edição do módulo Deslizante.

Nossa edição ficará mais ou menos assim:

Resultado da Edição do Módulo

Copiando e Colando Estilos

Vamos agora conhecer o incrível recurso de copiar e colar estilos no Construtor Visual do Divi, para isso usaremos os elementos que criamos como características dos serviços prestados pelo site. Conheçamos então o passo a passo:

  1. Acesse “Configurações de Módulo” da Sinopse conforme imagem abaixo:Editar Configurações do Módulo Sinopse
  2. No popup que abre selecione a aba “Design” e abra a cortina “Imagem & Ícone” conforme imagem:Alterar Configurações Módulo Sinopse e Salvar
  3. Em “Cor do Ícone” selecione a cor branco e deixe em “Sim” a opção “Circular Ícone”.
  4. Em “Cor do Círculo” selecione a cor azul, deixe em “Sim” a opção “Exibir Borda Circular” e em “Cor da Borda Circular” escolha a cor laranja.
  5. Agora role para baixo e abra a cortina “Bordas” e em “Bordas Arredondadas” (Rounded Borders) preencha apenas o campo do canto superior esquerdo com o valor 7.
  6. Em “Estilos de Borda” (Border Styles) clique na imagem que representa bordas em toda a volta do objeto, ou seja, na primeira imagem da esquerda para a direita.
  7. Em “Largura da Borda” arraste até um pixel (1px) e em “Cor da Borda”, clique na imagem do Conta-gotas e escolha uma cor cinza fraco no espectro enquanto você observa a alteração no site em tempo real.
  8. Agora abra a cortina “Sombra da Caixa” (Box Shadow) e escolha a última sombra da primeira linha, da esquerda para a direita.
  9. Bom, agora suba um pouco e localize a cortina “Espaçamento” e em “Preenchimento Personalizado” arraste todos os contadores para o valor 20.
  10. Agora salve o trabalho no botão verde em forma de visto na direita inferior do popup.
  11. Para copiar agora este estilo criado e colar nos outros dois elementos de Características é muito simples. Conforme a imagem abaixo, clique com o botão direito do mouse sobre “Configurações de Módulo” e faça um clique na opção “Cópia Módulo Estilos”:Copiar Estilos do Módulo
  12. Clique agora com o botão direito do mouse sobre “Configurações de Módulo” do item de características “Pontualidade”, faça um clique em “Colar Módulos Estilos” e também faça o mesmo com o item “Paixão Pela Profissão”. Complete salvando no botão “Salvar” do Construtor Visual. Pronto, seu copiar e colar de estilos está pronto. Nesse meio tempo logo percebemos a mudança. Confira o resultado:Resultado do Copiar e Colar Estilos

Prévia Final do Site Criado Com o WordPress e Com o Construtor Divi

Prévia Final da Criação do Site

Para Quem Queria Saber Como Criar Um Site

Nesse artigo podemos perceber o potencial de criação de um site utilizando a plataforma WordPress junto com algumas ferramentas e com a estrutura do Tema Divi da Elegantthemes.com. Aqui nós utilizamos poucos elementos, mas o Construtor Divi dispõe de vários recursos como módulos diversos e a possibilidade de salvar alterações como padrão para a biblioteca principal de estilos entre outros recursos muito importantes para agilizar o trabalho.

Sem dúvida alguma o WordPress e o Divi são um par espetacular na criação de sites de forma rápida e profissional permitindo ao profissional web designer despender mais tempo na edição de imagens, logo, etc. e não ficar preso a comandos avançados que correspondem a estrutura do site como css e javascript.

Concluímos então que criar um site do zero não é tão difícil assim e que qualquer pessoa com boa vontade e com as ferramentas necessárias, poderá criar seu próprio site. Caso a pessoa não tenha tempo pode optar pela criação da Hospedagem MEI.

CONFIRA A PROPOSTA DE CRIAÇÃO DE SEU SITE
Se você está sem tempo para desenvolver seu novo site, clique aqui para conhecer uma ótima proposta para ter seu site WordPress com muitos outros recursos instalados. Vale a pena conferir!

Deixe um Comentário