Tag: live preview

  • Backend Reside Preview for Visible Composer (Add-ons)

    Backend Reside Preview for Visible Composer (Add-ons)

    Say goodbye to the hassle of switching between your preview and the backend Visual Composer editor just to check the changes you’ve made. Backend Live Preview gives you the actual preview of your website right beside the Visual Composer backend editor. The preview updates on your every change and also lets you toggle between desktop, tablet and mobile phone responsive views.

    Try out Backend Live Preview for VC in a live environment first before you buy

    Backend Live Preview for Visual Composer was created because we always used VC’s backend editor instead of the frontend one. The backend was faster, more robust, and from experience, some shortcodes didn’t render properly in the frontend. However, the problem was that we had to constantly click on the preview button just to see whether our resulting design looked great. The few seconds that it takes to load up the preview and switching from tab to tab eats a lot of your time.

    Now with Backend Live Preview, there’s no more need to switch between tabs to view your layout. Switch to VC’s full screen mode and you’ll be presented with a live preview of your page/post, that updates with every change you perform. You’ll also be able to preview your page in desktop, tablet and mobile phone screen sizes. Backend Live Preview will change how you use Visual Composer, and will bring your efficiency through the roof.

    Try out Backend Live Preview for VC in a live environment first before you buy

    Awesome Features

    • Live preview of your page in VC’s backend editor
    • The preview updates with every change you perform
    • Renders shortcodes even from third-party VC addons without any problems
    • Interact with your preview, it’s a live page after all
    • Integrates directly with VC’s full screen backend mode
    • No additional configuration, it just works out of the box
    • Toggle between desktop, tablet, and phone screen resolutions
    • Compatible with our Undo and Redo VC addon
    • Compatible with our Google Fonts VC addon
    • WordPress coding standards
    • Visual Composer Addon

    Enjoying the Plugin?

    Be sure to leave a rating and review and show us some love.

    Updates

    Version 1.0

    * Initial release

  • WordPress Header Customizer (Utilities)

    WordPress Header Customizer (Utilities)

    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 attachmentthe 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 positionthe background-position property sets the starting position of a background image
    7. Background image sizethe 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 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.

  • AnimateKit – Animation Instruments for Layers (Add-ons)

    AnimateKit – Animation Instruments for Layers (Add-ons)

    AnimateKit – Animation Tools for Layers

    An extension for Layers that adds advanced animation effect customization to WP Customizer, allowing you to quickly add an animation effect to any elements on your site.

    Demo URL http://demo.themestry.co/animate-kit/

    What you can do with this extension :

    • Add animation effect to basic theme elements such as header, logo, page title, posts loop, sidebar, etc as defined in default settings in the visual Customizer.
    • Add animation effect to custom element selectors. Good if you want to add an animation to the elements that was added by third party plugin or to any elements which is not listed in the default settings.
    • Choose effect from 100+ animation effect ready in the list.
    • Set the animation duration, delay, and number of how many times the animation should be repeated.
    • Disable animation on mobile.
    • See the live preview of animation effect you added to your elements. very useful before you save the settings.

    Features:

    • 100+ animations ready for your elements.
    • Default theme elements lists ready in the visual Customizer settings.
    • Custom elements builder to allow you to add specific element selectors.
    • Options to adjust animation when it should be started (by scroll or by mouse hover).
    • Options to adjust animation duration, delay and number of animation repeats.
    • Options to disable animation on mobile.
    • Live preview animation in visual Customizer.

    Bonus :

    • Animate Slider Layers Widget

    Credits:

    We’ve used these following resources for AnimateKit :

    Changelog:

    Version 1.0.0 – xx/xx/2015

    - Initial version release.
    

    Like our products ?

    Follow us on Social Media below to get any info regarding our products:

  • Visible Styler –  customise your web site straightforward (Utilities)

    Visible Styler – customise your web site straightforward (Utilities)

    VISUAL STYLER allows you to customize any element on your WordPress website using friendly visual interface with live preview.

    You can change almost any CSS rule, eg. color, background, border, font size and so on.
    Also you can set specific CSS rules for mouse-hover state and responsive breakpoints (mobile screens, tablets and large screens).

    You can see history of all changes and edit/disable or delete any change that you have made.

    This plugin is compatible with all WordPress themes, WooCommerce and works fine on WordPress Multisite Installations.

    FEATURES

    – Change style of any element on the your website;
    – Friendly visual editor with live preview;
    – Flexible element path editor;
    – Responsive breakpoints for mobile devices;
    – Option panel which allows you to preview your website on mobile devices;
    – Changes history;
    – Works with all themes;
    – Compatible with WooCommerce and WordPress Multisites;
    – Export generated CSS code;

  • CSS Reside Editor WordPress Plugin (Add-ons)

    CSS Reside Editor WordPress Plugin (Add-ons)

    CSS Live Editor helps you to fix up the styles of your website straight from your frontend, with a live preview!

    Have you ever wanted to adjust some CSS in your website, and you find yourself going BACK into the backend just to edit your page or add some customized CSS? Then after previewing your site, you find that you still need more adjustment? If you have, then this plugin is for you.

    Features: CSS Live Editor window preview

    Put in your CSS in the editor window, and your styles will be applied directly to your website as you type. This live preview is so helpful and will save you time when finding out the perfect style. When you’re done, then just click the save button and your styles would be saved.

    CSS Live Editor is for both expert and novice web developers and designers.

    You can use plain CSS or SCSS syntax in the editor. And because of this, you can use variables, functions and nesting. This makes the CSS Live Editor really powerful. For example, you can add your variables for your ‘entire site’ styles, then use them in the different parts, such as the styles ‘specific for this page’.

    Error checking is also built-in, so when you have an error, an indicator will be displayed near where the error occurred. Hover your mouse over the indicator and the error message will show up to help you figure things out. CSS Live Editor has 2 levels of error checking. Saving your CSS can sometimes show you error messages.

    Why and Where to Use This

    You can use it for tweaking and even while developing your website.

    We ourselves use this for creating styling websites for our clients. We found that editing your styles along with a live preview of how the entire site would look like is a powerful time-saving tool. SCSS and nesting rules also ensure that your code is small and tidy.

    Here’s a good tip for you: Use CSS Live Editor with your browser’s inspector or developer console, so that you can quickly get the id and/or class names that you need.

    Features

    Features: Edit CSS from the frontend, View a live preview of your CSS as you type, Use plain CSS or SCSS syntax: use variables, functions and nesting, Syntax error checking with error annotations, Apply styles to your entire site, all pages or post types or even specific pages,

    • Edit CSS from the frontend,
    • View a live preview of your CSS as you type,
    • Use plain CSS or SCSS syntax: use variables, functions and nesting,
    • Syntax error checking with error annotations,
    • Apply styles to your entire site, all pages or post types or even specific pages,
    • Little overhead since SCSS is compiled when it’s going to be used,
    • The Editor is only available if you have privileges to edit your theme,
    • Only the CSS needed for your site is loaded in the frontend,
    • Lightweight,
    • Cleanly coded in WordPress standards

    Having Trouble with the Plugin?

    Head over to the support tab and check out the FAQs, or submit a support ticket!

    Enjoying the Plugin?

    Be sure to leave a rating and review and show us some love.

    Check out Our Other Stuff

    Video & Parallax Backgrounds For Visual Composer

    CSS Animator add-on for Visual Composer

    4k Icons add-on for Visual Composer

    Updates

    Version 1.0

    * Initial release

  • GTheme – Progressive wordpress Web page Builder Framework (Utilities)

    GTheme – Progressive wordpress Web page Builder Framework (Utilities)

    GTheme

    GTheme

    Revolutionary WordPress Page Builder Framework

    The Concept

    GTheme is a page builder framework which will reduce the work of developers to less than half and will at least double the sales. Most people are buying the WordPress themes with page builders for building static pages.

    That’s why GTheme was created: a page builder which can handle the same code to build both HTML5 static pages and WordPress dynamic pages.

    Each GTheme object has a shortcode function, which
    generates the content, and a configuration, which defines the input type for each shortcode attribute.

    It’s simple, efficient and insanely useful.

    HTML5 and WordPress

    GTheme is the best of both worlds. Both the HTML5 and WordPress versions visually generate the objects using WordPress Shortcodes, which means the same GTheme Object works in both WordPress and HTML5.

    Drag and Drop Interface

    GTheme has an intuitive drag and drop object reordering to make your life much easier. But that’s not even the best part.

    Extremely Customizable

    GTheme comes with a huge number of built in Objects and input types. For users, it offers hundreds of website customization possibilities: even custom in page HTML, CSS or Javascript.

    Copy Paste!

    GTheme is the only Premium Page Builder Framework which has the possibility to Copy, Cut and Paste your objects directly. That’s an insane advantage.

    Built-in Elements

    GTheme comes with an impressive number of already set up elements for you to use or restyle. GTheme has an amazingly simple API, allowing you to add, edit and remove elements in no time.

    Responsive

    GTheme is built to be used together with Bootstrap, coming with all the Bootstrap components built in for you to use. Not only is it responsive, but you also have complete control over the grid.

    Try it out for free!

    Complete Features List

    • Compatible with any Theme
    • Same object code for WordPress and HTML5
    • Drag and Drop Interface
    • Powered by Bootstrap 3
    • Built using SASS
    • Easy to Develop
    • Easy to create templates
    • Well structured SCSS Files
    • Based on Shortcodes
    • Live Preview in backend
    • Fully Customizable
    • Easily Extendable
    • Object Oriented
    • Great Documentation
    • Professional Lifetime Support
  • Sexy Creator Field (Utilities)

    Sexy Creator Field (Utilities)

    The most attractive author box plugin with 24 skins included.
    You can choose the skin in admin panel and live preview without page reload.
    Also include shortcode, widget and template tag.
    Google authorship verification is also included.

    Main Features

    Live preview of skin select

    Place anywhere

    Customization of tabs

    Widget Ready

    Sample

    Update History

    Oct 9 2013: Version 1.0 Initial Release
  • Horny Writer Field (Utilities)

    Horny Writer Field (Utilities)

    The most attractive author box plugin with 24 skins included.
    You can choose the skin in admin panel and live preview without page reload.
    Also include shortcode, widget and template tag.
    Google authorship verification is also included.

    Main Features

    Live preview of skin select

    Place anywhere

    Customization of tabs

    Widget Ready

    Sample

    Update History

    Oct 9 2013: Version 1.0 Initial Release