WpTrunk

Tag: wordpress customizer

  • Paperio – Responsive and Multipurpose WordPress Weblog Theme (Weblog / Journal)

    Paperio – Responsive and Multipurpose WordPress Weblog Theme (Weblog / Journal)

    Live PreviewPurchase $39.00

    Paperio is a visually appealing, clean and uncluttered, SEO and speed optimized multi-purpose WordPress blog theme fully customizable with WordPress customizer.

    Fully Responsive, Modern and Creative Multi-use Blog WordPress Theme for Interior and Home Decor, Food and Recipes, Art and Photography, Travel and Adventure, Fashion and Lifestyle, Corporate and Personal, News and Magazine, Technology and More.

    Paperio offers sleek and modern, polished and technologically sophisticated, user friendly and easy to read attractive blog styles, featured post sliders, latest / popular post styles, header and footer styles, different sidebar styles and more to make your blog outstanding with clear content, stylish, highly visible to search engines and extra ordinary fast in page loading.

    Paperio contains 7 creative and unique demos with different type of styles for different purpose blogs with selection of predefined color skin and you can use custom color also. You can review below various blog styles and I am sure you will love it. But please take a look of the demo below and decide yourself!

    Start your blog with desired blog style in just one click using our very user-friendly import tool. It is designed in a way to make it self-explanatory for user to choose the blog style from the pre-defined list and developed in a way that it will show you the progress and will import selected demo data in no time. We have created separate demo contents as per blog styles instead of data of all demos in one to avoid bulky setup. But still you will be able to achieve layout / option as per other style also without any hassle using our WordPress live customizer settings.

    Paperio customization feature is purely built with WordPress default live customizer instead of using any plugin or framework. You can customize the theme using more than 400 options developed, so it is really quick and easy to setup your website in visual way with real-time changes within powerful, simple and consistent interface of customizer panel to customize various aspects of the overall theme and hence your website.

    Paperio offers charming, visually stunning and engaging blog list layouts for homepage featured area and for other pages with grid, list and masonry options. All the different post types like standard, image, gallery, video, audio and quote are well integrated and highly flexible to achieve your desired listing style with all the possible ready options to make it more suitable as per your blog type like fashion, photography, adventure, food, business and others.

    Paperio includes 6 different and unique header styles to make your header attractive and eye-catching with bigger logo, megamenu navigation, search area and social icons. Footer styles are minimal and clean with ready Twitter and Instagram feed, latest posts, tags, Mailchimp newsletter subscription custom widget with possibilities to assign desired sidebar and other widgets if needed.

    There are 5 beautiful and highlighting slider styles are implemented to make your homepage featured area outstanding with your desired category articles featured there. Thereafter latest/popular block also contains 2 different variations to list your posts in grid or slider format and that is really a great addition to your homepage.

    Social sharing, social following and social feeds are the must to have feature now a days to have social interaction and make your followers aware about your website and the content. Paperio have considered this fact and implemented sharing for all major social platforms, providing nice social profile icons as well as custom widgets for Twitter and Instagram feed.

    Paperio provides freedom to setup blog for any type of content and different domains because of various post types like standard, image, slider, lightbox gallery, quote, video and audio. This will really help bloggers to have every kind of posts with nice and beautiful formatting.

    The main purpose of the blog sites is to achieve readers and make them aware about the various things as per the nature of blog. So SEO is the heart to have your content readable by search engines using on-page SEO techniques and Paperio is already built considering this to make it SEO enhanced implemented from the codebase to climb the search engine rankings and increase your traffic to maximize the ad revenue. Once user reach to your website then it will get him engaged with superfast loading pages with beautiful layout and quality content. We have implemented coding standards in every module considering speed optimization and the most useful option implemented is SRCSET, which will help to serve different size of images as per the width and pixel ratio of the device instead of showing original image and still maintain the image quality.

    Core Features

    • Minimal, simple but still creative and highly flexible blog WordPress theme.
    • 7 ready demo styles for different purpose blogs like interior & home decor, restaurant, food & recipe, art, portfolio and photography, travel & adventure, fashion & lifestyle, business & technology and news & magazine.
    • Highly responsive and retina ready theme to make it look beautiful in all devices including desktop, tablet and mobile.
    • Multi-lingual ready using WPML plugin.
    • Translation ready using the POT language file to localize the theme.
    • 600+ free Google fonts integrated to manage main and alternate font family as well as font sizes.
    • Unlimited ready color skins as well as all other elements major color change possibilities.
    • Pagination styles with prev / next, numbers and indefinite scrolling with AJAX loading.
    • 8 custom widgets like Twitter and Instagram feed, follow us, popular posts and many more.
    • In-built Megamenu with sub menus and banner images as well as direct posts in the menu.
    • Stylish hover effects on images, buttons and links.
    • Contact Form 7 ready and compatible.
    • Mailchimp newsletter subscription ready and integrated.
    • 7 unique and extra-ordinary homepage blog listing styles.
    • WordPress in-built customizer with 400+ options to achieve maximum theme customization possibilities.
    • Codebase is purely done with WordPress standard practices, well structured, commented and optimized for page speed as well as easier to further customize by a WordPress developer.
    • Sticky and non-sticky header options.
    • Homepage featured area with 5 neatly structured and modern slider styles to highlight posts.
    • Latest/Popular post block with 2 clean and polished grid / slider style.
    • Various layouts like no sidebar, right sidebar, left sidebar and both sidebar.
    • Masonry, grid and list styles with adjustable columns.
    • Stylish breadcrumb navigation.
    • Image meta data settings to switch on / off alt and title as well as on / off title and caption in lightbox gallery.
    • All post types integrated well like standard, image, gallery, slider, quote, audio and video.
    • Promotional block shortcode to showcase promotions.
    • Hide / show most elements and further customization options in WordPress customizer.
    • Social media icons in header and footer.
    • Social media sharing for post pages.
    • 5 attractive and user-friendly header styles with logo, social icons, navigation menu and search field.
    • 2 well organized footer styles with custom sidebar insertion and social icons, copyright, instagram feed, twitter feed, newsletter box, latest posts, about and tags.
    • Child theme included for advanced theme customizations.
    • A mostly used and required feature of one click demo import to import your desired demo with only one click.
    • Sidebar setting is available for overall website as well as it can be setup at page and post level also.
    • Post excerpt length setting.
    • Exclude posts which are available in featured slider and popular block in homepage to avoid post duplication.
    • All in one SEO and Yoast SEO compatible.
    • W3 Total cache plugin ready.
    • Visual Composer drag & drop editor compatibility.
    • Mailchimp for WordPress compatibility and design ready newsletter blocks.
    • Built with Bootstrap, HTML5 and CSS3.
    • Text based Font Awesome icons.
    • Built in you may also like posts from the same category.
    • Coming soon and maintenance mode feature.
    • 404 page not found.
    • Header background and body background image supported.
    • Overall theme is well tested in all devices (desktop, tablet and mobile) as well as various browsers (IE 10+, Chrome, Firefox, Safari and Opera also) to make sure it works and looks better everywhere.
    • Detailed documentation and video tutorials to make it easier to explain theme features and options to have your site layout ready in few minutes.
    • Quick and responsive 5 star support from highly experienced team of our experts.

    Credits / Notes

    • Unsplash
    • Mazwai
    • Images used in the demo are for display purpose only, they are not included in the package.

    Changelog

    ver. 1.0 (09.02.2017)
  - initial release

    Support

    Customer satisfaction is our top priority, don’t hesitate to contact us here: http://www.themezaa.com/support.php if you require any assistance. We will try our best to reply within one business day.

    Live Preview Purchase $39.00
  • WordPress Header Customizer (Utilities)

    WordPress Header Customizer (Utilities)

    Purchase $22.00

    Introduction

    Header Customizer is a WordPress plugin developed by vmux which enables you to modify your header by live previewing it at the same time.
    Only after you are happy with your settings, you can save and publish it safely.
    This Documentation is intended to help you configure and get the most of your Header Customizer.

    Header Customizer is a premium WordPress plugin which can replace your WordPress header entirely, is responsive and also has a sticky feature. It enables you to have up to four layers of navigation in your header.

    It’s purpose is to make your website more useful, user friendly and to improve the general look and feel, even on phones and tablets.

    You can modify your header visually using WordPress Customizer API,
    which enables you to make changes to the header while looking at your website at the same time.

    Installing Header Customizer

    This plugin requires minimum WordPress version 3.4.

    You can install Header Customizer via FTP (or copy it by any other techniques) in the following manner:

    1. Download the plugin from and extract the contents
    2. Copy the awesome-header folder to the /wp-content/plugins/ directory
    3. Activate the plugin through the Plugins page in WordPress dashboard
    4. Put following code inside your content: <?php echo apply_filters('hc_print_header', ''); ?>
    • Most of the time it would be in your header.php file, right after opening <body> tag

    Next, using WordPress Customization you can start customizing! Simply inside admin area go to Appearance -> Customize. There choose Header Customizer pane to use this plugin’s features. I prepared you nice gif so you don’t feel confused:

    intro

    Insert Header Into Your Theme

    Simply insert following code right below <body> tag:

    <?php echo apply_filters('hc_print_header', ''); ?>

    And that is it. You’ll be able to see changes while modifying your header through Header Customizer!

    General Settings

    Header Customizer can replace your theme’s header and it can appear once a user scrolls down and your theme’s header disappears from sight (sticky option).

    This panel contains following settings:

    1. Header width – width of the header content
    2. Stretch header width? – should header wrapper stretch the whole width of a browser?
    3. Header left position – if your header is sticky, you should use this option if you don’t want header to be horizontally on the center
    4. Margin top
    5. Margin bottom
    6. Margin left
    7. Margin right
    8. Google Font – choose font for the header; there are more specific options for fonts (e.g. only for logo area) but this is for the whole header at once
    9. Custom CSS – you can type any CSS here; make sure to start your CSS definitions with ”.hc-wrap ” so you don’t mess with other website’s CSS definitions

    Here you can see some playing around inside General Settings (click on this image to see it fully enlarged):

    general settings

    Middle Header

    Middle Header is section of Header Customizer which contains logo area (logo & description) and main menu (with submenus). You can customize following:

    1. Header type – how are your logo and menus placed; by default logo goes on the left side, while main menu goes to the right side of the header; you can set them both centrally aligned, or move menu to the left next to the logo
    2. Background color – background color of middle header, solid color with transparency set optionally through color picker
    3. Background image – background image of middle header (overrides background color)
    4. Background image repeat – background image of middle header (overrides background color)
    5. Background image attachment – the background-attachment property sets whether a background image is fixed or scrolls with the rest of the page; it’s great to set parallax effect for example if set to “fixed”
    6. Background image position – the background-position property sets the starting position of a background image
    7. Background image size – the background-size property specifies the size of the background images
    8. Padding (top/bottom) – padding of middle header so you can fit vertically your menu or logo nicely
    9. Padding (left/right) – padding of middle header so you can set the distance of inner content from left or right side of the screen
    10. Border top (and bottom, left, right) color – not visible until border width is set to at least 1 (one) pixel (px)
    11. Border top (and bottom, left, right) width – width of the border
    12. Top left (and bottom left, top right, bottom right) radius – border radius of the middle header

    Here you can see some playing around with backgrounds inside Middle Header (click on images to see them fully enlarged):

    middle background color

    middle background image

    Here you can see some playing around border radius of the Middle Header so it looks rounded>

    border radius of middle header

    Top Header

    Top Header is another important section of Header Customizer. It contains (same as bottom header) left and right side, which goes centrally aligned when responsive mode is turned on (when your screen size is small, i.e. size set in Responsive Header panel). You can choose for both sides to have either: some other menu, breadcrumbs, current page title or search box. Following are settings that you can modify:

    1. Enabled? – is the Top Header enabled at all? (checkbox)
    2. Left menu side type – choose between menu, breadcrumbs, current page title or search box for the left side of Top Header
    3. Right menu side type – choose between menu, breadcrumbs, current page title or search box for the right side of Top Header
    4. Background color – same here as for Middle Header
    5. Background image – same here as for Middle Header
    6. Background image repeat – same here as for Middle Header
    7. Background image attachment – same here as for Middle Header
    8. Background image position – same here as for Middle Header
    9. Background image size – same here as for Middle Header
    10. Google font family – choose font family only for this (top) header; you may contact me if you need more fonts added
    11. Font size – choose font size only for this (top) header
    12. Border top (and bottom, left, right) color – same here as for Middle Header
    13. Border top (and bottom, left, right) width – same here as for Middle Header
    14. Padding (top/bottom) – same here as for Middle Header
    15. Padding (left/right) – same here as for Middle Header
    16. Link margin (left/right) – margins between links (for example menu items)
    17. Link padding – paddings (top, bottom, left, right) of all links
    18. Menu item padding (left/right) – left and right paddings of menu items only (if menu is set to one of left or right sides); applicable to LI (list) tags of menu
    19. Menu item padding (top/bottom) – top and bottom paddings of menu items only (same applies here)
    20. Link color (and hover color, background color, hover background color) – colors of links
    21. Text color – color of texts (“non-links”, i.e. breadcrumb’s last piece or page title)
    22. Link border color – all four (top, bottom, left, right) borders color; not visible until border width is set to at least 1 (one) px (pixel)
    23. Link border width – all four (top, bottom, left, right) borders width for links
    24. Link border radius – all four (top, bottom, left, right) borders radius for links
    25. Top left (and bottom left, top right, bottom right) radius – same here as for Middle Header

    Bottom Header

    Bottom Header is another important section of Header Customizer. It contains (same as bottom header) left and right side, which goes centrally aligned when responsive mode is turned on (when your screen size is small, i.e. size set in Responsive Header panel). You can choose for both sides to have either: some other menu, breadcrumbs, current page title or search box. Following are settings that you can modify:

    1. Enabled? – is the Bottom Header enabled at all? (checkbox)
    2. Left menu side type – same here as for Top Header
    3. Right menu side type – same here as for Bottom Header
    4. Background color – same here as for Middle Header
    5. Background image – same here as for Middle Header
    6. Background image repeat – same here as for Middle Header
    7. Background image attachment – same here as for Middle Header
    8. Background image position – same here as for Middle Header
    9. Background image size – same here as for Middle Header
    10. Google font family – same here as for Top Header
    11. Font size – same here as for Top Header
    12. Border top (and bottom, left, right) color – same here as for Middle Header
    13. Border top (and bottom, left, right) width – same here as for Middle Header
    14. Padding (top/bottom) – same here as for Middle Header (exists only if you’re currently not on front page)
    15. Padding (top/bottom) on front page – this is same as above except it’s only when you’re on home page! When you’re on page other than home or front (depends on your WordPress settings) then this option won’t exist
    16. Padding (left/right) – same here as for Middle Header
    17. Text color – same here as for Top Header
    18. Link color (and hover color) – same here as for Top Header
    19. Margins for menu items (left/right) – if menu is selected to be on left or right side, this will be their left and right margins
    20. Top left (and bottom left, top right, bottom right) radius – same here as for Middle Header

    Logo Area

    Logo area is part of your header which contains logo (as text or image link) and site description. Following are the settings you can modify:

    1. Logo image – image as your logo
    2. Logo type – set type of your logo: link image or link text
    3. Logo text – site title by default
    4. Maximum width – it’s useful not to stretch when header goes responsive
    5. Padding (top/bottom) – top and bottom paddings; play around to set it vertically nicely against main menu
    6. Google font family – for textual logo only
    7. Google font family for description – for description only
    8. Show logo area? – yes or no (checkbox); if you need to remove logo area completely
    9. Show logo? – yes or no (checkbox); if you need to remove logo only
    10. Show logo description? – yes or no (checkbox); if you need to remove description (tagline) only
    11. Site title color (and hover color) – if your logo is textual, set it’s color here
    12. Site description color – color of logo description (tagline)
    13. Site title font size – font size for textual logo
    14. Site description font size – font size for description (tagline)

    Main Menu

    Main menu is part of header which is placed inside Middle Header alongside with logo area. It’s submenus are placed within Main Submenus section. Following are the settings you can modify:

    1. Link color (and hover color, active color) – these options are only for link (<a> tags) colors; active color is color of a link when on current page
    2. Font size – font size of menu items
    3. Google font family – font family of menu items
    4. Show submenu arrows? – checkbox; show arrow pointing down for menu items which have submenus
    5. Menu margin left (and right) – margin left and right of the whole menu (not menu items!)
    6. Link background color (and hover and active background colors) – only for links
    7. Link border radius – only for links, so they can be “rounded”
    8. Menu item background colors (and hover, active background colors) – for list items (<li> tags!)
    9. Menu items padding (top/bottom) – list tag paddings, so you can align with logo area nicely
    10. Menu items padding (left/right)
    11. Menu items margin (top/bottom)
    12. Menu items margin (left/right)
    13. Menu links padding (top/bottom) – for links (<a> tags)
    14. Menu links padding (left/right) – same
    15. Menu item border top (and bottom, left, right) color – border colors for list items
    16. Menu item border top (and bottom, left, right) width – border width
    17. Menu item top-left (and top-right, bottom-left, bottom-right) radius – each of these options have possibility to exclude all other items except first or last item, so the whole menu looks “rounded” (take a look at the gif example below!)

    To setup main menu, first you need to set any menu you have saved before to be placed to “HC Main Menu” location. Take a look at the following example:

    main menu setup

    Here’s how you can modify link colors for example:

    menu item colors

    Main Submenus

    Submenus appear on hover or click on main menu items. There are up to four levels of submenus to choose how deep submenus will go. Many more options are here, so let’s list them below:

    1. Submenus depth – like stated previously, you can choose how many levels of submenus you’ve got
    2. Show submenu on mouse hover? – whether to click or hover main menu items or submenu items in order to show submenus; responsive header will always react on tap (click)
    3. Background color – background color of all submenus
    4. Min. width – minimum width that your submenus take; by default it’s set to auto
    5. Font size – font size of all submenu items
    6. Border color – border color of all four sides of one submenu column: top, bottom, left, right
    7. Border top (and bottom, left, right) width – four separate options for borders’ width
    8. Menu items border top (and bottom) color – border color of submenu links (except first one, or last one if it’s bottom color)
    9. Menu items border top (and bottom) width – border width of submenu links (except first one, or last one if it’s bottom width)
    10. Shadow – shadow set using CSS property box-shadow; it’s set in text field using full definition, e.g. 2px 2px 2px 2px rgba(85, 85, 85, 0.8) and when you make changes to any of the values you can see them live as you type

    Breadcrumbs

    Breadcrumbs are great for improving your website’s visibility on Search Engines and SEO. Header Customizer’s breadcrumbs implement data-vocabulary.org definition.

    1. Font size – font size of breadcrumbs only
    2. Google font family – font family for breadcrumbs only
    3. Show home page link? – whether breadcrumbs show link to home page; by default it does
    4. Separator text – separator character(s) which sit in between page links
    5. Separator color – color of separator text
    6. Separator margins (left/right) – separator margins

    Note: Breadcrumbs are placed in Top or Bottom header, but first you need to activate any of them and place Breadcrumbs as left or right side menu, like so:

    Breadcrumbs

    Page Title

    Page title is very suitable to be placed on bottom part of the header. It shows page name of the current page. You can modify the following:

    1. Color – color of page title
    2. Show on home page? – whether to show title for home page
    3. Margin top/bottom
    4. Font size – font size of page title only
    5. Font family – font family of page title only

    Note: To have page title you must select it as left or right side menu in Top or Bottom headers.

    Search Box

    Search box should be integral part of your header if you would like to have it there instead of, for example, on sidebar. You can change many settings here:

    1. Color – text color only; color of typed text (not placeholder)
    2. Width – basic width of the box
    3. Font size – font size of search text
    4. Font family – font family of search text
    5. Background color – background color of the box
    6. Placeholder – placeholder of input field
    7. Border color – border color of the box
    8. Border width – border width of the box
    9. Padding top/bottom (and left/right) – paddings of input field
    10. Margin top (and bottom, left, right – margins of the box
    11. Border radius top-left (and top-right, bottom-left, bottom-right) – border radius of the search box

    Note: To have search box you must select it as left or right side menu in Top or Bottom headers.

    Responsive Header

    Responsive header appears when your screen size (which you can also set) is small enough for your header so it transforms making it appealing for your phone or tablet. You can set following options:

    1. Responsive Width – width which defines breaking point between desktop and responsive header; when you load your website on screen sizes below this point your header will look “minified”
    2. Hamburger Color – “hamburger” icon appears instead of your main menu, which you can click on to show the menu on small screens but this time the menu items are ordered below each other

    Sticky Header

    And finally, the sticky header. As most of us are already familiar with this term, it means that your header “sticks” on top of your website even when you start scrolling down the content. Sticky header greatly
    improves bounce rate of your visitors. You can turn it off and on by simply check/uncheck the checkbox. For now you are presented with following settings:

    1. Is sticky header enabled? – as mentioned above, you can easily enable/disable sticky header with this checkbox
    2. Offset – in pixels, this is the distance how long you scroll until the header sticks to the top; it can also be set to zero so your header becomes sticky immediately
    3. Padding top/bottom for Top Header – paddings only for Top Header; this is very helpful so you can for example make header smaller in height when it becomes sticky (with nice transition effect)
    4. Padding top/bottom for Middle Header – same as point above but for Middle Header
    5. Padding top/bottom for Bottom Header – same as point above but for Bottom Header
    6. Show Top Header? – you can hide (or not) Top Header completely when the header becomes sticky
    7. Show Middle Header? – same as point above but for Middle Header
    8. Show Bottom Header? – same as point above but for Bottom Header

    sticky header

    Uninstalling

    You can find uninstall (delete) option after you deactivate the plugin from the Plugins page.

    Keep in mind that when you delete Header Customizer you will also delete all of its color, menu and any other settings. If you only deactivate the plugin, its settings will remain and will not need to be entered again if plugin is re-activated.

    For support requests please use my support page. If you like the plugin, please take the time to rate it. It means a lot to me.

    Purchase $22.00