Steps
Prepare a chronological guide to perform an action in your product.
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.
-
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.
Placing your cursor
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.
Click the Add Media button
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.
Add or Select Your Image
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:
- Upload Files: Upload the image you want to use from your computer by dragging it into the upload area.
- Media Library: Select from any previously uploaded images in the media library by clicking on the one you wish to add to your page or post.
Attachment Details
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.
<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>...</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>...</div>
</div>
</div>
<div class="item">
<img src="assets/img/step4.png" alt="">
<div class="carousel-caption">
<h4>Attachment Details</h4>
<p>...</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>