samuelwebdesigner: S.Tutorial

S.Tutorial (como fazer template no WYSIWYG web builder)

Olá vou mostra como fazer um templete no WYSIWYG web builder 9 ou wb9 no meu estilo é claro.
WB9 é gerenciado de HTML ou seja não se faz scripts nele mas se gerar um documento HTML apatir do que foi criado nele, como é em quase todos os editores que prometem ou dizem ser WYSIWYG ( dizem, porque nem todos tem uma bom acessibilida para todos os tipos de usuários) o que significa usuário do WB9 não necessita de usa html. Para falar a verdade WB9 muita mais assemelhasse a uma editor de imagem do que um editor de HTML portanto basta ter uma boa noção de edição de imagem para fazer um bom trabalho. Aqui vou mostra um pouco disso para aqueles que não tem essa noção, facilitando vossas vidas.

aria trabalho de WB9

WB9 já vem alguns templates um pouco menor do que 8, é bem menor, você pode usa-los é só ir em file>new documnet from temlpate. E escolhe qual você quer ou fazer seu.
E para isso você dera recolher as sidebar , para isso você colocar cruso de sobre marfem do da sidebar e puxa para beirada ou ir para view clicar na caixa que tem nome da sidebar.

Não aconselho é melhor recolhe-las porque você vai precisa delas e fica mais fácil

Depois coloque ceuso na recuar para obter linha guia

ou var inseri

e recuar

escolha add regull esqueci com escrevi mas você.

Com as réguas você pode e teve usa-las para determinar o que sera topo, menu, rodape e etc, e também para centralizar layout.

Agora você usara sidebar toolbox

nele abrira menu drawing

e clique no shape

o shape em portuques significa forma e ele pode tevarias formas mas que nos interesa é de retangulo.

você vai colocar-los nos vãos das tabelas feitas com guias.

Repita até todo desenho feito como linha guias esteve completas.

Agora vou falar da propriedade dos shapes com alt + entre você entar na propriedade lá dá para configura o shape muda cor

e também escreve um texto no shape como eu fiz no template do review.
Também é possível muda forma do com eu já cite antes para isso você vai precisa do sidebar direita.

nele procure rectangle e mude para Round corne para dá eito aredondado

com este

é claro que você te usa round rect para te este efeito com round corner só parti de cima fica aredondado. Foi assim que eu fiz topo do layout

nessa imagem vocês pode ver retângulo do menu e mais um trapézio em cima do retângulo para fica desse jeito na propriedade e zere borda do trapézio e é melhor zera também retângulo.

Um pouco mas a baixo do shape no menu drawing há recuso de texto com efeito

com esse recuso você pode introduzi textos de varias estilos como de onda, com respectiva .
E falando em texto no menu de cima há recuso de texto normal, você pode usa o insert,

mas todavia terá de usa menu sidebar para carrar e arrata para onde você quer e clicando duas vez para editar texto. Aviso que é preciso de quebra linha mesmo própri espaço faz isso se não na hora de passa para HTML.

Tentei ampliar ariá do texto para lados não foi possível que me parece ser bug que esqueci de relatar no reiew anterior por isso quebre linha.
No menu imagem da toolbox você pde colocar uma imagem que já exista no seu arquivos o wb9 como wb8 não tem uma blibioteca de imagens para inseri no layout e é possível manda-la para traz, vira-la, muda bilho e girar verticalmente ou horizontalmente.

Quando seleciona shape pu uma imagem a barra de ferramenta muda propriedade do recuso que esta sento usado, e poderá encontra botões para fazer efeitos citados. E colocando imagem no seu layout dá para linkar-la fando um banner.

Agora que fizemos layout de shapes mudamos coloração no caso deste template do topo eu usei gradient e outro retângulo de baixo do espaço do menu e este também em gradient os demais ficou solid.

no rodape usei sulid e round corne e gire verticlamente para dá este efeito.

Dando ar de layout aredondado como topo também com round corne tenho que salienta que até o espaço do conteúdo deve ter uma shape com borda no minimo, melhor só com 1px para que layout fique fechado

No toolbox >navigation> css menu.

O meu menu teve de ser reduzido na propriedade( lembra alt+entre para abri janela dela, par isso na aba style>main menu>layout ai é só muda widht e height) para ajusta ao fundo que é bem menor. O resto da para si vira mas para fica como meu não use sub menu e lembra bacground muda cor de fundo borde borda dos items shadow da sombra como ficou no meu menu, eu dei 2y ,2x cor preta. Também usei menu navigation bar lá em cima da para ver é que fica de lado como um sidebar (e antes que eu esquesa mudança do itens do menu ou seja texto seque se le nele se faz na primeira aba general,) na aba style >Image tem duas a normal ante de colocar cusor do mouce e hover quando cusor fica em cima do menu e logo de lado esta coloração divida da mesmo forma bem abaixo há preview para mostra como ficara resultado fim.

A sidebar esqueda é feita da mesma forma com shape .

Copyright para colocar simbolo tipico é fácil ao começa editar na bara de ferramente já fica em format nele esta symbol click nele e selecione simbolo desejado.Lembrado para fazer este copyright e texto do conteúdo e sub titulo que fica em baixo do copy foi usado text normal do menu standard