Steps

Prepare a chronological guide to perform an action in your product.

  1. Text
  2. Image

Text

The simplest way to make a step.

Adding a gallary to Wordpress

  • Place your cursor

    A gallery can go anywhere on a page or post - by itself on a blank page, or above, below, or in the midst of text. Start by placing your cursor where you want the gallery to appear.

  • Click the Add Media button

    Once you've placed your cursor where you want your image gallery to appear, click on the Add Media button (located left above the editing window) to launch the media uploader interface. In the resulting popup window, select the 'Create a Gallery' option from the list of actions on the left.

    • Look for image or upload

      You can add or select the images you want to include in your image gallery by choosing from either of the following options in the center of the media uploader window.

    • Write alt and title text

      You can add or select the images you want to include in your image gallery by choosing from either of the following options in the center of the media uploader window.

  • Add and/or Select the Images

    You can add or select the images you want to include in your image gallery by choosing from either of the following options in the center of the media uploader window.

  • Edit Your Gallery

    On the Edit Gallery page, you can do the following things before inserting the gallery you have created into your page or post.


<h3>Adding a gallary to Wordpress</h3>
<ul class="step-text">
  <li>
    <h5>Place your cursor</h5>
    <p>A gallery can go anywhere on a page or post - by itself on a blank page, or above, below, or in the midst of text. Start by placing your cursor where you want the gallery to appear.</p>
  </li>

  <li>
    <h5>Click the Add Media button</h5>
    <p>...</p>
  </li>

  <li>
    <h5>Add and/or Select the Images</h5>
    <p>...</p>
  </li>

  <li>
    <h5>Edit Your Gallery</h5>
    <p>...</p>
  </li>
</ul>

Image

If you have a picture for every step, we suggest you to use this step as it's more interactive.


<div id="step-image" class="step-image carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#step-image" data-slide-to="0" class="active"></li>
    <li data-target="#step-image" data-slide-to="1"></li>
    <li data-target="#step-image" data-slide-to="2"></li>
    <li data-target="#step-image" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="assets/img/step1.png" alt="">
      <div class="carousel-caption">
        <h4>Placing your cursor</h4>
        <p>In order to add an image to your page or post, you must first insert your cursor in the place in the text where you want the image to appear. By placing your cursor within your text, you can add images inline with your content. You can also place your cursor on a blank line if you want the image to appear by itself instead.</p>
      </div>
    </div>

    <div class="item">
      <img src="assets/img/step2.png" alt="">
      <div class="carousel-caption">
        <h4>Click the Add Media button</h4>
        <p>Once you’ve placed your cursor on the line where you want your image to appear, click on the Add Media button to launch the media uploader interface, and then select the Insert Media option from the list of actions in the left side of the media uploader window.</p>
      </div>
    </div>

    <div class="item">
      <img src="assets/img/step3.png" alt="">
      <div class="carousel-caption">
        <h4>Add or Select Your Image</h4>
        <div>
          <p>You can add or select the image you want to add to your page or post by choosing from either of the following options in the center of the media uploader window:</p>
          <ul>
            <li><strong>Upload Files:</strong> Upload the image you want to use from your computer by dragging it into the upload area.</li>
            <li><strong>Media Library:</strong> Select from any previously uploaded images in the media library by clicking on the one you wish to add to your page or post.</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="item">
      <img src="assets/img/step4.png" alt="">
      <div class="carousel-caption">
        <h4>Attachment Details</h4>
        <p>The Attachment Details pane displays a small un-cropped thumbnail of the image, as well as important information such as the filename, date uploaded, and image dimensions in pixels.</p>
      </div>
    </div>
    
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#step-image" role="button" data-slide="prev">
    <i class="fa fa-angle-left"></i>
  </a>
  <a class="right carousel-control" href="#step-image" role="button" data-slide="next">
    <i class="fa fa-angle-right"></i>
  </a>
</div>