Protassium Adding Widgetz

Instructions on the three card pod.

When adding a content block, the block type must be set to Full Width Media for optimal layout compatibility.

Replace the copy while leaving the html alone (it is html, but I mean the markup such as <h3> or <div>). Upload imagery sized as indicated to the site and find it's source. Replace the src with the new file's source. Add a description of the photo in relation to the page's subject. I.E. not "tomato hands", but "protassium+ sop makes tomatoes healthy" instead.

**Once it's pasted in to the site, it should look like the examples.

The TWO CARDZ POD

2pod

        <div class="half-pod">
            <img src="http://placehold.it/480x325/ededed/000000" alt="" />
            <h3>Lorem Ipsum Dolor Set</h3>
            <p>A potassium deficiency in grapes will manifest itself in the leaves, turning them a deep red color. The plant will exhibit foliar deficiency symptoms like stunted growth, reduced yield and overall weakness. A deficiency may be localized and can be corrected by spot treating instead of treating the entire field.</p>
        </div>
        <div class="half-pod even">
            <img src="http://placehold.it/480x325/ededed/000000" alt="" />
            <h3>Lorem Ipsum Dolor Set</h3>
            <p>A potassium deficiency in grapes will manifest itself in the leaves, turning them a deep red color. The plant will exhibit foliar deficiency symptoms like stunted growth, reduced yield and overall weakness. A deficiency may be localized and can be corrected by spot treating instead of treating the entire field.</p>
        </div>

HTML Key

2 cardz pod

The THREE CARDZ POD

3 pod or 3 card or whatever

        <div class="one-third-pod">
            <img src="http://placehold.it/480x320/ededed/000000" alt="" />
            <h3>Lorem Ipsum Dolor Set</h3>
            <p>Vines remove large amounts of potassium from the soil. In fact, "grapevines have a relatively high need for potassium (K), comparable to nitrogen, and much.</p>
        </div>
        <div class="one-third-pod even">
            <img src="http://placehold.it/480x320/ededed/000000" alt="" />
            <h3>Lorem Ipsum Dolor Set</h3>
            <p>Vines remove large amounts of potassium from the soil. In fact, "grapevines have a relatively high need for potassium (K), comparable to nitrogen, and much.</p>
        </div>
        <div class="one-third-pod">
            <img src="http://placehold.it/480x320/ededed/000000" alt="" />
            <h3>Lorem Ipsum Dolor Set</h3>
            <p>Vines remove large amounts of potassium from the soil. In fact, "grapevines have a relatively high need for potassium (K), comparable to nitrogen, and much.</p>
        </div>

HTML Key

3 card podz

The QUAD POD

quadpod

        <div class="half-pod">
            <img src="http://placehold.it/80x54/ededed/000000" alt="" />
            <h3>Lorem Ipsum Dolor Set</h3>
            <p>A potassium deficiency in grapes will manifest itself in the leaves, turning them a deep red color. The plant will exhibit foliar deficiency symptoms like stunted growth, reduced yield and overall weakness. </p>
        </div>
        <div class="half-pod even">
            <img src="http://placehold.it/80x54/ededed/000000" alt="" />
            <h3>Lorem Ipsum Dolor Set</h3>
            <p>A potassium deficiency in grapes will manifest itself in the leaves, turning them a deep red color. The plant will exhibit foliar deficiency symptoms like stunted growth, reduced yield and overall weakness. </p>
        </div>
        <div class="half-pod">
            <img src="http://placehold.it/80x54/ededed/000000" alt="" />
            <h3>Lorem Ipsum Dolor Set</h3>
            <p>A potassium deficiency in grapes will manifest itself in the leaves, turning them a deep red color. The plant will exhibit foliar deficiency symptoms like stunted growth, reduced yield and overall weakness. </p>
        </div>
        <div class="half-pod even">
            <img src="http://placehold.it/80x54/ededed/000000" alt="" />
            <h3>Lorem Ipsum Dolor Set</h3>
            <p>A potassium deficiency in grapes will manifest itself in the leaves, turning them a deep red color. The plant will exhibit foliar deficiency symptoms like stunted growth, reduced yield and overall weakness. </p>
        </div>

HTML Key

quad pod

The ONE THIRD/TWO THIRDS POD

This one is a bit different because you can add as many entries within this as needed. The example has two, but the number is limitless. Each entry is denoted with a <div class="article"> ... </div>. You'll need to ensure you're copying or deleting the paired closing div </div>. Just delete or add additional entries within the pod to change the number of them.

onethird-twothird

        <div class="article">
            <div class="figure">
                <img src="http://placehold.it/480x320/ededed/000000" alt="" />
            </div>
            <h4>Lorem Ipsum</h4>
            <h2>Lorem Ipsum Dolor Set</h2>
            <p>Vines remove large amounts of potassium from the soil. In fact, "grapevines have a relatively high need for potassium (K), comparable to nitrogen, and much.</p>
        </div>
        <div class="article">
            <div class="figure">
                <img src="http://placehold.it/480x320/ededed/000000" alt="" />
            </div>
            <h4>Lorem Ipsum</h4>
            <h2>Lorem Ipsum Dolor Set</h2>
            <p>Vines remove large amounts of potassium from the soil. In fact, "grapevines have a relatively high need for potassium (K), comparable to nitrogen, and much.</p>
        </div>

HTML Key

onethirdtwothirdstack

Note: HTML syntax for possessives

If you wish to use an apostrophe to denote possession in your copy, you'll need to use the proper html syntax--otherwise it crashes the page. The proper syntax is

&apos;

So for instance, the copy: "The plant's nutrition..." would be written in HTML as:

The plant&apos;s nutrition