Randy A Brown

Author: Randy A Brown

  • How to Create a Review Site Using Extra from Elegant Themes

    How to Create a Review Site Using Extra from Elegant Themes

    Reading Time: 11 minutes

    When most people consider buying something they usually search for reviews online. For many products there simply aren’t enough reviews, or not detailed enough reviews, to help readers make an informed decision. This opens an opportunity to create your very own product review website. Fortunately, Elegant Themes’ Extra is the perfect theme to create a product review site.

    Product reviews are a great way to bring in traffic and help establish your credibility. They even let you talk about things you like and bring in some extra cash through affiliate programs. In this article we’ll discuss how to build a review site using Extra, how to develop your own review structure, and look at some examples. I’ve also included some tips that I’ve learned from my many years of reviewing products (I even use Extra for my review site).

    In this article I’ll provide mock reviews of laptops. Images are taken from Unsplash.com.

    Extra’s Homepage Builder

    Extra has a built in review system allowing you to develop your own review structure, give each item within the structure a score, and Extra calculates a total score automatically. Extra can be used as an online magazine or a blog.

    The homepage needs to be designed so that categories are easy to find. Extra has a great system for building homepages designed around categories, which in turn highlight your product reviews. Products can be placed within their categories in tabbed boxes, sliders, or individual posts. Extra excels at product categories because of the layouts and modules within the Category Builder.

    Category Builder

    The Category Builder uses the Divi Builder and is unique to Extra (in the dashboard, go to Extra and select Category Builder). This is the Divi Builder with a special library of layouts and modules. It has several layouts that are great for getting started with a homepage including blogs and magazines.

    The Category Builder has several modules that highlight your posts. Modules include:

    • Featured Posts Slider
    • Posts Carousel
    • Tabbed Posts
    • Posts
    • Text
    • Ads
    • Code
    • Image
    • Blog Feed Masonry
    • Blog Feed Standard

    These can be used to create category layouts with sections that focus on specific products. Once you’ve created your layout select to use the layout as the homepage under Layout Usage on the right of the screen.

    Developing Your Review Structure

    A review needs to be structured so that it tells the information in a scanable way that’s easy to follow and makes sense for the product. Typically, the sections of the review are the major features of the product. It’s a good idea to browse through your favorite review sites and structure your reviews similarly.

    Sites that have a nice review structure include:

    A good overall structure might look like this:

    • Pros
    • Cons
    • Bottom line / verdict
    • Introduction
    • First feature
    • Second feature
    • Third feature
    • Comparisons
    • Conclusion

    The Review Layout

    The review itself needs to be easy to follow. It will discuss the major points of the product, a few minor points, performance, provide comparisons and example uses, and then have a conclusion with recommendation. Also provide a link where they can make a purchase as your call to action.

    The review should be easy to follow and scan, helping readers to quickly find the information they’re looking for. This is done by giving each major point its own section heading. H2 is a good choice to divide the sections. For example, if a reader looking at a laptop review is more interested in the gaming performance of a graphics chipset than the battery life, they should be able to find it just by scanning the page.

    Of course there’s more than one way to structure a product review. I recommend experimenting with structures that you like and see what works the best for you and your audience. Divi Leads is a great tool for testing article structure elements. I recommend creating several templates that you can save to the library.

    Using Media

    For the typical product, media such as images, and possibly videos, can be an essential part of the review. Usually, an image for each major feature is all that’s needed. You might not want to cover every feature because your content could end up being filled with information and images that your audience doesn’t need. Save images with the name of the product. This helps with SEO and for image searches.

    It’s a balancing game to find the exact amount of images to include. On one hand you want to include enough images to give your readers the information they need to make a decision. On the other hand you want your content to look clean and neat, and to load fast as possible. Fewer images that look amazing are better than a lot of images that look bad.

    If you need a lot of images then consider using a gallery. This would allow you to display a single image for each section of the review, keeping the overall look uncluttered, and your readers could see more images if they want.

    Using Extra’s Review System

    Extra has a review system built in that allows you to define your own review elements and give each review item a score. From this score it calculates a final score for you. The scoring system shows a graph that appears below the article’s content and places the overall score on the post in the homepage.

    To create the scoring structure, look at the major features of the product and then add the features that matter the most to your audience. Also consider including those that you get a lot of questions about.

    Going back to our example of reviewing laptops, you might want to score items such as:

    • Construction
    • Battery life
    • Screen clarity
    • Keyboard responsiveness
    • Performance
    • Features
    • Software
    • Warranty
    • Value

    Once you’ve determined your review structure type the items into their own Breakdown boxes. Click Add Breakdown to add a new review element. You can add as many items as you want and delete them if you decide you don’t need them. Create as many elements you need but keep is as simple as you can.

     

    Each of the review items in this example have been given an individual score and they combine to create an overall score. Each of these elements should have information within the review itself. For example, I’ve given Keyboard Responsiveness an 84%. The review should talk about the keyboard responsiveness, explaining what I liked and didn’t like about it. You might also consider explaining your rating system on an About page.

    Extra’s Sidebar Widget

    Extra comes with a review widget to show your latest reviews. It shows the title of the articles and a bar chart with the final score of the review. The post titles are clickable links. You can choose the number of reviews to show.

    Examples

    Review – a Child Theme for Extra

    To see an excellent example of review site using Extra, let’s look at a child theme from Michelle Nunan called Review.

    This is a child theme that’s made specifically to be a review magazine. The homepage layout includes:

    1. Hero image banner with animation
    2. Menu that stays on screen after scroll
    3. Product slider
    4. Top picks slider
    5. Tabbed posts
    6. Posts
    7. Footer with social follow, recent reviews, reviewers, affiliate disclaimer

    The sidebar includes:

    1. Recent reviews
    2. Search
    3. Recent posts
    4. Categories
    5. Login

    The review structure steps the reader through the product and its features in a real-world environment. It’s visually appealing, switching between text and imagery while remaining relevant.

    Bible Buying Guide – My Own Review Site Made with Extra

    I’ve ran Bible Buying Guide since 2011. It started with Elegant Theme’s Delicate News and I changed it to Extra a few months after it released. It’s gone through a few layout changes since moving to Extra. The current form displays a post slider with a single post followed by the most recent posts in a two-column blog layout and a sidebar. It uses the rating’s system so readers can rate my articles and the trending bar so readers can know what the most popular articles are.

    Tips for Writing Reviews

    It’s a good idea to analyze reviews and see what works and what doesn’t. Utilize the good practices in your own reviews and avoid the bad practices. Look at what engages the audience compared to what turns them off.

    For example, how many times have you seen reviews like this?

    • I bought it for my grandson and he loves it
    • Too large
    • Too small
    • Too heavy
    • Fast shipping
    • Not as advertised
    • Exactly as advertised
    • Didn’t work

    I’ve seen these very same comments on the exact same product. This is conflicting information and doesn’t really give the potential buyer the information they need about the product.

    I’m sure your grandson told you he loves it. The question is why does he love it? Does he love it because you gave it to him? What about it makes me think I will love it?

    ‘Too heavy’ is subjective. What is it too heavy for? Holding in one hand for three hours? Carrying in a backpack? Sitting on your lap? Be specific and give the weight. Your readers can decide if it’s too heavy for them or not. If you think it’s too heavy for you, tell why it’s too heavy. Your readers can relate to you and this will help them to know if the weight works for them.

    The same goes for the size. Rather than saying it’s too small, tell the size and the let the reader decide for themselves of it’s too small or not. The shipping doesn’t tell me anything about the product itself. The fact that a product didn’t work may not be a reflection on the product itself.

    Be completely honest about the product. If there’s something you don’t like then tell that you don’t like it, but also be specific and tell why you don’t like it. You owe it to your audience to tell both the good and the bad. If they buy a product and you haven’t told them about a glaring negative then they will feel cheated and you will lose trust – and trust takes time to build.

    For extensive products don’t try to cover everything. It doesn’t have to thoroughly cover every single minor feature. For example, in a product such as Photoshop your readers just want the basics that set it apart from the others.

    A review has to answer the question of why or why not. Why should I buy this? What are the benefits if I do? What am I missing out on if I don’t? Is there a better choice? Will this product suit my needs? If you get a lot of questions about a certain feature or aspect of a product then include that information in your reviews.

    Be consistent and realistic in your ratings. Determine what is worthy of a specific rating and rate accordingly. If everything is 5/5-star then the rating loses its value.

    Supplement your reviews with information that your audience will care about. This brings them back and ensures that you’ll always have content that they need. This can be anything from tips to using their products, to accessories, to gift ideas. Other articles could include Top 10, Best of, etc., and could cover multiple products within the same article. They could even link back to the original reviews. Review related products. Laptops and lawn mowers are not a good match, but laptops and tablets are.

    Establish your credibility as a reviewer by being completely honest. Know the products well. Don’t review products you’ve not seen in person or used yourself. Use your experience with the product to develop authority. Develop your own style and opinions. Readers will know they can trust your opinions and you’ll be able to answer their questions.

    Don’t recommend products just for their affiliate links. Your audience will realize your bias and you’ll lose credibility. Don’t give a shining review just because you got the product for free. Readers will catch on to this and will question your motives. This will reduce your credibility and authority in your industry.

    Show pros and cons – not just pros. This way you won’t come across as a pushy salesman. Be realistic in how the product works and the problems it solves. Don’t fall into the “as seen on TV” line of sales tactics where no one in the world can possibly crack open an egg without getting it all over their kitchen until they use this product.

    Tell who you think the product is best suited for and why you think they would benefit from it the most. If possible show examples of the product being used.

    Find a niche with products you love and an audience interested in those products. Don’t try to niche it down too much. If your goal is to make money then make sure there are plenty of affiliate programs. It’s difficult to write about products you don’t care for and it’s discouraging to write about products that you love but there isn’t a large enough audience to keep the site going. Use tools such Google’s Keyword Planner to find niches and products that potential readers are searching for.

    Write clearly and concisely but don’t worry about perfection. Aim high. Develop and write for a large audience.

    Making Money with Reviews

    It’s possible to make money from your review site, but don’t expect to make fast money. If that’s your goal then I wouldn’t advise starting a review website as it can take months, or even years, to bring in enough traffic to make money.

    There are several ways to make money from your review site. Here’s a look at the most popular methods.

    Affiliate Programs – When someone buys through your link you get a portion of the sale. Many online retailers have affiliate programs. This is one of the most popular ways to make money online. Many retailers pay around 5% while other programs pay up to 50%.

    Ads – Ads are another popular way to bring in revenue. Make sure ads are relevant to your audience and topic. The typical ad pays by the click or by the number of views, so to make good money from ads you’ll need lots of traffic.

    Sponsored Posts – Companies will pay you to write about their products or services. Just like any review you must be honest in showing both the pros and the cons or your readers will not trust your opinions.

    Selling Products – Add a store to your website. If you do you’ll have to be extra careful to be as thorough as possible in your reviews or your readers will assume you’re just trying to make a sale. I don’t recommend selling review copies that you’ve gotten for free.

    Disclosures

    The Federal Trade Commission has specific requirements for bloggers when discussing products. Be sure to disclose if you’ve gotten a free review copy, have affiliate links, etc., in order to comply with Federal regulations. The laws do change from time to time, so be sure to check ever so often to ensure you’re following the rules. 

    Final Thoughts

    Reviewing products is a great way to establish your authority in an industry and increase your income. Developing a review site is not that difficult when using themes such as Extra. Extra includes a review system with title, summary, total score, bar charts, and total scores on posts and in the sidebar. Extra makes it easy to develop your review system and the Category Builder is great for developing a homepage that includes your reviews or is built around your reviews.

    Extra is part of Elegant Themes’ subscription.

    Have you developed a review website using Extra’s review system? Let us know about your experience in the comments.

    Featured image from Michelle Nunan’s Extra child theme Review.

     

     

  • Divi Background Gradient Review

    Divi Background Gradient Review

    Reading Time: 4 minutes

    Divi has recently gone through a series of updates and one of those updates added some interesting background features including gradients. As you may know, I’m partial to gradients (see the article WordPress Design Trends 2017 – Gradients) and I see them becoming more popular throughout the year. As you can imagine I was excited when I heard that Divi was getting a gradient tool. Does it meet my expectations? In this review we’ll take a look at the new gradient tool as see what it can do.

    (Note – this article contains affiliate links to help keep this site running)

    Background Settings

    The new background settings includes four tabs: Color (for solid colors), Gradient, Image, and Video. Gradient is the second tab. To create a gradient, click the plus in the center.

    Visual Editor Example

    You’ll see the default gradient with two colors with boxes labeled Select Color. Click on these boxes to choose your colors.

    From here you can move the circle to the color you want or select the color from the circles at the bottom. Once you’ve chosen your color you’ll see the hex code that you can copy if you want. You can also paste hex codes into the code field. If you move the circle, a circle will appear filled with the color to help you decide if that’s the color you want. The sliders on the right change intensity and opacity.

    Once you’ve chosen your first color, select the box for the second color and make your choice.

    Once you’ve chosen your colors select somewhere outside the gradient color box and you’ll see your gradient. If you don’t like the colors you can select the color boxes and choose another color.

    Gradient Settings

    Under the gradient is a section with settings that include Gradient Type (choose from Linear or Radial), Gradient Direction, Start Position, and End Position. These controls allow you to change the direction the gradient flows and how the colors blend together.

    You can even keep them from blending if you want. Playing around with the controls can create some interesting backgrounds.

    Choosing Radial gives you another set of options called Radial Direction which includes center, top, bottom, left, right, and several combinations.

    Image Blend

    You can even place a gradient over an image using the Image Blend tool. Click on the Image tab and load the image you want. Go to the drop-down box at the bottom called Background Image Blend and select Overlay. Your gradient will appear over the image as an overlay. (I took this photo of a log cabin at Cades Cove here in TN).

    You can adjust the gradient controls to create some interesting effects. You’ll see the results in real-time.

    Thoughts on the Divi Gradient Tool

    The gradient tool is intuitive to use. It’s easy to create and modify gradients. There are enough adjustments and features that you can create dozens of gradients and none of them would look alike. You can even have a different gradient for each column in a row. You can place the gradients over images, which opens up a lot more possibilities. For example, you could use an image of a texture behind your gradient. By themselves the gradients are visually interesting. Throw images into the mix and the possibilities are endless. Since they’re created within the modules you can save the module to your library and reuse the gradients.

    The gradient tool is fun to play with. I like adjusting the colors to see what I can create and I like seeing how they look over the images. The gradient tool is a welcome addition to Divi and I highly recommend using it for your designs. Now, if they were to throw particle animation in there I would probably not have time to write.

    The example shown uses the text module. The background options are also available in rows, sections, and many other modules. The background gradient tool comes with many of the modules in Divi, Extra, and the Divi Builder plugin. You can get them at ElegantThemes.com.

    Let’s Discuss

    • Have you tried the Gradient tool?
    • Do you prefer using Divi’s gradients or something else?
    • What features would you like to see added to the gradient tool?

    Let us know what you think in the comments. Thanks for reading. Please subscribe if you haven’t already. 

    Disclaimer – I am a contributor to the Elegant Themes blog. I am also a customer. This in no way affects my opinion of Elegant Themes’ products. I take pride that all of my reviews are unbiased and fair. Honesty and credibility are my highest priority. 

     

     

  • Divi Wireframe View Review

    Divi Wireframe View Review

    Reading Time: 3 minutes

    Elegant Themes recently updated Divi with an interesting feature for their front-end builder (called Visual Builder). One of the reasons I like building with Divi is the Divi Builder makes it easy to create a layout fast. You can place sections, rows, and modules, chose the number of columns per row, and customize every element and rearrange them by drag-and-drop.

    The Visual Builder

    The front-end builder works similarly, but I found it more difficult to visualize the layout than with the back-end builder because the sections, rows, and modules were almost invisible. I didn’t use it. Instead, I used the back-end almost exclusively. When I did use the Visual Builder I would change to the back-end to make layout changes, add modules, etc. This back and forth motion made me stick with the back-end builder. Until now.

    The Wireframe View

    The Wireframe View lets you clearly see the sections, rows, and modules that build your page. You don’t have to mouse over them to make them appear, and you can see more modules at once. You can easily switch between views while staying on the same page. The example above is the same page as the one above it. You can see how the longer pages are much easier to see and deal with from a design standpoint when looking at them in the Wireframe View.

    The Wireframe View also lets you take advantage of the extra features in the front-end options windows. Features that are not available in the back-end such as collapsible options, a powerful option search, and the ability to edit labels directly where you see them. The Wireframe View sits next to the desktop, tablet, and phone views and switches almost as quickly.

    Thoughts About the Visual Builder and Wireframe View

    The Wireframe View solves a lot of my complaints about the Visual Builder. There are still some things we can’t do from the Visual Builder, such as use most third-party modules or use post settings, but the recent updates have added enough to make me use it. Elegant Themes has even more views planned, so the Wireframe View is just the start of something bigger, and I’m sure better, that’s to come. Divi now has excellent back-end and front-end builders. No matter what style of building you prefer, Divi has a mode to fit with your style.

    The Visual Builder and Wireframe View come with Divi, Extra, and the Divi Builder plugin. You can get them at ElegantThemes.com.

    Let’s Discuss

    • Have you tried the Wireframe View?
    • Do you prefer using the Wireframe View or the back-end builder?
    • What features would you like to see added to the Wireframe View?

    Let us know what you think in the comments. Thanks for reading. Please subscribe if you haven’t already. 

    Disclaimer – I am a contributor to the Elegant Themes blog. I am also a customer. This in no way affects my opinion of Elegant Themes’ products. I take pride that all of my reviews are unbiased and fair. Honesty and credibility are my highest priority. 

     

     

  • Creating Interesting Footers for Your WordPress Website

    Creating Interesting Footers for Your WordPress Website

    Reading Time: 3 minutes

    Footer are often ignored when it comes to website design. Often, they’re just left as the default footer of the theme. Sometimes they get some sprucing up as an afterthought. Most visitors never scroll down that far, so any hard work you put into it will probably go unseen. However, the readers who do scroll down that far are looking for something specific. They’re usually looking for links or other information. Great web design includes the footer and it can be used in interesting ways. Let’s look at creating interesting footers for your WordPress website.

    What to Include in Your Footer

    The key to good footer design is determining its purpose. This means deciding what you want to readers to do once they reach the footer. Do you want them to read more about your website, yourself, or your services? Do you want them to contact you, or follow you? Do you want them to sign up for something? Footers are actually a great place to keep some important information:

    • Specialized navigation
    • Contact info
    • Operating hours
    • Sign up forms
    • Popular posts
    • Recent post
    • Social follow buttons
    • Images
    • Media info
    • Awards
    • Site info
    • Tagline

    Examples of Great Footer Design

    Don’t try to place everything in the footer though. Keep it clean and simple, only including the most important elements. Choose the few things that matter the most. A good footer design would also be visually appealing.

    Here’s a look at Elegant Themes. They have a large footer area with recent posts, categories, and social follow buttons followed by an animated call to action (CTA), security and business certificates, social follow buttons with stats, a menu with different links than the primary menu, and a copyright notice. The footer items are centered.

    EvangelicalBible.com shows the logo, contact info, small newsletter signup form, social buttons, copyright notice, store hours, and a back-to-top button.

    This one is from CNet.com. It uses a full screen image with a CTA, copyright notice, menu, and links to top brands.

    Avada’s Shop demo provides contact info, social buttons, top rated products with star ratings, latest posts, tags, copyright notice, and payment info.

    Creating a Great Footer with Divi

    Divi has built-in footer editing features. The Theme Customizer includes features for layout, widgets, footer elements, footer menu, and bottom bar.  Choose from 10 layouts, customize the widget area, show social icons, create your own copyright notice, style the footer menu, style the footer credits, and disable or create your own footer credits.

    Using a Plugin to Design your Footer

    There are several plugins to help you create footers. Here are a few popular free and premium plugins:

    Let’s Discuss

    • Do you design your own footer or use your themes’ default footer?
    • Do you use a plugin or a theme builder to design your footer?
    • What’s your favorite tool to build custom footers?

    Let us know what you think in the comments. Thanks for reading and please subscribe if you haven’t already.

    Featured image by Jacob Rank

     

  • WordPress Header Design

    WordPress Header Design

    Reading Time: 3 minutes

    The header is often the first thing your visitors see when they land on your website. This means your header is your website’s first impression for your readers. You know what they say about first impressions. This is your first chance to wow your reader, capture their attention, and keep them on your website.

    This design element can tell your readers about your website. It can say “I’m serious”, “I’m light-hearted”, “I’m intelligent”, “I’m trustworthy”, etc., just from the use of color or images. Needless to say, this is an important aspect for your website.

    Header Elements

    The typical header contains elements such as:

    • Logo
    • Navigation
    • Tagline
    • Color for mood
    • Image
    • Animation
    • Call to Action
    • Video
    • Social Buttons
    • Contact info

    Your header needs to be responsive, clean, informative, and useful. It shouldn’t be slow loading, eye-piercing, or confusing. Many WordPress users keep the standard header for their theme without customizing it. They work, but they don’t stand out from the crowd. Better header design requires a little bit of customization. Most customizations can be done with the theme’s built-in features, by adding your own code, or by using a simple plugin.

    Let’s look at a few good headers.

    Examples of Good Header Design

    This is Divi Cafe (a Divi demo). The colors work perfectly for a cafe. I especially like the dark overlay with the background showing through the text. Navigation is easy to see and understand. I can tell at a glance that I can make a purchase because of the shopping cart. The image of the cafe can be seen through the overlay and it’s just visible enough to tell me what the website’s about. The logo appears above the menu on scroll. Both the menu and logo change to a lighter, but still elegant, color.

    Of course this is only one of the types of headers that you can make with Divi. Choices include vertical or horizontal navigation, full screen and slide-in navigation, unlimited colors, transparent headers, left aligned or centered logo, hide navigation before scrolling, add video, adjust the header height, change the fonts, and lots more.

    Another option is to use a plugin such as Awesome Header. It’s a plugin that replaces the standard WordPress header. You can add images, adjust colors, fonts, create sticky navigation, and lots more.

    Where to Get Ideas for Great Headers

    My two favorite places to get ideas for headers is searching on Pinterest and looking through theme examples. The theme examples can be any kind of website theme including WordPress, Wix, etc. I like looking through themes with pre-made layouts on ThemeForest, child themes for platforms such as Divi, etc.

    The example above is a Pinterest search using the keywords website headers. I like to pin my favorites and come back to them for ideas.

    This is a look at some of the pre-made layouts for BeTheme. When something catches my eye, I’ll click on it and start making notes.

    Let’s Discuss

    • What’s you favorite method for designing headers?
    • Do you use the features in your favorite themes, use a plugin, or use code?
    • Where do you get your ideas for header designs?

    Let us know what you think in the comments. Thanks for reading. Please subscribe if you haven’t already. 

    Image by Igor Miske

     

  • Where to Get Design Ideas for Your WordPress Layouts

    Where to Get Design Ideas for Your WordPress Layouts

    Reading Time: 3 minutes

    [et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”on” specialty=”off”][et_pb_fullwidth_post_title admin_label=”Fullwidth Post Title” title=”on” meta=”on” author=”on” date=”on” categories=”on” comments=”on” featured_image=”on” featured_placement=”background” parallax_effect=”on” parallax_method=”on” text_orientation=”center” text_color=”light” text_background=”on” text_bg_color=”rgba(0,0,0,0.5)” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_padding=”320px||320px|” title_font_size=”52px” title_font_size_phone=”42px” title_font_size_last_edited=”on|phone” /][/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”off” specialty=”off”][et_pb_row admin_label=”Row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” custom_padding=”40px|80px|40px|80px” parallax_2=”off” parallax_method_2=”off” custom_padding_tablet=”20px|0px|20px|0px” custom_padding_last_edited=”on|phone”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

    The days of WordPress being just a blogging platform are long over. WordPress can now be used to create practically any type of website you can imagine. With all of the themes and design tools available, and the ability to expand WordPress even further by adding your own code and plugins, the sky is the limit for your WordPress design.

    One question I’m often asked is where to get ideas for WordPress designs. I like this question. There are actually a lot of good places to get ideas. Here is a look at some of my favorite methods of getting ideas layout designs for my WordPress projects.

    Keep in mind the idea isn’t to directly copy another design. Instead, it is to get ideas to improve on, incorporate into other ideas, expand, etc.; using them with the idea of creating something unique.

    What to Look For

    There are lots of places to get ideas. One thing to keep in mind is it doesn’t matter what was used to create the website. It doesn’t have to be a WordPress website. It could have been created with any builder, such as Divi, Wix, Elementor, etc. The idea is to look for layouts and design elements that you like.

    Coffee – a Divi child theme

    For layouts I prefer to take a step-back approach and see an image of the entire layout at once. This way I can see the individual elements and see how they work together. The layout should tell the story you want it to tell. This is easier to see when viewing a smaller image rather than seeing the website full-screen. Try to pay attention to the layout rather than the placeholder images. The two things that stand out about the theme above is it looks very different when there are no placeholder images which can draw attention away from the design, and it’s hard to tell much about it when seeing the full screen image.

    Pinterest

    Pinterest is one of my favorite places to look at website layouts. Just type in keywords like web design, website layout, or similar and you’ll see more than you need. You can even look for colors. It will give you a few filters across the top so you can narrow down your choices. Be careful though, once you start searching on Pinterest it’s easy to stay there for several days at a time (well, maybe several hours, but the point is the same).

    Theme Sell Sites

    Another great place to get ideas is from theme sites such as ThemeForest or the marketplaces. I like to select the popular themes and look at their demos. They don’t even have to be for WordPress. The image above is from a WordPress theme called Jupiter 5.

    Other Websites Within the Genre

    Another method I’ve found useful is to research some of the more popular websites within the genre that I’m developing in. For example, if I’m designing a website for a writer, I’ll look at websites for writers and make notes of my favorite elements. I;ll then incorporate those elements using my own styles, tweaking and making them my own.

    Keep a Notebook

    I like to keep screenshots and links to layouts the I find inspiring. That’s one of the benefits of Pinterest because of the ability to create your own boards. I also like to save links in a folder in my web browser. Another option is to keep a file of links in a document or use a tool such as EverNote.

    Let’s Discuss

    • Do you use any of these methods for getting layout design ideas?
    • What other websites do you use?
    • What other methods do you use?
    • What’s your favorite way of saving the design ideas?

    Let us know what you think in the comments. Thanks for reading. Please subscribe if you haven’t already.

    Image by Tamarcus Brown

    [/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

  • Web Design Trends 2017 – Stronger Focus on Mobile First

    Web Design Trends 2017 – Stronger Focus on Mobile First

    Reading Time: 3 minutes

    [et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”on” specialty=”off”][et_pb_fullwidth_post_title admin_label=”Fullwidth Post Title” title=”on” meta=”on” author=”on” date=”on” categories=”on” comments=”on” featured_image=”on” featured_placement=”background” parallax_effect=”on” parallax_method=”on” text_orientation=”center” text_color=”light” text_background=”on” text_bg_color=”rgba(0,0,0,0.5)” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_padding=”320px||320px|” title_font_size=”52px” title_font_size_phone=”42px” title_font_size_last_edited=”on|phone” /][/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”off” specialty=”off”][et_pb_row admin_label=”Row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” custom_padding=”40px|80px|40px|80px” parallax_2=”off” parallax_method_2=”off” custom_padding_tablet=”20px|0px|20px|0px” custom_padding_last_edited=”on|phone”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

    The day of websites not formatting correctly on mobile devices is over. The majority of reader’s access websites on mobile devices. If today’s layouts don’t work perfectly on mobile the website will lose traffic and readership. For this reason many designers are designing websites for mobile first. In other words, a website would be designed for mobile screens before being designed for desktop screens. This keeps mobile in the forefront rather than being tacked on last or forgotten completely.

    The design methods of the olden days of web design (last year) was to design a layout or a theme and test it in a few browsers. Once the designer was satisfied that it worked on the popular browsers the website would go live. The problem is the designer didn’t always test it on mobile, so it wouldn’t always get optimized for small screens. Many sites weren’t even responsive until a year or so ago.

    Whether you design on mobile and scale to desktop, or design on desktop and scale to mobile, the website must work perfectly on both. My advice is to use a theme that’s mobile-ready and test on as many devices as you can. Divi is a great chioce. As Zurb demonstrates, creating a site for mobile and scaling up to desktop is better than creating for desktop and scaling down to mobile.

    For more stats on mobile usage see the article Mobile Marketing Statistics compilation from Smart Insights.

    How to Test for Mobile Optimization

    My preferred tool is Google Chrome Tools. If you’re using Chrome, right click anywhere on a website and select Inspect. This will open the tools. The will open a tool box either on the right or on the bottom portion of the screen. Select Toggle Device Toolbar if it’s not already showing in the left portion or at the top.

    The webpage you’re viewing will show in a simulated mobile device. Choose a device to test in both portrait and landscape mode. Be sure to test as many devices as you can.

    Once you’re satisfied with how your website looks in the simulated mobile devices, load the website on as many actual devices as you can.

    Another tool I like is Am I Responsive. Enter your URL and it will show your website on multiple screen sizes and you can scroll through them.

    Let’s Discuss

    • Do you build for mobile first?
    • Do you prefer to scale up to desktop or scale down to mobile?
    • What are your favorite tools for developing and testing for mobile?

    Let us know what you think in the comments. Thanks for reading and please subscribe if you haven’t already. 

    Featured image by NeONBRAND

    [/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

  • Web Design Trends 2017 – Virtual Reality Integration

    Web Design Trends 2017 – Virtual Reality Integration

    Reading Time: 2 minutes

    [et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”on” specialty=”off”][et_pb_fullwidth_post_title admin_label=”Fullwidth Post Title” title=”on” meta=”on” author=”on” date=”on” categories=”on” comments=”on” featured_image=”on” featured_placement=”background” parallax_effect=”on” parallax_method=”on” text_orientation=”center” text_color=”light” text_background=”on” text_bg_color=”rgba(0,0,0,0.5)” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_padding=”320px||320px|” title_font_size=”52px” title_font_size_phone=”42px” title_font_size_last_edited=”on|phone” /][/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”off” specialty=”off”][et_pb_row admin_label=”Row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” custom_padding=”40px|80px|40px|80px” parallax_2=”off” parallax_method_2=”off” custom_padding_tablet=”20px|0px|20px|0px” custom_padding_last_edited=”on|phone”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

    If you think about it, the web is actually a 2D alternate reality. The next obvious step is to shape it into a 3D virtual reality. VR headsets for smartphones are becoming popular, and both desktops and mobile devices have ways of displaying VR. It makes sense when you consider the advantages. For example, you could stand in a room you’re considering renting or buying, stand on a vacation spot to help make your decision of where to spend your vacation time, view a product and see it from all angles without having to be in the store, and so much more.

    Here are some of the popular ways that VR is being incorporated into WordPress.

    Google VR view

    Google VR view is becoming popular and incorporating VR features into WordPress and apps. It let’s you embed 360 degree VR media for desktop and mobile devices. It supports mono and stereo images. Images can be stored as JPG, PNG, or GIF. Video can be stored as MP4.

    Plugins

    It’s still in its infancy but currently the easiest way to incorporate VR into your WordPress designs is by using a plugin. Here’s a look at a few plugins to add VR to your WordPress website.

    WP-VR View

    WP-VR-view is a free plugin in the WordPress depository that lets you add a photo sphere and 360 degree video to your WordPress website to create 3D panoramas that readers can navigate through. It includes lots of shortcodes for videos, images, preview, width and height, and stereo. It works in web browsers and on mobile devices including Google’s Cardboard.

    Web VR Shop

    Web VR Shop is a premium WordPress plugin for WooCommerce that allows you to add 3D models to your shop. Upload your 3D model and then scale, position, rotate, and change the background color with easy to use sliders to create a VR product gallery. It includes multiple 3D extensions. It works on desktop, mobile, Rift, Cardboard, and Vive.

    Let’s Discuss

    • Do you use VR on your website?
    • What’s your favorite way to incorporate VR into WordPress?
    • What’s your favorite use of VR?

    Let us know what you think in the comments. Thanks for reading and please subscribe if you haven’t already.

    Featured image by Samuel Zeller

    [/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

  • WordPress Design Trends 2017 – Improved Micro-interactions

    WordPress Design Trends 2017 – Improved Micro-interactions

    Reading Time: 2 minutes

    [et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”on” specialty=”off”][et_pb_fullwidth_post_title admin_label=”Fullwidth Post Title” title=”on” meta=”on” author=”on” date=”on” categories=”on” comments=”on” featured_image=”on” featured_placement=”background” parallax_effect=”on” parallax_method=”on” text_orientation=”center” text_color=”light” text_background=”on” text_bg_color=”rgba(0,0,0,0.5)” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_padding=”320px||320px|” title_font_size=”52px” title_font_size_phone=”42px” title_font_size_last_edited=”on|phone” /][/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”off” specialty=”off”][et_pb_row admin_label=”Row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” custom_padding=”40px|80px|40px|80px” parallax_2=”off” parallax_method_2=”off” custom_padding_tablet=”20px|0px|20px|0px” custom_padding_last_edited=”on|phone”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

    Micro-interactions are small animations and effects to indicate when an event is happening. They’re great for showing that something is clickable and for indicating that the user’s actions were recognized. I personally hate it when I hover over something and it doesn’t show me that I can click on it and then when I do it doesn’t show me that it took the click. Micro-interactions greatly improve the usability of a website and they’re becoming even more popular.

    An example in the real world include the tiny vibration you feel when you click on a button on your smart-phone. You know that it took your click because of that vibration. You’ll also see an animation on the button itself such as the button changing color or becoming larger and then shrinking back to normal.

    An example in the virtual world would be hovering your mouse over a menu item on a website you’ll see an effect that indicates the post is clickable. A good example is the menu of Web Design Depot.

    These micro-interactions are useful for:

    • buttons
    • menus
    • status
    • changes
    • call to action
    • messages as the result of an action
    • visual input
    • typing indication
    • feedback
    • toggling something on or off
    • etc.

    CSS Animation

    Hover Effects Builder – WordPress Plugin

    You can tell from the image above what is being clicked by its hover animation.

    Most of these micro-interactions are in the form of CSS animation and can be created with CSS tools or with plugins. Here are a few resources to help you create them:

    Use as many as you can but keep them simple, consistent, and easy to understand.

    Let’s Discuss

    • Do you use micro-interactions?
    • What are your favorite micro-interactions?
    • What are your favorite tools for creating them?

    Let us know what you think about micro-interactions in the comments below. Thanks for reading and please subscribe if you haven’t already. 

    Featured image by Samson Vowles

    [/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

  • WordPress Design Trends 2017 – Gradients

    WordPress Design Trends 2017 – Gradients

    Reading Time: 2 minutes

    [et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”on” specialty=”off”][et_pb_fullwidth_post_title admin_label=”Fullwidth Post Title” title=”on” meta=”on” author=”on” date=”on” categories=”on” comments=”on” featured_image=”on” featured_placement=”background” parallax_effect=”on” parallax_method=”on” text_orientation=”center” text_color=”light” text_background=”on” text_bg_color=”rgba(0,0,0,0.5)” use_border_color=”off” border_color=”#ffffff” border_style=”solid” custom_padding=”320px||320px|” title_font_size=”52px” title_font_size_phone=”42px” title_font_size_last_edited=”on|phone” /][/et_pb_section][et_pb_section bb_built=”1″ admin_label=”Section” fullwidth=”off” specialty=”off”][et_pb_row admin_label=”Row” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” use_custom_gutter=”off” allow_player_pause=”off” parallax=”off” parallax_method=”off” make_equal=”off” parallax_1=”off” parallax_method_1=”off” custom_padding=”40px|80px|40px|80px” parallax_2=”off” parallax_method_2=”off” custom_padding_tablet=”20px|0px|20px|0px” custom_padding_last_edited=”on|phone”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

    Where we used to see solid-colored backgrounds, now we’re seeing a lot of backgrounds with gradients. A gradient is a smooth transition from one color to another. Most background gradients transition between two colors, but it’s possible to transition between multiple colors and include features such as animated transitions.

    image from colorful gradients

    Gradients can be created as image files or with CSS. A well-designed gradient can make the web pages more colorful and interesting while still loading fast. Gradients are not limited to backgrounds. They can include images with overlays, backgrounds, logos, headers, buttons, backgrounds for forms, etc.

    The image above can be accomplished with a plugin such as this premium plugin for Divi called Fullwidth Header Extended. It adds a CSS gradient to the custom header and includes particle animation, multiple color gradients, and gradient animation. It even adds dynamic text effects, icon animations, image effects, and other background effects. It also includes a sub-header that can be placed above or below the header title. I consider this a must-have plugin for every Divi user.

    Online Tools to Create Gradients

    Gradients can be created with graphics software such as Photoshop, Gimp, Sketch, PaintShop Pro, and Paint.NET. There are also lots of online tools that will create gradients for you based on colors you choose. Some have more features than others but they’re free to use. Some have pre-made gradients that you can save and reuse. A few include CSS tutorials. Just be sure to compress them. I like TinyPNG.

    Here are some good tools for downloading or creating your own gradients:

    Let’s Discuss

    • Do you use gradients?
    • What’s your favorite tools to create gradients?
    • Do you prefer to download pre-made gradients?

    Let us know in the comments. Thanks for reading and please subscribe if you haven’t already. 

    Featured image from James Douglas

    [/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]