Escolher Cor com Evento On-Click

Triumph Code Presentation

Assista o Vídeo - Subtítulo no Scroll

Specifications with "On Mouse In/Out Event" - Triumph Speed Triple 1050 RS

Prepare as imagens no seu editor:

Esse recurso depende basicamente de 2 imagens de fundo para implementarmos os elementos necessários com a ação do código.
 Adicione primeiro a imagem do produto que será exposto às apresentações, depois a outra imagem com os pontos de referência onde serão apresentadas as especificações do produto.

Peguei como exemplo a foto de uma motocicleta mas você pode fazer a mesma apresentação com qualquer imagem. 


A composição da imagem sobreposta com os pontos de referência, deve ser feita em um editor de imagens para posicionar todos os pontos em uma só imagem com fundo transparente.
 

A opção de colocar os pontos de referência de modo independente sobre o produto também é válida, mas provavelmente você terá mais trabalho dentro do editor do Wix na hora de alinhar e posicionar os elementos.

Organize todo o conteúdo:

Com as 2 imagens salvas, faça o upload para a biblioteca do Wix e depois adicione-as no editor uma em cima da outra. 

Depois disso, adicione caixas transparentes acima dos pontos de referência e nomeie todos os ID's na caixa de propriedades do Wix Code.
 

Adicione os textos referentes a sua apresentação e se necessário adicione caixas com fundo e contorno atrás dos textos para destacá-los do conteúdo da sua página.
Linhas intermediárias entre os pontos de referência e as caixas de texto também são essenciais para uma boa apresentação. Agrupe tudo e renomeie o ID dos grupos na caixa de propriedades do Wix Code.

 

Detalhe dos elementos e o código para a composição do Efeito Flutuante estão na página Triumph Specifications.

Prepare the images in your editor:

This feature basically depends on 2 background images to implement the necessary elements with the action of the code. First add the image of the product that will be exposed to the presentations, then the other image with the reference points where the specifications of the product will be presented.
 

I took as an example the photo of a motorcycle but you can make the same presentation with any image.


The composition of the image superimposed with the reference points must be done in an image editor to position all the points in a single image with transparent background.


The option to place the waypoints independently on the product is also valid, but you'll probably have more work inside the Wix editor when it comes to aligning and positioning the elements.

Organize all content:

With the 2 saved images, upload to the Wix library and then add them to the editor one on top of the other.
After that, add transparent boxes above the reference points and name it all ID's in the Wix Code properties box.

 

Add the texts related to your presentation and if necessary add boxes with background and outline behind the texts to highlight them from the content of your page.
Intermediate lines between landmarks and text boxes are also essential for a good presentation. Group all together and rename the group IDs in the Wix Code properties box.

 

Detail of the elements and the code for the composition of the Floating Effect are on the Triumph Specifications page.

Choice of Colors with "On Click Event" - Triumph Speed Triple 1050 RS

Prepare as imagens no seu editor:
Esse recurso depende diretamente de imagens editadas com variação de cores em um mesmo item.
Faça a troca das cores em todo o produto ou em locais delimitados conforme a necessidade para a apresentação de um mesmo item com variação de cores.

 

Na edição, as imagens devem ser salvas com o mesmo tamanho em largura e altura para serem alinhadas posteriormente uma em cima da outra.


A interação do usuário é maior quando você faz a apresentação de algum produto com imagens em um só ângulo, ou seja, os atributos de cores variam enquanto a disposição e perspectiva continuam os mesmas.
 

Adicione botões coloridos para a troca das imagens:
É necessário adicionar botões ou elementos gráficos que representem a variação da sua imagem com a devida distinção, seja na cor, na textura ou qualquer outro atributo necessário.

A personalização dos botões é por sua conta, use sua criatividade para expressar intuitividade junto dos usuários e apresente seus produtos da melhor forma possível. A ação do código é simples, então explore os recursos do design.

Organize todo o conteúdo:
Com as imagens salvas nas suas devidas variações, faça o upload para a biblioteca do Wix e depois adicione no editor conforme exemplificado no vídeo.
 

É importantíssimo que você renomeie os ID's de todos os elementos na caixa de propriedades, assim fica fácil identifica-los na hora de escrever o código.

Cada imagem do mesmo produto com variação de cor deve receber um nome distinto e o mesmo deve ser feito nos botões de cor que vão dar ação na troca de imagens.

Prepare the images in your editor:

This feature directly depends on images edited with color variation in the same item.
Make the color change throughout the product or in places delimited as needed for the presentation of the same item with color variation.

 

In editing, images must be saved with the same size in width and height to be laterally aligned one on top of the other.


User interaction is greater when you present a product with images at a single angle, that is, the color attributes vary while the layout and perspective remain the same.

Add colorful buttons for an exchange of images:

You must add buttons or graphics that represent the variation of your image with the appropriate distinction, whether in color, texture or any other necessary attribute.

The button customization is on your own, use your creativity to express intuitiveness with users and present your products in the best possible way. The code action is simple, so explore the design features.

Organize all content:

With the saved images in their proper variations, upload them to the Wix library an then add them to the editor as exemplified in the video.

It is very important that you rename the ID's of all the elements in the properties box, so it is easy to identify them at the time of writing the code.

Each image of the same product with color variation should receive a distinguished name and the same should be done on the color buttons that will give action in the exchange of images.

Credits and Thanks

Direção Artística e Produção:

Marco Pecchy - Consultor de Marketing e Design especializado na plataforma Wix e engajado no Wix Code.

Artistic Direction and Production:

Marco Pecchy - Marketing and Design Consultant specializing in the Wix platform and engaged in the Wix Code.

 

Inspirações: 

Triumph Motorcycles - Uma das fabricantes de motocicletas Britânicas mais tradicionais no mundo das duas rodas.

Speed Triple RS - Umas das pioneiras no estilo streetfighter com design esportivo sem carenagens aerodinâmicas.

Wix & Wix Code - Crie você mesmo um site incrível fazendo uso de todos os recursos da plataforma.

Inspirations: 

Triumph Motorcycles - One of the most traditional British motorcycle manufacturers in the world of two wheels.

Speed Triple RS - One of the pioneers in streetfighter style with sporty design without aerodynamic fairings.

Wix & Wix Code - Create yourself an awesome website making use of all the features of the platform.

Contatos: /  Contacts: 

Marco Pecchy | MP Classes - Email: marcopecchy@gmail.com  WhatsApp: +55 11 94767-7727

Concessionárias no Brasil  |  Dealers on UK  |  Facebook Triumph Brasil  |  Facebook Triumph UK

Triumph Motorcycles - For The Ride
MP Classes - You Become When You Learn
Wix Code - Creation Without Limits