Fullscreen Slideshow Cover in Adobe Muse

Muse For You - Fullscreen Slideshow Cover Widget - Featured

Add a Fullscreen Slideshow Cover to your Adobe Muse website. No coding skills required.

Let’s face it – images play a huge part of how we communicate on the web. Images can tell a story, showcase a product, or convey an emotion. High quality images can even show how much effort someone went through to communicate their idea. I have to admit I myself am a visual learner. If the images on a website do not captivate me within the first few seconds I go onto the next website.

This is why I decided to create the “Fullscreen Slideshow Cover Widget.” This widget puts all the focus on the images by making the slideshow cover the entire browser. The user is able to navigate through all the images before seeing any content on the website. This is a great way to really make an impact on what you are trying to communicate with images.

The Fullscreen Slideshow Cover is 100% width and height so the slideshow stays in the browser until the user scrolls. The slideshow is fully responsive and the images change size on different devices and when the user resizes the browser.

Muse For You - Fullscreen Slideshow Cover Widget - Adobe Muse CC

Example of the Fullscreen Slideshow Cover Widget

 

With the Fullscreen Slideshow Cover Widget you can:

  • Add a fullscreen slideshow cover that covers the entire browser before the user scrolls
  • Choose from 74 animations for the slideshow in and out animation
  • Add links to the images
  • Add an image or logo over the images
  • Add a color overlay over the images
  • Add a title and description over the images
  • Set the duration of each slide in the slideshow
  • Enable slideshow controls
  • Enable slideshow dot navigation
  • Autoplay slideshow

With all of these features you can easily customize the slideshow for your website. You can add a color overlay to match the styling of your website and describe each image with a title and description. All features are added to give you as much flexibility as possible. You can watch the video above titled “Fullscreen Slideshow Cover Widget” to see the widget in action and how to use it. To access the widget visit http://museforyoushop.com.

Read More at Fullscreen Slideshow Cover in Adobe Muse

Read More…

Power up your website with a WordPress Form Plugin solution. Refer a buddy and get CaptainForm discounts

CaptainForm-

CaptainForm

There are many ways you could enhance a WordPress website. One of them is by adding web forms.  A WordPress contact form will help you get in touch with your visitors, a WordPress feedback form or a WordPress survey allows you to gather suggestions or requests and with a WordPress quiz you can generate leads and engage your users. These are just a few examples. Certainly, there are many more types of web forms you can use to your advantage, depending on your specific needs.

So, it’s pretty clear that a WordPress form plugin is a must-have for powering up your WordPress website.

A smooth user experience, built-in functionality, great customer care and technical support- these sound like the features that a WordPress website owner would surely search for when choosing a WordPress form plugin.You can find these exact features and other awesome ones in CaptainForm.

CaptainForm’s advanced features include, but are not limited to a drag and drop editor, multiple form templates, different layout and styling options, easy data management, integration with various payment apps, email marketing apps, project management apps and more.

CaptainForm Features 1

CaptainForm Features 2

In terms of pricing you have 4 plans to choose from: a free one and 3 paid plans. And since we are talking about plans, support is provided for all users, irrespective of the plan they are on (paid or free).

If all this sounds great, you’ll be happy to hear about CaptainForm’s referral program: For each recommended friend that BUYS the product, you get a 10% discount at renewal and your recommended one gets another 10%. You can recommend as many friends as you want. The more, the merrier!

Referral Program

You simply have to submit your details in the provided form and you’ll receive a unique voucher code to distribute to your friends.

Check out CaptainForm and have fun form building!

Read More at Power up your website with a WordPress Form Plugin solution. Refer a buddy and get CaptainForm discounts

Read More…

5 Great WordPress Plugins for Tracking Analytics

Screen Shot 2016-05-26 at 9.21.02 AM

Whether your goal is to build an insanely popular blog or create a successful e-commerce site, it’s crucial that you understand your audience. You need answers to questions like:

  • Where are your users coming from (direct visits, search engines, links from other sites)?
  • Which pages or posts on your site are most popular?
  • How long do potential customers spend on your site?
  • When does your site experience traffic peaks?

Collecting data on these questions can help you design a better site and provide more relevant content to your target audience. Fortunately, there are multiple WordPress plugins that can help you collect and analyze this information. Let’s take a look at a few of the most popular and easy to use:

Google Analytics by MonsterInsights

Screen Shot 2016-05-26 at 9.19.33 AM

Formerly Google Analytics for WordPress, this is one of the most downloaded plugins of all time. Eleven million users can’t be wrong. Google Analytics provides comprehensive tracking for blogs, ads, downloads, and video views.

In order to use this plugin you’ll need to set up a free Google Analytics account. Once you have an account and install the plugin, you’ll be able to access your Google data in convenient, customizable dashboards.

Google Analyticator

Another great option for integrating your Google Analytics account, this plugin offers advanced JavaScript customization options for developers. It also supports Google’s site speed tracking so you can keep your site lean and responsive.

JetPack

Screen Shot 2016-05-26 at 9.20.24 AM

JetPack was designed by WordPress and is exclusive to the platform. This plugin has 25 modules to let you customize the information you want to track.

But its functionality extends beyond data gathering. JetPack will also filter out spam comments from blog posts and prevent unauthorized logins to your site. You can even set it up to share your posts on social media when you create new content.

WassUp Real Time Analytics

Screen Shot 2016-05-26 at 9.21.02 AM

As the name implies, this plugin is designed for tracking users in real time instead of waiting for an aggregated traffic report. You can narrow in on the keywords being used, which articles are currently getting the most hits and tons of other up to the minute data. The geolocation map lets you track current visitors. WassUp also helps deter hack attempts and identifies spiders and spam agents to exclude them for data tracking.

WP Power Stats

Screen Shot 2016-05-26 at 9.22.05 AM

This plugin lets you keep track of page views, geographical traffic data, and dozens of other visitor statistics without using a third party collection agent like Google Analytics. This can be a real plus if you want to emphasize privacy to your visitors and subscribers. You decide what is tracked and only you can access the data.

So how do you choose? You may have to install a few to decide which ones best suit your needs. All offer a free basic tier, but some offer premium plans if you want additional support and features. When you’re aware of your site’s analytics, you’ll automatically have a leg up on the competition, so your best option is to install one of these plugins and start experimenting.

What plugins have you tried for analytics/statistics? We’d love to hear about your experience with these or any other WordPress data tools.

Read More at 5 Great WordPress Plugins for Tracking Analytics

Read More…

If Fonts Were Cats

Screen Shot 2016-05-25 at 12.12.07 PM

When I think of fonts I think of cats, apparently someone else does as well because I found a bunch of cute and ironic cat-font memes online. First, I thought to myself, “You’ve got to be kitten me right meow!” but then I had to share. Take a look at this adorable collection I’ve put together for you.

 

Helvetica

Arial Black

Papyrus

Comic Sans

Impact

one too many

Apple C

Futura

Ballpark

Curlz MT

Bank Gothic

Times New Roman

Porcelain

Trajan Pro

Garamond

Courier

Mesquite Std

Gotham

Cooper Std

Baskerville

You know all these cat puns left you feline good! If you were a cat font, which font would you be?

Read More at If Fonts Were Cats

Read More…

How to Use the Repeat Grid Tool in Adobe XD

Learn How to Use the Repeat Grid Tool in Adobe XD

In this tutorial, we’re going to learn how to use the repeat grid tool in Adobe Experience Design CC (Adobe XD).

The Steps (1-9)

1. Create a new document by selecting iPhone 6 from the Start Screen.

2. Select the Rectangle Tool and draw a landscape-orientated rectangle in the upper part of your screen, and give this shape a fill colour of your choice.

3. With the Rectangle Tool still selected, hold Shift to draw a square, and again, give this shape a fill colour of your choice.

repeat-grid-tool-adobe-xd-1

4. Select the Text Tool, click anywhere on the artboard, and start typing some title text.

5. Duplicate this layer by going to Edit > Duplicate, move this under your title text, reduce the size, and insert some text of your choosing.

6. Repeat Step 4 and type your CTA (call-to-action) text here. For example, it might say ‘Read More’. Make this text prominent in order to grab your users’ attention, and position this under the text created in Step 5.

repeat-grid-tool-adobe-xd-2

7. With your mouse, drag over all of the elements created in Steps 2-6, and then click the Repeat Grid button in the Property Inspector on the right-hand side.

8. Notice the green border that appears around your content? Select the bottom slider and drag this down to repeat your content so that it fills the screen.

9. When using the Repeat Grid Tool, Adobe XD automatically creates a gutter (spacing) in between the different objects that are being repeated. By selecting and clicking inside this space (the gap in between objects) you will see some pink guides appear, that allow you to adjust the gutter spacing. For this tutorial, reduce the spacing here to around 10-30 pixels.

repeat-grid-tool-adobe-xd-3


Download Adobe Experience Design CC (Adobe XD).

Read More at How to Use the Repeat Grid Tool in Adobe XD

Read More…

Simplifying E-Commerce with Adobe Muse

Muse For You - Paypal Shopping Cart Widget - Adobe Muse CC

Not only does Adobe Muse allow you to build websites without knowing any code you can now integrate a shopping cart with the PayPal Shopping Cart Widget from Muse For You.

paypal-logo-1 muse-for-you-shop-adobe-muse-cc-logo Adobe_Muse_logo

Since the inception of the web e-commerce websites have become a major part of how we buy items. Web designers and developers are always looking for new ways to integrate shopping carts into their website. We have seen a number of different e-commerce platforms come onto the scene. Platforms like Shopify, WooCommerce, Etsy, Sellfy, Gumroad, and many more. Along with these platforms payment methods such as PayPal have become hugely popular. More and more online users are using PayPal to pay for items online. With PayPal you can pay with your PayPal account, bank account, debit or credit card. This allows web designers and developers to easily add e-commerce to their website with simple to use PayPal buttons.

Let’s dive a little bit deeper at some of the e-commerce platforms mentioned above. Shopify has become very popular and uses its own type of code called liquid to edit and modify templates. It is quite extensive and is a bit of a learning curve. WooCommerce requires the installation of WordPress and afterwards you can integrate WooCommerce into your WordPress template. Etsy, Sellfy, and Gumroad are great but they don’t include a website, so you get the shopping cart but with no website. They also take a fee for each sale.

Some of these alternatives are great, but what if I wanted to create a simple e-commerce website that looks great without having to learn new code or install WordPress and go through all the steps to integrate WooCommerce into WordPress? That is where Adobe Muse comes in. Adobe Muse allows you to easily create a website with total creative freedom, and now with the PayPal Shopping Cart Widget from Muse For You you can easily include a shopping cart into your Adobe Muse website. Adobe Muse has its own built-in PayPal buttons that allow you to easily add e-commerce to your website. You can use these buttons to create products on your website, and with the shopping cart widget users can add their products to a PayPal shopping cart.

Muse For You - PayPal Shopping Cart Widget - Adobe Muse CC

Example of the PayPal Shopping Cart Widget from Muse For You.

 

Muse For You - Paypal Shopping Cart Widget - Adobe Muse CC

With the PayPal Shopping Cart Widget all you need to do is add the widget to your Adobe Muse website and you instantly have a shopping cart. Any PayPal buttons you use will work with the shopping cart and if the user clicks on a buy button the product gets added to the shopping cart. You can set the shopping cart to save so if the user leaves the website the shopping cart will be saved and the user can continue shopping next time they come back to the website. You can also have the shopping cart reset on the page so that if the user leaves the page the next time they come back the shopping cart will be reset and they can start from the beginning. This works great if you want to set a page that resets the shopping cart after a user has finished a purchase. After the user has added all the items to the cart they can simply checkout with PayPal and complete their purchase.

What is also great about the PayPal Shopping Cart Widget is that it is completely customizable. You can customize the color and the text of the shopping cart to match your website. If you are looking to create a simple, and beautiful website with a shopping cart look no further. Adobe Muse does not require any code to build the website and all you need to do is drag and drop the PayPal Shopping Cart Widget onto your Adobe Muse website, and you now have an e-commerce website. I’ve titled the following video PayPal Shopping Cart Widget (view at top). The video shows you just how much you can do with the widget and how to add it to your Adobe Muse website.

I will be sharing my knowledge of Adobe Muse via my weekly blog post on WebDesignerLedger.com. I invite you to check back weekly for news and updates on Adobe Muse :). Happy Musing.

Read More at Simplifying E-Commerce with Adobe Muse

Read More…

How to Create Responsive Guides in Adobe XD

Learn How to Create Responsive Guides in Adobe XD

In this tutorial, we’re going to learn how to create guides for responsive design, in Adobe Experience Design CC (Adobe XD).

The Steps (1-12)

1. Create a new document 1920 x 1080 from the Start Screen.

2. Create a shape that is 100% height, and 1170 pixels in width. This shape is going to represent the maximum site width that we will be designing for, and should be centrally aligned to the artboard. Give this rectangle a grey colour for now. Go to Object > Lock to lock this layer in position, so that we don’t select it by mistake when working through the steps to follow.

3. Create a thin vertical rectangle, that is 100% height and 15 pixels in width. This is going to form our site margin, and should be positioned on the inside left edge of the main rectangle. Duplicate this shape, and also position a copy on the inside right edge of the main rectangle. Give these shapes a slightly different shade of grey, so that we can easily distinguish the different shapes/elements, whilst working on the layout.

create-responsive-guides-adobe-xd-1

4. Create another vertical rectangle that is 100% height, and 67.5 pixels in width (70 pixels if you design your grid without the left and right margins). Colour this new shape black, and position this alongside the shape created in Step 3.

5. Create another vertical rectangle that is a different shade of grey to the two shades already being used by the other shapes, and position this alongside the shape created in Step 4. The three rectangle shapes should all be lined up alongside each other, with no gaps in between.

6. Using Shift to select these three shapes (excluding the main rectangle). Next, click on the Repeat Grid button in the Property Inspector on the right-hand side.

create-responsive-guides-adobe-xd-2

7. Your shapes should now have a set of green guides around them, allowing you to drag the slider on the right, until it touches the edge of the right margin that we created in Step 3.

8. When using the Repeat Grid Tool, Adobe XD automatically creates a gutter (spacing) in between the different objects that are being repeated. By selecting and clicking inside this space (the gap in between objects) you will see some pink guides appear, that allow you to adjust the gutter spacing. For this tutorial, reduce the spacing here to zero, so that there are no gaps between our shapes.

9. Once the gaps have been reduced, select the green right slider again, and drag this out to the right, until it lines up with our right-hand margin as before.

create-responsive-guides-adobe-xd-3

10. Double-click the Repeat Grid group, select the first 30 pixel shape that we created, and adjust the colour to white. You will see that all of the other clones of this shape also change in colour.

11. Use your mouse to drag over all of the shapes that we’ve created (the main rectangle should still be locked), and in the Appearance menu on the right-hand side, adjust the opacity to between 2-5%. Lock these layers, as we did with the main rectangle in Step 2. Keeping the opacity of the responsive grid less than 5%, allows it to still be visible enough to work on, but doesn’t interfere too much with any design elements that are being created, and you can even set the guides to 0% opacity to hide them completely.

12. Start designing an awesome and responsive site!

create-responsive-guides-adobe-xd-4


Download Adobe Experience Design CC (Adobe XD).

Read More at How to Create Responsive Guides in Adobe XD

Read More…

Forgetting Your Design Work Tasks? Increase Your Productivity with These Tips

image003

Losing track of where you are? Miss a deadline, because you thought it was one days from now instead of today? The good news is you probably aren’t a victim of senility. The bad news is your sedentary work routines may be killing you. Not quickly; in tiny increments, similar to slow-creep weight gain.

Fortunately, this slow-death process is not only reversible, but by taking the right steps, you’ll soon be feeling better than ever. Your productivity will noticeably improve, and 5 or 10 years down the road you’ll still be in top form.

A web designer’s work may not appear to be physically demanding, but sitting all day and staring at a screen, and fighting to meet deadlines, can eventually take a toll. Here are three areas you can work on to not only prevent bad things from happening, but will help you to keep your energy levels high, and your mind crystal clear.

 

Take Care of Your Diet

image001

Better than chips, and salmon will keep your mind sharper too.

 

Sitting most of the day is bad enough. When combined with poor dietary habits, it can turn you into a professional couch potato in no time at all. Think about what you eat while at work –  and then think about how you spend your time at home. If you spend your evenings on the couch, munching on chips, it’s high time to make some changes.

Here are three good ways to improve your eating habits:

  • Watch what you eat (think nutrition).
  • Schedule your meal times (and stick to the schedule).
  • Organize your refrigerator – keep it well stocked with fruits and vegetables (and salmon!)

 

Not only does junk food contain ingredients that are not always good for your body, these foods can lead to nutritional deficiencies if they make up an appreciable part of your diet. Any deficiency in vitamins or minerals can literally cause you memory loss –and make you more susceptible to illness.

 

Settle for 8 Hours of Work a Day

image003

If your boss insists that you to be at your desk 10-12 hours a day, you might consider looking for work elsewhere. Working long hours may be the norm if you’re working for a startup, but even then, you can accomplish just as much in 8 hours as you can in 10 or 12 if you go about it right. You’ll save wear and tear on your heart as well.

Check the statistics. Those extra 2 or 3 hours a day increases your risk of incurring cardiovascular problems by 60%. It’s just not worth it. The best way to limit your work days to 8-hour sessions, and perhaps the only way, is through self-discipline. You may also have to learn how to say no on occasion.

 

Working 9 to 5, or the equivalent, has these advantages:

  • You will do higher quality work than you can by working extra hours.
  • Your productivity will go up.
  • You can take pride in your self-discipline and your ability to say no.
  • You’ll feel better.
  • You’ll have more free time.

There’s probably a number of non-productive things you can cut out to get down to an 8-hour workday, and a workday that includes the breaks you need to relax and clear your mind.

 

Sleep

image005

If you’re regularly in bed by 10 and up at 6, you’re likely getting enough sleep. If, for whatever reason, that isn’t the case, you need to think about making some changes.

Not enough sleep, combined with a sedentary lifestyle and poor dietary habits, can turn you into an old-timer long before you’re ready for it, plus the effects on your body this combination can cause, can be difficult to reverse.

You may not have to make major changes in your lifestyle, unless getting more exercise, working fewer hours, and eating better, are areas where you need to improve in addition to getting enough sleep.

Here are three not-to-difficult-to-follow rules you should try:

  • Turn off your PC and set your laptop and digital devices aside at least an hour before bedtime.
  • Learn a short relaxation routine or two that you can regularly practice just before going to sleep.
  • Avoid caffeine and any sugar snacks late in the day.

If you’re on the road a lot, you may have to work a little harder at doing what needs to be done to get enough sleep. The reason is simple. You sleep better in your own bed. When you’re in unfamiliar surroundings, your brain sometimes freaks out a bit. It is more vigilant, and a hyper-vigilant brain is not conducive to falling asleep easily, or sleeping soundly.

 

Do What You Need to Do to Keep Your Body in Tune

image007

Make it a goal to regularly follow practices that are necessary to keep your energy level high, keep cobwebs from forming in your brain, and keep you healthy and fit.  When you’re feeling sharp and alert, you’ll find yourself going about your web design work more efficiently and productively.

Consider making these ideas habit-forming:

  • Pay attention to your diet. Getting enough of the proper nutrients such as magnesium and omega 3 fatty acids keeps your mind sharp. Other vitamins and minerals will keep you healthy, and your energy level high.
  • Don’t let working overtime or long hours become a habit. Organize your tasks so you can make an 8-hour day a reality. Your performance will actually improve.
  • Look forward to a relaxing end of the day, followed by a good night’s sleep. Cut out late snacks, especially those containing sugar, and avoid late-day caffeine intake.

Read More at Forgetting Your Design Work Tasks? Increase Your Productivity with These Tips

Read More…

28 CSS Puns to Brighten Your Day

Screen Shot 2016-05-20 at 3.03.40 PM

Some are funny, some are bland, and some you may not even understand. We’ve put together a list of 28 CSS puns that we think you’d love, we did. Comment below and let us know which one you like best! Heck, Let us know if you have some that are even funnier than the ones we’ve collected, we’d love to hear em!

2

Get it? Because you disappear in the Bermuda-triangle…

3

#BADA55 is a real color!

Screen Shot 2016-05-19 at 2.18.38 PM

It’s okay no one is mad about this one…

5951d7d6be882ac2ae3b2e68d482bb57

Wife is always right or else the titanic does not float!

Screen Shot 2016-05-19 at 2.21.15 PM

So much padding it broke the internet!

8487446074_74b53af084

Just keep swimming…

bambiCSSjoke

I had to look deep into my morals before adding this one.

best-programming-language

Ugh, machines make us do all the work!

css_puns_08

What web designing does to us…

css_puns_09

Yo mama so fat… This one had us laughing for a while.

css-pun-2-china-wall2

Get it? The Wall of China!

css-pun-leprechaun

Warning: Little people are not leprechauns, do not attempt to capture them!

css-puns-funny-jokes-15

Never to be found…

css-puns-hulk

You won’t like him when he’s angry…

Css-Puns-image-humour_2

It doesn’t take much…

css-puns-jokes-07

Ha! 6ft under.

css-puns-web-design-funny-jokes-4

One of my favorites!

css-puns-web-design-funny-jokes-10

Who doesn’t love good transformer movie?

css-puns-web-design-funny-jokes-11

If you can build it that is!

css-puns-web-design-funny-jokes-14

You know, because it’s leaning…

css-puns-web-design-funny-jokes-18

I think I might be a hobbit… it’s time for an adventure!

css-puns-web-design-funny-jokes-27

And then there was nothing…

css-puns

Oh, the things I would do with an invisibility cloak…

download

You know it’s going to be fun debugging when you see that!

joke-life-motto

Always strive for awesomeness!

there_are_a_two_kind_of_people

This one may take you a minute… it did for me.

tumblr_mui8g9kgZY1skkj9io1_1280

If this one doesn’t get you signing then you might be a robot…

Don’t forget to comment below and let us know which one you like best! Share your jokes with us as well, we want to see them!

 

Read More at 28 CSS Puns to Brighten Your Day

Read More…