10 Divi Child Themes for Musicians

One of the best ways a musician can promote their music, talents, and services is with a sharp website. Divi is a great choice for musicians and fortunately there are several child themes available to help you get started. In this article we’ll take a look at 10 Divi child themes for musicians.

Musicians have a variety of needs for their websites, which can include any combination of a shop to sell their albums or merchandise, an event calendar to show upcoming events, information about the musician and the type of work they do, a contact form, booking information for lessons, audio samples, and links to videos or CD’s.

Many of these child themes are designed specifically for those is the music industry and provide those specific features listed above. Some are all-purpose child themes that lend themselves well for use by musicians. As a bonus I’ve also included a layout pack in this list for those who just want to add a layout to their current child theme. The child themes are in no particular order.

1. Solataire

Solataire includes a unique custom header that shows the menu as center inline on desktop and default on mobile, a custom audio player so visitors can hear samples, a tour page with links to buy tickets, and WooCommerce integration so you can sell your music and merchandise from the styled shop page or modules. It includes large typography that matches the styling and has a modern look. It’s a great choice for anyone in the music industry.

Price: $60 | More Information

2. JOSEFIN BAND

JOSEFIN BAND is a homepage for the JOSEFIN theme with lots of page layouts and custom modules, and includes the Page Builder Everywhere plugin. The band homepage displays a full-screen image with link to tour dates. Scrolling reveals lots of double-column sections, full-width sections with parallax, number counters, a styled blog, styled contact form, and more. It includes WooCommerce integration.

Price: $75 – $145 | More Information

3. DJ 1 Page

DJ 1 Page is a one-page design with sections for music, videos, events, photos, and a contact form. It includes a right-side sliding menu, CSS animations, CSS section separators, an events countdown, and links to services such as Mixcloud, Soundcloud, Youtube, etc. It provides a bold look through its black and yellow color scheme.

Price: $75 | More Information

4. NicePuccino One Page

NicePuccino One Page is a one-page design with the idea of promoting a person. It uses large typography, dark gray and bright green color schemes, and lots of custom elements. It includes a full-width image gallery, styled toggles, multi-layout CTA’s, styled person modules, a three-column testimonial section in parallax, and more.

Price: $49.90 | More Information

5. DJ

DJ is a single-column design with a focus on events. It displays a full-screen image with social links, event information, and a booking CTA. A SoundCloud section displays in two columns using icons for the audio player. Services are displayed in multiple layouts with various overlays and colors. It includes a styled email form, pricing tables, and contact info. The purple and black color scheme fits the club atmosphere perfectly.

Price: $45 | More Information

6. Divi Ultimate Bands

Divi Ultimate Bands is a homepage for the Divi Ultimate theme. It displays a full-screen image with CTA’s, embedded video sections, a project slider to display albums, styled testimonial sections using an overlay in parallax, styled audio players with album covers, an events calendar with ticket CTA, and a styled blog section. The bold red and black colors look great.

Price: $245 | More Information

7. DJ – Sono

DJ – Sono was designed for DJ’s and musicians with a focus on live events. It includes a full-screen header with CTA and overlay that’s great for your video backgrounds. Display your equipment and services in the three-column about section. Testimonials are displayed over a background. It also includes styled Services and Blog pages with styled sidebars to match.

Price: Free | More Information

8. Eventus

Eventus was designed for any kind of events business and works great for musicians to display their events and musical services. It includes full-width backgrounds in parallax, overlapping blocks that label the sections, styled overlays including hover animated overlays, 2-column and 3-column blog layouts, styled email and contact forms, and a full-width gallery. The fancy fonts match the theme’s style.

Price: $54 | More Information

9. Diamond

Diamond is an all-purpose child theme with lots of little animations that’s perfect for a musician who wants a website with a minimal but unique design. It includes 11 page layouts and 78 library items. The person modules show off you or your band members and the project modules are great for your services and albums. Blog posts and sidebars are styled to match.

Price: $97 | More Information

10. Make a Splash

Make a Splash is an all-purpose child theme with several industries in mind including creatives such as artists and musicians to display their albums, events, and music services. It includes an overlapping logo, angled edges, fly-in animation, custom page headers, etc., and lots of custom pages. It adds a new feature called Simple Color Reset which makes it easy to change your primary colors. Images are included.

Price: $175 | More Information

Layout Pack: Music Studio Layout Pack

Music Studio Layout Pack is a great choice for those that don’t want to use a pre-made child theme for their music website. It comes with 5 Page Layouts – Home, The studio, Musicians, Equipment, and Contact. The pages include section separators and several styled modules. The images are included and are royalty free.

Price: Free | More Information

Final Thoughts

If you’re interested in building a website for musicians these 10 Divi child themes for musicians are a great place to start. They have a variety of features including integrated music players and styled audio modules to play audio snippets, styled shop modules to sell your music and merchandise, event pages to inform your fans of upcoming events, pricing tables for your music services, and lots more.

I’ve been a guitar player since the early 80’s and I’d like to start a website about guitar… and I know just which child theme on this list I’ll use.

We want to hear from you. What’s your favorite Divi child theme for musicians from this list? Let us know in the comments below.

Featured Image via Visual Generation / shutterstock.com

The post 10 Divi Child Themes for Musicians appeared first on Elegant Themes Blog.

Powered by WPeMatico

Typography for Web Designers: 5 Things You Need to Know

Since 95% of the information on the web is written language, a good web designer needs to have a grasp of typography: the ancient discipline of shaping text for human consumption. In this post, we’ll discuss the essential elements of typography for web designers.

1. The Terminology of Typography

typography for web designers

This great graphic and post from Designer Insights on the Anatomy of Typography offers a great visual and thorough list of typography terminology.

As a web designer, you’ll want to familiarize yourself with these typographic terms:

Term Description
Typeface A collection of letters, numbers, punctuation and other symbols used to set text. A typeface comprises a family of fonts.
Font Font refers to the physical embodiment of a typeface (such as a computer file), while typeface refers to the design (the way it looks). A font is a specific weight or style within a typeface family, such as Garamond Italic.
Serif A short line or stroke attached to or extending from the open ends of a letterform; also refers to the general category of typefaces that have been designed with this feature. Serif and sans serif are the two most common typeface classifications. Serif typefaces have a more traditional look.
Sans Serif / Sans Literally “without line”; the general category of typefaces designed without serifs. Sans serif typefaces became popularly in the late 19th century and are considered to be more modern.
Character An individual symbol of the full character set that makes up a typeface; may take the form of a letter, number, punctuation mark, etc.
Leading / Line Spacing The vertical spacing between lines of text (from baseline to baseline). Leading refers to the space between lines of type in a body of text, and it plays a major role in providing readability.
Kerning The horizontal spacing between two consecutive characters. Kerning refers to making adjustments to the spacing between individual characters within a word.
Tracking / Letter Spacing The uniform amount of spacing between characters in a complete section of text (sentence, line, paragraph, page, etc.).
Glyph A non-standard (sometimes decorative) variation of a character that comes as an extra option with a font file. This includes all available letters, numbers and special characters.
Weight The relative darkness of the characters of a typeface or font, resulting from the relative thickness of the strokes. Expressed as light, bold, extrabold, etc.
Case Letter case (or just case) is the distinction between the letters that are in larger upper case (also uppercase, capital letters, capitals, caps, large letters) and smaller lower case (also lowercase, small letters).
Italic A slanted version of a typeface (slants from left to right); a true italic is uniquely designed, more than a tilted version of the upright (a.k.a. “roman”) typeface.
Baseline The imaginary line on which most letters and other characters sit.

Typeface vs. Font – Is there a difference?

The first two terms in the chart above are often used interchangeably in modern design. Back in the days of printing presses, fonts and typefaces were two different things — the typeface was the specific design of the letters, while the font referred to the particular size or style of that typeface.

  • A typeface is a typographical design like Arial, Helvetica, and Times New Roman
  • A font is a specific variation of a typeface like Arial bold at 12 points.
  • You might think of a typeface as a folder full of fonts you download from a font site, and the fonts as the individual files within that folder
  • These days, the terms are generally interchangeable and only real typography nerds worry about the distinction.

2. Typography in the Wild

If you didn’t study traditional graphic design, it’s a good idea to familiarize yourself with real-world typography implementation. Print typography can still inspire web typography, so study posters, magazines, book covers, billboards and ads. Check out books from your local library on typography design.

As for typography in web design, there are tons of examples of good–and very bad–typography design.

Examples of Good Typography:

Examples of Bad Typography (Prepare Your Eyes)

pennyjuice.com
LingsCars.com
http://art.yale.edu/
monkzone.com/

3. Choosing the Right Fonts for Your Web Design Project

When it comes to choosing fonts for a new web design project, it’s helpful to familiarize yourself with the basic types of fonts.

Serif

  • Examples: Times New Roman, Garamond, Bodoni
  • A more formal, traditional personality.
  • Letters with serifs are easier to read in print or at larger sizes on screen.
  • Serifs can be hard to read on screen at smaller font sizes

Sans Serif

  • Examples: Helvetica, Verdana, Tahoma, Open Sans
  • A more modern, friendly personality.
  • Sans serif fonts are easier to read on screen at smaller sizes.
  • Pronounced “sahns” like bonds, not like bands.

Display

  • Examples: Lobster, Bauhaus, Ransom
  • Nontraditional designs that are used for impact
  • Good for titles and headings in certain cases
  • Should never be used as body text

Handwriting

  • Examples: Brush Script, Comic Sans, French Script
  • Simulate handwritten letters
  • Like display fonts, good for titles and headings but not smaller body text
  • Avoid using Handwriting fonts in ALL CAPS

Monospace

  • Examples: Courier, Source Code, Pro
  • All letters are of equal width
  • Present a serious tone that can be effective in certain cases

X-Height: An Important Font Characteristic

  • X-height is the height of the “x” in comparison to the Cap Height of a font
  • In general, a larger x-height results in a more readable font, especially at smaller font sizes; however, this is not always the case.

The Power of Google Fonts

  • Google Fonts is a powerful free resource for designers
  • Use the sorting feature to discover what fonts are popular and trending. These fonts are being used for a reason.
  • HINT: Download Google fonts locally and start using them in printed documents to get used to how they look and work together
  • ANOTHER HINT: The more styles your font offers, the more options you have for creative typography.
  • YET ANOTHER HINT: Be mindful of the download size as you embed fonts into your CSS. Use only the fonts you need. Don’t go nuts!

Font Pairings

There’s a general rule of thumb for font pairing:

  • Choose one font for headings and titles to set the personality.
  • Choose a second font for body text that will create stability.
  • Combine fonts from the same family.
  • HINT: for those who are design-challenged, fonts from the same family are designed to work nicely together. You can use these pairings without concern…
    • Roboto and Roboto Slab
    • Open Sans and Open Sans Condensed
    • Droid Serif and Droid Sans
    • Source Serif Pro and Source Sans Pro

Some Sample Font Combinations + Resources

4. The CSS of Typography

In web design, according to this great guide, Learn to Code HTML & CSS:

HTML, or HyperText Markup Language, gives content structure and meaning by defining that content as, for example, headings, paragraphs, or images. CSS, or Cascading Style Sheets, is a presentation language created to style the appearance of content—using, for example, fonts or colors.

As a web designer, you’ll want to familiarize yourself with how to utilize CSS to apply typographic styles. Here are a few CSS tips:

Font-Family

  • Example: p {font-family:"Times New Roman",Georgia,Serif;}
  • There are two types of font family names:
    • family-name – The name of a font-family, like “times”, “courier”, “arial”, etc.
    • generic-family – The name of a generic-family, like “serif”, “sans-serif”, “cursive”, “monospace”.
  • Begin with the specific font and always end with a generic family in case the specific font is not available.
    • Separate each value with a comma.
    • More info on the CSS font-family Property
    • HINT: It is good practice to include your preferred font, followed by a common family and then a fall back to serif or sans serif.

Font-Size

Examples:

h1 {font-size: x-large;}
h1 {font-size: 250%;}
h1 {font-size: 2.5em;}
h1 {font-size: 2.5rem;}
h1 {font-size: 32px;}

Values:

  • Sizes: xx-small, x-small, small, medium, large, x-large, xx-large
  • Percentage: Sets the font-size to a percent of the parent element
  • Length: Set the font-size to a fixed size in cm, px, em, rem
  • Inherit: Uses the font-size of the parent element
  • More info: CSS font-size Property

Pixels vs Ems vs Rems

  • Pixels, Ems and Rems are all units of measure to define the size of an
    element on a web page.
  • Pixels are an absolute measure of length.
  • Ems are relative to the font size of the parent element.
    • Default font size is 16px
    • A div has a size of 1.5em, fonts will appear at 24px.
    • An h1 in the div has a size of 2em, it appears at 48px.
  • Rems are relative to the font-size of the html element
    • Default font size is 16px
    • A div has a size of 1.5em, fonts will appear at 24px.
    • An h1 in the div has a size of 2rem, it appears at 32px because the h1 is relative to the default font size and ignores the sizes applied to the container elements.
  • HINT: In these days of responsive design and accessibility issues, it’s best to design with ems and rems and not pixels.
  • ANOTHER HINT: depending on the x-height of your chosen typeface, you may want to adjust the font-size on the body or html selector.
    • Lato, for example, is an excellent font, but can be hard to read at the standard 16px = 1em for body text.

Font-Weight

Examples:

p {font-weight:normal;}
h1 {font-weight:bold;}
h1 {font-weight:900;}

Values:

  • Normal: the standard weight of the font (default)
  • Bold: thick characters
  • Bolder: thicker characters
  • Lighter: lighter characters
  • Numeric Value:
    • Sets the font-weight precisely from 100-900
    • Many Google fonts offer precise weights that can be used
      • 300 weight is “Light”
      • 400 weight is “Normal”
      • 600-700 weight is “bold”
      • 900 weight is “black”
  • Inherit: uses the font-weight of the previous element
  • More info: CSS font-weight Property
  • HINT: Use numeric values for font-weight wherever possible rather than “bold.” This will give you more control over the weight of the font.

Font-Style

Examples:

p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}
  • Values:
    • Normal: Uses the standard version of the font (default)
    • Italic: Uses the italic version of the font
    • Oblique: Uses the oblique version of the font
    • Inherit: Uses the font-style of the parent element
  • More info: CSS font-style Property
  • HINT: Oblique is an angled version of the normal font. It’s usually pretty ugly. Italic is a completely
    different font.
  • ANOTHER HINT: In many cases, Google fonts will automatically show the italic version when set to oblique. But some will not.

Line-Height

  • Similar to leading in typesetting
  • HINT: leading is pronounced lead like bed.
    • Examples:
      p {line-height: 1.5em;}
      p {line-height: 150%;}
      p {line-height: 2;}
    • Values:
      • Normal: (default) Normal line height based on the size of the font
      • Number: A number that will be multiplied with the normal height
      • Length: A fixed height in px, pt, cm, em, etc.
      • Percentage: Line-height as percent of the font-size.
      • Inherit: Uses the line-height of the current element.
  • More info: CSS line-height Property
  • HINT: depending on your font, increasing line height to around 1.75 can dramatically improve the readability of body text.

Letter-Spacing

  • Similar to kerning and tracking in typesetting
  • Examples:
    h1 {letter-spacing: 1px;}
    h2 {letter-spacing: -1px;}
  • Values
    • Normal: (Default) No extra spacing between characters.
    • Length: Makes an adjustment to the space between characters (negative values are allowed)
  • Inherit: Uses the letter-spacing value of the parent element.
  • CSS letter-spacing Property
  • HINT: increasing or decreasing spacing by just 1px can produce noticeably distinct typography.
  • ANOTHER HINT: Larger letter spacing of 2-3px can make buttons and headers really stand out.

Text-Transform

  • Examples:
    h1 {text-transform:uppercase;}
    h2 {text-transform:capitalize;}
    p {text-transform:lowercase;}
  • Values:
    • None: The text displays as it is normally
    • Capitalize: Makes the first letter of each word uppercase
    • Uppercase: Makes all characters uppercase
    • Lowercase: Makes all characters lowercase
    • Inherit: Uses the text-transform value of the parent element
    • CSS text-transform Property
    • HINT: Try combining capitalized fonts with increased letter spacing on buttons and headers for some interesting typographical distinction

5. The Most Common Mistakes in Web Typography

1. Using the wrong font

  • Fonts are like people – they have different personalities that can sometimes clash
  • Many fonts are overused and should be avoided like Comic Sans and Papyrus
  • Many fonts are overused and are still useful for a reason: Helvetica, Tahoma and Verdana

2. Using the wrong size

  • Tiny fonts on a web page make reading difficult for older eyes.
  • A 40-year old works twice as hard to read as a 20-year old. A 60-year old has to work four times as hard.
  • HINT: The harder your text is to read, the less of it will get read, and the less of what is actually read will be understood.

3. Using the wrong spacing

  • When it comes to typography, white space is your friend.
  • Beginners are afraid of whitespace. They want to fill every gap with something.
  • Learning how to leverage whitespace effectively is a powerful design tool.

Watch the Webinar: Typography Essentials

This post is based on the Typography Essentials webinar by Nathan Ingram. In this webinar, Nathan walks through the basic elements of typography for web designers.

The post Typography for Web Designers: 5 Things You Need to Know appeared first on iThemes.

Powered by WPeMatico

How to Start Getting Clients for Your Divi Web Design Business

Welcome to part 2 of 5 of our Divi mini series How to Become a Successful Divi Web Designer. In this series, we’re showing you a proven path that you can take from learning to build websites to becoming a professional web designer. We’ll provide you with actionable steps that you can apply no matter if you’re just starting out or if you’re already an established web designer wanting to go to the next level.


One of the most commonly asked questions I see in many of the Divi Facebook Groups online and what I hear from aspiring web designers I interact with is “How do I start getting clients?” In this post, I’m going to expand on five tactics and strategies that worked for me when I started that you can implement in your web design endeavors.

Before we dive in, there are some things that I recommend you have in place and are prepared with before you start getting clients:

  • Be sure you can truly build a website from start to finish before selling your services.
  • Take care of the legal stuff – contracts, legalities like your business name, banking etc.
  • Have a good understanding of hosting, Cpanel and an understanding of email and DNS settings. This Elegant Themes Blog Post is a good resource for picking the right hosting company for you.
  • Make sure you’re inspired and excited to get going!

Ok, let’s get to it.

How to Start Getting Clients for Your Divi Web Design Business

1) Create Your Own Website First

I’ve run into several designers who are so consumed with getting their first few paying clients that they neglect the most import first step – building their OWN site first. Creating your own site first has numerous benefits such as:

  • Learning how to effectively build a site from start to finish.
  • Creating and refining your development process.
  • Getting familiar with good tools, plugins and basic coding.
  • Solidifying your services and products.
  • Creating an online presence that all leads, traffic and referrals will go to.

I get it, it’s hard to build your site when you don’t have much to show, but you can develop your services, mission and general information, FAQ’s and more before you have any actual work to show. And building your portfolio will happen quickly when moving on to step 2.

2) Build Your Portfolio

Before you can expect a client to pay you, they’re going to want to see that you can actually deliver and will more than likely want to see some of your work. So it’s important that once step 1 is complete, you build out your portfolio! In order to start building your web design portfolio, you’ll probably have to do some work for cheap or for free. And that’s ok! That’s how I started and once I had a handful of projects under my belt, I was able to start charging for my work because I had some examples of finished projects.

I recommend reaching out to organizations or non-profits that you may be involved with. You can also reach out to trusted friends and family who you know won’t abuse your willingness to do some free/cheap work to get some experience under your belt. A word of caution: Don’t advertise that you’re doing work for free. You’ll find yourself buried with “opportunities” and projects that will not pay your bills.

I began by doing free then cheap work for the church I was a part of, then doing some work for local bands who couldn’t afford a big site. That led to some smaller paying jobs with small businesses in my local area. I recommend getting at least 5-10 projects completed to help make you look established before beginning to charge a good rate for your work. And if you only have a handful of projects to show off initially, I’d recommend making your portfolio fullwidth instead of a 3 or 4 column layout.

When I did my initial free/cheap work, I did the following:

  • I made it known that those first projects were only free because I was getting started and I would be charging for those services moving forward.
  • I told them NOT to tell anyone else that I was doing the project for free. That way potential clients didn’t know that I was doing that work for free. For all they knew, those were happy, paying clients ?
  • I asked them to share their new websites and asked for referrals to anyone they knew who could use my services.

3) Utilize your Family, Friends and Social Media Networks

There’s no shame in getting your first few opportunities from your family and friends. That’s how many businesses, including mine, got their start. Once you have a website and you’re ready to start getting clients, the most important thing to do is get the word out.

Set up a Facebook page for your business and engage in whatever social media networks you have already going. I found it very important early on not to bug people but I did make it known that I was doing graphic design and web development. My first few leads came rather quickly from people I knew because I already had a relationship with them. They liked and trusted me and were willing to give me a shot at working with them.

If you’re working at first for cheap or free, there’s not much to lose for friends and family working with you. There may be an awkward conversation if they don’t like the work but if they do, then you’ve just created a good relationship and you’ll gain access to their network as well. And that’s how the referral train starts rolling!

4) Networking

Once you have a handful of sites in your portfolio, it’s time to start getting out in the real world. One of the best and most affordable ways to do so is to get involved in a networking group. The term “networking” has a bit of a negative connotation to it and can feel intimidating, especially if you’re not naturally social, but I highly, highly recommend it. Get involved in a closed networking group or look into meetups in your area that are referral based.

A majority of my leads come from my networking group since it is a referral group. All the members of my group are essentially a sales force for me and my business and I’m there for them as well. It’s an incredible mix of give and get and if you’re known, liked, and trusted within a group of people, you’ll have access to all of their professional networks as well.

Here in the states, we have networking groups like BNI (which is a global organization), AmSpirit (which is the one I’m a part of) but there are now meet ups all across the world. So whatever is available in your neck of the woods, take advantage of it! You can also look into what meetups are going on in your area at MeetUp.com. Again, you can join groups of fellow designers and developers but I encourage you to also check out any networking events and groups with business people in various industries. That’s where the referrals start happening.

5) Contribute to Open Source, Online Communities and Facebook Groups

When you begin as a Divi Web Designer, you already have a golden ticket to starting your business; being involved with the best community online – Divi Nation. There are numerous Facebook groups that you can plug into where you can not only learn from other designers but you can engage with them.

Here are some of the top ones I recommend checking out:

1) DiviWebDesigners by yours truly ?

2) Divi Theme Users & Elegant Marketplace

3) Divi Theme Tutorials

I’m not stating that you spam multiple groups saying that you’re looking for work. In fact, that’s a great way to spoil your very important first impression and you’ll find your way booted out of a group. What I am saying is that if you start contributing, getting involved in conversations, assisting with problems, sharing tools and plugins that’ll help, then you’ll very quickly make some friends and perhaps, some opportunities.

Another area you can explore is contributing to open source. This is essentially offering your work to projects already online looking for assistance. Here’s good resource for how you can get started if this interests you. You can also look into sites like Fiverr and other freelance sites that you can contribute to. But I recommend start with your friends, family, social media networks and face to face opportunities. It’ll get you farther, faster.

In Conclusion

I hope these 5 steps on How to Start Getting Clients for Your Divi Web Design Business has inspired and encouraged you with some actionable steps you can apply! Again, this is all real-world experience that helped propel my web design career.

Tomorrow: How to Grow your Divi Web Design Business

Once you’ve started your Divi Web Design business, it’s time to grow it into something sustainable. Tomorrow, I’ll explain the steps I took to grow my business and we’ll go over tools, tactics and strategies that you can use to help grow yours!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

The post How to Start Getting Clients for Your Divi Web Design Business appeared first on Elegant Themes Blog.

Powered by WPeMatico