How to Create Gorgeous Blog Posts with Gutenberg

How to Create Gorgeous Blog Posts with Gutenberg

GORGEOUS POSTS WITH GUTENBERG

If you haven’t noticed, with the latest WordPress update (WordPress 4.9.8) you now have the option to try out the brand new Gutenberg Visual Editor.  One of the most common questions I get as a custom blog designer is how to set up a blog post and use galleries, columns, etc.  Well, with the latest update, you no longer need an outside plugin to create fabulous fashion and interior posts.  

I’m going to walk you through the basics of Gutenberg so you too can get started getting gorgeous posts fast!  Watch my video below or keep scrolling for a step by step guide! 

First, make sure that you have the Gutenberg plugin activated and installed.  You can follow my tutorial here to see how to install a WordPress plugin, just search for Gutenberg in the plugin directory, activate, and install it.  

To create a new posts, in your WordPress dashboard, just go to Posts > Add New.  This will take you to Step 1.  

Step 1: Add post title

Step 2:  Select content block

Using the plus sign icon in the upper left corner of your post editor, select the type of content block you want to start with.  You can select basics like a paragraph, header text (bolder and bigger than regular text), an image,  a gallery, or columns.

You can add cool elements like a cover image which is a full-body image with text overlaid on top of it.  To do this, just click on the Cover Image block and it will be added to your page.  

Some of the other block options include the Paragraph block, which is simply plain text, a Header block which is bold header text, a gallery or a column.  I will go into more detail in my video above how to edit each block but for text, we’ll just the Paragraph block as an example.  You can adjust your text size and add a colored background by clicking on the block settings on the left-hand toolbar.

Step 3:  Add Images or Galleries

You add an image the same way as you added images in the Classic Editor, simply select the Image block from the content blocks in Step 2 above. If you want to add a link to your image, so that when someone clicks on your image it will direct them to a new website, simply upload your image, then click on the image.  Click on the pencil icon that appears, and then, in the Block tab on the right, scroll down to Link Settings. Choose “Custom URL” from the Link To dropdown, and then paste your link in the Link URL box,. 

You can easily add links to single images as well.

Add link to an image in your post:

To add a link to an image in a post, simply hover on your image in the post dashboard. On the toolbar that pops up, click on the link icon.

Then, you’ll just type or paste in the link you want your image to link to, and click the arrow to apply.

And if you want the link to open in a new tab, click on the up and down arrow and you can toggle the “Open in a New Tab” button on and off.

One great plus in the new Gutenberg Editor is the ability to add galleries.  So to add a gallery, click and add the Gallery block from the content blocks. 

Once you have uploaded all of your gallery photos, you can select the number of columns you want to use in your gallery by going to the Gallery Settings toolbar on the right.  Simply type in the number of columns you want your gallery to have here.  Above is an example of a 2 column gallery. 

You can change the number of columns and the gallery will adjust.  Above is the option of a 3 column gallery.  You can see one post drops down below.  Feel free to experiment! 

You can also add captions to your images.  Just hover your mouse over the image and type in your caption where it says “Write caption”.  Also, in the right-hand toolbar you can select the Crop Images option which will uniformly crop your images.  You can add a link to the caption however by highlighting the caption, and clicking on the link icon to add your caption:

Add Links to Gallery Images:

If you want to add links to your galleries, you can install the Gallery Custom Links plugin here.

To have your image link to another website, simply click on the image in your post editor, and click on the pencil icon that pops up.

Simply click on the image from your gallery that you want to add a link to. Then, in the right hand panel, paste your link URL and you can also choose if you want the link to open in a new window. Click the blue Update Gallery button to save.

Below is an example of a 3 column gallery with 4 images in action!

Step 4:  Add columns

The columns feature in Gutenberg is still in the beta, or experimental, stage so it’s not that robust right now, but you can add two columns by clicking on the plus sign in upper left corner (add content block) and scrolling down to Layout Elements.  Just click the columns element and 2 columns will be added to your page.  Then click the plus sign to add either text or an image to your column. 

Step 5:  Add link to text or Shop the Look widget

This is nothing new in Gutenberg but most bloggers want to be able to add a link to text to link back to other sites or photo sources.  To do this, simply highlight the text you want to add a link to, and click the little link icon that pops up.  You can paste in your link and click apply.  You can also specify if you want the link to open in a new window or now. 

You may also want to add a Shop the Look widget to your blog post.  To learn how to create a Shop the Look widget, you can view my post here.  To add your Shop the Look widget to your blog post, just click in the upper left corner of the post editor to add a Custom HTML block.  And then paste your Shop the Look code into the HTML box.  

Step 6:  Set your post category

Same as in the Classic Editor, you can set a category or categories for your post.  Make sure you are on the Document tab in the post editor toolbar on the right side of the page.  Click to expand and select your categories.

You can also further categorize your blog post by adding tags.  Tags narrow down your categories even more.  So for example if you had a post categorized with “Holidays” you could add the tag “Gift Wrap” to a post about gift wrapping.  Just type in your tag in the Tags box and click Enter to add a new tag.  

Step 7: Add Featured Image

Just like in the Classic Editor, you will want to add a Featured Image to your post.  This is the image that will show up in your homepage and archives excerpts as well as post sliders if you have one.  Make sure you are on the Document tab in the post editor toolbar on the right side of the page.  And just click to upload your Featured Image. 

And that’s it!  Keep in mind that this is a brand-new plugin and thus in the experimental, or beta stage still.  I cannot guarantee how the posts will translate if you are using Mailchimp or Feedburner, etc. to deliver blog posts via email, and in other formats.  This is just meant to introduce you to Gutenberg and what it can do.  Subscribe to my Youtube channel for updates and of course follow my blog as I will be keeping up with updates to Gutenberg and new features that you can add! 

*Update:  Currently, Gutenberg is not compatible with Easy Recipe and other recipe plugins.  Easy Recipe states that they will be working on a plugin update compatible with Gutenberg so keep an eye out for that and update when prompted! 

How to Boost Your Domain Authority

How to Boost Your Domain Authority

The Moz Component

The first thing you want to understand when it comes to Domain Authority, or DA, is how this new means of classifying websites is calculated. Certainly there are many efforts to ensure a certain neutrality defines DA, but you may find this isn’t always the case. There’s an old quote by Robert A. Heinlein that sums it up best: “Certainly the game is rigged. Don’t let that stop you. If you don’t bet you can’t win.”

If you learn the rules, you’ll understand how to place your digital “bet”, as it were. With DA, a given website is scored on a 1 to 100 scale. This is done through an algorithm that has been put together by Moz. If you’re unfamiliar, Moz is a Software as a Service (SaaS) organization which is centered in Seattle. Moz has developed SEO software since about 2008.

How Moz Scores Sites

Through the years, Moz has honed their algorithm(s); but since it is an algorithm, there are certain areas of visibility which will be harder or easier to acquire. For example, if you’ve got a low Moz score of between 20 and 30, you’ll have an easier time getting a better score than if you’re around 70 or 80. Most sites average between 40 and 50. Your goal is to, at the very least, get above a score of 60.

What determines score is a suite of defining characteristics, the most important of which are linking root domains, MozRank, MozTrust, quality content, social signals, and search engine friendliness.

Linking root domains basically means you’ve got a lot of sites who have backlinks to yours—the more, the better. MozRank determines just how strong said external links are. MozTrust defines the quality of those external links.

Quality content is what it sounds like: content that is qualitative; more on that shortly. Social signals are shares, likes, and commentary pertaining to your content in a positive way. Lastly, search engine friendliness specifically refers to SEO, and how that affects your site’s visibility. Basically, all of these factors fall under the shadow of SEO.

The SEO Component

SEO, or Search Engine Optimization, is a central part of online visibility today. For SEO to be effective, your website must have certain qualities. SEO techniques deliver visible ROI which can be measured, allowing for continuous optimization.

Something else you’re able to get from SEO is analytic data that allows you to determine where operations are successful, and where they aren’t. Some videos and articles are more likely to be successful than others. Determining what works best for you is best done by successfully crunching the numbers.

Such analytic data can also help you to determine where common errors are, and can help you to set them right for greatest online effectiveness. So what does good SEO look like? Software and technology marketing agency in London, UK says it’s going to have the right keywords, and requisite quality. Content has to have information useful to the user, and likely to be shared.

You want articles, or blog posts, which are uploaded on a daily basis. Each one should have information that helps readers inform their actions. Each should have links to information which isn’t immediately evident. It should have a visual element as well, and you’ll likely find some level of entertainment increases value for readers.

The Bigger Picture

But content shouldn’t stop at blogs. You want videos with links in the description as well. And it goes without saying that both blogs and videos shouldn’t have that “salesy” quality. They should feel justified not by the businesses they represent, but by the information they present.

 

Now where the “graded” or “slanted” quality of Moz comes is in terms of trending ideology. Because of the social component defining a site’s popularity, your score will be likely to fluctuate based on the values your company espouses. This isn’t something that is necessarily “fair”. It is directed by the market.

There are two other Heinlein quotes which demonstrate why such an ethic is fundamental to effective operations. One is: “Democracy is based on the assumption that a million men are wiser than one man. How’s that again? I missed something.” The contradictory quote is: “Autocracy is based on the assumption that one man is wiser than a million men. Let’s play that over again, too. Who decides?”

When it comes to algorithms, algorithms are designed to overcome the democratic and autocratic. Truly, a Moz score ends up being an indicator of trends, rather than of concrete, axiomatic reality. But trends revolve around axioms. So you can Moz data to identify where the hidden axiom is, and design the most “evergreen”—or continuously effective—online solutions over time.

How to Transfer Subscribers from Feedburner to Mailchimp

How to Transfer Subscribers from Feedburner to Mailchimp


So I get a lot of requests to design WordPress blogs for people who are transferring over from Blogger.  While I don’t do transfers myself (just not my area of expertise and there’s a lot that can go wrong), I know that one of the big issues clients run into is email subscriptions.  Blogger by default uses Feedburner to send out posts by email and part of the blog transfer is transferring the subscriptions, but what if you don’t want to use Feedburner anymore?  A lot of people prefer to use Mailchimp because there are more areas for customization on it and it offers a lot of extra services that Feedburner does not.  So how do you transfer your Feedburner subscribers to Mailchimp?  It’s not very hard to do and here are the steps you can take.

Step 1:
This tutorial assumes that you have already set up and configured your Mailchimp account.  If you have not already done this, you can follow my tutorial on How to Send Out Blog Posts via Mailchimp here.  Now, go to www.feedburner.com.  You should be already logged into your Google account that you use for Blogger.  When you get to the homepage, just click on the name of your feed.  This will take you to a page that looks like this:

Under Feed Stats on the left hand column, click on Subscribers.

Step 2:

Then under Email Subscription Services you will see a link called Feedburner Email Subscriptions.  Click this and a link will appear underneath that says Manage Your Email Subscriber List.  Click that link.

Step 3:
Now you will see a list of all of your email subscribers.  Before I export the subscribers, I personally went through and deleted all Unverified subscribers.  This means that they did not complete the Feedburner optin when signing up for emails.  I’m not positive if inactive subscribers can be imported into Mailchimp but just to be on the safe side so that people who do not want emails did not get them, I deleted the inactive subscribers.

To do this, just click on the X next to Unverified subscribers.  Down at the bottom of the list hit the Save button when you are done.

Step 4:

Now, you just want to export the list of subscriber email addresses.  So right above your list, click on Export: CSV.  Dependent on how your computer is set up, this will automatically download the list to your computer.  Save this file.

Step 5:

Now, since we do not want duplicate emails going out since you will be sending out posts via email in Mailchimp, simply scroll down to the bottom of your email list (on the same page as above) and click the Deactivate button.  This will not delete your email subscribers but just deactivate the subscription service.

Step 6:
Now log into your Mailchimp account.

In the menu at the top, click on Lists.  This will bring you to the list that you have created (remember if you have not set up a campaign or list yet in Mailchimp, you can follow my tutorial here.  Then click on the arrow next to the Stats dropdown.  In the dropdown menu, click on Import.

Step 7:

When choosing where to import contacts, pick CSV or tab-delimited text file.  Then click the blue Next button in the bottom right corner.

Step 8:
Now, just click on the Browse button to upload the CSV file that you downloaded in Step 4 and upload it.

Step 9:

Now, you might get a column like this one, this just means that the form fields on your .csv file do not match the form fields from Mailchimp.  You can just skip these as they are for internal use only.

Step 10:

Now just click the blue Import button in the lower right hand corner of the screen.  And that’s it!  Your Feedburner subscribers will be imported into Mailchimp and you can start sending posts by email through Mailchimp.  Every Mailchimp email has an unsubscribe button in the footer so subscribers can always unsubscribe easily.  And with Mailchimp, you can send out newsletters and other communication outside of just blog posts, which you can’t do with just Feedburner so you have a lot more flexibility.  Have fun, and email responsibly, no one likes a spammer!

How to Add Shop the Look Widget to Your Blog Homepage

How to Add Shop the Look Widget to Your Blog Homepage

Hi there!  One of my most popular tutorials to date is How to Add a Shop the Look widget to your blog.  Shop the Look is an affiliate program offered by Shopstyle Collective where you can add those cute Shop the Look widgets to your blog post so readers can browse and purchase items featured in your post.  Note:  This will only work on self-hosted WordPress, or WordPress.org, it will not work on WordPress.com blogs.  You can watch my video here or follow the steps outlined below:

I’ve already created a tutorial to show you how to set up the Shop the Look widget in the footer of your blog posts, but what if you want to show the widget below a post excerpt on your homepage, like so:

This tutorial assumes that you already have followed the original tutorial to set up your Shopstyle account and create a widget from here.  It also assumes that you have a widgetized homepage.  What is a widgetized homepage?  Blogs by default show the latest posts on the homepage, in a feed.  On a widgetized homepage, which most modern blog themes incorporate, you instead would insert a widget that shows your latest blog posts rather than just the feed.  This gives you much more freedom over the homepage layout.  You can tell if you have a widgetized homepage by going to Settings > Reading in your Dashboard and if your Front Page settings are set to show a Static Page, you most likely have a widgetized homepage.

Step 1:

We’ll start at Step 7 from the original Shop the Look tutorial where I show you how to get your widget code.  Keep this window open.

Step 2:

Now go to Appearance > Widgets.  You will need to have some familiarity with your blog layout to know which widget area to use for this step.  If this whole thing is confusing to you, check out my Custom Blog Design service, sometimes its totally worth it in the long run to have your blog designed by a professional (and it will look super cute too).  But for the purpose of this tutorial, I am using one of my custom themes which has a widget for the Home Top and Home Middle section of the homepage.  I have used the Genesis Featured Posts Combo widget to display my latest blog post at the top of the homepage.  So I will want my Shop the Look widget to go right below the Featured Posts widget.

Just drag the Custom HTML widget (default on all WordPress themes) into the widget area where you want your Shop the Look Widget to appear.

Step 2:

Now, add a title to your widget.  Something like “Shop This Look” or “Shop This Outfit”, whatever works for you.  Then, go back up to Step 1 and paste the widget code you got from Shopstyle into the Custom HTML widget.  Click save.

The whole idea behind this post is that you would be doing an OOTD post, and you would want to show shoppable, affiliate links that coordinate with your outfit below the post on the homepage.  So all you have to do is add the Shopstyle code to the Custom HTML widget, save, and your Shop the Look widget will appear on the homepage of your blog.

Step 3:

Now, what if you don’t post an OOTD or fashion post every day, and you don’t always necessarily want the Shop the Look widget to always show up on your homepage?  Easy.  When you don’t want to use it, just drag it back down to the Inactive Widgets section of your widget page.  You can do this with any widget you don’t want to use, dragging it into the Inactive Widgets section will keep the widget settings, but will not show up in any widget area.  Easy!

Now, when you want to use the widget again, just drag it back into the widget area and it will show up again.  And of course, you won’t be posting the SAME Shopstyle widget every time you post, so all you have to do is to create a new widget in Shopstyle that matches your new blog post, delete out the original code and replace it with the new code.  You can do this repeatedly, no worries.

Once again, dependent on the setup of your homepage, this should be your end result:

But keep in mind, you can use this tutorial to put your Shop the Look widget anywhere on your homepage that has a widget area:  the sidebar, the footer, above the header, wherever your blog has widgets, you can use this tutorial.

Once again, people get confused about widgets and widgetized homepages, and if you don’t have time to fool with it all or think its too complicated, hit me up!  Our Custom Blog Design package is a fab and affordable resource for bloggers who are just starting out, we will get you set up so you can start posting on a beautiful new blog!

Custom Blog Design: Understanding Hosting and Domains

Custom Blog Design: Understanding Hosting and Domains


As a custom blog designer, I design blogs and websites for clients who want to make an impression on the web.  Be it a personal blog for sharing fashion or food (or whatever!) or a site to promote and grow your business, everyone who’s anyone has a blog or website these days (not to mention a social media account!).  No one expects you to fully understand the back end of blog and website structure, in fact, that’s one reason why you would hire a blog designer.  However, it helps to grasp the basics of domain registration and hosting, so I wanted to offer a quick tutorial on what each of these things are, and how they work.

At Little Blue Deer, we request that each client purchase their own hosting and domain name.  I can’t tell you the number of times a client has come to me with their blog or website being held “hostage” by the previous site designer, meaning that the designer won’t share the login info for their hosting so they really can’t make any big changes to their site or blog.  At Little Blue Deer, you own everything!  So you are always in control and can do whatever you want with your site or blog.

The first thing most people do when they decide to start a website or blog is to purchase a domain name.  This is a must do.  You’ve seen the commercials for Godaddy, so a lot of people choose Godaddy because they are so popular, and this is perfectly fine, there’s no real degree of quality with domain registration like there is with hosting, so you can register your domain where you wish.  However, I always prefer to have the domain and the hosting with the same provider.

What is a domain name?  A domain name is www.yoursite.com or www.yourblog.com.  My domain is www.littlebluedeerdesign.com.  A domain is like the street address where your blog or site is going to live.  So, if you were to register your domain at Godaddy, you would just go to www.godaddy.com and search for and then register your domain:

Domain registration runs about $15 per year.  You can also then have email addresses set up using your domain name (cost and setup varies per your domain registrar).  And you own your street address on the web!  There aren’t a ton of options for purchasing a domain name minus extensions like .net, .co or .org, but you will have the option to select Domain Privacy upon checkout.  This means that when someone searches for your domain in a site like whois.com, they will not be able to see your name and address. This also cuts down on spam emails when you register your new domain which can be a problem.

So most people think that once they have their domain name registered, they are set! Not the case. In order to run a self-hosted WordPress, or wordpress.org website you can read about the difference between WordPress.com and WordPress.org here, you also need to have hosting.

What is hosting? Hosting is like the actual plot of land, or house, where your blog or website lives. A WordPress blog or website is just a collection of files: css, php, html and javascript. They all come together to render your WordPress site. So you need a place, in the cloud, for the files that make your site run to live. For example, this is my website, on the front end:

And this is my website, a self-hosted WordPress site, on the back end, after I log into my WordPress dashboard:

So that’s it, right? I have WordPress and I don’t need to worry about it. Well, no. This is the front-end rendering of my website. The actual files that make this site happen live with my site host. You can choose from many site hosts, some of the most popular are Hostgator, Godaddy and Bluehost (my personal favorite and the one that I use most myself, Bluehost offers a free SSL certificate and I have
a quick and easy tutorial on how to set up your Bluehost account here. So, this is a screenshot of what the REAL WordPress installation looks like, in your actual site or blog host:

Can you see that it’s a collection of files and folders? As explained above, what makes WordPress render on the front end of things is this group of files, that include all of the executable files that make your site run, as well as all of your content. So these files need a place to live. This is what hosting is.

So to run a WordPress website or blog, you just need a domain, or the address where your blog or site will live (eg. your street name or house number) and then you need the actual land, or real estate, where you can build your house (the hosting).

Sometimes things seem really mysterious I know but there’s not a lot to domains and hosting at all when you think of it like this. Sometimes people get confused if they are coming from Blogger or WordPress.com, which provides free hosting and does not give you file access, which is why there are often restrictions to blogging at Blogger or WordPress. You also can’t access your files of course. This is why most people choose self-hosted WordPress: you own your domain, you own your hosting, you own your site!

Another note: while it is often easier to have your domain registration and hosting at the same company, it is not imperative. So if your domain is registered at Godaddy but you want to use Bluehost to host your blog or website, all you have to do is to point your domain’s nameservers to your site host of choice. This is a quick and simple one step process and if Little Blue Deer is your site or web designer we are delighted to take care of it for you.

This is just a brief overview if you have any questions on how it all works feel free to check out my video above or leave me a comment!

How to Create Instagram Graphics Using Picmonkey

How to Create Instagram Graphics Using Picmonkey

Do you love Instagram?  Who doesn’t?!  Do you want to learn to create cute graphics and text overlays so that your Instagram feed looks more chic and professional?  We all know about photo editing in the Instagram app, but Picmonkey.com offers really cute and easy ways to customize photos or create graphics for your blog, Pinterest, or Instagram.  You can watch my video or follow along step by step by scrolling down.

Step 1:

Go to Picmonkey.com.  You can start a free trial, but to save your photo keep in mind you will need at least a free trial or subscription to Picmonkey.  Click on the Edit box and then select Computer to upload the original photo you want to use.

Step 2:

Once you have clicked the Rectangle icon (you can also choose a square or circle or any other shape you wish), it will appear over your photo.  You can drag it to resize and move into place.  On the Overlay panel, set Color 1 (the shape outline) to No Color (unless you want a border around the box, then you can pick a color).  Set Color 2 to #FFFFFF (the hex color for white).  You can choose any colors that you wish here.  Then set the Fade to around 25% if you want the box to be transparent over the photo.

Step 3:

Now you can add text over the transparent box.  Start by clicking on the Tt icon on the left hand panel.  Then click the Add Text button.  A text box will appear over your photo.  You can choose to use your own fonts (the fonts already installed on your computer) or use Picmonkey’s default fonts.  Just like in an email or Microsoft Word, you just need to place your cursor over the text and highlight it, and then you can use the box on the right to choose the color, size, style and effects of the text you just added.

Step 4:

You can add a new line of text by repeating the above steps:  Click on the Tt icon and then click the Add Text button.  A new block of text will appear and you can use the Text panel on the right to style your text.  Make sure that you are on the correct text layer in the Layers panel.  You can switch back and forth between layers to edit each line of text.

Step 5:

If you want to go a step further, you can click on the Magic Wand icon in the left panel and choose a photo filter effect similar to Instagram.  You can change the intensity of the effect using the Fade slider, and then click Apply to apply your changes.  The effects panel is fun and easy, so feel free to play around with it!  Also, you can get really creative with Picmonkey and add sorts of other graphics and effects.

Step 6:

To save your image just click on the Export button in the top panel.

Step 7:

You can choose the quality and size of your photo and then click the green Export to Computer button to save your image to your computer.  You must have at least a Free Trial account to save your photo so be sure to sign up and create an account or you won’t be able to save.

Picmonkey has many cool options for adding text, graphics and effects to photos!  If you want to add custom graphics to your photo, you can check out my tutorial, How to Add a Watermark in Picmonkey.  You can use this tutorial to add other custom graphics to your photo besides just a watermark, so feel free to play around with it and get creative, and if you have any other questions, please leave a comment below!


NO HUSTLE, JUST GORGEOUS INSPIRATION ON THE DAILY!