Melhorando a página inicial com depoimento de clientes

Neste tutorial, iremos adicionar uma seção de depoimentos de clientes na nossa página inicial.

Colocar foto dos clientes

Criando outro Data² Drive

Primeiro, adicione um novo Data² Drive e renomeie seu drive para "Drive Clientes".

Iremos adicionar uma pasta, para isso:

1. Clique no ícone de pasta ao lado do ícone de Lixeira no canto superior direito.
2. Clique na pasta que foi adicionada.
3. Clique novamente no nome para renomear.
4. Renomeie para fotos.

Subindo uma foto para cada cliente

Vamos adicionar dois campos novos para nossos clientes, foto e depoimento. Para isso, iremos alterar o parâmetro schema da Tabela de Clientes:

1. Seleciona a Tabela de Clientes.
2. Clique em Schema.
3. Clique em Add Item.
4. Em Title coloque foto e em Component coloque data2-core-types@File.
5. Adicione outro item clicando em Add Item.
6. Em Title coloque depoimento e em Component coloque data2-core-primitives@String.

No Artboard de CRUD de Clientes, selecione um dos campos de texto e no Inspector clique em no ícone de duplicar.

Reposicione esse novo campo de texto, e altere o parâmetro Field para depoimento.

Desenhe um outro Block e mude seu tipo para data2-blocks@FileField. Configure-o com:

1. Em Dataset coloque Todos Clientes.
2. Em Field coloque Foto.
3. Em Folder, selecione o Drive Clientes e selecione a pasta fotos.

Clique no botão de Preview do Artboard de CRUD de Clientes, e adicione novos clientes.

Colocar depoimentos na página inicial

No Artboard da página inicial, adicione um Block para ser a seção de depoimentos. Neste bloco:

1. No parâmetro Children Mode coloque cols.
2. No parâmetro Repeat coloque Todos Clientes.
3. No parâmetro Repeat Reference coloque cliente.

Isso faz com que os Blocks que são filhos, isto é, que estão dentro desse Block sem outro Block no meio, serão repetidos.

Desenhe outro Block dentro da seção e no parâmetro Position, desabilite o Free Transform. Neste Block, desenhe outros dois Blocks: um para a foto e outro para o depoimento de cada cliente.

No Block do texto do depoimento:

1. No parâmetro Text, clique em f() e selecione data2-core-types@Reference.
2. Clique em Text para navegar e no campo de texto, coloque clientRepeater.depoimento.

No Block que terá foto:

1. Clique em f() e mude o tipo para data2-core-types@Background.
2. Clique no ícone ... ao lado do f() e selecione Break Param. Isto faz com que o controle do parâmetro se torne navegável, e que cada subparâmetro do parâmetro possa ter seu tipo trocado.
3. Clique em Fill para navegar.
4. No parâmetro Image, clique em f() e selecione data2-core-types@Reference.
5. Clique em Image para navegar.
6. No campo de texto, escreva clienteRepeater.foto.fileUrl. O preenchimento automático irá ajudar nessa tarefa.

Como de costume, clique no Preview do Artboard para ver o resultado do seu trabalho!

Faça ajustes no posicionamento e no estilo dos Blocks da forma que quiser, como centralizando o texto, retirando a cor azul dos Blocks, etc.