how-it-works.html

---
layout: page
title: How Distributed Organizing Works
permalink: /how-it-works/
image: /assets/images/how_it_works/peeps.png
---

<div class="container how-it-works-hero">
  <div id="hero" class="mt-3 mb-md-5">
    <div class="row">
      <div class="col-md-1">
      </div>
      <div class="col-md-6">
      	<p class="medium">How It Works</p>
      	<h1>Broadcast vs Distributed Organizing</h1>
      	<p class="line-height-large">ControlShift Labs is committed to the idea that people should drive social movements, even when they happen online. With a distributed organizing model, your organization can leverage the power of your supporters by giving them the opportunity to start, run, and win their own campaigns. The distributed organizing model not only allows your organization to run more numerous and diverse campaigns, but it also leads to more involved and more active supporters.</p>
      </div>
      <div class="col-md-1">
      </div>
      <div class="col-md-3">
        <img src="/assets/images/how_it_works/image-howitworks-hero-peeps.svg" class="hero-image" alt="" />
      </div>
      <div class="row-full p-0 absolute d-none d-xl-block">
        <img class="" src="/assets/images/how_it_works/image-howitworks-hero-biker.svg" style="position: absolute; top: 40px;" alt="" />
      </div>
    </div>
  </div>
</div>

<div class="container-fluid mb-2 bg-white text-black">

  <div class="container p-0">
    <div class="row justify-content-center py-4">
      <div class="col-md-10">
        <div class="example mb-2 mt-2">
          <div class="row">
            <div class="col-sm-8">
              Download our organizing guide for examples, checklists, and tips to transform your organizing program into a scaled, distributed, and member-led force for change.
            </div>
            <div class="col-sm-4">
              <a href="/resources/getting-started-with-distributed-organizing-petitions.html" class="btn btn-darkblue float-end">Get Organizing Guide</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div id="comparisons" class="mt-md-3 text-center">
        <div class="row comparison-header comparison mt-3 mb-3 d-none d-sm-flex">
          <div class="col-md-5 comparison-left">
            <h3>Traditional Broadcast Organizing</h3>
            <img src="/assets/images/how_it_works/vector-traditional-organizing-main.svg" class="mb-2" alt="An organization which broadcasts to one set of people" />
          </div>
          <div class="col-md-2 comparison-versus"></div>
          <div class="col-md-5 comparison-right">
            <h3>Distributed Organizing</h3>
            <img src="/assets/images/how_it_works/vector-distributed-organizing-main.svg" class="mb-2" alt="An organization which facilitates groups of people in communicating with each other" />
          </div>
        </div>
        <hr class="d-none d-sm-none" />

        {% for comparison in site.data.comparisons %}
          <div class="row comparison mt-3 mb-3">
            <div class="col-12">
              <div class="row">
                <div class="col-sm-5 comparison-left">
                  <h5 class="d-sm-none">Traditional Broadcast Organizing</h5>
                  <div class="mb-2">
                    <img src="/assets/images/how_it_works/vector-traditional-organizing-vs-{{comparison.name}}.svg" alt="" />
                  </div>
                  <p>{{comparison.traditional}}</p>
                </div>
                <div class="col-sm-2 comparison-versus mb-2">
                  <div class="mb-2 versus-spacer"></div>
                  VS
                </div>
                <div class="col-sm-5 comparison-right">
                  <h5 class="d-sm-none">Distributed Organizing</h5>
                  <div class="mb-2">
                    <img src="/assets/images/how_it_works/vector-distributed-organizing-vs-{{comparison.name}}.svg" alt="" />
                  </div>
                  <p>{{comparison.distributed}}</p>
                </div>
              </div>
            </div>
          </div>
          <hr />
        {% endfor %}
      </div>
    </div>

    <div class="row mt-md-4 mt-1 why-distributed-organizing">
      <div class="col-12 ms-0 mb-2 why-distributed-organizing-header">
        <h3>Why Distributed Organizing?</h3>
      </div>
    </div>
    <div class="row ms-0 p-0 pb-3">
      {% for reason in site.data.reasons_why %}
        <div class="col-md-3 selling-point">
          <div class="me-2">
            <img src="/assets/images/how_it_works/vector-why-distributed-{{reason.name}}.svg" alt="" />
            <h5>{{reason.title}}</h5>
            <p>{{reason.detail}}</p>
          </div>
        </div>
      {% endfor %}
    </div>

    <div class="row">
      <div class="col-md-12 text-center">
        <h4>Sectors</h4>
      </div>
    </div>

    <div class="row py-3">
      <div class="col-md-6 text-center">
        <a href="/sector/electoral/">
          <img class="img-fluid sector-image" src="/assets/images/sectors/hero/electoral-active.svg" alt="" />
          Electoral
        </a>
      </div>
      <div class="col-md-6 text-center">
        <a href="/sector/advocacy/">
          <img class="img-fluid sector-image" src="/assets/images/sectors/hero/advocacy-active.svg" alt="" />
          Advocacy
        </a>

      </div>
    </div>
  </div>
</div>

{% include page-footer.html %}