How to Make the Most Out of WPBeginner’s Free Resources

How to Make the Most Out of WPBeginner’s Free Resources

Wordpress
Often new WPBeginner readers ask us how they can get the maximum benefits from all the free resources available on our website. WPBeginner is one of the largest free WordPress resource sites on the planet. We have been publishing free WordPress guides, how to tutorials, and videos since 2009. In this article, we will show you how to make the most out of WPBeginner’s free resources. 1. Subscribe to WPBeginner Newsletter Signing up for our newsletter is the best way to stay updated with WPBeginner’s new posts and resources. When we write a new article, it will land directly in your email inbox. You can select the email frequency such as WPB Daily or WPB Weekly. You can also select the sections you want to subscribe to. We recommend you…
Read More

Design a Traveler’s Photo Diary Tumblr Theme in Photoshop

Design
What You'll Be CreatingIn this tutorial we’ll walk through the step by step process of creating a simple, photo-based Tumblr diary theme in Photoshop. I will start totally from scratch and will guide you through the whole process of setting up the document, using some basic tools and completing the design in no time. The aim of this tutorial is to show how some of the design decisions are being made and how the final design comes to life.Tutorial AssetsIn order to follow along you will need some (freely available) assets:Photos from SkitterphotoPT Serif font from Font SquirrelPT Sans font from Font SquirrelPhotos from UnsplashShare icon from IconfinderRetweet icon from IconfinderHeart icon from IconfinderYouTube icon from IconfinderGet the Document ReadyStep 1Begin by creating a new Photoshop document (File > New…) using the settings…
Read More

Design an Elegant “Gratitude Log” Landing Page With Photoshop

Design
What You'll Be CreatingIn this tutorial I’ll guide you through the process of designing an elegant landing page for a fictional “gratitude log” service. We’ll start off totally from scratch, drafting the layout with Adobe Photoshop in no time. We’ll be using some basic and intermediate techniques to create this design with conversion in mind. Let’s get it started!Tutorial AssetsIn order to follow along you will need some (freely available) assets:Chillin’ in the sun photo from SkitterphotoPT Serif font from Font SquirrelPlayfair Dislay font from Font SquirrelSource Sans Pro font from Font SquirrelUser avatars from User Inter FacesGet the Document ReadyStep 1Begin by creating a new Photoshop document (File > New…) using the settings shown below. You’re free to use a canvas of whatever dimensions you prefer–the web is not…
Read More
How to Add Email Subscriptions to Your WordPress Blog

How to Add Email Subscriptions to Your WordPress Blog

Wordpress
Do you want to add email subscription to your WordPress blog? Recently, one of our users asked us what is the best way to subscribe by email option in WordPress? In this article, we will show you how to add email subscriptions to your WordPress blog and start building your email list. Why You Should Add Subscribe via Email Option to Your Site? While social media is a great way to interact with your readers, email is the most reliable and direct way of communication. By offering email subscription on your blog, you can build a steady stream of regular visitors for your site. Email subscription also gives your users yet another way to consume your content as some folks may not be on social media. See our complete guide…
Read More

Building an Instagram Based Portfolio With Bootstrap

Design
In this tutorial I am going to run through the process of creating the simple Instagram based portfolio as designed in a previous tutorial by Tomas Laurinavicius.Thomas has done a great job keeping the design simple, spacious and functional so I think it's only fair we do the same when building it. To make our lives easier we are going to rely on a few tools and libraries so let's begin by taking a look at them.Tools of the TradeThere are a few things we need to prepare before starting our build. They are:Sass Twitter Bootstrap (Sass version) Instafeed.js Modernizr First of all, you will need to get Sass up and running on your machine. The easiest way to do that is by using one of the excellent apps available to do…
Read More

Bringing Our Behance Portfolio Alive With CSS Animation

Design
In previous tutorials we've looked into harnessing the Behance API to drive our own web page, and then, using LESS, we made the whole thing look presentable. In this tutorials we're going to enhance the experience for visitors by adding a lightbox effect and some CSS animations.Lightbox and Animation Effects Many portfolio websites today employ a lightbox of some kind for their portfolio images. In this tutorial, we will apply the same to our website. The image cover will zoom-in when the users click on it, along with the other images that are in the content, so the users will be able to see each image therein more closely. Here are the tools we need to accomplish this: Magnific Popup We're going to rely on a jQuery Lightbox plugin called Magnific Popup by…
Read More

Styling Our Behance Portfolio Website Using LESS

Design
During the previous part of this series, we learned about the Behance API, using it to capture a user's portfolio pieces and display them on a web page. In this part we will style the web page, presenting the portfolio pieces in a suitably attractive way. Tools We'll be UsingTo get started, we will prepare our toolkit: Normalize We will use Normalize to make the basic element styles more consistent across different browsers and minimize the chance of unexpected results. LESS Mixins Libraries We will also be using LESS for styling our website. Whichever preprocessor you prefer, it's definitely recommendable to use them in your workflow. I'm a big fan of, instead of having to trawl the desired color in the color picker from a separate application, simply using LESS control functions such as lighten() and darken() to…
Read More

How to Use the Behance API to Build a Custom Portfolio Web Page

Design
Behance is great hub for creatives to share and show off their work and ongoing projects. Unlike Dribbble or Forrst which — as I personally see them — are predominantly populated by illustrators and UI designers, Behance encompasses a wider range of creative fields including Architecture, Motion Graphics, Automotive Design and Fashion. In addition to this, Behance also provides a set of APIs to get access to the content. During this short series, we are going to use the Behance API to build a personal portfolio website. We'll effectively pull content from Behance and display it on our own external web page. But before proceeding any further with building the website, we first need to investigate how Behance manages its content and see how the API works. Exploring Behance and the API Behance splits its content…
Read More

Using DropPages for a Super Easy Static Website

Design
What You'll Be CreatingYou probably know that Dropbox is perfect for storing data backups and sharing files, but did you know you can use it as a static site web host too? Thanks to nifty apps like DropPages, which we'll be covering here today, you can!The process behind DropPages is really quite brilliant. You simply give the DropPages app access to your Dropbox account and it creates a "My.DropPages" folder to which you'll upload your website files. Then when people visit your domain DropPages acts as an intermediary between the browser and your Dropbox account, fetching the files from your "My.DropPages" folder and serving them up as a fully functional website.As Dropbox comes with an application which syncs files on your computer with your online storage, you can just maintain your site locally and allow Dropbox to automatically…
Read More

Design a Travel Startup Landing Page Using Photoshop

Design
What You'll Be CreatingIn this tutorial I’ll be using Photoshop CS6 to design a simple, clean, landing page for a fictional traveling startup. During this process we’ll look at creating custom grids with guidelines, styling typefaces, using lots of white space and composing our website's content in a very clean and professional manner. The finished PSD file will be ready to hand over to a developer for coding up.Tutorial AssetsIn order to follow along you will need the following (freely available) assets:Bike traveler photo from UnsplashPT Serif font from Font SquirrelAller font from Font SquirrelOpen Sans font from Font SquirrelAvatars from User Inter FacesGet the Document ReadyStep 1Begin by creating a new document (File > New…) using the settings shown below.Make sure the resolution is set to 72 pixels/inchStep 2Let’s set some…
Read More