Creating DYNAMIC gradients with new Dynamic Embeds

[sabanna (Anna)]

Hello everybody!

Just want to share with you the method of creating Dynamic gradients for your items inside the collection.

---

For the base, we will use the CSS syntax for creating gradient:
background: linear-gradient(direction, color-stop1, color-stop2, ...);

As example, will use code snippets:

<style>
   #grad {
      background: red; /* For browsers that do not support gradients */
      background: -webkit-linear-gradient(-90deg, red, yellow); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(-90deg, red, yellow); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(-90deg, red, yellow); /* For Firefox 3.6 to 15 */
      background: linear-gradient(-90deg, red, yellow); /* Standard syntax */
    }
</style>

OR

<style>
#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}
</style>

---

Note: parameters background: red and -90deg - here is just examples, you can use different values;

---

As we can see, colors for gradient can be set in 2 different types, but both has number and letters in it.
Also, best practice to set the gradient to elements by ID.

STEP1

Add TEXT fields into collection item structure:

1. “color1” - for color-stop1
2. “color2” - for color-stop2
3. “ID for gradient element”

STEP2

Add embed element inside the dynamic item design.

1. drag and drop Dynamic collection to the page design and connect it to collection with data for gradients

2. drag and drop Embed code element inside the dynamic item

3. paste one of the code snippets from above

4. change element ID and color values on dynamic fields values:
   

5. create the element inside dynamic item, which will have gradient background in it (I used simple div with class “gradient”) and give it class, using standart Wbflow elements.

6. add more details in the code snippet:
   

   

7. remove element, created in point #5

8. save, publish and get results:
   

   

---

AT THE ITEM TEMPLATE PAGE you don’t have to add HTML code for the gradient element. It will be enough to use snippet with static ID and give this ID name to some element on the template page

Live results you can see here: Dynamic gradients

Best regards,
Anna

[victoria_b (Victoria Borrowdale)]

Hi Anna - Could you share the project link for this? I’m having trouble figuring out how to assign the gradients in the collection items. And also how to set up this bit: “connect it to collection with data for gradients”. Thanks!

[vincent (Vincent Bidaux)]

Victoria I can try to help you while you wait for Anna’s answer.

The CMS entry for an Embed component is that purple link at the top right of the box:

This link only appears when the Embed component is inside of a CMS context: either in a Collection List, or in a Template page.

When you have this link, you can select a portion of your code (here a color value) and select a field through this link, to replace the portion of code with the value of a that field.

That’s for the code part.

As you see, Anna’s has declared all those — now dynamic — properties in a style code (“CSS”). And all those properties are gathered inside an ID (#grad).

So select an element, go to the Settings tab, and in the ID field, put “grad”. Normally the gradient will be applied as a background.

I don’t know why Anna chose to use an ID. (edit: she says “Also, best practice to set the gradient to elements by ID.”) You can also probably use a class: type .grad instead of #grad in the code, and then instead of adding an ID to an element, simply add “grad” as a class (unique class) or a combo class (a class that is added to another class or a series of classes) in the selector box.