Home › Updates

Updates

How to open any link in a lightbox window

 December 15, 2016
by Flavio Mester

A lightbox pop-up is a pop-up that appears over the page, surrounded by a darkened, semi-opaque area. The lightbox effect ensures the visitor attention focuses on the overlay.

Our latest framework makes it very easy to set up a link this way. For instance, click on this link to see what happens.

How to do it

Set up the link as usual. Then, on the Link Properties dialog select the Advanced tab and in the Stylesheet Classes field type the word lightbox like on the screenshot below:

Lightbox link

Setting up a lightbox link

 

Setting up an image popup

You can do the same with images. For instance, here we have a thumbnail version of an image. It’s linked to the full size image in the Assets Manager, and we used the same lightbox Stylesheet Class to get it to open in a lightbox. Cick the thumbnail below to see it.

A sample image

Click image

You can also link to the image from a text link of course.

 

Setting up a video popup

To set up a lightbox link to a YouTube video, select the Embed option for the video on YouTube video and copy only the actual URL between the brackets, indicated on the example below. Set the Stylesheet Class for the link in YWD to lightbox as in the previous examples.

Lightbox video

Try this link to see it working.

 

Giving the link a button appearance

You can combine the lightbox class with button classes (as explained on this page) to give the link a button appearance. For instance lightbox button green was entered into the Stylesheet Classes field to create the link below.

Play video

 

A few notes:

  1. The lightbox window is 800x500.
  2. The popup is responsive; it will resize itself on mobile.
  3. This feature is only available to websites created with our latest framework.

 

Need a great website? Contact us

 


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  

How to create an automatic, responsive popup window without coding

 December 15, 2016
by Flavio Mester

Happy Holidays message

Our Holiday Schedule popup

Automatic popup windows are certainly not loved by all... However, sometimes they can be useful. For instance, we wanted to make sure our clients were aware of our Holiday Schedule, so we set up  to this website’san automatic popup for our Home page (don’t worry, we’ll take it down after the holidays ;) Another common use is to set up important marketing campaigns or opt-in forms. Our new framework lets you do that with just a few clicks. Here’s how:

The popup content

Our Holiday Schedule is a regular page, but we hid most of its elements, like branding, navigation, etc. We did that by editing the Page Properties and clicking the Hide all box.

Hide all elements

Hiding all unnecessary elements

Making it pop

Now we just need to make the Home page pop that other one whenever it loads. This time, we edited the Page Properties of the Home page, and typed the URL (or in this case the SEO permalink we created for it) of the popup page:

Autopopup 

Setting the popup window

That’s it! A few notes:

  1. The popup window is 800x500. So make sure your content fits.
  2. The popup is responsive; it will resize itself on mobile.
  3. This feature is only available on websites created with our latest framework.

 

Need a great website? Contact us

 


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  

Hiding header background images from mobile

 December 15, 2016
by Flavio Mester

Mobile screenshot

A common problem with responsive websites is that sometimes background images used in headers – like dramatic Home page “hero” photos with text overlaid – don't look right on phones, given the different aspect ratio of their viewports.

For those situations, it’s probably better to simply hide the background photo and use a flat colour instead. A new setting in our latest design framework allows you to do just that.

Take the example to the right. Here the background image – which looks fine on computers and tablets as you can see here – would simply not look right, and interfere with the type above it.

How to do it in Your Web Department

There are some jQuery plugins that will allow you to define the focus point of an image. They are however quite complicated, and you need to manually enter code for each image. That would be impractical for our purposes, as YWD is a user-friendly Content Management System.

So the route we took is to do that globally, and without the need for people to enter any code.

In the example above, all that was needed was to go to Design > Header area and set the Background group’s “Show image on mobile” option to not show on any page. This way, the flat colour defined for the background will be displayed, but not the image.

Design setting 


Please note that this option is only available to websites created with YWD framework 2.0 or up.


 


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  

New option allows designers to add text animation effects to headers without coding

 December 10, 2016
by Flavio Mester

Header effects

The new Text Animation option

Our latest website building framework allows designers to easily add animation effects to the text placed in the Header area. Just go to Design > Layout > Header area and choose one of the Text animation effects available – Slide right, Slide left and Flip. This option can be an effective tool if used properly, by driving the attention and interest of visitors to your taglines.

Please note that this option is only available to websites created with YWD framework 2.0 or up.

 


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  

Mobile website: adding action buttons without coding

 November 30, 2016
by Flavio Mester

Action buton

An action button example

Our latest display framework allows people to add global action buttons to the bottom of the pages by simply entering the appropriate information – a phone number for a “Call Us” button, an address for a “Show Map” button, etc. – in the website’s Design settings. The buttons will appear only on mobile and mid-size devices e.g. iPads but not computers.

 


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  

Mobile websites: automatic positioning the logo

 November 29, 2016
by Flavio Mester

For websites built on our latest framework, YWD will now automatically add a bit of padding to the left of the logo on the mobile version to align it with the hamburger icon above it, in case no mobile-specific logo was selected in the Design settings. That makes it quicker for designers to build websites, while giving them even more flexibility.


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  

Automatic subpage arrow indicators for cascading menus

 November 15, 2016
by Flavio Mester

Navigation arrows

YWD will now automatically display arrow indicators for all pages that contain sub-pages. The new option is “on” by default but can be turned off in Design / Navigation / Text labels.

 


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  

Responsive design for blog post summaries

 November 2, 2016
by Flavio Mester

Responsive design blog posts

On websites created with our latest framework e.g. our own public website, if you specify that the blog post summaries be placed side by side, they will not only automatically appear stacked on mobile but also their width – including the width of the summary pictures – will adjust to the full available with within the device viewport.

 


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  

Easier form validation and more conversions through Recaptcha

 July 4, 2016
by Flavio Mester

Recaptcha

Forms created with our Forms Manager tool now use Recaptcha, a feature that helps protect websites from spam and abuse. A “CAPTCHA” is a test to tell human and bots apart. It is easy for humans to solve, but hard for “bots” and other malicious software to figure out.

Recaptcha is much easier for visitors to use: rather than matching a text to an image, they simply need to check a box to “prove” they are human. It is also accessible and compatible with major screen readers.

Please refer to this page from the Google website for more information on Recaptcha.


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  

Better social bookmarking widgets for new YWD websites

 April 12, 2016
by Flavio Mester

AddThis bar

Sharing buttons in a sidebar

New YWD websites can now display new social bookmarking widgets that are more interactive and look more modern. Also, the options in YWD Designer under Social media & widgets / Social bookmarking have been greatly simplified. You just need to specify the layout style (bottom buttons, left/right sidebars) and where they should appear (only on blog pages, all pages or none). The new widgets will automatically display the buttons for the visitor’s preferred networks, and will not add anything to the URL of the pages, which was an issue with the previous ones.


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 

  
« 1 2 ... 4 5 6 ... 21 22 »
 
Top of page