Ninja Menus extension for Magento 2

Size: px
Start display at page:

Download "Ninja Menus extension for Magento 2"

Transcription

1 Ninja Menus extension for Magento 2 User Guide Version 1.0 0

2 Table of Contents Ninja Menus I) Introduction... 2 II) Menu Grid... 3 III, Add new menu General setting Advanced settings IV, Menu builder Add Item Edit item a, General tab b, Icon tab c, Sub Menu tab d, Design Options tab Delete item Change item's position Add new item a, Add new item b, Add new sub item V, Our 7 elements Anchor Container Image Html Heading Clear columns Divider VI, How to Configure menu item for Multiple Store view Setup Multi Columns Import Store Categories Replace Magento default top navigation menu VII, Contact Information

3 I) Introduction This document is the User Guide for Magento 2 Ninja Menus. It describes the extension functionality and provides some tips for a quick start. Magento 2 Ninja Menus is an EASY-TO-USE and extremely CREATIVE extension. No need to be professional in coding and technical skills, you can still make your own navigation menu just by using our simple and intuitive drag & drop interface. Drag & Drop Magento 2 Menu Builder Support horizontal, vertical, accordion navigation menu Support 7 elements: anchor, container, HTML, image, heading, divider, clear columns 100% Fully Responsive Support multiple stores Support multiple languages Create unlimited level Customize the style of the menu item: background color, font size,... 2

4 II) Menu Grid Once the extension has been installed, the section Menus will appear in the Content menu. To go to admin grid of Ninja menus extension, navigate to Content > Menus or Menus > Manage Menus and you will see something like this: 3

5 You can apply the following actions: Filter: filter menus using different criteria to find your wanted ones. Columns: click here and a drop-down list will appear. Tick the columns you want to appear in the table. In the below image, you can see and tick columns such as ID, Name, Identifier, Type, Status, etc. 4

6 Actions: Include the following actions applied to the selected menus in the list: - Delete: remove the chosen menus from the list. - Enable: enable the chosen menus. - Disable: disable the chosen menus. Per page: Number of menus displayed per page. 5

7 Move to the following table - The 1st column: there are some boxes for you to tick so you can select or unselect your desired menu. The drop-down box above let you select all the menus existing. - The 2nd and 3rd columns: The ID number and names given for each menu when you created. - The 4th and 5th columns: Type and Status - The 6th and 7th column: Time created and modified - The last one - the most important one: Let you edit and manage the existing menus. 6

8 III, Add new menu Navigate to Menus > Add New Menu or directly click on orange Add New Menu button The display will be like: - Back button helps you come back your previous step - Save button helps you save every change you made. Be noticeable to use this button right and usually in order not to loose any important change. - Click on arrow button to show what's on Advanced Settings 7

9 1. General setting A drop-down list will appear after clicking on Add New Menu button: Enabled: Slide the button to Yes to enable Menu on your website and it will be displayed in your storefront. Menu Name (required): Enter the menu name to manage your menu list easily. Identifier (required): Enter a set of numbers, letters, or symbols that is used to represent a piece of data or a process in a computer program Type: Choose the type you want from the drop-down list. We'll show you how your menu look in each type here below 8

10 - Horizontal menu. Take a closer look here - Vertical menu and more detailed here 9

11 - Accordion, or you can look closer 10

12 2. Advanced settings Enable Sticky Menu: Slide the button to Yes and your menu will stick to the top on storefront when scrolling down. Like this CSS Classes: For advanced only (coder, programmer..) Mobile Breakpoint(px): The size of screen (in pixel) in which your menu will automatically switch to mobile display mode 11

13 IV, Menu builder To come in Edit mode (Menu builder), choose the menu and click Edit Overview Please pay more attention cause this is the most important part of this guide Generally, we've already created 3 demo menu in 3 different types: Vertical, Horizontal and Accordion for you to get an overview. As they get the same function setting, i will only demonstrate the function of Horizontal type. After adding, your menu will be listed. In the table, click on Edit button, you can go directly to the builder mode. 12

14 Builder tab is right below General tab, click on drop-down button so you can see something as the image below: - Blue Add Item button let you add new items to you menu. - Red Delete All give you right to delete all the items existing. - Green Import Store Categories helps easily create normal type of menu with existing Category list 13

15 1. Add Item Blue Add Item button let you add new items to you menu. After saving, this is how it look it storefront: 14

16 2. Edit item Once you created new item, you can edit easily, using this button Click on the pencil symbol and you will see a pop up like this: 15

17 a, General tab Title and Subtitle: Enter/edit/delete the name of your category. In this case we change it to Women and Clothes" And see how it works: Type: Choose the type of your category including: - Custom Link: If you choose this type, enter your link in the below box 16

18 In this case we make it our link: So the result when you click on Magezon1 will be: 17

19 - Category Link When you choose Category Link Type, the Category will have a dropbox like this. This case, we chose Women category for example: 18

20 And here is the result when clicking on the item Magezon1 19

21 - CMS Page Link Do the same with the last Type: CMS Page Link and choose a Page in the drop-down box. 404 Not Found is chosen in this case And the result: 20

22 - Caret: A dropbox show off when you click on the Insert icon button let you choose an additional symbol to appear next to the category title. Glass Icon is chosen as Caret for Magento1 in this case - Caret on hover: You can only see this kind of symbol when you hover your mouse to the category on the storefront. Heart Icon is chosen as Caret on Hover in this case Note: If you remember the code/name of the icon, you can absolutely search icon by typing in search box. 21

23 Let s see the result in storefront: - Target: Four ways to open linked document: + In a new window/tab + In the same window/tab + In the parent frame + In the full body of the window 22

24 - Hide on mobile: Switch the button to decide whether your element is shown in frontend on mobile devices or not. Try turning it on and check it by your mobile: 23

25 - Class Attribute: For coders/programars or those who have coding skill only. => After making all the needed changes in this tab, don t forget to click Save button before doing anything else. b, Icon tab There's a slide Show icon button -> Switch it to Yes. And you can see a list like this 24

26 - Add new Icon for your category by clicking on plus button to choose image from your device or paste your Image Url in the given box. This case an Image Url are entered. - Manage the Icon position by choosing Left or Right in the dropdown box. This case we choose left. - Add Icon on Hover just by the same way you add the new one. This case Image Urls are entered 25

27 Let's see: 26

28 c, Sub Menu tab - Type: Mega Submenu and Stack menu (No position option cause the former submenu arranged on top of the follower). When you choose the Mega Submenu Type, the display will be like 27

29 Position: Select the place you want to display your sub menu and it's children in the dropdown list. If we choose Center, your submenu will display right under the parent and make a straight column with its parent. And here is its display in storefront: What about Left edge of menu bar? 28

30 And how it look in Right Edge of menu bar Let's try Left Edge of parent item 29

31 Or Right When you choose Left Edge - Vertical - Full Height, it will display like this 30

32 And the last one: But if you choose Stack menu instead and keep the Width the same. The stack menu help you show off the children of an item without hovering your mouse on it. 31

33 The result will be like: 32

34 - Width: Enter the number you want in the box - Background Image: Insert by clicking on plus button or pasting UrL - Background Color: Click to choose from the palette or enter color code or enter the exact code of the color. - Background Position: Enter position (left or right) - Background Style: Choose your style in the dropdown list - Inline CSS: For coder and programer only for advanced setting. 33

35 We ve made an example setting for Category Digital in the backend 34

36 And here is the result: 35

37 d, Design Options tab Design Options tab will look like this Let go through an example to see how they work: - Color setting Set your color in 3 conditions: Select appropriate color for each section: Font, Background, Border by choosing from palette or enter exact color code Normal 36

38 When you Hover And when Active 37

39 - Border and Padding 38

40 - Edit your menu text by adjusting Alignment, Border Style, Font size (in pixel), Inline CSS 39

41 Let's give an example on Electronics category: 40

42 3. Delete item Navigate you pointing mouse to the category you want to delete and click the red recycle bin symbol. As you see, it's gone 41

43 4. Change item's position You can change the position by 2 ways: - Drag and drop: the easiest and quickest way. Which this action, you can move an item to anywhere you want Ex: We are changing Electronics category to the place of Custom in figure 4.1 Fig 4.1 How it look the storefront (4.2) Fig

44 Or even the item in menu (4.3) Fig 4.3 And how it look (4.4) Fig

45 - Using arrow symbol: Switch your item's position to the left or right (4.5) Fig 4.5 And the result in frontend (4.6 & 4.7) Fig 4.6 Fig

46 5. Add new item a, Add new item To add a new Item in your menu, click on Add item button (as described above: A new item appears with default name (Item 1,2,3..) like this: Then, click on the item to see symbols, click on the pencil symbol to see a pop-up where you can edit your new item. How to use the option inside the pop-up is described in detail in section 2 - Edit item. 45

47 b, Add new sub item To add new sub item, Choose a parent first (This case it is About us), then click on plus symbol\anchor A new sub item appears with its default name Click on the area to see all options, then click on pencil symbol to Edit your new sub item. Edit the sub item in just the same way of new one. This case we do some setting as shown in following figures 46

48 General tab 47

49 Icon Tab And here is the result: 48

50 V, Our 7 elements Last but not least, we'll show you how to use plus symbol. After clicking you can see this 49

51 1. Anchor Anchor element let you make a new sub menu (children of the category you just click on). As shown above, the default title of the new categories are Item 1,2,3 but you can absolutely change and adjusting by clicking on pencil symbol. Unsurprisingly, this feature let you create multi-level sub menu. Let's go through step by step - Sub menu History: Click on plus button\anchor - General tab: 50

52 - Icon tab: - Submenu tab: We ve made 3 levels for About us. They are: History, Our team and Our vision using this element and edit by pencil symbol (as described above) 51

53 How it look in the backend Let see how amazing it will be in storefront 52

54 2. Container Unlike Achor, when you add a Container, it means you add a no-title box to your menu. Just a blank space, no title editing. You can only edit style (width, background color, style, position ) in Submenu tab and Class Attribute (For those who have coding knowledge) in General tab Remember: Adding container means you add another background for your menu. To see how it display, add more items inside it. Here is an example using this type of element 53

55 In the edit mode, tab Submenu, we choose: Then, add Item 1,2 to the container 54

56 And the result: 55

57 3. Image Click on the Image element to create a new space Click on that space and choose pencil symbol a pop up appear - Click on Upload File to choose existing images from your device or enter/paste Url for this - Alternative Text: Enter the text you want to display when your site can't load the image - Enter the Title Tag - Adjust the size you want by enter the Width and Height box (pixel) 56

58 Let s try with this setting: => Don t forget to save when you finish 57

59 And the result 58

60 4. Html Click on Html element, you can see Edit your content here with WYSIWYG Editor (You see what you get) button. Try Money ain't everything" 59

61 You can see it in frontend 60

62 5. Heading Make your parent categories easier on the eyes by Heading element with full Design options for you to edit. Click on the pencil symbol of heading, you can see this - Adjust Title, choose Type on General tab - Design your Heading on Design Options tab (Full options). We make this setting as an example 61

63 6. Clear columns This element help separate items in the same row but still keep their own width To add a new clear column, click there 62

64 Click on the edit symbol the new column, there will be a pop-up like this Decide whether you want your column to display in the frontend or not by switching Hide on Mobile slide button. Class Attribute: For coder only You can change the position of the new column by clicking on the arrow button, move it up or down. This case we create a clear column to separate item Socks and ties with the image 63

65 And here is the result 64

66 7. Divider When adding divider, you can add a title with a cross line that separate other items Like this and edit it 65

67 And the result will be like 66

68 VI, How to 1. Configure menu item for Multiple Store view To configure the menu items, click on the caret of All stores view, and choose 1 store view you want to edit. We choose English store first. 67

69 In English view, it will no longer have 3 buttons: Add Item, Delete All & Import Store Categories It means you just can edit the text of your items Now it's time to do it 68

70 In the storefront, choose English for your view mode by clicking on this Then see your result Do the same with other languages. France, for example 69

71 2. Setup Multi Columns For example, you want to setup multi columns for this category. We will show you how to group this 10 items into 5 columns Firstly, you should understand the rule of our items is auto-filling. You got a container with 100% in width and so are the items. If you want them to be set in 5 columns, just create 5 container, and turn the item's proportion to 1/5 of 100% (20%). Create 5 container 70

72 Create 2 items for each Then change the width to 20% 71

73 What you see in backend: And the result in storefront: 72

74 3. Import Store Categories As clicking on that green button, a pop-up appears: 73

75 - Category box displays list of categories for you to choose. Some categories have children like this As soon as you select one category and click Import -> It will be automatically added to your menu, including all its children Like this 74

76 Result in storefront - Import Childrens is a slide button. When you turn it to Yes, all the children of the category chosen (if it has children) will be added as separate categories in the right side of the parent. On the storefront 75

77 4. Replace Magento default top navigation menu Ninja Menus First, you have to create your own new menu with your store's categories. We make this as an example: In the General Setting part, make sure you turned the Enable Menu to Yes and named your menu first. This case we make it Top-menu. Then, in the Identifier field, enter exactly the word top-menu" and let our code do the rest. 76

78 Now, see the result if you do it in a right way 77

79 Note: If you enter wrong code in the Identifier field, your menu will not be displayed in the storefront. Like this: And the result will be like: 78

80 VII, Contact Information If you have any questions or need any support, feel free to contact us via following ways. We will get back to you within 24 hours since you submit your support request. - Fill out Contact Us form and submit to us. - us at support@magezon.com. - Submit a ticket. - Contact us through Skype: support@magezon.com. - Contact us on live chat: support@magezon.com. 79

MEGA MENU USER GUIDE. Phone: Extension version: 1.0 Magento Compatibility: CE 2.

MEGA MENU USER GUIDE.  Phone: Extension version: 1.0 Magento Compatibility: CE 2. support@magestore.com sales@magestore.com Phone: +1-415-954-7137 MEGA MENU USER GUIDE Extension version: 1.0 Magento Compatibility: CE 2.0 Table of Contents 1. INTRODUCTION... 3 2. HOW TO USE AND CONFIGURE...

More information

Mega Menu for Magento 2. User Guide

Mega Menu for Magento 2. User Guide Mega Menu for Magento 2 User Guide Table of Contents 1. Mega Menu Configuration 1.1. Accessing the Extension Main Setting 1.2. General 1.3. Top Menu Configuration 1.4. Left Menu Configuration 1.5. Mobile

More information

Custom Contact Forms Magento 2 Extension

Custom Contact Forms Magento 2 Extension Custom Contact Forms Magento 2 Extension User Manual This is the user manual of Magento 2 Custom Contact Forms v100.0.0 and was last updated on 29-06-2017. To see what this extension can do, go to the

More information

Blue Form Builder extension for Magento 2

Blue Form Builder extension for Magento 2 Blue Form Builder extension for Magento 2 User Guide Version 1.0 Table of Contents I) Introduction......5 II) General Configurations....6 1) General Settings.....7 2) ReCaptcha... 8 III) Manage Forms......

More information

MAGENTO 1 MEGAMENU. (Version 3.1) USER GUIDE

MAGENTO 1 MEGAMENU. (Version 3.1) USER GUIDE MAGENTO 1 MEGAMENU (Version 3.1) USER GUIDE Confidential Information Notice Copyright 2016 All Rights Reserved. Any unauthorized reproduction of this document is prohibited. This document and the information

More information

New Website User Manual

New Website User Manual New Website User Manual General Notes 3 How To Login To Your Website And Access Admin Dashboard 4 Adding / Editing Sliders 5 Home Slider 5 School Slider (Same steps for ALL school pages) - Add a Slide

More information

Mega Menu - Magento 2 USER MANUAL MAGEDELIGHT.COM

Mega Menu - Magento 2 USER MANUAL MAGEDELIGHT.COM Mega Menu - Magento 2 USER MANUAL MAGEDELIGHT.COM License Key After successfully installing the Mega menu extension on your Magento store, first of all you required to enable Mega menu within the admin

More information

Navigation Menu Pro Extension

Navigation Menu Pro Extension Navigation Menu Pro Extension User Guide https://www.magebees.com/magento-navigation-menu-proresponsive-mega-menu-accordion-menu-smart-expand-menu.html Navigation Menu Pro Extension By Support Ticket:

More information

How to set up a local root folder and site structure

How to set up a local root folder and site structure Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where

More information

Contents. Xweb User Manual

Contents. Xweb User Manual USER MANUAL Contents 1. Website/Pages/Sections/Items/Elements...2 2. Click & Edit, Mix & Match (Drag & Drop)...3 3. Adding a Section...4 4. Managing Sections...5 5. Adding a Page...8 6. Managing Pages

More information

Creating and Managing Your Personal Mines Website on WordPress

Creating and Managing Your Personal Mines Website on WordPress Creating and Managing Your Personal Mines Website on WordPress Table of Contents Creating your site... 2 Managing your site... 2 About WordPress... 2 Logging in... 2 Pages... 2 Editing an Existing Page...

More information

A Guide to Using WordPress + RAVEN5. v 1.4 Updated May 25, 2018

A Guide to Using WordPress + RAVEN5. v 1.4 Updated May 25, 2018 + v 1.4 Updated May 25, 2018 Table of Contents 1. Introduction...................................................................................3 2. Logging In.....................................................................................4

More information

HOW TO USE THE CONTENT MANAGEMENT SYSTEM (CMS) TABLE OF CONTENTS

HOW TO USE THE CONTENT MANAGEMENT SYSTEM (CMS) TABLE OF CONTENTS HOW TO USE THE CONTENT MANAGEMENT SYSTEM (CMS) TABLE OF CONTENTS GETTING STARTED (LOGIN) 2 SITE MAP (ORGANIZE WEBPAGES) 2 CREATE NEW PAGE 3 REMOVE PAGE 6 SORT PAGES IN CHANNEL 7 MOVE PAGE 8 PAGE PROPERTIES

More information

Joomla! extension JSN EasySlider User Manual

Joomla! extension JSN EasySlider User Manual Joomla! extension JSN EasySlider User Manual (for JSN EasySlider 2.0.x) www.facebook.com/joomlashine www.twitter.com/joomlashine www.youtube.com/joomlashine This documentation is release under Creative

More information

Blue Form Builder extension for Magento2

Blue Form Builder extension for Magento2 Blue Form Builder extension for Magento2 User Guide Version 1.0 Table of Contents I) Introduction.. 4 II) Installation 5 III) General Configurations...6 IV) Manage Forms.. 7 1) List of Forms 7 2) Add New

More information

QRG: Using the WYSIWYG Editor

QRG: Using the WYSIWYG Editor WYSIWYG Editor QRG: Using the WYSIWYG Editor WYSIWYG stands for What You See Is What You Get. The WYSIWYG Editor is the reason you don t need to be an IT Programmer to write content for your web page.

More information

Starting Your SD41 Wordpress Blog blogs.sd41.bc.ca

Starting Your SD41 Wordpress Blog blogs.sd41.bc.ca Starting Your SD41 Wordpress Blog blogs.sd41.bc.ca The web address to your blog starts with blogs.sd41.bc.ca/lastnamefirstinitial (eg. John Smith s blog is blogs.sd41.bc.ca/smithj) All work is done in

More information

Installation and Activation of Foody pro theme

Installation and Activation of Foody pro theme Installation and Activation of Foody pro theme Installation 1. Install Word Press from http://codex.wordpress.org/installing_wordpress. 2. Upload via Word press Admin: - Go to your WordPress admin panel,

More information

USER GUIDE. MADCAP FLARE 2017 r3. QR Codes

USER GUIDE. MADCAP FLARE 2017 r3. QR Codes USER GUIDE MADCAP FLARE 2017 r3 QR Codes Copyright 2018 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document is

More information

PlayerLync Forms User Guide (MachForm)

PlayerLync Forms User Guide (MachForm) PlayerLync Forms User Guide (MachForm) Table of Contents FORM MANAGER... 1 FORM BUILDER... 3 ENTRY MANAGER... 4 THEME EDITOR... 6 NOTIFICATIONS... 8 FORM CODE... 9 FORM MANAGER The form manager is where

More information

COMSC-031 Web Site Development- Part 2

COMSC-031 Web Site Development- Part 2 COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal December 5, 2013 Chapter 13 13 Designing a Web Site with CSS In addition to creating styles for text, you can use CSS to create

More information

JSN EasySlider Configuration Manual

JSN EasySlider Configuration Manual JSN EasySlider Configuration Manual Introduction Product Overview JSN EasySlider JSN EasySlider is the cutting-edge way to present content on website: Informative - Impressive - Interactive. It helps you

More information

Overview of the Adobe Dreamweaver CS5 workspace

Overview of the Adobe Dreamweaver CS5 workspace Adobe Dreamweaver CS5 Activity 2.1 guide Overview of the Adobe Dreamweaver CS5 workspace You can access Adobe Dreamweaver CS5 tools, commands, and features by using menus or by selecting options from one

More information

Joomla Website User Guide

Joomla Website User Guide Joomla Website User Guide www.ardengemcsu.nhs.uk Table of Contents Introduction... 3 Editing pages... 4 Styling content... 5 Hyperlinks... 6 Inserting an image... 7 DOCman... 11 Glossary of terms... 14

More information

How to lay out a web page with CSS

How to lay out a web page with CSS Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style

More information

Using Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links

Using Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.

More information

JSN PageBuilder 2 User Manual

JSN PageBuilder 2 User Manual JSN PageBuilder 2 User Manual Introduction About JSN PageBuilder 2 JSN PageBuilder 2 is the latest innovation of Joomla PageBuilder with great improvements in terms of design, features, and user experience.

More information

Learning to use the drawing tools

Learning to use the drawing tools Create a blank slide This module was developed for Office 2000 and 2001, but although there are cosmetic changes in the appearance of some of the tools, the basic functionality is the same in Powerpoint

More information

Dreamweaver Basics Outline

Dreamweaver Basics Outline Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working

More information

Website Management with the CMS

Website Management with the CMS Website Management with the CMS In Class Step-by-Step Guidebook Updated 12/22/2010 Quick Reference Links CMS Login http://staging.montgomerycollege.edu/cmslogin.aspx Sample Department Site URLs (staging

More information

STORE LOCATOR USER GUIDE Extension version: 1.0 Magento Compatibility: CE 2.0

STORE LOCATOR USER GUIDE Extension version: 1.0 Magento Compatibility: CE 2.0 support@magestore.com sales@magestore.com Phone: +1-606-657-0768 STORE LOCATOR USER GUIDE Extension version: 1.0 Magento Compatibility: CE 2.0 Table of Contents 1. INTRODUCTION 3 Outstanding Features...3

More information

NVU Web Authoring System

NVU Web Authoring System NVU Web Authoring System http://www.nvu.com/index.php Table of Contents Using Nvu as Your Web Page Authoring System: Getting Started Opening a page, saving, and previewing your work...3 Formatting the

More information

Dreamweaver CS5 Lab 4: Sprys

Dreamweaver CS5 Lab 4: Sprys Dreamweaver CS5 Lab 4: Sprys 1. Create a new html web page. a. Select file->new, and then Blank Page: HTML: 2 column liquid, left sidebar, header and footer b. DocType: XHTML 1.0 Strict c. Layout CSS:

More information

USER GUIDE PowerGrid CRM 2013/2015

USER GUIDE PowerGrid CRM 2013/2015 USER GUIDE PowerGrid CRM 2013/2015 Contents Configuring PowerGrid Activity Setup Security Roles Navigating to PowerGrid Grid Entity View Search Bar Reading Pane In-line Edit Action Toolbar Opening a Record

More information

Instructions for Editing in the new System DNN9 the Upgrade from DNN8

Instructions for Editing in the new System DNN9 the Upgrade from DNN8 Instructions for Editing in the new System DNN9 the Upgrade from DNN8 We all hate change, but going forward is the best way to go. Security needs to be top of the range and your websites need to be faster

More information

Introduction to the MODx Manager

Introduction to the MODx Manager Introduction to the MODx Manager To login to your site's Manager: Go to your school s website, then add /manager/ ex. http://alamosa.k12.co.us/school/manager/ Enter your username and password, then click

More information

Using Adobe Contribute 4 A guide for new website authors

Using Adobe Contribute 4 A guide for new website authors Using Adobe Contribute 4 A guide for new website authors Adobe Contribute allows you to easily update websites without any knowledge of HTML. This handout will provide an introduction to Adobe Contribute

More information

T T USER GUIDE. 1. Website/Pages/Stripes/Items/Elements Click & Edit, Mix & Match (Drag & Drop) Adding a Stripe Managing Stripes...

T T USER GUIDE. 1. Website/Pages/Stripes/Items/Elements Click & Edit, Mix & Match (Drag & Drop) Adding a Stripe Managing Stripes... T T T Contents USER GUIDE 1. Website/Pages/Stripes/Items/Elements... 2. Click & Edit, Mix & Match (Drag & Drop)... 3. Adding a Stripe... 4. Managing Stripes... 5. Adding a Page... 6. Managing Pages and

More information

Creating Buttons and Pop-up Menus

Creating Buttons and Pop-up Menus Using Fireworks CHAPTER 12 Creating Buttons and Pop-up Menus 12 In Macromedia Fireworks 8 you can create a variety of JavaScript buttons and CSS or JavaScript pop-up menus, even if you know nothing about

More information

Using Dreamweaver CS6

Using Dreamweaver CS6 Using Dreamweaver CS6 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.

More information

FME Extensions. Photo Gallery & Product Image Gallery Extension for Magento 2. User Guide - Version

FME Extensions. Photo Gallery & Product Image Gallery Extension for Magento 2. User Guide - Version FME Extensions Photo Gallery & Product Image Gallery Extension for Magento 2 User Guide - Version 1.0 http://www.fmeextensions.com support@fmeextensions.com Intended Audience The content of this document

More information

Lava New Media s CMS. Documentation Page 1

Lava New Media s CMS. Documentation Page 1 Lava New Media s CMS Documentation 5.12.2010 Page 1 Table of Contents Logging On to the Content Management System 3 Introduction to the CMS 3 What is the page tree? 4 Editing Web Pages 5 How to use the

More information

Evoq 9 Content Managers Training Manual

Evoq 9 Content Managers Training Manual Evoq 9 Content Managers Training Manual Table of Contents Chapter 1: User Login... 2 User Login...2 User Login Screen...2 User Logout...2 Chapter 2: Navigating within Evoq 9...3 Editing Bar...3 Dashboard...4

More information

How to Use Moodle's Text Editor

How to Use Moodle's Text Editor How to Use Moodle's Text Editor The text editor has a variety of tools and icons to assist in formatting text, adding links, and inserting images. Many of them will be familiar to anyone who uses word

More information

JSN PageBuilder 3 Configuration Manual Introduction

JSN PageBuilder 3 Configuration Manual Introduction JSN PageBuilder 3 Configuration Manual Introduction About JSN PageBuilder 3 JSN PageBuilder 3 is the latest innovation of Joomla! PageBuilder with great improvements in the interface, features, and user

More information

This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step.

This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. Table of Contents Get Organized... 1 Create the Home Page... 1 Save the Home Page as a Word Document...

More information

Website Creating Content

Website Creating Content CREATING WEBSITE CONTENT As an administrator, you will need to know how to create content pages within your website. This document will help you learn how to: Create Custom Pages Edit Content Areas Creating

More information

Welcome to Book Display Widgets

Welcome to Book Display Widgets Welcome to Book Display Widgets Book Display Widgets allow you to create virtual book displays on your website, where covers link to that item s record in your catalog. Bring your own lists of books, or

More information

Blog Pro for Magento 2 User Guide

Blog Pro for Magento 2 User Guide Blog Pro for Magento 2 User Guide Table of Contents 1. Blog Pro Configuration 1.1. Accessing the Extension Main Setting 1.2. Blog Index Page 1.3. Post List 1.4. Post Author 1.5. Post View (Related Posts,

More information

A Quick-Reference Guide. To access reddot: https://cms.hampshire.edu/cms

A Quick-Reference Guide. To access reddot: https://cms.hampshire.edu/cms Using RedDot A Quick-Reference Guide To access reddot: https://cms.hampshire.edu/cms For help: email reddot@hampshire.edu or visit http://www.hampshire.edu/computing/6433.htm Where is... Page 6 Page 8

More information

Product Slider for Magento 2. User Guide

Product Slider for Magento 2. User Guide Product Slider for Magento 2 User Guide Table of Contents 1. Product Slider Code Insert Guide 2. Product Slider Management 2.1. Managing Product slider 3. Product Slider Widget 4. Front-End View 5. Support

More information

This presentation will show you how to create a page in a group eportfolio.

This presentation will show you how to create a page in a group eportfolio. This presentation will show you how to create a page in a group eportfolio. 1 If you are using your eportfolio for presenting group work, you will need to create a group eportfolio page, which all the

More information

WORDPRESS 101 A PRIMER JOHN WIEGAND

WORDPRESS 101 A PRIMER JOHN WIEGAND WORDPRESS 101 A PRIMER JOHN WIEGAND CONTENTS Starters... 2 Users... 2 Settings... 3 Media... 6 Pages... 7 Posts... 7 Comments... 7 Design... 8 Themes... 8 Menus... 9 Posts... 11 Plugins... 11 To find a

More information

ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3. Created: 2/10/2017

ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3. Created: 2/10/2017 ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3 Created: 2/10/2017 Table of Contents ENGINEERING DATA HUB... 1 DESKTOP VIEW... 3 HEADER... 4 Logo... 5 Main Title... 6 User Menu... 7 Global

More information

CSS worksheet. JMC 105 Drake University

CSS worksheet. JMC 105 Drake University CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html

More information

CSV Roll Documentation

CSV Roll Documentation CSV Roll Documentation Version 1.1 March 2015 INTRODUCTION The CSV Roll is designed to display the contents of a Microsoft Excel worksheet in a Breeze playlist. The Excel worksheet must be exported as

More information

Guidelines for doing the short exercises

Guidelines for doing the short exercises 1 Short exercises for Murach s HTML5 and CSS Guidelines for doing the short exercises Do the exercise steps in sequence. That way, you will work from the most important tasks to the least important. Feel

More information

Welcome to Book Display Widgets

Welcome to Book Display Widgets Welcome to Book Display Widgets Book Display Widgets allow you to create virtual book displays on your website, where covers link to that item s record in your catalog. As a subscriber to Ebook Central

More information

Tutorial Tutorial. (Click here to go to the next slide and to learn more)

Tutorial Tutorial. (Click here to go to the next slide and to learn more) Tutorial Tutorial Read all the directions before proceeding Anything that says (click to learn more) will point to a button that you can click to learn more information about that topic. In the bottom

More information

FME Extensions. Media Gallery & Product Videos Extension for Magento 2. User Guide - Version

FME Extensions. Media Gallery & Product Videos Extension for Magento 2. User Guide - Version FME Extensions Media Gallery & Product Videos Extension for Magento 2 User Guide - Version 1.0 http://www.fmeextensions.com support@fmeextensions.com Intended Audience The content of this document is designed

More information

N/A. JSN PageBuilder 2 Configuration Manual Introduction. System Requirements. Product Usage. Joomla Requirements. Server Requirement

N/A. JSN PageBuilder 2 Configuration Manual Introduction. System Requirements. Product Usage. Joomla Requirements. Server Requirement JSN PageBuilder 2 Configuration Manual Introduction About JSN PageBuilder 3 JSN PageBuilder 3 is the latest innovation from Joomla! PageBuilder, with great improvements to the interface, features, and

More information

FRONTPAGE STEP BY STEP GUIDE

FRONTPAGE STEP BY STEP GUIDE IGCSE ICT SECTION 15 WEB AUTHORING FRONTPAGE STEP BY STEP GUIDE Mark Nicholls ICT lounge P a g e 1 Contents Introduction to this unit.... Page 4 How to open FrontPage..... Page 4 The FrontPage Menu Bar...Page

More information

Step 1 Download and Install KompoZer Step by step instructions to build your first web page using KompoZer web editor.

Step 1 Download and Install KompoZer Step by step instructions to build your first web page using KompoZer web editor. All Creative Designs HTML Web Tutorial for PC Using KompoZer New version 2012 now available at: http://www.allcreativedesigns.com.au/pages/tutorials.html Step 1 Download and Install KompoZer Step by step

More information

APA-STYLE TABLES in MICROSOFT WORD 2007/2010

APA-STYLE TABLES in MICROSOFT WORD 2007/2010 Twin Cities Writing Center APA-STYLE TABLES in MICROSOFT WORD 2007/2010 Before inserting a table into your paper, make sure a table is an appropriate way to communicate your information. Read about the

More information

EMPLOYEE DIRECTORY (SHAREPOINT ADD-IN)

EMPLOYEE DIRECTORY (SHAREPOINT ADD-IN) EMPLOYEE DIRECTORY (SHAREPOINT ADD-IN) Global, Global Plus version Updated: March 2018 Version 1.0.0.7 Copyright Beyond Intranet 2017. All Rights Reserved i Notice. This is a controlled document. Unauthorized

More information

Table Basics. The structure of an table

Table Basics. The structure of an table TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that

More information

JSN Sun Framework User's Guide

JSN Sun Framework User's Guide JSN Sun Framework User's Guide Getting Started Layout Overview & Key concepts To start with layout configuration, Go to Extension Template JSN_template_default The first tab you see will be the Layout

More information

HTML/CSS Lesson Plans

HTML/CSS Lesson Plans HTML/CSS Lesson Plans Course Outline 8 lessons x 1 hour Class size: 15-25 students Age: 10-12 years Requirements Computer for each student (or pair) and a classroom projector Pencil and paper Internet

More information

Ajax Cart Pro extension for Magento 2

Ajax Cart Pro extension for Magento 2 Ajax Cart Pro extension for Magento 2 User Guide Version 1.0 Table of Contents I) Introduction... 4 II) General Settings... 5 1. Enable Ajax... 6 2. Enable Ajax Cart on Product Page... 8 3. Link to desired

More information

Evoq 8 Content Managers Training Manual

Evoq 8 Content Managers Training Manual Evoq 8 Content Managers Training Manual Table of Contents Chapter 1: User Login... 2 User Login...2 User Login Screen...2 User Logout...2 Chapter 2: Navigating within Evoq 8...3 Editing Bar...3 Dashboard...4

More information

User Manual. Administrator s guide for mass managing VirtueMart products. using. VM Mass Update 1.0

User Manual. Administrator s guide for mass managing VirtueMart products. using. VM Mass Update 1.0 User Manual Administrator s guide for mass managing VirtueMart products using VM Mass Update 1.0 The ultimate product management solution for VirtueMart! Contents Product Overview... 3 Feature List...

More information

Introduction to Cascade Server (web content management system) Logging in to Cascade Server Remember me Messages Dashboard Home

Introduction to Cascade Server (web content management system) Logging in to Cascade Server Remember me Messages Dashboard Home Introduction to Cascade Server (web content management system) Last Updated on Jul 14th, 2010 The College of Charleston's web site is being produced using a Content Management System (CMS) called Cascade

More information

RocSite DIY (Design It Yourself) Website Designer Reference Manual

RocSite DIY (Design It Yourself) Website Designer Reference Manual RocSite DIY (Design It Yourself) Website Designer Reference Manual Revised 01.08.2017 RocSite Website Builder Manual Contents 1. Website/Pages/Stripes/Items/Elements...2 2. Click & Edit, Mix & Match (Drag

More information

EDITOR GUIDE. Button Functions:...2 Inserting Text...4 Inserting Pictures...4 Inserting Tables...8 Inserting Styles...9

EDITOR GUIDE. Button Functions:...2 Inserting Text...4 Inserting Pictures...4 Inserting Tables...8 Inserting Styles...9 EDITOR GUIDE Button Functions:...2 Inserting Text...4 Inserting Pictures...4 Inserting Tables...8 Inserting Styles...9 1 Button Functions: Button Function Display the page content as HTML. Save Preview

More information

BindTuning Installations Instructions, Setup Guide. Invent Setup Guide

BindTuning Installations Instructions, Setup Guide. Invent Setup Guide BindTuning Installations Instructions, Setup Guide Invent Setup Guide This documentation was developed by, and is property of Bind Lda, Portugal. As with any software product that constantly evolves, our

More information

USER GUIDE: EDITOR. Drag & drop system: Content Manager Style Editor Add Elements Undo/Redo Save...

USER GUIDE: EDITOR. Drag & drop system: Content Manager Style Editor Add Elements Undo/Redo Save... USER GUIDE: EDITOR Drag & drop system:... 2 1. Content Manager... 3 2. Style Editor... 5 3. Add Elements... 6 4. Undo/Redo... 13 5. Save... 13 When we access Zeendo s website editor, we can see a series

More information

Training Manual and Help File

Training Manual and Help File Training Manual and Help File 30.06.2011 Update Manage Grow Welcome to your new Juniper Website Management System with CMS Introduction The Juniper Website Management System with CMS (Website Content Management

More information

Social Share for Magento 2. User Guide

Social Share for Magento 2. User Guide Social Share for Magento 2 User Guide Table of Contents 1. Social Share Configuration 1.1. Accessing the Extension Main Setting 1.2. General and Sharing Service (Share Buttons) 1.3. Pages 2. Front-End

More information

HOW TO. In this section, you will find. miscellaneous handouts that explain. HOW TO do various things.

HOW TO. In this section, you will find. miscellaneous handouts that explain. HOW TO do various things. In this section, you will find miscellaneous handouts that explain do various things. 140 SAVING Introduction Every time you do something, you should save it on the DESKTOP. Click Save and then click on

More information

+1 (646) (US) +44 (20) (UK) Product Labels. for Magento 2. ecommerce.aheadworks.com/magento-2-extensions

+1 (646) (US) +44 (20) (UK) Product Labels. for Magento 2. ecommerce.aheadworks.com/magento-2-extensions Product Labels for Magento 2 Table of contents Getting Around...3 Extension Logic...3 Backend Configuration...4 Creating a Label...4 Rule Configuration...7 How to use Variables...10 Label display on different

More information

Nauticom NetEditor: A How-to Guide

Nauticom NetEditor: A How-to Guide Nauticom NetEditor: A How-to Guide Table of Contents 1. Getting Started 2. The Editor Full Screen Preview Search Check Spelling Clipboard: Cut, Copy, and Paste Undo / Redo Foreground Color Background Color

More information

Using Dreamweaver. 4 Creating a Template. Logo. Page Heading. Home About Us Gallery Ordering Contact Us Links. Page content in this area

Using Dreamweaver. 4 Creating a Template. Logo. Page Heading. Home About Us Gallery Ordering Contact Us Links. Page content in this area 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan that is shown below. Logo Page Heading

More information

ALES Wordpress Editor documentation ALES Research websites

ALES Wordpress Editor documentation ALES Research websites ALES Wordpress Editor documentation ALES Research websites Contents Login... 2 Website Dashboard... 3 Editing menu order or structure... 4 Add a new page... 6 Move a page... 6 Select a page to edit...

More information

The Text scrap sheet is also needed for copying image and webpage URLs for easy access. Additionally you will use it to look at HTML when needed.

The Text scrap sheet is also needed for copying image and webpage URLs for easy access. Additionally you will use it to look at HTML when needed. epro 2 Hints Always have open Word and Text scrap sheets so you can write your text, spell check etc. in Word. You MUST copy and paste your writings onto Text to remove formatting. The Text scrap sheet

More information

Committee Chair Manual for AIA SEATTLE S ONLINE MEMBER COMMUNICATION TOOL. Questions? Contact AIA Seattle s Communications team.

Committee Chair Manual for AIA SEATTLE S ONLINE MEMBER COMMUNICATION TOOL. Questions? Contact AIA Seattle s Communications team. Contents Access to edit aiaseattle.org... 1 Committee Hub Pages... 2 Hub Page Editor... 2 Main Content Block... 2 Featured Image... 3 Files... 3 Events... 5 Recurring Committee Meetings... 8 Posts... 8

More information

DRAFT. Table of Contents About this manual... ix About CuteSITE Builder... ix. Getting Started... 1

DRAFT. Table of Contents About this manual... ix About CuteSITE Builder... ix. Getting Started... 1 DRAFT Table of Contents About this manual... ix About CuteSITE Builder... ix Getting Started... 1 Setting up... 1 System Requirements... 1 To install CuteSITE Builder... 1 To register CuteSITE Builder...

More information

Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0. University of Sheffield

Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0. University of Sheffield Course Exercises for the Content Management System. Grazyna Whalley, Laurence Cornford June 2014 AP-CMS2.0 University of Sheffield PART 1 1.1 Getting Started 1. Log on to the computer with your usual username

More information

Flexslider v1.x Installation and User Manual

Flexslider v1.x Installation and User Manual 2017/11/08 09:14 1/15 Flexslider v1.x Installation and User Manual Flexslider v1.x Installation and User Manual Latest version: 1.10.0 Compatibility: Magento 1.7.x, 1.8.x, 1.9.x Disclaimer This is the

More information

LETTER BUILDER. Letter Builder. For RiskMan Version Last reviewed 24 Jun Copyright 2017 Page RiskMan 1 of International 17 Pty Ltd

LETTER BUILDER. Letter Builder. For RiskMan Version Last reviewed 24 Jun Copyright 2017 Page RiskMan 1 of International 17 Pty Ltd Letter Builder For RiskMan Version 16.02 Last reviewed 24 Jun 2016 Copyright 2017 Page RiskMan 1 of International 17 Pty Ltd Contents What does the Letter Builder do?... 3 Examples... 3 Detailed Overview...

More information

Desktop Studio: Charts. Version: 7.3

Desktop Studio: Charts. Version: 7.3 Desktop Studio: Charts Version: 7.3 Copyright 2015 Intellicus Technologies This document and its content is copyrighted material of Intellicus Technologies. The content may not be copied or derived from,

More information

Libraries. Multi-Touch. Aero Peek. Sema Foundation 10 Classes 2 nd Exam Review ICT Department 5/22/ Lesson - 15

Libraries. Multi-Touch. Aero Peek. Sema Foundation 10 Classes 2 nd Exam Review ICT Department 5/22/ Lesson - 15 10 Classes 2 nd Exam Review Lesson - 15 Introduction Windows 7, previous version of the latest version (Windows 8.1) of Microsoft Windows, was produced for use on personal computers, including home and

More information

Adding Text and Images. IMCOM Enterprise Web CMS Tutorial 1 Version 2

Adding Text and Images. IMCOM Enterprise Web CMS Tutorial 1 Version 2 Adding Text and Images IMCOM Enterprise Web CMS Tutorial 1 Version 2 Contents and general instructions PAGE: 3. First steps: Open a page and a block to edit 4. Edit text / The menu bar 5. Link to sites,

More information

Photoshop tutorial: Final Product in Photoshop:

Photoshop tutorial: Final Product in Photoshop: Disclaimer: There are many, many ways to approach web design. This tutorial is neither the most cutting-edge nor most efficient. Instead, this tutorial is set-up to show you as many functions in Photoshop

More information

Making Your Showcase Portfolio

Making Your Showcase Portfolio Making Your Showcase Portfolio 1 1. Carefully select the pictures you want to use in your portfolio. 2. Resize your pictures in Photoshop. 3. Login to Weebly. 4. Click on Add Site. 5. Enter a title for

More information

AGENT123. Full Q&A and Tutorials Table of Contents. Website IDX Agent Gallery Step-by-Step Tutorials

AGENT123. Full Q&A and Tutorials Table of Contents. Website IDX Agent Gallery Step-by-Step Tutorials AGENT123 Full Q&A and Tutorials Table of Contents Website IDX Agent Gallery Step-by-Step Tutorials WEBSITE General 1. How do I log into my website? 2. How do I change the Meta Tags on my website? 3. How

More information

Using Sitecore 5.3.1

Using Sitecore 5.3.1 Using Sitecore 5.3.1 An End-User s Guide to Using and Administrating Sitecore Author: Sitecore Corporation Date: December 12, 2007 Release: Rev. 1.0 Language: English Sitecore is a registered trademark.

More information

Useful Google Apps for Teaching and Learning

Useful Google Apps for Teaching and Learning Useful Google Apps for Teaching and Learning Centre for Development of Teaching and Learning (CDTL) National University of Singapore email: edtech@groups.nus.edu.sg Table of Contents About the Workshop...

More information

Creating a Title Block & Border Using Chief Architect. Architectural Design & Residential Construction Penncrest High School

Creating a Title Block & Border Using Chief Architect. Architectural Design & Residential Construction Penncrest High School Creating a Title Block & Border Using Chief Architect Architectural Design & Residential Construction Penncrest High School 2017-2018 Select New Layout to begin designing your Title Block. Note: Once the

More information

Content Elements. Contents. Row

Content Elements. Contents. Row Content Elements Created by Raitis S, last modified on Feb 09, 2016 This is a list of 40+ available content elements that can be placed on the working canvas or inside of the columns. Think of them as

More information

Improved Layered Navigation for Magento 2

Improved Layered Navigation for Magento 2 Last update: magento_2:improved_layered_navigation https://amasty.com/docs/doku.php?id=magento_2:improved_layered_navigation 2018/01/23 09:14 For more details see the Improved Layered Navigation extension

More information