Por que esse código html não aparece no preview? 
Autor: LUIZ G.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>
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.
Autor
Eu até consegui fazer aparecer, mas pelo que vi, não fica responsivo.
Tem como ficar?
Obrigado.
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.
... 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
.
Autor
Obrigado, Carlos...
Pode pedir ao KolAsim dar uma olhada?
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.
Autor
Agradeço a ajuda.
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.
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.
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
Autor
Mobiles...
Autor
Coloquei o endereço das imagens e elas não aparecem...
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
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.
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.
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.