Did you know?

000webhost was created as an educational platform by Hostinger team. At Hostinger we provide professional web hosting:

  • WordPress sites hosted on hostinger are 5x faster;
  • SEO Optimization for WordPress - you will rank higher on Google search;
  • Daily backups, so your data will always be safe;
  • Fast and dedicated support ready to help you;
  • Migration of your current WordPress sites to Hostinger is totally free!
  • Try Premium Hostinger offers from $2.15

Por favor, configura el análisis de la web para ver las perspectivas de audiencia

MonsterInsights, el plugin de análisis para WordPress, te ayuda a conectar tu web con Google Analytics para que puedas ver cómo encuentra y utiliza tu web la gente. Más de 3 millones de propietarios de webs usan MonsterInsights para ver las estadísticas importantes y hacer crecer su negocio.

Conecta MonsterInsights y configura el análisis de tu web   Más información

Welcome to Shapely

Welcome! Thank you for choosing Shapely! To fully take advantage of the best our theme can offer please make sure you visit our welcome page.

Get started with Shapely


WordPress Lightbox

Quick Start Guide Lightbox Options

Quick Start

Add a class="wplightbox" attribute to any link to activate the Lightbox effect.

To show a caption, use attribute title. To define the size of the Lightbox popup, use attribute data-width and data-height.

Remove Free Version Watermark

To remove the Free Version watermark, please Upgrade to Commercial Version.

Image Lightbox

Live demo: Image Lightbox

Demo code:

<a href="https://www.wonderplugin.com/videos/demo-image0.jpg" class="wplightbox" title="WonderPlugin Image Lightbox">Image Lightbox</a>

Use data-weblink and data-weblinktarget to specify a web address and link target when clicking on the lightbox image

Live demo: Image Lightbox with Weblink

Demo code:

<a href="https://www.wonderplugin.com/videos/demo-image3.jpg" class="wplightbox" data-weblink="https://www.wonderplugin.com" data-weblinktarget="_blank" title="Click the image to visit &lt;a href=&quot;https://www.wonderplugin.com&quot; target=&quot;_blank&quot;&gt;https://www.wonderplugin.com&lt;/a&gt;">Image Lightbox</a>

YouTube Lightbox

Live demo: YouTube Lightbox

Demo code:

<a href="https://www.youtube.com/embed/c9-gOVGjHvQ" class="wplightbox" title="WordPress Carousel Plugin" data-width="960" data-height="540">YouTube Lightbox</a>

Vimeo Lightbox

Live demo: Vimeo Lightbox

Demo code:

<a href="https://player.vimeo.com/video/147149584" class="wplightbox" title="WordPress Slider Plugin">Vimeo Lightbox</a>

MP4 video Lightbox

The provided MP4 videos must be HTML5 compatible. Please visit the link for how to convert vidoe to HTML5 compabitle.

Live demo: Video Lightbox

Demo code (please make sure to change the video URL to your own):

<a href="https://www.wonderplugin.com/videos/demo-video0.mp4" class="wplightbox" title="Big Buck Bunny Copyright Blender Foundation" data-width=960 data-height=544>Video Lightbox</a>

Use data-weblink and data-weblinktarget to specify a web address and link target when clicking on the lightbox video

Live demo: Video Lightbox

Demo code (please make sure to change the video URL to your own):

<a href="https://www.wonderplugin.com/videos/wonderplugin-carousel.mp4" class="wplightbox" data-weblink="https://www.wonderplugin.com" data-weblinktarget="_blank" data-width=960 data-height=544 title="Click the video to visit &lt;a href=&quot;https://www.wonderplugin.com&quot; target=&quot;_blank&quot;&gt;https://www.wonderplugin.com&lt;/a&gt;">Video Lightbox</a>

Image & video Lightbox gallery with thumbnail navigation

To create a gallery of images and videos, you can add a attribute data-group to the related links. You can use any string as the group name, as long as all of the links in one gallery has same value.

You can use data-thumbnail to add thumbnail navigation to the gallery.

Live demo

Demo code (please make sure to change the image and video URL to your own):

<a href="https://www.wonderplugin.com/videos/demo-image1.jpg" class="wplightbox" data-group="gallery0" data-thumbnail="https://www.wonderplugin.com/videos/demo-image1-tn.jpg" title="Image">Image</a>

<a href="https://www.youtube.com/embed/c9-gOVGjHvQ?rel=0&vq=hd1080" class="wplightbox" data-group="gallery0" data-thumbnail="https://www.wonderplugin.com/videos/demo-youtube-tn.jpg" title="YouTube">YouTube</a>

<a href="https://player.vimeo.com/video/147149584?title=0&byline=0&portrait=0" class="wplightbox" data-group="gallery0" data-thumbnail="https://www.wonderplugin.com/videos/demo-vimeo-tn.jpg" title="Vimeo">Vimeo</a>

<a href="https://www.wonderplugin.com/videos/demo-video1.mp4" data-webm="https://www.wonderplugin.com/videos/demo-video1.webm" class="wplightbox" data-group="gallery0" data-thumbnail="https://www.wonderplugin.com/videos/demo-video-tn.jpg" title="Video" data-width=960 data-height=544>Video</a>

Show title and description in Lightbox

To show a title, use attribute title.

To show a description, you need to enable the option Show description in the Lightbox Options page, then add data attribute data-description to your link.

Live demo: Lightbox with title and description

Demo code:

<a href="https://www.wonderplugin.com/videos/demo-image2.jpg" class="wplightbox" title="You can display a title." data-description="You can also display a description." >Image Lightbox</a>

Customise the lightbox with data attributes - display text on the right side of the lightbox

You can change the lightbox options in the plugin menu -> Lightbox Options. The change will apply to all lightboxes on the website.

Instead of changing options for all lightboxes, you can also use data attributes to change the specified lightbox link. The following demo will use data attribute to display the text on the right side of the lightbox.

Live demo: YouTube Lightbox

The HTML code is as following:

<a href="https://www.youtube.com/watch?v=c9-gOVGjHvQ" class="wplightbox" data-titlestyle="right" data-width="960" data-height="540" title="WonderPlugin Carousel" data-description="WonderPlugin Carousel is a WordPress plugin that enables you to create WordPress posts carousel for categories, WordPress recent posts carousel, image carousel slider, image scroller and video LightBox. The plugin supports WordPress posts, images, YouTube, Vimeo, mp4 and webm videos. It's fully responsive, works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera, Internet Explorer and Microsoft Edge.">YouTube Lightbox</a>

For all available data attribute options, please view Wonder Lightbox Options

Open a div in Lightbox

To open a div in the lightbox, firstly, define a div with an ID in your webpage. You can add CSS style display:none; to make it invisible on the page.

Live demo: Open a Div in Lightbox

Demo code:

<div id="mydiv" style="display:none;">
  <div class="lightboxcontainer">
	<div class="lightboxleft">
	  <div class="divtext">
		<p class="divtitle" style="font-size:16px;font-weight:bold;margin:12px 0px;">Wonder Gallery</p>
		<p class="divdescription" style="font-size:14px;line-height:20px;">
		Wonder Gallery is a WordPress photo and video gallery plugin, and a great way to showcase your images and videos online. 
		The plugin supports images, YouTube, Vimeo, Dailymotion, mp4 and webm videos. 
		It's fully responsive, works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera, Internet Explorer and Microsoft Edge.
		</p>
	  </div>
	</div>
	<div class="lightboxright">
	  <iframe width="100%" height="100%" src="https://www.youtube.com/embed/wswxQ3mhwqQ" frameborder="0" allowfullscreen></iframe>
	</div>
	<div style="clear:both;"></div>
</div></div>

To make the content itself responsive, add the following CSS code to your webpage:

<style type="text/css">
.lightboxcontainer {
  width:100%;
  text-align:left;
}
.lightboxleft {
  width: 40%;
  float:left;
}
.lightboxright {
  width: 60%;
  float:left;
}
.lightboxright iframe {
  min-height: 390px;
}
.divtext {
  margin: 36px;
}
@media (max-width: 800px) {
  .lightboxleft {
    width: 100%;
  }
  .lightboxright {
    width: 100%;
  }
  .divtext {
    margin: 12px;
  }
}
</style>

You can then use #DIVID as the href value of the lightbox link.

Demo code:

<a href="#mydiv" class="wplightbox" data-width=800 data-height=400 title="Inline Div">Open a Div in Lightbox</a>