Na Hosting Machine, buscamos sempre oferecer as melhores e mais recentes soluções técnicas para nossos clientes. Uma dessas soluções é o construtor de sites. Embora ele seja bastante amigável, compreendemos que em alguns momentos certas dúvidas possam aparecer. Este tutorial oferece um curso básico, em 3 módulos, para utilização do nosso construtor e visa esclarecer todas essas dúvidas iniciais, facilitando o seu uso do construtor.

No primeiro módulo, indicaremos os passos para acessar o seu construtor e como definir seus projetos de criação de sites. No segundo módulo, apresentaremos as principais funções do editor de sites da Hosting Machine. Por fim, no terceiro módulo, apresentaremos as instruções para publicação do seu site. Dividimos dessa forma para focar e agilizar seus estudos, bem como para facilitar futuras consultas.

Informamos ainda que, por conta da constante evolução da tradução para o Português brasileiro e também do próprio construtor, alguns termos utilizados neste tutorial podem estar traduzidos e/ou adaptados de forma ligeiramente diferentes quando você for consultar diretamente no seu construtor, porém as funções das opções permanecem exatamente as mesmas. Então, vamos lá!

1 – Como acessar o construtor
– Onde está o construtor?
– Acessando o construtor
– Criando um nome para o projeto

2 – Como editar o seu site
– Começando a edição do site

2.1 – Funções do menu lateral
– Drag and Drop
– Função “Add Paragraph”
– Função “Add Image”
– Função “Add Video”
– Função “Add Empty Box”
– Função “Embed Code”

2.2 – Funções do menu superior
– Opção “Select Design”
– Opção “Edit Home”
– Opção “Select Theme”
– Opção “Edit Pages”
– Opção “Edit Contact”
– Opção “Image Gallery”
– Opção “Media Player”
– Opção “Edit Store”
– Opção “Edit Mobile”
– Opção “Settings Advanced”

3 – Como publicar o seu site
– Opção “Site Publish”
– Configurando o FTP
– Após configurar o FTP
– Publiquei meu site, e agora?

1 – Como acessar o construtor

 

– Onde está o construtor?

O primeiro passo é acessar o construtor. Ele estará disponível no painel de controle da sua hospedagem. Para conhecer os dados de acesso ao seu painel, confira o aviso de ativação da sua hospedagem, enviado por e-mail. Uma cópia deste aviso também poderá ser conferida no seu cadastro em nosso portal, em www.hostmach.com.b/suporte.

Com os dados de acesso ao painel em mãos, digite o endereço do painel de controle na barra de endereços do seu navegador e, assim, a seguinte tela surgirá:

 

Captura de Tela (1)

Imagem 1 – Página de acesso ao painel de controle.

 

Nesta página de acesso ao painel de controle, você digitará seu usuário e senha, indicados no aviso de ativação de sua hospedagem. Após isso, clique em “login” e você efetuará então o acesso.

Uma vez acessado o painel, busque pelo ícone com o nome TrendyTools. Ao clicar neste ícone, seu navegador será redirecionado para o construtor de sites.

Todos os acessos do construtor, bem como a criação do seu site, se darão diretamente no seu navegador, pois o construtor roda em nuvem, ou seja, não é necessário efetuar o download de qualquer aplicativo para o seu computador, nem haverá necessidade de efetuar backup, pois seu site ficará salvo também na nuvem de dados, no servidor onde o construtor está instalado.

Dependendo do plano de hospedagem que você contratar conosco, o painel de controle poderá se apresentar de diferentes formas, com mais ou menos opções, porém o ícone do TrendyTools será sempre o mesmo, como mostram as figuras abaixo (o ícone do TrendyTools foi destacado com um círculo vermelho):

 

Captura de Tela (3)

Imagem 2 – Um das possíveis apresentações do painel de controle, após acesso.

 

Captura de Tela (4)

Imagem 3 – Outra possível apresentação do painel de controle.

 

Captura de Tela (2)

Imagem 4 – E mais uma possível apresentação do painel de controle.

 

– Acessando o construtor
Ao clicar no ícone do TrendyTools, será exibida a seguinte tela:

 

Captura de Tela (5)

Imagem 5 – Tela inicial do construtor, para escolha de modelo de layout.

 

Esta página mostra a tela inicial do construtor. Para iniciar a construção do seu site, basta escolher, dentre os modelos apresentados, aquele que melhor se enquadra no objetivo do seu site e então clicar na palavra “Prossiga” lá apresentada.

Estes modelos são apenas o início, porque depois você terá acesso a diversos layouts diferentes, que estarão otimizados, de acordo com o modelo inicial que você tiver escolhido. Sempre lembrando que todos os layouts são customizáveis, ou seja, se nenhum layout disponível lhe agradar, você poderá modificar tudo e criar uma identidade visual completamente nova para seu site.

Ao rolar esta tela inicial do construtor, mais opções de modelos iniciais serão apresentados, conforme segue:

 

Captura de Tela (7)

Imagem 6 – Continuidade da tela inicial do construtor, para escolha de modelo de layout.

 

Captura de Tela (8)

Imagem 7 – Continuidade da tela inicial do construtor, para escolha de modelo de layout.

 

Captura de Tela (9)

Imagem 8 – Continuidade da tela inicial do construtor, para escolha de modelo de layout.

 

– Criando um nome para o projeto

Uma vez definido e acessado o modelo inicial que será a base do seu site, o seu navegador abrirá uma nova janela, conforme segue:

 

Captura de Tela (10)

Imagem 9 – Tela para criação do nome de um projeto de site.

 

Nesta nova janela, você definirá um nome, que será utilizado para salvar o projeto do seu site. Aqui, não se preocupe em criar algo complexo, pois este nome não aparecerá para os visitantes do seu site. Será apenas um nome para identificar o projeto em questão, que ficará armazenado no seu construtor. Lembrando que você pode criar vários projetos em paralelo, bastando salvar cada um com um nome diferente e todos ficarão disponíveis e catalogados para acesso no seu construtor, a qualquer momento que você desejar.

Importante ressaltar que, quando você define um modelo inicial, por exemplo, “Imobiliária”, e cria lá um projeto para seu site, quando você desejar acessar novamente este mesmo projeto, basta acessar o construtor de sites, a partir do painel de controle de sua hospedagem, clicar no mesmo modelo inicial “Imobiliária” e então você terá acesso à relação de todos os projetos que tiver salvo e que fazem uso deste modelo. O mesmo princípio serve para todos os demais modelos iniciais e isso já dá uma ideia da organização deste construtor e como você poderá criar vários projetos de sites diferentes. Isso permite, por exemplo, que você deixe alguns modelos prontos e substitua periodicamente o layout que estiver online no seu site, ou ainda, estudar as diversas funções do construtor, sem alterar o layout do site que estiver atualmente publicado e online na sua hospedagem.

Segue um exemplo de definição de nome de projeto. No caso, continuando o exemplo anterior, um projeto para site de uma imobiliária:

 

Captura de Tela (11)

Imagem 10 – Tela para criação do nome de um projeto de site.

 

Após definir o nome do seu projeto, é só clicar no botão verde “ir” e então a página de edição do site será carregada, exibindo a seguinte tela:

 

Captura de Tela (12)

Imagem 11 – Tela de carregamento do editor de sites.

2 – Como editar o seu site

 

– Começando a edição do site

Uma vez finalizado o carregamento da página de edição, no nosso exemplo, para um modelo inicial de imobiliária, a seguinte tela será exibida:

 

Captura de Tela (1)

Imagem 12 – Tela inicial do editor, na escolha do modelo inicial “Imobiliária”.

 

As opções de edição serão sempre as mesmas, porém o layout carregado dependerá do modelo inicial escolhido. Lembrando novamente que este layout poderá ser alterado, ou mesmo editado. A seguir, indicaremos mais detalhes sobre estas opções.

Absolutamente tudo o que o layout apresenta pode ser editado, desde corres, imagens de fundo, ícones e, claro, o texto que será apresentado. Tudo isso é controlado pelo menu lateral, do lado esquerdo, dedicado à edição dos dados da página que estiver em aberto no seu construtor e também pelo menu superior, que controla as definições gerais do seu site, bem como o acesso à edição da página inicial e também de todas as páginas internas que por ventura você deseje criar para seu site.

Nesta imagem acima e no primeiro momento em que você acessa seu projeto, a página exibida será sempre a home do site, ou seja, a página inicial. Seja nesta página inicial, ou em qualquer outra página interna do seu site, o princípio de alteração dos dados será sempre o mesmo:

A) Tudo o que é apresentado na tela pode ser clicado e arrastado. Assim, você tem liberdade total para manter o mesmo layout apresentado, ou então, você poderá criar um layout totalmente novo e personalizado para seu site;

B) Clicando uma única vez em qualquer dado inserido no site, um menu de edição simples será apresentado, conforme segue:

 

Captura de Tela (2)

Imagem 13 – Editando texto no construtor.

 

Caso clique duas vezes, o menu em cascata “editar texto” abrirá, exibindo então opções mais avançadas, conforme segue:

 

Captura de Tela (3)

Imagem 14 – Editando texto no construtor.

 

Este é um princípio válido para os dados que não contiverem links para páginas internas;

C) Caso você deseje editar um dado, no qual você tenha definido um link, que remeta para alguma página interna do seu site, clicando uma única vez, abrirá um menu semelhante à este da foto acima, para edição da apresentação estética do dado em si. Agora, caso clique duas vezes, o construtor automaticamente te transportará para a página interna em questão, a qual poderá ser livremente editada, sob os mesmos princípios anteriormente enumerados.

2.1 – Funções do menu lateral

 

A seguir, apresentaremos as principais funções disponíveis no construtor, começando pelo menu lateral que, como indicamos anteriormente, controla a edição de dados na página que estiver em aberto atualmente no seu construtor, possibilitando a inserção de novos dados.

– Drag and Drop

Este menu tem, apresentado no seu topo, a indicação “Drag and Drop”, que quer dizer, literalmente “Agarre e solte”, ou seja, para inserir novos dados na página que você estiver editando, é só clicar com o botão esquerdo do seu mouse e arrastar o dado até sua página, soltando-o no local onde você desejar inseri-lo.

– Função “Add Paragraph”

A primeira opção, “Add Paragraph”, cria uma estrofe, com texto, que você poderá editar com as informações que você desejar, conforme segue:

 

Captura de Tela (4)

Imagem 15 – Inserindo texto em formato parágrafo.

 

Ou seja, a inserção da opção “Add Paragraph” criou o parágrafo da imagem acima e o menu da direita foi automaticamente aberto, para auxiliá-lo na edição do texto em questão.

– Função “Add Image”

A segunda opção, “Add Image”, adiciona qualquer imagem que você desejar, no local que você desejar, na página que você está editando, conforme segue:

 

Captura de Tela (5)

Imagem 16 – Inserindo  imagem na página.

 

– Função “Add Video”

A terceira opção, “Add Video”, adiciona um vídeo na sua página, que poderá ser “linkado” de qualquer outro site, como o Youtube, por exemplo, ou ainda de um arquivo hospedado na área de dados de sua hospedagem conosco. Segue imagem:

 

Captura de Tela (6)

Imagem 17 – Inserindo vídeo na página.

 

Veja ainda que, no canto superior esquerdo, há a indicação “Editar Video” que, ao clicar nela, abrirá um pequeno menu, com opções para a edição do vídeo que você desejar postar, conforme segue:

 

Captura de Tela (7)

Imagem 18 – Editando o vídeo inserido.

 

– Função “Add Empty Box”

A quarta opção, “Add Empty Box”, tem por objetivo criar uma caixa colorida, onde você poderá inserir texto ou qualquer outro dado “por cima”, criando uma aparência mais dinâmica para seu site. Há várias opções disponíveis, inclusive para criar animações, conforme segue:

 

Captura de Tela (8)

Imagem 19 – Inserindo um fundo pequeno personalizado.

 

– Função “Embed Code”

Finalmente temos a quinta opção, “Embed Code”, cuja finalidade é inserir dados de outros sites, como banners, complementos e outros. Existem milhões de componentes diferentes que podem ser inseridos nas páginas do seu site, com as mais variadas finalidades. Na imagem de exemplo, segue conteúdo que insere um link para visitantes do seu site efetuarem doações em dinheiro para você, através do Paypal:

 

Captura de Tela (9)

Imagem 20 – Inserindo código gerador de complemento.

2.2 – Funções do menu superior

 

O menu superior do construtor de sites da Hosting Machine, apresenta opções de edição mais gerais, ou seja, que influenciarão a todas as páginas do seu site e não somente uma edição na página em que estiver aberta no momento, foco do menu lateral. Neste menu superior, temos também uma gama de opções, que iremos detalhar a seguir.

– Opção “Select Design”

A primeira opção tem o nome “Select Design”. Clicando nela, uma caixa de seleção será aberta e a primeira opção que visualizaremos nesta caixa é “galeria de design”, onde você poderá escolher um layout para seu site. São várias opções, segue imagem:

 

Captura de Tela (10)

Imagem 21 – Escolhendo Layout.

 

Cada um dos layouts determinará uma identidade visual diferente para todo o seu site, sempre lembrando que, mesmo efetuando esta definição, todos os elementos do layout ainda podem ser inteiramente editados, possibilitando assim que seu site tenha uma aparência única.

Em seguida, no mesmo quadro de seleção, temos a opção “Defina background”, onde você poderá alterar a imagem de fundo do seu site, ou mesmo deixar sem imagem, além de outras edições, conforme segue na imagem:

 

Captura de Tela (11)

Imagem 22 – Definindo imagem de fundo.

 

E, por fim, neste quadro temos mais uma opção, chamada “Página Inner Design Gallery”, com várias opções de layout, direcionadas para as páginas internas do site.

– Opção “Edit Home”

Partindo para a próxima opção do menu superior, temos “Edit Home”, para as definições de cabeçalho e palavras chafe do seu site. No primeiro item, temos “Índice de SEO”, que definirá o texto que aparecerá na aba de título, do navegador do seu visitante. Aqui, você também definirá as palavras chave que definirão o seu site e elas devem conter os assuntos e objetivos do seu site. Confira na imagem:

 

Captura de Tela (13a)

Imagem 23 – Definindo detalhes que aparecerão no navegador.

 

Prosseguindo, temos também a opção “Selecione Logo:”, que permitirá definir um ícone para o seu site, que aparecerá também no navegador do seu visitante, conforme segue:

 

Captura de Tela (13b)

Imagem 24 – Definindo ícone que aparecerá no navegador.

 

E, por fim, temos a opção “Página fundo de vídeo”, onde você poderá definir um vídeo, nos formatos suportados pelo construtor conforme lá indicado, para deixar de fundo no seu site, caso desejado. Confira na imagem:

 

Captura de Tela (13c)

Imagem 25 – Item para definição de vídeo de fundo.

 

– Opção “Select Theme”

Passando para o próximo item do menu superior, temos agora a opção com o nome “Select Theme”, com várias opções de temas para uso no seu site, que harmonizarão com o layout que você previamente escolheu. Você pode optar por escolher e aplicar um tema, ou então por não utilizar nenhum. Confira:

 

Captura de Tela (14a)

Imagem 26 – Escolha de tema.

 

Além dos temas já pré-definidos, você também poderá utilizar qualquer outro tema que você já disponha, na segunda opção deste item, intitulada “meu tema”, conforme segue na imagem:

 

Captura de Tela (14b)

Imagem 27 – Item que possibilita carregamento de tema próprio.

 

– Opção “Edit Pages”

Passando ao próximo item do menu superior, temos “Edit Pages”, nada mais do que um organizador que o construtor de sites te oferece, para gerenciar todas as páginas do seu site, ou seja, aqui você poderá criar, acessar, editar e deletar, a página principal e todas as páginas internas do seu site, navegando em cada uma delas e conferindo-as de forma rápida e organizada. É só clicar no item “clique para editar”, no canto superior esquerdo, para abrir as “Páginas Principais”, viabilizando seu prosseguimento. Confira:

 

Captura de Tela (15)

Imagem 28 – Gerenciador de páginas do site.

 

– Opção  “Edit Contact”

No próximo item do menu superior, temos a opção “Edit Contact”, que te auxiliará na inserção de informações e formulário de contato, na página e/ou área do seu site em que você dseseje inserir estes itens, para comunicação com seus visitantes. No primeiro item, “Informações de contato”, você definirá os seus dados pessoais para contato com seus visitantes, conforme segue:

 

Captura de Tela (16a)

Imagem 29 – Editando informações de contato.

 

Na sequência, em “Informações adicionais”, você poderá inserir, se desejado, mais detalhes para seus visitantes, como outros contatos, uma pequena apresentação sua, ou do seu projeto, entre outros, conforme segue:

 

Captura de Tela (16b)

Imagem 30 – Inserindo informações de contato adicionais.

 

Em seguida, temos a opção “Formulário de Contato” que, como o próprio nome já indica, te auxiliará na criação fácil e rápida de um dos itens mais solicitados e necessários em um site, um formulário de contato para seus visitantes poderem te enviar rapidamente mensagens via e-mail. Confira:

 

Captura de Tela (16c)

Imagem 31 – Criando um formulário de contato de e-mail.

 

Por fim, você poderá inserir, na opção “Informações do mapa”, os dados da sua empresa e da localização da mesma, caso sua empresa tenha uma sede física, para conhecimento e visitação dos seus clientes. Ao inserir este item no seu site, seus clientes terão rápido acesso ao endereço que você indicar ali, para busca em sites de mapas. Confira:

 

Captura de Tela (16d)

Imagem 32 – Inserindo informações de endereço da sua empresa.

 

– Opção “Image Gallery”

Prosseguindo com as opções do menu superior, temos agora “Image Gallery”, no qual há uma galeria já definida com várias imagens para você utilizar no seu site, ou ainda você poderá criar galerias novas, com novos grupos de imagens, as quais você poderá organizar por tema, tipo, etc., facilitando e agilizando a inserção de novas imagens no seu site, sempre que você desejar. Confira nas imagens:

 

Captura de Tela (17a)

Imagem 33 – Escolhendo imagens para aplicação em uma página do site.

 

Captura de Tela (17b)

Imagem 34 – Opção “Gerenciar imagens”, para criação de novas galerias e banco de dados de imagens.

 

– Opção “Media Player”

Na próxima opção do menu superior, temos “Media Player”, que permite a adição a qualquer página do seu site, de um player de mídia, para vídeos, música e outros, com link direto para o Youtube. Há vídeos já pré-definidos, no primeiro item “Design do jogador”, conforme mostra a figura a seguir:

 

Captura de Tela (18a)

Imagem 35 – Opções de layout para o Media Player.

 

Ou ainda, é possível você definir seus próprios vídeos, também com link para o Youtube, na opção “Editar conteúdo”, conforme segue:

 

Captura de Tela (18b)

Imagem 36 – Opção do editor de conteúdo, ainda sem adição de vídeos.

 

Ao clicar no sinal de adição “+”, ao lado de “Media Files”, conforme imagem acima, você poderá incluir seus vídeos, com link pro Youtube, configurando conforme mostra a figura seguinte:

 

Captura de Tela (18c)

Imagem 37 – Editor de conteúdo, já com uma nova entrada em criação.

 

Ao clicar no arquivo criado, “File 1 Tittle”, será aberto um menu para edição deste vídeo, conforme segue:

 

Captura de Tela (18d)

Imagem 38 – Editando o novo item adicionado.

 

– Opção “Edit Store”

No próximo item do menu superior, temos “Edit Store”. Esta é uma opção bastante interessante, pois ela permite escolher a aplicar layouts totalmente otimizados para a criação de uma loja virtual, ou seja, se você tem uma loja, ou uma empresa de serviços e deseje criar uma loja, esta é a opção para você! No primeiro item “store Design”, temos os layouts para sua escolha, conforme segue:

 

Captura de Tela (19a)

Imagem 39 – Escolha de layout para loja virtual.

 

No próximo item, “Gerenciar os produtos”, você poderá criar todas as categorias de produtos de sua loja e cadastrar seus produtos em cada uma destas categorias. Aqui, a exemplo da opção “Edit Pages” do menu superior, temos também um organizador de conteúdo, mas neste caso, das categorias e produtos da sua loja, conforme segue na imagem:

 

Captura de Tela (19b)

Imagem 40 – Criação e personalização de categorias de produtos e seus itens.

 

E na opção seguinte, “Informações do produto” (que está com o nome “Gerenciar os produtos” na imagem abaixo, erro posteriormente corrigido na nova tradução), o foco é no detalhamento dos produtos em si, conforme mostra a imagem seguinte:

 

Captura de Tela (19c)

Imagem 41 – Detalhamento dos produtos cadastrados na loja.

Obs.: a opção “Informações do produto”, na imagem acima, está com o nome “Gerenciar os produtos”, um erro que foi posteriormente corrigido na nova tradução).

 

– Opção “Edit Mobile”

No item seguinte do menu superior, temos a opção “Edit Mobile”. Trata-se de uma opção bastante importante, que visa auxiliá-lo na elaboração do seu site para ser visualizado em smartphones, aparelho muito utilizado para acesso à internet hoje em dia e, portanto, vital para o sucesso do seu projeto. Neste item, você poderá conferir exatamente como ficará a versão do seu site em um smartphone, além de permitir ajustes para melhoria da aparência. Segue imagem:

 

Captura de Tela (20)

Imagem 42 – Edição da página, visando otimização para visualização em smartphone.

 

– Opção “Settings Advanced”

E no último item de edição do site, no menu superior, temos “Settings Advanced”, cuja finalidade é inserir links nas suas páginas, para seus visitantes conferirem links personalizados para seu Facebook e Twitter, seja seu pessoal, ou da sua empresa. Segue imagem:

 

Captura de Tela (21)

Imagem 43 – Inclusão de links personalizados para acesso direto ao seu Facebook e Twitter através do seu site.

 

3 – Como publicar o seu site

 

Aqui temos um dos procedimentos que geram mais dúvidas, que é exatamente o momento da publicação do site, onde você poderá ver, online, todo o fruto do seu trabalho de edição. Para este momento não se tornar algo frustrante, mas sim de profunda satisfação, desenvolvemos este terceiro e último módulo, para destrincharmos todos os detalhes deste procedimento.

– Opção “Site Publish”

O primeiro passo para a publicação do seu site, é clicar na opção “Site Publish”, disponível no menu superior da área de edição do construtor de sites e então o procedimento será iniciado, conforme mostra a imagem abaixo:

 

Captura de Tela (1)

Imagem 44 – Publicando o site.

 

Para que esta publicação possa ocorrer corretamente, será necessário indicar os dados de conexão ao FTP da sua hospedagem, exatamente conforme indicado no aviso de ativação da sua conta, enviado por e-mail e com uma cópia para sua consulta, no histórico do seu suporte, em www.hostmach.com.br/suporte

Para isso, após a tela da mensagem anterior, caso ainda não tenha configurado os dados do FTP, a seguinte mensagem será indicada:

 

Captura de Tela (2)

Imagem 45 – Mensagem indicando a necessidade de configuração dos dados do FTP.

 

– Configurando o FTP

E para prosseguir com a configuração dos dados FTP, é só clicar na frase em azul, dentro do quadro informativo, que indica “Clique aqui para ir para Entrar Membro Secção:”. Ao clicar nesta opção, a seguinte tela será exibida:

 

Captura de Tela (3)

Imagem 46 – Página para acesso aos projetos de site já iniciados.

 

Importante ressaltarmos aqui, que esta tela será muito utilizada por você, durante a criação e administração do seu site, pois é exatamente a tela que sempre será exibida logo após o seu acesso ao TrendyTools, no painel de controle da sua hospedagem, assim que você clicar no modelo inicial no qual está desenvolvendo seu site. Esta é a tela onde estarão disponíveis todos os seus projetos desenvolvidos com o mesmo modelo inicial e serve de ponto de partida para você escolher o projeto e prosseguir para a edição do mesmo.

No caso, como desejamos inserir os dados do FTP neste projeto de exemplo “Imobiliária Hostmach” que estamos criando, a opção que você deverá acessar é esta em negrito, logo abaixo do nome do projeto, “Adicionar domínio”, a qual te remeterá para a seguinte tela:

 

Captura de Tela (4)

Imagem 47 – Página para inserção dos dados do FTP.

 

Esta é exatamente a tela onde você configurará os dados do seu FTP para posterior publicação do seu site. Nos 3 primeiros campos, você preencherá, na ordem, o endereço do seu FTP, o usuário e a senha. Todos estes dados, conforme indicamos anteriormente, estão no aviso de ativação da sua hospedagem.

Aaqui, é importante lembrarmos que, até o apontamento e propagação dos nossos DNS, no registro do domínio do seu site, você deverá utilizar o endereço de acesso genérico do servidor e não o endereço que remete ao seu domínio, pois do contrário, ocorrerá erro, dado que a propagação ainda não ocorreu. Mais detalhes sobre esta questão poderão ser conferidos no aviso de ativação da sua hospedagem e, em caso de qualquer dúvida, abra um chamado em nosso suporte e iremos te auxiliar, em www.hostmach.com.br/suporte

No nosso exemplo, vamos imaginar que o endereço do seu FTP, indicado no aviso de ativação da sua hospedagem, é gilmour.hmnoc.net e o usuário é imohostm. Os campos serão preenchidos então da seguinte forma:

 

Captura de Tela (5)

Imagem 48 – Inserindo e verificando os dados do FTP.

 

Veja que o campo da senha não mostra os caracteres que você digitou, para uma maior segurança dos seus dados.

Deixe o campo abaixo da senha, com a indicação “FTP – TLS/SSL (FTPS)” sem seleção, conforme mostrado na imagem acima e então clique no botão “Verifique Connection”. Se os dados tiverem sido indicados corretamente, aparecerá uma mensagem, em vermelho, “Connection verified successfully”, conforme imagem acima, indicando que a conexão do construtor de sites, com o FTP da sua hospedagem, foi finalizado corretamente.

Na opção seguinte, “Diretório de Publicação”, escolha, na caixa de seleção, a pasta com o nome “www”, que é onde seu site deverá ser publicado, para que o mesmo vá ao ar. E, na última opção, “Domain Name URL que mapeia para o seu Diretório Publicar”, indique o endereço do seu site, sem “www”. Por exemplo, se o seu site for www.imohostmach.com.br , neste campo, você indicará imohostmach.com.br , ficando então da seguinte forma:

 

Captura de Tela (6)

Imagem 49 – Mensagem de confirmação da inserção correta dos dados do FTP.

 

Pronto, agora é só clicar no botão “Enviar” e você receberá um resultado, em vermelho, no topo da página, exatamente conforme indicado na imagem acima, informando “FTP info successfully updated!”, ou seja, você concluiu corretamente a inserção dos dados do seu FTP no construtor de sites e agora seu site está pronto para ser publicado!

Feche esta janela janela no “X” disponível no canto superior direito da mesma e então você retornará para a página inicial de seleção de projeto. O interessante agora é que, como você já inseriu os dados do seu site e FTP, a indicação abaixo do nome do seu projeto mudou, deixando de ser “Adicionar domínio”, como estava anteriormente, para agora exibir “http: //imohostmach.com.br, seguido do botão “Configurações”, conforme segue:

 

Captura de Tela (7)

Imagem 50 – Retornando à página para acesso aos projetos de site já iniciados.

 

Ou seja, é exatamente o domínio que definimos no exemplo anterior e, caso em algum momento você precise modificar os dados de conexão ao FTP da sua hospedagem, é só acessar este botão “Configurações e a tela para inserção dos dados será exibida.

No momento, como nenhum dado precisa ser alterado, é só prosseguir, clicando na opção “Editar”, conforme pode ser conferido na imagem acima.

– Após configurar o FTP

Em seguida, após clicar na opção “Editar”, conforme instruções do parágrafo acima, será aberta novamente a página de edição do construtor de sites e você novamente deverá clicar na opção “Site Publish”, no menu superior, segunda opção da direita para a esquerda, conforme segue:

 

Captura de Tela (8)

Imagem 51 – Tela inicial de edição do site, para finalizar a publicação.

 

Novamente será exibida a mensagem de publicação em andamento, conforme segue:

 

Captura de Tela (9)

Imagem 52 – Publicação em andamento.

 

E então, finalmente, teremos a mensagem de que seu site foi publicado com sucesso, conforme mostra a imagem abaixo:

 

Captura de Tela (10)

Imagem 53 – Publicação concluída com êxito!

 

– Publiquei meu site, e agora?

Agora, temos duas situações:

  • Caso você já tenha apontado os DNS, no registro do seu domínio e aguardado a propagação dos DNS, você já poderá ver seu site no ar, acessando o endereço do mesmo.
  • Ou, caso ainda não tenha apontado os DNS no registro do seu domínio, também será possível conferir seu site no navegador, em um acesso temporário que disponibilizamos. Isso é interessante pois, mesmo antes de apontar os DNS, você poderá conferir exatamente como seu site ficará no navegador, quando estiver online e com os DNS apontados.

Para efetuar este acesso, é muito simples: a URL que você deverá digitar na barra de endereços do seu navegador, ficará no seguinte formato:

http://endereçodoservidor/~usuáriodoseupainel/

Onde:

– “endereçodoservidor” deverá ser substituído exatamente pelo endereço do FTP genérico do servidor da sua hospedagem, indicado no seu aviso de ativação. No nosso exemplo, utilizamos gilmour.hmnoc.net para a configuração do FTP e é este exatamente o endereço que usaríamos neste nosso exemplo;

– “usuáriodoseupainel” deverá ser substituído pelo usuário de acesso ao FTP da sua hospedagem, também informado no seu aviso de ativação. No nosso exemplo, utilizamos o usuário imohostm e este é exatamente o usuário que utilizaríamos neste nosso exemplo.

Dessa forma, o link para acesso, neste exemplo, ficaria da seguinte forma:

http://gilmour.hmnoc.net/~ imohostm/

Basta você adaptar este exemplo, ao seu caso e então você poderá efetuar este acesso temporário, antes do apontamento e propagação dos DNS no registro do seu domínio.

E aqui finalizamos este tutorial. Esperamos que o mesmo tenha te ajudado e, em caso de qualquer dúvida, nosso suporte sempre estará disponível para ajuda-lo, bastando nos enviar sua solicitação em www.hostmach.com.br/suporte , ou então acessando nosso chat, no link disponibilizado em nosso portal.

Sobre o autor