WebSite X5Help Center

 
LUIZ G.
LUIZ G.
User

Por que esse código html não aparece no preview?  pt

Autor: LUIZ G.
Visitado 658, Seguidores 2, Compartilhado 0  

Coloquei esse código no Objeto HTML e não aparece no PREVIEW. Alguém sabe o motivo?

<div style="width: 100%; height: 100%; position: relative">
<div style="width: 327px; height: 70px; left: 86px; top: 0px; position: absolute"><span style="color: #512486; font-size: 40px; font-family: Montserrat; font-weight: 900; word-wrap: break-word">DIFERENCIAIS:<br/></span><span style="color: black; font-size: 20px; font-family: Montserrat; font-weight: 500; word-wrap: break-word">POR QUE ESCOLHER ATHENA?</span></div>
<img style="width: 75px; height: 75px; left: 88px; top: 113px; position: absolute; border-radius: 9999px" src="https://via.placeholder.com/75x75" />
<img style="width: 75px; height: 75px; left: 671px; top: 104px; position: absolute; border-radius: 9999px" src="https://via.placeholder.com/75x75" />
<img style="width: 75px; height: 75px; left: 88px; top: 258px; position: absolute; border-radius: 9999px" src="https://via.placeholder.com/75x75" />
<img style="width: 75px; height: 75px; left: 671px; top: 236px; position: absolute; border-radius: 9999px" src="https://via.placeholder.com/75x75" />
<img style="width: 75px; height: 75px; left: 88px; top: 379px; position: absolute; border-radius: 9999px" src="https://via.placeholder.com/75x75" />
<img style="width: 75px; height: 75px; left: 671px; top: 381px; position: absolute; border-radius: 9999px" src="https://via.placeholder.com/75x75" />
<div style="left: 772px; top: 97px; position: absolute; color: black; font-size: 20px; font-family: Montserrat; font-weight: 700; word-wrap: break-word">ATHENA NITRO</div>
<div style="left: 772px; top: 237px; position: absolute; color: black; font-size: 20px; font-family: Montserrat; font-weight: 700; word-wrap: break-word">REDAÇÃO 360</div>
<div style="left: 189px; top: 242px; position: absolute; color: black; font-size: 20px; font-family: Montserrat; font-weight: 700; word-wrap: break-word">NEUROCIÊNCIA</div>
<div style="left: 772px; top: 372px; position: absolute; color: black; font-size: 20px; font-family: Montserrat; font-weight: 700; word-wrap: break-word">TURMAS REDUZIDAS</div>
<div style="left: 189px; top: 370px; position: absolute; color: black; font-size: 20px; font-family: Montserrat; font-weight: 700; word-wrap: break-word">SOCIOEMOCIONAL</div>
<div style="width: 357px; height: 27px; left: 184px; top: 111px; position: absolute; color: black; font-size: 20px; font-family: Montserrat; font-weight: 700; word-wrap: break-word">PLANJEMENTO PERSONALIZADO</div>
<div style="width: 299px; height: 63px; left: 772px; top: 123px; position: absolute; color: black; font-size: 16px; font-family: Montserrat; font-weight: 500; word-wrap: break-word">Utilizaçao de IAs com o objetivo de otimizar e aprimorar o estudante.</div>
<div style="width: 299px; height: 77px; left: 772px; top: 261px; position: absolute; color: black; font-size: 16px; font-family: Montserrat; font-weight: 500; word-wrap: break-word">Ensinamos a você como performar em todos os vestibulares do país</div>
<div style="width: 350px; height: 99px; left: 191px; top: 268px; position: absolute; color: black; font-size: 16px; font-family: Montserrat; font-weight: 500; word-wrap: break-word">Práticas Neurocientíficas de Otimização comportamental com o objetivo de aprimorar a efiencia do estudante.</div>
<div style="width: 353px; height: 71px; left: 772px; top: 398px; position: absolute; color: black; font-size: 16px; font-family: Montserrat; font-weight: 500; word-wrap: break-word">Turmas com poucos alunos para garantir um acompanhamento individualizado e eficiente.</div>
<div style="width: 350px; height: 68px; left: 191px; top: 396px; position: absolute; color: black; font-size: 16px; font-family: Montserrat; font-weight: 500; word-wrap: break-word">Regulaçao e acompanhamento do desenvolvimento do estudante ao longo do curso.</div>
<div style="width: 357px; left: 184px; top: 140px; position: absolute; color: black; font-size: 16px; font-family: Montserrat; font-weight: 500; word-wrap: break-word">Rotina diária organizada por especialistas para aumentar o rendimento e performance dos alunos nos vestibulares.</div>
<div style="width: 446px; height: 446px; left: 0px; top: 5px; position: absolute"></div>
</div>

Publicado em
16 RESPOSTAS - 5 ÚTEIS - 1 CORRIGIR
CARLOS AMARAL
CARLOS AMARAL
Moderator
Usuário do mês ESUsuário do mês PT

Hola Luiz,

Entiendo que tu codigo lo que genera es lo siguiente:

Quiza si publicas tu sitio y nos pasas la URL para que lo podamos analizar estando online, puede ser mas facil ver el problema.

Saludos colega!

Carlos A.

Ler mais
Publicado em de CARLOS AMARAL
LUIZ G.
LUIZ G.
User
Autor

Eu até consegui fazer aparecer, mas pelo que vi, não fica responsivo.

Tem como ficar?

Obrigado.

Ler mais
Publicado em de LUIZ G.
CARLOS AMARAL
CARLOS AMARAL
Moderator
Usuário do mês ESUsuário do mês PT

Hola Luiz, 

Creo que KolAsim te lo puede confirmar mejor ya que sabe mas de html, pero tu codigo no es responsivo, por lo que para que quede responsivo deberias mejorar el codigo que nos has mostrado, agregando toda la parte responsiva.

Saludos colega!

Carlos A.

Ler mais
Publicado em de CARLOS AMARAL
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Usuário do mês FRUsuário do mês PL

... oi Carlos, ...não vale a pena, existem valores fixos, e seria necessário reescrever todo o código...
...isso é feito de maneira mais rápida e melhor simplesmente usando os objetos do programa...

.

ciao

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
LUIZ G.
LUIZ G.
User
Autor

Obrigado, Carlos...

Pode pedir ao KolAsim dar uma olhada?

Ler mais
Publicado em de LUIZ G.
CARLOS AMARAL
CARLOS AMARAL
Moderator
Usuário do mês ESUsuário do mês PT

LUIZ,

Tiene razon KolAsim jajajaa...

que en realidad, en tu grilla de diseño usas 4 columnas en vertical, y 6 lineas hacia abajo, entonces en la primera y 3ra columa pones los circulos, y en la 2da y 4ta los textos, y con eso te quedará todo responsivo, recuerda que luego tienes que configurar el comportamiento de los objetos de texto e imagenes para que se muevan para donde tu quieras cuando pasan a modo responsivo.

Saludos colega!

Carlos A.

Ler mais
Publicado em de CARLOS AMARAL
LUIZ G.
LUIZ G.
User
Autor

surprisedsurprisedsurprised Meu Deus, Carlos... Eu só copiei e colei esse código que me enviaram para colocar no site! Não entendo nada de HTML. cry Não sei como fazer isso.

Agradeço a ajuda.

Ler mais
Publicado em de LUIZ G.
CARLOS AMARAL
CARLOS AMARAL
Moderator
Usuário do mês ESUsuário do mês PT

Luiz, 

Como que no sabes hacer eso si tienes el programa desde hace añossss!! y es tan facil como agregar unos objetos de imagenes y textos...

No tengo el programa a mano como para mostrarte, pero te lo hago en excel como ejemplo

Y luego presionando este icono que esta en la barra de herramientas sobre la grilla de diseño, configuras el orden de los objetos, y donde quieres los cortes para las distintas resoluciones.

Arriba colegaaa!!! que estas son cosas que seguramente has hecho muchas veces en tus proyectos, ya que son cosas basicas del programa!

Aqui te dejo el link al manual, donde habla de todo eso

http://help.websitex5.com/br/v2020.2/pro/ins_oggetti.htm

Saludos

Carlos A.

Ler mais
Publicado em de CARLOS AMARAL
LUIZ G.
LUIZ G.
User
Autor

Obrigado, Carlos...

Segui a sua orientação e até funcionou melhor. Coloquei um Objeto de HTML para cada elemento de conteúdo. Mas quando muda para a visualização responsiva, a imagem fica em cima do texto e não ao lado. 

Vou tentar alterar alguns parâmetros pra ver se consigo chegar onde vc apontou.

Obrigado. Assim que conseguir, eu retorno para te mostrar.

Ler mais
Publicado em de LUIZ G.
LUIZ G.
LUIZ G.
User
Autor

Acho que consegui! usei o mesmo objeto copiado, porque é só trocar os textos. Fiz apenas um teste, colocando a imagem dentro do mesmo Objeto dos textos e parece que deu certo.

mas tive que gerar um CSS para dar certo. Veja:

https://athenaeducacao.com.br/1/gaveta.html

Ler mais
Publicado em de LUIZ G.
LUIZ G.
LUIZ G.
User
Autor

Mobiles...

Ler mais
Publicado em de LUIZ G.
LUIZ G.
LUIZ G.
User
Autor

Coloquei o endereço das imagens e elas não aparecem...

Ler mais
Publicado em de LUIZ G.
LUIZ G.
LUIZ G.
User
Autor

Descobri o erro.

Os caminhos das imagens estavam errados e o CSS do tamanho delas não estava com o IMPORTANT (80px !important).

Confere lá! 

https://athenaeducacao.com.br/1/gaveta.html

Ler mais
Publicado em de LUIZ G.
CARLOS AMARAL
CARLOS AMARAL
Moderator
Usuário do mês ESUsuário do mês PT

Perfecto Luiz!!!!

Pero creo que de todas maneras te has complicado la vida, utilizando objetos HTML y teniendo que usar CSS manualmente, siendo que si usabas objetos IMAGEN para los iconos, y objetos TEXTO para los textos, los ajustes de estilo, etc los haces directamente desde las opciones de configuracion de WebSite X5 de manera visual, y sin tocar ni una linea de codigo CSS ni html.

En fin... igual ya lo tienes funcionando que es lo que importa...

Saludos colega!

Carlos A.

P.D.: nuevamente, recomiendo leer el manual del programa, ya que por desconocimiento de las funciones de WebSite X5, me parece que estas perdiendo mucho tiempo, en cosas que con el programa puedes hacer en segundos automaticamente. Cosas como el tamalo de esas imagenes, margenes, letras en negrita, ajuste de los elementos de la pagina en modo responsivo, colres de texto/fondos, todo eso se hace con un par de clicks sin tocar nada de CSS ni HTML colega. Quiza vale la pena leer el manual por lo menos una vez que lleva unos minutos, y te ahorraras mucho tiempo de trabajo en el futuro.

Ler mais
Publicado em de CARLOS AMARAL
LUIZ G.
LUIZ G.
User
Autor

Pois é, Carlos...

Eu sempre faço essas coisas usando os objetos de texto e imagem, mas nesse caso, a responsividade para os mobiles colocava sempre as imagens em cima dos textos e teria que ficar ao lado. 

Essa visualização não aparecia como possível lá nas configurações de responsividade do X5. Não dava pra dividir no local desejado. Aí ficava com visualização diferente da solicitada pelo cliente.

Existem situações que o X5 obriga que cada objeto fique em uma linha, o que nem sempre é o desejado.

Mas receba meu agradecimento, pq me forçou a aprender um pouco de HTML e CSS, coisas que não tinha a menor noção.

Ler mais
Publicado em de LUIZ G.
CARLOS AMARAL
CARLOS AMARAL
Moderator
Usuário do mês ESUsuário do mês PT

Otro tip Luiz,

Si quieres que un objeto no se mueva para debajo de otro en el modo responsivo, simplemente tienes que revisar que entre los dos objetos no exista una linea roja en la pantalla de configuracion del modo responsivo, ahi puedes numerar los objetos (cosa que tambien cambia su comportamiento dependiendo de que numero tengan).

Saludos colega!!!

Carlos A.

Ler mais
Publicado em de CARLOS AMARAL