Our team is working around the clock to respond to customers’ questions. In the interest of keeping the community informed, we will continue to update this Info page as and when it becomes appropriate.
for the time being, this info-page shows only the CMS related details, the rest of systems/Applications to be included soon, thanks for your patience.
1- Contents Management System (CMS)
note: We are building a tool to migrate our websites from WordPress to A2Z-CMS for free (will be available soon)..!
Go to /console/settings/base/sitesettings/ among tabs, choose what is suitable for your site
Available Settings are:
- Branding contains logo, branding title and the fav icon (branding logo and/or branding title will appear at the top navigation var)
- Footer Columns a three column styled richtext block at the footer area of your website pages
- Social Icons to show icons and links to your profiles in a certain social media you use for your website/business.
- Bottom Area is a richtext block that is in the most botoom of your page.
- Colors these are the main color set of your website, the first set is for the visitor site, and the second one is for the admin dashboard site of your website (please use the philosophy of colors to make your website look eligant based on the purpose main of it).
- Popups/Modals (public Modal/popup block as how it is not the page builder, hoever, this modal will be popuped in all pages, you can create more than one modal window with various sizes and styling).
- HTML (public HTML Code this code block will be placed right after <body> tag openeing, hoever,you can control the positioning of it's node trees as you wish, if you don't know how, this mean you shouls not use this block) an example could be a custom navigation bar to put somewhere in your page(or replace the default one).
- CSS (public CSS Code without the need of <style> tag openeing/closing, simply just put the desired code in the text box, if you don't know how, this mean you shouls not use this block).
- Java Scripts (public Java Script Code without the need of <script> tag openeing/closing, simply just put the desired code in the text box, if you don't know how, this mean you shouls not use this block).
- Categoriess (Currently not applicable).
- Theme (Currently not applicable).
Note:
almost all settings in the site-settings are public, that been said, any change you make there, will be applied to all pages in visitor's side of your Website. . !
Go to /console/ and click on the (slides) button
Next: click on the + (add slide) button
Next: enter the slide details
Next: nothing else 😉 , just save it 😃
Go to /console/pages/ navigate to the page you want to create new page in it's family tree (see the follwing Imaginary flowchart as how the tree is)
ADD CHILD PAGE: this option is to add a sub-page to the HomePage .
after you click on { add child page } Tow options will appear , choose what you need .
- Choose the "Form" to Create a Form that collects information, such as reporting or contact us or for any other purposes you may need (later you can embed it into in any section of any page).
- Choose the "Standard Page" to Create a multiPurposes Page.
in the next toturial: you can create your Rows and Columns (layout) and choose the suitable blocks in each column
page tabs: At the top area, you can see multiple tabs, described as following
1- MAIN SECTION: page comes empty of contents, you can build your first row by clicking on the (Row) button, it will generate a row that contains the first column(by default the column width is 100% of the row width),you can then add the columns as your design needs, if a column's width left as its default value, the column will take the whole row's width, and the next column will be under that column(note: if you don't put any block content in a column at all, the column will not appeare due to the fact that the hight and width are considered zero)..!
- next: adding columns and block types
Note: there are two "+" icon signs, above and under each block, that means you can add a block of the same generation/level above and bellow each block and at the same family blocks, but don't worry if you change your mind of each new block's location, as you can easily reorder them by clicking on "down arrow" or "up arrow".
2- RIGHT SIDEBAR SECTION: it is contains some blocks, but it appears on the right side of the wider screen(700px+) only.. it is ideal for promotions and advertisements, as well as the common tools/link for your website's visitors.
3- SEO :shortcut for {search engine optimization } to boost per page's SE Crawler Ranks
4- OTHER SETTINGS :includes the following
- page publishing schedule
- page privacy (public, password protected, logged in users or for certain group of users)
Empty line
A blank row space (probably you don't need this, however, we provide it for rare cases you may encounter)
Count down
A CountDown block, input example : 2021-12-20 06:00
Type writer
To write text gradually , according to the speed you want , and control replaying times, Simply like how a Data Entry types in a text inbox.
Single line Text Block
A block for a single Lined Text that you can control its styling as you wished.
Rich-text paragraph
A paragraph with rich tools for styling its online element(text parts, hyper-linking, listing ...etc).
Header Sizes and SEO
For better SEO, H1 should be reserved for your page title only and placed only once per page, near the top.
Also, for better SEO, you should always descend heading levels in sequence (i.e. H2 to H3, not H2 to H4).
MOVING Rich-text paragraph
An experimental paragraph block(Marquee) that can move as you wish.
BREAKING LINE
A horizontal Line as a breaker between two blocks(an example is the line under this text).
Slider
A block of public Slides, where each slide has (Image background, Text Heading and Promotional(CTA) description), each block is sliding by an interval and speed you can control.
note, you should create sliders before you become able to select them in a specific Page..!
Image
A Simple Image block(with styling controls).
Figure Image Block
A block of Image and its Caption as a pre templated block, shows as following:
Banner block:
Like Slider without moving or changing the contents(acts as a single slide)
Accordion Tabs:
there are 4 ready templates, you can choose, and then modify the tabs' parts/sections
Modal/popup window:
an advanced popup block inside a single page(there is a publick popup window feature in sitesettings, that if used, will be applied to all pages)
Embed videos:
As its name show, you can simply paste the link of a youtube video or any other media contents from various providers.
Embed form page:
Form pages are not shown(not visitable) as pages, but as block contents of a page section, this block makes easy to choose a form you created earlier, and control its sizes, while a submission done, the page does not refresh or redirected, rather than this section does show the submissions details, this is ideal for a page that has multiple forms.
Table block:
a simple and prestyled Table block with the ability to change it's styles(not it's template).
Enhanced Table block:
An Advanced Table Block that has dynamic sections/rows/columns and an advanced styling of each content part.
Custom Style block:
A block for a single page to control styling of any part of the page(Use CSS Scripts).
Custom JavaScript block:
A block for a single page to interact with any element of the page(Use JS Scripts).
Custom HTML code block:
A block for a single page to create any custom element or blocks of elements (Use this if the available blocks are not serving your need).
Note: Most of blocks and their elements have their styling settings button use it to control the styling of a certain block/element or leave it to its default values.. some of the styling settings contain the mouse hover styling as well, you have to know at least how the blocks and layout is working for a web page, unlike the document data entring job, the pages width are different, based on the device that the visitors are using, we call this "responsive" if the styling been set correctly (you can use no mobile or no desktop setting to hide a certain block from a certain device size view, however, we recommend agains this for the large pages, due to the performance reduction during the authoring/editing mode, in that case, you better controll blocks/elements by a custom css block).
Goto 2nd tab "Form Fields Section" , click + (add field) to add new field to your form
*Next, you will see the field's controling boxes (field settings)
settings are:
- label of the form field .
- help text (extra explanation for submitters to know what this field for)
- Comma separated list of choices (only applicable for checkboxes , radio buttons and dropdown lists)
- Default value (pre entered value)
The Using of created Forms in any part of any page is simply by choosing the block (Embed Form) in a certain column
Go to /console/documents/ or /console/images/ upload new media to specific collection
next: choose your image/document from your device to upload to the DataBase
next: choose a collection to store your new media file in
note: adjust the title and add the relevant tags (if needed)
prerequisites:
Chormium-based browsers(Google Chrom, Microsoft Edge, Opera, Brave . . . etc) or if you are using Windows OS
steps :
Right click (on any input-box) > choose a category > choose Emoji -------- or on keybord, press ( Window + . )
or
Refere to the W3School (List) of icons/imojis/entities (check all lists on the left sidebar menu, better to choose HTML5 compatible)
or
https://www.fileformat.info/info/unicode/char/search.htm
or
https://www.compart.com/en/unicode/
copy the icon/imoji/entity, then paste it anywhere in the a2z
Mandatory
- animate__animated
Attention seekers
- animate__bounce
- animate__flash
- animate__pulse
- animate__rubberBand
- animate__shakeX
- animate__shakeY
- animate__headShake
- animate__swing
- animate__tada
- animate__wobble
- animate__jello
- animate__heartBeat
Back entrances
- backInDown
- animate__backInLeft
- animate__backInRight
- animate__backInUp
Back exits
- animate__backOutDown
- animate__backOutLeft
- animate__backOutRight
- animate__backOutUp
Bouncing entrances
- animate__bounceIn
- animate__bounceInDown
- animate__bounceInLeft
- animate__bounceInRight
- animate__bounceInUp
Bouncing exits
- animate__bounceOut
- animate__bounceOutDown
- animate__bounceOutLeft
- animate__bounceOutRight
- animate__bounceOutUp
Fading entrances
- animate__fadeIn
- animate__fadeInDown
- animate__fadeInDownBig
- animate__fadeInLeft
- animate__fadeInLeftBig
- animate__fadeInRight
- animate__fadeInRightBig
- animate__fadeInUp
- animate__fadeInUpBig
- animate__fadeInTopLeft
- animate__fadeInTopRight
- animate__fadeInBottomLeft
- animate__fadeInBottomRight
Fading exits
- animate__fadeOut
- animate__fadeOutDown
- animate__fadeOutDownBig
- animate__fadeOutLeft
- animate__fadeOutLeftBig
- animate__fadeOutRight
- animate__fadeOutRightBig
- animate__fadeOutUp
- animate__fadeOutUpBig
- animate__fadeOutTopLeft
- animate__fadeOutTopRight
- animate__fadeOutBottomRight
- animate__fadeOutBottomLeft
Flippers
- animate__flip
- animate__flipInX
- animate__flipInY
- animate__flipOutX
- animate__flipOutY
Lightspeed
- animate__lightSpeedInRight
- animate__lightSpeedInLeft
- animate__lightSpeedOutRight
- animate__lightSpeedOutLeft
Rotating entrances
- animate__rotateIn
- animate__rotateInDownLeft
- animate__rotateInDownRight
- animate__rotateInUpLeft
- animate__rotateInUpRight
Rotating exits
- animate__rotateOut
- animate__rotateOutDownLeft
- animate__rotateOutDownRight
- animate__rotateOutUpLeft
- animate__rotateOutUpRight
Specials
- animate__hinge
- animate__jackInTheBox
- animate__rollIn
- animate__rollOut
Zooming entrances
- animate__zoomIn
- animate__zoomInDown
- animate__zoomInLeft
- animate__zoomInRight
- animate__zoomInUp
Zooming exits
- animate__zoomOut
- animate__zoomOutDown
- animate__zoomOutLeft
- animate__zoomOutRight
- animate__zoomOutUp
Sliding entrances
- animate__slideInDown
- animate__slideInLeft
- animate__slideInRight
- animate__slideInUp
Sliding exits
- animate__slideOutDown
- animate__slideOutLeft
- animate__slideOutRight
- animate__slideOutUp
Animation Repeating(in rounds)
Class name Default rounds
animate__repeat-1 1
animate__repeat-2 2
animate__repeat-3 3
animate__repeat-4 4
... etc
Animation Delay (in Seconds)
Class name Default speed
animate__delay-1s 1s
animate__delay-2s 2s
animate__delay-3s 3s
animate__delay-4s 4s
... etc
or use like this..
timeanimate__slow 2s
animate__slower 3s
animate__fast 800ms
animate__faster 500ms
Animation Duration (in Seconds)
Class name Default speed
animate__duration-1s 1s
animate__duration-2s 2s
animate__duration-3s 3s
animate__duration-4s 4s
... etc
or
animate__infinite infinite
-- for more details:
please visit ( https://animate.style ) documentation
-- Best Practices
Animations can greatly improve an interface's UX, but it's important to follow some guidelines to not overdo it and deteriorate the user experience on your web-things. Following the following rules should provide a good start.
Meaningful animations
You should avoid animating an element just for the sake of it. Keep in mind that animations should make an intention clear. Animations like attention seekers (bounce, flash, pulse, etc) should be used to bring the user's attention to something special in your interface and not only as a way to bring "flashiness" to it.
Entrances and exit animations should be used to orientate what is happening in the interface, clearly signaling that it's transitioning into a new state.
It doesn't mean that you should avoid adding playfulness to the interface, just be sure that the animations are not getting in the way of your user and that the page's performance is not affected by an exaggerated use of animations.
Don't animate large elements
Avoid it as it won't bring much value to the user and will probably only cause confusion. Besides that, there is a good chance that the animations will be junky, culminating in bad UX.
simply copy the address of a page you want to share, and paste it in your facebook or any other social networks as a new post
or
find the browser's native (share button) and choose the option is suitable for you
Note:
in order to automate this process, follow the social network platform's instructions/documentations for this purpose or other features they may provide. . !