Call us on
tel:+46406171230
Email us at
info@pixelant.net
The content of a page is created by using different types of content elements. You can build the page by using a variation of elements in combination with each other.
Select the page you wish to add content to in the page tree, by clicking the title of it. Now click the button 'Content', inside the content area, to add a new element. (4.1.1)
A number of tabs, with different types of content elements, appears. You can read more about the different element types here.
For this section we will use the "Text & images" element, so let's select it below the tab "Typical page content". (4.1.2)
'Text & Images' is probably the element that is used the most on a website.
The 'General' tab contains information about the type of element (1), shows which content field it is placed in and also allows you to move the element between the available content sections (2). Here you can add the header (3), set what type of layout the header should have (4) and set the alignment of the header (5). There is an option to link the header (6), but note that this will change the design of the header. The 'Subheader' field (7) can be used to add a smaller header below the main header. Finally we have the body text field (8). (4.1.3)
The content type dropdown shows what type of element it is, and also allows you to switch between different types of elements. If the fields you have filled out, has an equivalent field in the element type you switch to, the applied text/settings will be transfered.
In the case a page template contains more than one content field, it is possible to move the content element between these content fields using the drop down.
The header layout types control the design of the header in the frontend, but also communicates to the search engines, the importance of that header.
The first header of a page, should allways be set as Layout 1. It is the largest of the headers, but it also has the function of the H1 tag. The H1 tag indicates to the search engines that it is the most important header on the page. Read more about optimizing your website.
Layout 2 - Layout 5 also has different styling on the frontend (where layout 2 is the largest and layout 5 the smallest), and also indicates to the search engines the importance of the content. Layout 2 shold be used as subheaders, and if needed, the rest can be used as subheader for layout 2.
You can hide the header from the frontend, by using 'Hidden' option, but still be able to use it as a an internal name for the element.
The text area can be compared with a down-scaled Word document. It allows you to add headers in the text, apply bold and italic, create links etc.
In 'Images' tab you can add an image via the Filelist, for this you need to click "Add image" button. The accepted file formats are listed below the button. (4.1.4)
After selecting "Add image", choose folder (1), and click the file name (2) or the image (if you have enabled to 'Display thumbnails'). (4.1.5)
If you wish to upload a file, select the folder in which you wish to upload the file/files in and click 'Choose files' (1) in the bottom section of the 'Filelist' popup. (4.1.6)
Select files from your local computer and click Open. In field (2) you can see the accepted file formats and you can also overwrite the existing files (3). Then choose "Upload files" (4), and the files will be uploaded to the folder.
The file information is added as a section in the element. If you filled out the Metadata in Filelist, this will be shown in the fields Title (1), Alternative text (2) and Description (4). It is possible to link the file: paste a link address or use the link icon on the right hand side of the field (3). You can aslo delete (6), hide (7) or move (8) the image. The image can be cropped by using the 'Image manipulation' (5). ( 4.1.7)
To edit the image, click "Open Editor" to enter the editor (5). (previous image, 4.1.7)
Select a fixed ratio (16:9, 3:2, 4:3, 1:1) or crop freely (1). (4.1.8)
After you have selected the area you wish to crop, you will see the 'Selected Size' in px (2) and if you want to come back to the initial parameters use 'Reset' button (3).
Then click "Accept" (4) and the cropped area will now be shown as a thumbnail in the image information (see previous image, 4.1.7).
You can also do 'Media Adjustments' of images (1), like: resizing it by adding 'Width' (2) or 'Height' (3) and adding a border (4).
Positioning and aligning the file to the text (5) is also possible. If you have added more than one file, you can select how the files should be placed in alignment to each other, by using columns (6).
At the bottom, there is an option to enable "Enlarge on Click" (7), to have the image open in a lightbox.
(4.1.9)
The 'Appearance' tab has options for the layout and style of the element. The options can vary depending on the type of content element. (4.1.10)
Some types of content elements can have different layouts (1) applied to them. For example, a list of downloadable files can have an icon to show what type of file it is, or a thumbnail of the image or first page of a PDF.
The appearance option (2) allows you to add background colours, or inverse the colour scheme of the element text. This is a function depends on the design of the website.
Sometimes it is necessary to create more space between elements or to add some margins - this can be added before the element (3) or after it (4).
It is also possible to set an alignment for all the text in the element (5), for example to have it centered. Using the 'Special menus' element allows you to create a listing of elements using the element headers. To exclude a header of an element, uncheck the 'Show in Section Menus' checkbox (6). Finally you can add a link to top of page (7), which will add a 'To top' link at the bottom of the content element on the frontend. By clicking this link, the visitor will be sent to the top of the page automatically.
The 'Language' tab shows to what language the element belongs to, if the website is using 'Language layers' to have different languages on the frontend. (4.1.11)
The 'Access' tab able you to publish/un-publish the content, by disabling it (1).
You can also select a publishing (2) and/or expiration (3) date for the element. This is excellent for example when handling campaigns, product launches etc., when you need to publish a contnet without having to do it manually. It is not possible to preview content that has been set to publish at a later date, so make sure to do this as a last step. Also make sure that the disable checkbox is unchecked, otherwise the content will continue to be hidden. (4.1.12)
In the 'Categories' tab you can set the connection of element to a category. This fuction can be used in 'Special menus' elements, where you can set it to show headers in a linked list, using all content elements connected to a specific category without regards to which page these elements are placed on. (4.1.13)
In the 'Notes' tab you can add some notes to the element (4.1.14) - it will be not visible in frontend, but you can see it in backend (4.1.15)
In the 'Grid Elements' tab you can see the relation of the element to grid elements. It is also possible to move an element between grid columns using the dropdown menu. (4.1.16)
Read more about 'Grid elements' here >>
After you are done filling out all the information, don't forget to save. The save function is placed at the top of the content element, with the option to 'Save'. It is also possible to use the arrow next to 'Save' for more options like 'Save and view page', 'Save and Create a new one' and 'Save and close'. (4.1.17)
