Home › Updates

Updates

Automatically inserting the current year into the copyright notice

 December 26, 2016
by Flavio Mester

Websites built with our latest framework are set to automatically insert the current year into the copyright notice at the bottom of the pages.

For instance:

Copyright notice

In the example above, the following settings were used for the Copyright notice in Design > Layout > Page bottom:

Copyright notice settings

Notes:

  1. You can have just the current year followed by the text (rather than a year range) if you prefer. To do that set the “From” year drop down to “current year”. That’s the default for new websites.
  2. If the “From” year is the the current one, just the year is shown (rather than a year range).
  3. The © symbol and the hyphen (in case a year range is shown) are added automatically by the system.

 


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 set up a tooltip

 December 23, 2016
by Flavio Mester

Move your mouse over the image below to see an example:

Your Web Department
A tooltip applied to an image

How to set up a tooltip

  1. Set up the link as usual, specifying a target if needed.
  2. Select the Advanced tab and type in the tooltip text in the Advisory Title field.
  3. Then, to make the tooltip moe prominent, type tooltip in the Stylesheet Classes field.

Tooltip set 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

 

  

How to launch pages and YouTube videos into responsive light boxes

 December 23, 2016
by Flavio Mester

Lightbox
A lightbox example

It’s possible to launch a page into a floating box that will “hover” above the regular page of your website, also known as a “lightbox”. For instance, you may want to link to a page of another website or even a different page of your own showing promotional content, while the current page of your website is kept "underneath". That's different from linking to a blank (new) browser window or a even a regular popup window.


Note: this information applies only to more recent websites, based on our display framework v2 and up. Older websites please refer to this page.



Launching a website into a lightbox

You can use this feature to launch a page of your own website or from another into the floating lightbox window, launched from a link:

Click to launch a website into a lightbox 

Another application would be a glossary in which each term is a separate page (probably hidden from the normal navigation) that will appear in a floating box when you click its respective link. The possibilities are varied.

Creating a Lightbox

  • Edit the Word Processor content block where you would like to link to the lightbox content. You may load the lightbox content either using an internal link (i.e. a page from within your website) or an external link one (i.e. a page of another website).
  • Now select the Advanced tab of the Link Properties and type the word lightbox into the Stylesheet Classes field:

lightbox class

That's it. The destination link will be loaded into a floating layer that will seem to float above the content underneath, which will be covered by a semi-transparent mask. People then can either click the "X" button or anywhere outside of the lightbox area to close it.

Notes:

  1. The lightbox window is always 800x500 regardless of the content inside. They are responsive. For instance if your website is being viewed on a phone the lightbox will “shrink” automatically to fit within the small viewport.
  2. When loading a page from  within your own website into the lightbox, you can use the Special tab of the destination page to hide some of its elements. You may also add arguments to the link in order to hide certain elements without affecting the page itself.
  3. The lightbox can be launched from any link, not necessarily text –you could use an image, for instance.

Launching a YouTube video into a lightbox

On YouTube, click the Embed option below the video and copy the text between brackets indicated below:

Embedding a YouTube video

Paste that into your link in YWD, and type lightbox into the Stylesheet Classes field as explained above. That’s it.

Click to launch a video in a lightbox

 

 

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

 

  

Creating responsive multi-column forms

 December 19, 2016
by Flavio Mester

The Forms Manager tool included in our latest framework allows clients to easily create responsive, multi-column forms. Although typically you will prefer to simply stack the fields vertically, there may be instances in which laying them out side by side could be useful, like on the example below. In those cases, when adding the form content block to a page, select the block’s Multi-column option and the system will try to place the input fields side by side if it can.

For instance:

Multi-column form on computer
Computer view

 

Mobile view
Mobile view

 


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 responsive carousel image gallery

 December 18, 2016
by Flavio Mester

Chagall | Three Acrobats Chagall | Three candles Chagall | Chloe Chagall | Creation Chagall | Village life Chagall | Flowers and lovers Chagall | Gallo Chagall | Lovers at Midnight Chagall | Lovers in the Lilacs Chagall | Self Portrait Chagall | Song of the Rooster Chagall | Tenderness Chagall | The Fiddler

A carousel image gallery. Click the thumbnails to navigate.

The new Carousel in place style of our Image Gallery tool embeds the slideshow of your images into the page, and places thumbnails underneath. People can navigate using the thumbnaisl and/or arrows, as well as switch to a full-screen mode. To add captions, simply type them in the Description field of the images in the Assets Manager.

For more information and a working example please check out this page.


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 image galleries for new YWD websites

 December 15, 2016
by Flavio Mester

Image gallery
An image gallery, viewed on a computer or tablet

Gallery on mobile
The same gallery, viewed on a phone

Image galleries can be a very effective way to display products, services, events and more. Our new framework allows clients to easily build image galleries that look great on all devices – computers, tablets, phones. We offer different ways to lay out and interact with the images, with more to come in the future.

Check out these Help pages for more information:

Note: these options are only available for websites built with our latest framework

Intro
How to set up image galleries

Simple slideshow in place
This style inserts a slideshow of your images into the page. It comes in 2 “flavours”: with/without captions and navigation.

Horizontal thumbnails lightbox
In this style, people can click any thumbnail to launch an overlay above the website underneath, a popular effect known as a “Lightbox”.

Masonry layout lightbox
This style automatically creates a grid layout for the gallery. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

Masonry layout, links to pages
This style automatically creates a grid layout for the gallery, similar to the Masonry layout lightbox style. Here, however, once you click an image, it launches the link associated with it.

 

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

 

  

Easier to create blog posts with our new framework

 December 15, 2016
by Flavio Mester

Adding/editing blog posts is now easier for websites created with our latest framework: the blog post interface opens in full screen. Clicking the Create / Cancel buttons at the bottom automatically returns to the previous screen.

Blog Input

The blog input interface

 


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 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

 

  
1 2 »
 
Top of page