• Skip to main content

Nancy Fields Graphic Design

Personalized profitable websites for coaches and authors

  • Website
    • Authors
      • Authors Website Templates
  • About
  • Before & After
  • Blog
  • Contact
  • Website Profitability QUIZ

Design

8 Steps to Creating an Image Gallery in WordPress

May 1, 2021 by Nancy Fields Leave a Comment

The Gallery Block in WordPress 5.6 makes is super easy and FAST to build an image gallery. The time consuming parts are steps 1-3 listed below. Once you get beyond that, you won’t believe how quickly you can put together a beautiful gallery of images!

  1. Resize all your images to 1500 px wide. Height does not matter.
  2. Upload them to your WordPress Media Library
  3. Add Alt Tags (a.k.a. Alt Text) to your images
  4. Add a Gallery Block to a Post or Page
  5. Add images to Gallery Block
  6. Insert Gallery into Post or Page
  7. Choose number of image rows and columns
  8. Choose Gallery alignment: Left, Center, Right, Wide Width, or Full Width

Step-by-Step Video

See how to easily add and rearrange the images in your gallery to you get the look you want on any post or page using the free Gutenberg Gallery Block in WordPress 5.6.

Steps 4-8 listed above plus a recommendation for selling photos

Would you like to see what I did, LIVE? Click here to receive an invitation to join me LIVE on Zoom.

Why Use An Image Gallery?

If you are an artist people want to see your work! Painters, ceramists, photographers, sculptors. Upload your work to your WordPress website and create a gallery in a few minutes.

Are you an author? Upload your book covers and add a link to buy.

If you write a travel blog, or any blog post where you want to show a collection of photos, a gallery is a great way for your visitors to experience your photos in a neat and tidy grid layout.

The WordPress Gallery Block makes it easy to change the order of your images, and add or delete photos, too.

Want to Sell Your Images?

If you want to sell images, purchase a WordPress plugin, like EnviraGallery, that lets you accept payments right from your website.

The pro version of EnviraGallery creates a gallery plus integrates with WooCommerce.

I have used the EnviraGallery and it creates a beautiful gallery quickly and easily. I have not used the pro version to sell photos or artwork.

I have also worked with WooCommerce and have integrated PayPal and other payment processors to sell items through a website. The learning curve with WooCommerce can be steep. There are many steps to selling items from your website and adding payment and shipping options.

Join Me Live On 10-Minute Monday

Receive an invitation the next time I go LIVE for a FREE 10 minute training. Topics include WordPress, design, and tech challenges others have struggled with when creating a website.

You can also email me a question about your own website or tech challenge you may be facing: I may feature it.

Sign up below, and I hope to see you on my next 10-Minute Monday!

Filed Under: 10-Minute Monday, Design, WordPress Tagged With: Alt Tag, Envira Gallery, Gutenberg, step-by-step

Yellow in Your Website

January 5, 2021 by Nancy Fields Leave a Comment

Video shows yellow website designs, how to find stock photography that uses the new Pantone 2021 Colors of Year, plus other color trends for 2021.

Pantone Colors of the Year 2021 and Other Color Trends

Yellow is one of Pantone’s 2021 Colors of the Year.

2021 Pantone Colors of the Year graphic yellow on left gray on right
courtesy of Pinterest

What is Pantone?

Pantone is a color matching system for designers and printers to specify color. As a graphic designer for nearly 30 years, Pantone is my go-to color matching resource for all design projects.

Each year Pantone releases a “color of the year” based on emerging trends in fashion, home and graphic design.

Free Design and Website Training LIVE on Monday

Every wonder what color or font to use. Do you have a WordPress question? Join me LIVE on 10-Minute Monday where you can ask a question, join the discussion and meet other coaches, authors and artists. Sign up below to get an invitation.


Yellow!

Yellow adds a spark in an appealing way, but it’s also the color of ‘Caution! Danger Ahead!’ in any language.

Use yellow sparingly for best results.

This image courtesy of Pinterest

Home Interior Design Trend

Benjamin Moore® The Color Trends 2021 Palette

As we spend more time at home during the pandemic, the emerging design trend in home furnishing and paint colors are warm terracotta, and deeper earth tones.

Does it work for websites?

overwhelm warrior website home page hero image
Website design by Nancy Fields for Elsie Kerns

Yes!

Video Transcript

Welcome to 10 minute Monday. Today. I’m going to show you how to freshen up your website with the 2021 color of the year. And look at this sweet little girl in yellow, and guess what? The new color of the year, there’s actually two colors of the year. This year one they’re called Illuminating. The other is ultimate Gray. They have chosen these two colors because they feel that it represents positivity for the yellow and fortitude for the gray, with all that we have been through.

Pantone chooses their colors of the year based on fashion. You can see how it’s not over-powering with yellow, but it’s just a little shock of yellow.

Look at the sign, we’re stronger together. There was a very strong indication that yellow being positive was going to be playing  quite a prominent place in the color of the year, but you know, also it’s interesting because  it doesn’t really matter what country you’re in.

Yellow is caution, especially yellow and black together. Graphically the strongest color combinations.

A gray, black and white photo really works well with yellow.

It shows up again in this wonderful poster and how they’ve used yellow, which can seem to be a weak color or light color, but it can be used very powerfully.

Wow, look at this website and the yellow of an egg. How healthy is that?

I began to look at other websites that are using yellow successfully.

The one on the left would be considered more of an older design. There’s really strong color blocks, but we are moving into a time, and design, especially with websites that people are on the internet and on their computers so much that they were looking for a more soothing look. So you can see on the right, the little shocks of yellow, which actually are much more modern feeling.

This website uses a brighter yellow. Almost like the egg yolk yellow, which will also work. And there again, it’s interesting as you see everything in gray. And then the yellows. Yellow could get very strong, very quickly. My eye immediately is drawn to where the yellow is. And here’s another design that is also feeling modern.

 I wanted to show you a website that has been using yellow for a very long time.

 Guess whose website it is? Amy Porterfield. In fact when I first heard Pantone present on yellow and gray, and I thought Amy has been using yellow forever.

That has been her brand color for years. And the way she uses it; she’s highlights text with it, but she also finds images that have yellow in them. And it’s interesting here. Guess what last year’s Pantone color of the year was? It was this denim color, so she’s very color conscious. Also blue and yellow together are great, but there again, she has used yellow time and time again. And then here her yellow buttons.

One thing I learned about yellow at a cash register. Next time you’re checking out at a grocery or department store, be aware of what colors are around the cash register, because the color yellow, they have found, actually creates more sales. If something is yellow, people are more inclined to pick it up.

And the other thing I want to show you, say you wanted to find an image, as I did here in this sweet little girl.

I went to my favorite resource, which is Adobe stock. And I simply typed in yellow Pantone 2021. I got 722 images to choose from. So I thought, ‘Gee, if I can do that with my paid stock photography. Can I also do that with Unsplash?’ which is another one of my favorite free stocks?

Sure enough. I typed in yellow Pantone 2021 because yellow is the most prominent color. I could also type in gray, which I’ll show you. But look what came up. These are free images.

I thought it was a really nice way  to add yellow to your site in your blog pages.

You can add also then into your social media posts.

As I began to choose my topics that I’m going to be using in blog posts and on social media and LinkedIn, here are some images that I chose and that’s all from that Pantone color of the year.

So that Adobe stock that’s not free, is it?

No, it’s not. I believe it’s $19.99, so $20 a month for the Adobe stock. However,  Unsplash is a  great free resource. Just type in gray Pantone. And they spell it. Gray, G R A Y versus G R E Y. Let’s see what comes up, gray Pantone 2021.

So they’re giving you some grayes and also here’s a beautiful image. So you can find more gray images, and then you add a little bit of yellow onto the gray, as you saw earlier. That is a really nice way to bring in these two colors of the year. 

Any questions?

No, but I would comment, you know, Nancy that yellow in the chakras works with that mental level works with that third chakra.

So people are always drawn to yellow because it’s a mental level.

Oh. So it’s at the top, right?

No, it’s a third chakra. Third solar plexus. If you were printing out a flyer. When we used to do flyers before we had all this digital, we used to always print them on yellow paper, because it was more attractive.

How wonderful. I know Elsie loves to wear yellow.

Yes, I look good in yellow. Some people find that depending on your coloring, they find it can be difficult to wear. Well, Alan, you have on yellow for gold.

Well, it’s sort of yellow. Yes. Yellow.

You’ve come to the right place.

I looked down this morning, so what I was wearing.

Go forth and try to use some yellow.

Elsie also has a lot of gold in her site and she loves golds. So she’s really very current.

And the other trend.  Ihis is coming from the home interior trends and it’s very strong as well in IKEA. As people are spending more time at home, they are getting more cozy. So cozy colors. 

Also trending, and they say that a big trend that has happened in home interiors. All of the paint companies, Benjamin Moore and Sherwin Williams. They’ve all taken the shift together and they are terracotta, warm, and deeper earthy jewel tones.

So a little burst of yellow, bring a little excitement into your room.

That’s true.

Join us LIVE on Mondays for Free WordPress Training

Sign up below and receive an invite

Filed Under: 10-Minute Monday, Design, WordPress

Easily Choose Great Fonts for Your Google Docs

October 11, 2020 by Nancy Fields Leave a Comment

How To Let Google Choose Your Fonts for Print & Web letters spread out on grass that spell EASY
Video below
 

If you’re creating a Google Doc it’s easy to look like a pro because Google can choose your fonts for you! All you need to do is ask.

Ask fonts.google What’s Best

Instead of guessing what might be a good headline font to go with EB Garamond, I’m going have Google suggest one. Here’s how…

  1. Go to fonts.google.com
  2. In the Search field, type in the name of your font
  3. Hover over the type sample until you see red links on the page
  4. Click on “SEE SPECIMEN”

Google Fonts page EB Garamond font

Google Font EB Garamond specimen pageOn the Specimen page, scroll down to the bottom left to find the names of the fonts Google recommends.

The Choice is Yours

Google has given me 5 good options to pair with EB Garamond:

  1. Roboto
  2. Montserrat
  3. Lobster
  4. Play
  5. Oswald

To see an example how the fonts look together, click on each font name in Specimen page.

Choose the font combination you like best.

This video walks through the steps listed above, plus shows you how to change all your fonts all at once, within your Google Doc.

Enjoy!

Video: How To Let Google Choose Your Font

Transcript: Ask Google to Help You Find Great Font Combinations

Well, I’d like to welcome you all to 10 Minute Monday, I’m going to show you how easy it is to choose great fonts for your Google docs. I’m going to see what Google thinks is a great match for this, if I decided to use this as my body font. And for that, I’m going to fonts.google.com and I’m going to type in my font EBGaramond.

The minute I begin to type it in, in this section here up comes EBGaramond now notice that when I hover over EBGaramond, a red menu, pops up. That’s what I want because the next place I want to go is See Specimen.

After I click that it brings me to this type. It tells me all about it, but what I’m most interested in is popular pairings with EBGaramond.

They happen to have made EBGaramond as a headline. And they’re saying one popular go with is Roboto. They’ve already chosen it for me. So this font is actually called Roboto. If I wanted to see what Garamond looked like as a body. I switched the arrow out.

Here is the body. And here is Roboto. It’s made the decision for me. And they said, we also think that Montserrat would be good. They keep trying to make this into a headline font. But anyway, here is EBGaramond as a headline, and here is Montserrat as a body.

I want to see it the other way around there. There it is. And the question is, do you like that look?

It’s kind of neat looking.

Why don’t you try Lobster for headline? You definitely wouldn’t want it as type because you really can’t read it very well. You’re looking for readability. But they’re saying, for something fun, why don’t you choose lobster?

Or, there’s something called Play.

Or there’s something called Oswaldo.

I think this is so amazing because as a designer, one thing I’m supposed to know about is fonts, and what are good matchings and pairings. Google has taken, all the years of experience that I have learned about fonts and just made it super, super easy to do.

So now I would go back to my document, and I’m now going to select Lobster. Google has given me what they think goes with it anyway. They’ve already put it into my fonts drop down menu. I’m going to choose Lobster. And now I’m also going to say, ‘I want it to be my headline.’

In websites, you’ve got headline one, headline two, headline three. So I’m going to choose it for headline two.

Once I select the Lobster, and then I went to headline two, now everything that I designate as a headline two is going to be Lobster.

So it’s choosing what you want. Helping Google help you choose what it is you want for a headline and a body, and looks totally pro.

If you are viewing this video from my website or on YouTube, and you would like an invitation to my weekly free trainings, please go to my website, Fields graphic design.com, and fill out the form of the top of the page.

You’ll not only get an invitation to join me live, you’ll also receive my list of favorite free resources for great photography. And you can use that on your website or in any project. Also, when you join me live on 10 minute, Monday, you’ll be able to ask a question about the training or even your own website.

So I hope to see you on my next 10 minute, Monday.

Filed Under: 10-Minute Monday, Design Tagged With: Google Docs, Google Fonts

Facebook Header Photo Size for Desktop and Mobile

May 31, 2020 by Nancy Fields Leave a Comment

Step-By-Step Video below

Tony Rezac asked for help with his Facebook header image.

The logo looks really stretched. I upload it at their (Facebook’s) desktop recommendation of 820×312. Their mobile recommendation is 640×360. 

How do I get this to look better?

Tony Rezac, Basecamp For Men Podcast

It’s frustrating*$^(!

Tony made his Facebook header image the exact size Facebook recommended. So why did it look stretched and out of proportion?

BFM Basecamp For Men logo and before and after Facebook header

Unfortunately Facebook did not tell Tony he needed to create an image that had lots of space at the top and bottom if he wanted it to look good on both desktop and mobile.

Get the look you want!

Tony was not the first person who asked me how to get his Facebook header image to look good on desktop and mobile. It’s a common problem if you do not start out with right dimensions.

A template that makes you look pro!

Use this template by LouiseM and get it right the first time.

Facebook cover header template for desktop and mobile by Louise M

Step-by-Step: How I used LouiseM’s template

If you’d like see how I used LouiseM’s template to get the look Tony wanted, click the video below.

Join me live on my next 10-Minute Monday!

If you found this tutorial helpful, please leave a comment below, and sign up to join my free live 10-Minute Monday trainings! You’ll also receive my favorite resources for totally free images to use on your website or any project.

Filed Under: 10-Minute Monday, Design, Social Media Tagged With: Facebook header image size

Coaching Website Before & After

April 27, 2020 by Nancy Fields Leave a Comment

woman smiling working on laptop computer blog post title Website Before & After plus WordPress Training with Sue Guiher thrive4success.com

If someone builds your WordPress website for you, it can be a bit daunting to take over the reins, if you have never used WordPress, or never used the WordPress Gutenberg editor.

thrive4succcess.com is Sue Guiher’s fourth WordPress website, but she has never used the Gutenberg editor.

In this video I answer Sue’s questions on:

  • How to view the original dashboard instead of the new full screen view mode
  • How to easily change a Block, i.e. from Paragraph to Image
  • How to add a button, and how to center the button
  • How to add more space in between blocks
  • How to add a new blog post

Before & After

before and after website design thrive4success.com

10-Minute Video Training

Meet Sue Guiher and join our training.

Join Us LIVE On 10-Minute Monday

Would you like to attend my short trainings live? Fill out the form below, to receive an email invitation with a link to Zoom. You’ll also receive my guide on how to find great FREE images for your website, social media pages, or any promotion.

Hope to see you on the next 10-Minute Monday!

Filed Under: 10-Minute Monday, business, Design, WordPress

ColorGrid© — My favorite color choosing tool

March 8, 2016 by Nancy Fields Leave a Comment

Color GridGetting and choosing the right color is a mystery to most people. And a frustration, too.

The color wheel is visually captivating, but it’s too much information: warm colors, cool colors, primary, secondary, analogous, complementary, triadic — It’s enough to make your head spin.

That’s why, when website client Gail Callahan introduced me to her brilliant ColorGrid©, I became a fan and advocate.

It is the easiest tool for choosing colors that I’ve ever used. It’s also the hands-down best tool for choosing the perfect color for your opt-in button because these buttons need to stand out: they need to “pop” in order to draw your website visitor’s attention to take action. ColorGrid© is all about the “pop.”

The video below demonstrates how easy is to use.

At $7.95 plus shipping & handling it’s also a great price.




Filed Under: color, Design, Irresistible Free Offer, List Building

Discovering yellow

February 9, 2016 by Nancy Fields 2 Comments

The color yellow ‘never did anything for me’ until I opened my eyes to my own surroundings.

Discovering yellow feels like falling in love with the ‘boy next door’

wing chair yellow
ALL the women who come to my office want to sit in this chair. Men search the room for some place more suitable.

yellow tulips painting
One of my favorite reproductions hung on a soft yellow wall. It’s a pity I don’t like yellow…much.

lemons in blue glass bowl
Lemons make this glass bowl irresistible

yellow leather purse
A recent gift from my husband which makes my heart sing

yellow wing chairs in blue room
A real estate agent nearly fainted when she saw this room saying, “Ugh! If you ever intend the sell your home, this blue will have to go!” Fortunately she said the chairs could stay.

Are you surrounded by yellow?

It was such an eye-opener to discover how much yellow is in my living and work area. How about you? Are surrounded by yellow?

Filed Under: color, Design

In Search of Yellow! Part II

February 8, 2016 by Nancy Fields 6 Comments

Ever since I was old enough to ride a bicycle and join my best friend for a weekly adventure, I’ve been visiting the Smith College Botanic Garden.

Allison and I loved the steamy, earthy smelling Palm Room, and would marvel at the bananas, ‘way up there.’ Then, it was a mad dash down another tightly packed corridor to run our fingers along the sensitive plants.

“I got the last one!” Alison would triumphantly call out as the final feathery frond vanished before our very eyes.

A Passion for Color

Even though botanic gardens have always been a favorite destination point, they’ve never stirred an interest in gardening. Instead, color is my passion.

Luckily, my life’s path has lead me back to the Smith College Botanic Garden where I continue to explore how the master(s) use yellow, such as in the orchid room.

Dendrobium chrysotoxum orchid
Dendrobium chrysotoxum orchid

green olive yellow orange color palette
Dendrobium chrysotoxum inspired color palette

Yellow as an accent color

Sometimes too much yellow can be overwhelming. Many times just a hind of yellow can be the perfect solution.

color-palette-phalaenopsis-schilleriana-198x200-02.jpg
Phalaenopsis schilleriana orchid inspired palette

Phalaenopsis Schilleriana Orchid close up
Phalaenopsis schilleriana orchid

What do you like best?

Do you like yellow as a main color, or as an accent? I’d love to hear what you prefer, as well as what color you like best?

Filed Under: color, Design

  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Interim pages omitted …
  • Go to page 6
  • Go to Next Page »
  • Home
  • Contact
  • Facebook
  • LinkedIN

Copyright © 2023 · Infinity Pro on Genesis Framework · WordPress · Log in
This site is not a part of the Meta website or Meta Platforms, Inc. Additionally, This site is not endorsed by Meta in any way. Meta is a trademark of Meta Platforms, Inc.