Home › Updates

Updates

Additional predefined styles for content blocks, and new button styles

 June 13, 2017
by Flavio Mester

Additional predefined styles for content blocks

AnimSlideLeft
Slides the content in from the left. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

AnimSlideRight
Slides the content in from the right. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

AnimFlip
Flips the content in. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

MaxText500 – MaxText900
These options allow you to limit the width/length of the lines text within the content block. They can be useful if for instance on a page without a right sidebar and you would like to prevent the text from extending the full width, which might affect readability. It has no effect on mobile, where the lines are inherently narrower due to the much smaller viewpport.

Raised effect for buttons

To apply a raised effect to a button – similar to the Google Material Design style – use the raised class:

button green will produce button whereas button green raised will produce button

Note: you can also apply a raised or hollow effect globally to all buttons – including submit buttons – by selecting the effect in the Design settings, Forms Manager App.

 

Circular buttons

It’s also possible to create small circular buttons. Use the circle class for that, and keep the labels to 1 or to letters or numbers:

button cyan circle will produce Y and of course button cyan circle raised will produce Y

 

For more information on how to insert your custom CSS code into a website built in YWD please refer to this section of our Help website.


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 design feature: predefined content block styles

 June 11, 2017
by Flavio Mester

Predefined content block classes

The Your Web Department platform comes with several predefined content block styles that let you override its default settings and even apply a whole new look to a block without the need to write a single line of code. To apply a predefined style, switch to the block’s Advanced options and then simply select the class from the list. The currently available classes are described below.

Predefined content block styles
Applying a predefined style to a content block

 

NoImgOnMob

Will hide any images in the content content block from mobile i.e. when the window is 480 pixels wide or smaller. Useful for instance if you have a very large image that you would rather simply hide from phones.

 

WhiteText

Renders all text in the block – normal paragraphs as well H1-H6 – in white, regardless of the website’s design settings. Links and buttons are not affected.

 

BlackText

Same as above, but for black text.

 

AnimZoomIn

Applies an animation effect to the content block. It will fade in and zoom until it reaches its normal size. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

 

AnimSlideLeft

Slides the content in from the left. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

 

AnimSlideRight

Slides the content in from the right. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

 

AnimFlip

Flips the content in. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

 

CardReg

Applies a style similar to a Google Material Design card component to the block.

Card component
A CardReg-styled content block

To build a block with this appearance, edit your content block this way:

1. Select Normal (DIV) as the Paragraph Format for the image, as opposed to the default Normal setting.

Card component editing

2. Type/paste the rest of the content as a heading (typically H3 or H4) and the rest of the copy as a regular paragraph.

3. Set the content block width e.g. 320px for a row with 3 callouts side by side, with some margin between the callout and the next, if applicable.

Box style

4. Set the block’s Custom CSS class to CardReg.

 

CardHeader

This style is similar to CardReg above and you should set the content up the same way. However, here the style sheet will position the heading text overlaid on the image, and in white. Make sure you keep the heading text very short, as it needs to fit within a single line.

Card with a reverse header
A CardHeader-styled content block

 

MaxText500 – MaxText900

These options allow you to limit the width/length of the lines text within the content block. They can be useful if for instance on a page without a right sidebar and you would like to prevent the text from extending the full width, which might affect readability. It has no effect on mobile, where the lines are inherently narrower due to the much smaller viewpport.

 


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

 

  

Adding interactive sharing widgets to any page

 June 6, 2017
by Flavio Mester

YWD automatically adds interactive sharing widgets of the visitor’s preferred social networks to the bottom of blog posts. However, sometimes you may want to include them on a regular page. For instance, in our public website we’ve added them to our News landing page.

How to do that

If your YWD website was built on our latest framework, simply edit the Page Properties of the page and in the Other settings group set the Social widgets option to yes.

Social widgets

The system will then add the interactive widgets to the bottom of the main column of the page. They will look like these, but the buttons correspond to the visitor’s preferred networks, so they will vary for each person:

Sharing widgets

 


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

 

  

Form fields with just placeholders and no labels

 May 19, 2017
by Flavio Mester

Websites built on our latest framework now allow you to create forms with our Forms Manager app in which the labels of text fields are hidden, and just placeholders show inside them. This can be useful if you’re trying to reduce the height of the form. It also lets you achieve a style similar to Google Material Design’s.

To do that, simply leave the Label for the text input field when adding it to the form, and instead type it in the Placeholder. Here’s an example of a form created this way:

A form example

 


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

 

  

Easy to create parallax effect

 May 12, 2017
by Flavio Mester

Parallax scrolling is a web site trend where the background image stays in place while the foreground content “glides” above it as you scroll. Here is an example from the current version of our public website:

Parallax - before

After you scroll down a bit, the text will have moved up, but the background image stays in place, creating an illusion of depth:

Parallax - after

How do to that in YWD

We have implemented a new stylesheet class specifically for that. It may sound complicated, but it isn’t: all you need to do is type the word parallax in the Advanced options of the content block where you have the background image:

Parallax class

Which dimensions to use?

It depends. Because the parallax image is responsive, it should be big enough to cover a typical laptop screen and with a similar resolution so it doesn’t look too “stretched”. In our case we used an image that is 1440x776 but you will probably need to go through some tryal & error before you get the best results. If you make it too big it’ll slow down the page download (and SEO) and may even not look good, because the centre of the image may fall in an odd place within your specific page layout.

As always, make sure you optimize your image. Export pho for the Web. Export photos e.g. landscapes as .jpg, and line art like the one in our example as a .png

Parallax image

How about mobile?

Because of performance issues, mobile support for parallax is either very limited or nonexistent. So the effect will only be visible on computers and tablets.


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 content sliders: lots of new options

 May 3, 2017
by Flavio Mester

Content slider options

A few content slider examples

For webstes built on our latest framework, our Content Slider app is now fully responsive. Based on the popular Flexslider 2 plugin, it allows you to choose between automatic vs. manual, the time interval, as well as whether the order should be randomized or captions shown. You can also decide whether navigation should be done through arrows (which appear as people move the mouse over), pagination circles below, both or none. And If you're a designer, you can specify the colour of the circles, the arrows and the font size of the captions in the Design settings of the website.

All that without having to write a single line of code, of course.


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

 

  

Introducing the Invisible reCAPTCHA!

 May 3, 2017
by Flavio Mester

Since Google introduced reCAPTCHA, millions of internet users have been able to attest they are human with just a single click. Your Web Department clients have been benefitting from its ease of use and convenience to generate more conversions.

Now reCAPTCHA has been a step further and made invisible. And YWD clients can set any form to use it with a single click:

reCAPTCHA

You can see it in action in our own public website: the “Need a Great Website?” form is using it now. Human users will be let through without seeing the "I'm not a robot" checkbox, while suspicious ones and bots still have to solve the challenges.

Visit our website and fill out the form to see it in action.

http://www.yourwebdepartment.com/

www.yourwebdepartment.com

 


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 preview options for mobile devices

 March 21, 2017
by Flavio Mester

In addition to the green Preview website button – which loads the current page into a separate tab on your computer, including unpublished changes – and the blue button that loads the live website, we now have two additional buttons for websites created with our latest framework – one for tablets, the other for mobile – that will popup the current page into a lightbox window.

Preview buttons

The tablet button will simulate the width of an iPad in a portrait/vertical position, whereas the mobile will do the same for a regular sized iPhone. This way it’ll be easier for clients to check how their content looks on different devices.

NOTE: this change in the YWD back-end may require you to clear your browser’s cache in order to get the toolbar to appear properly. Contact us if you need help with that.

Tablet preview

Tablet preview example

 


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

 

  

Display a full YouTube channel on a page of your website

 March 19, 2017
by Flavio Mester

YouTube channel embedded into a page

www.yourwebdepartment.com/Videos

It’s now very easy to embed not just individual movies but your whole Youtube channel into any page of your website – no coding required. Select YouTube channel in the Content dropdown of a YouTube Video content block, and instead of using the URL of specific video, copy the URL of the YouTube channel i.e. https://www.youtube.com/channel/etc... and paste into the field.

YWD will automatically insert the full channel into the page. Clicking any video will open it in a lightbox. The plugin is fully interactive and responsive, so it will auto-adjust on mobile.

 


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

 

  

More accurate automatic generation of permalinks for blog posts and pages

 March 17, 2017
by Flavio Mester

Whenever you create a page or a blog post, you have the ability to enter what is called a permalink (also known as a “slug”) which will be used as the permanent static hyperlink to the page instead of the “unfriendly” one with a long list of arguments.

For instance, if your website is www.mywebsite.com and you have a page called About Us you may want to set up its permalink to about-us so that the page URL will be www.mywebsite.com/about-us.

Because a permalink becomes part of the page URL, special characters like spaces cannot be used, so the system replaces them with hyphens. Previously YWD would replace all special characters with hyphens. However, certain characters – collons, semi-collons, commas, exclamation marks, and others – work best if simply removed from the permalink altogether.

For instance, let’s say a blog post has the following Title:

blog post title

When pasted into the Permalink field in the Categories & SEO tab of the blog post, YWD will automatically convert it to the following:

permalink

The same logic will now be applied to permalinks assigned to page names.


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 3 4 5 ... 23 24 »
 
Top of page