Materialis PRO facilitates editing directly in the preview mode. Thus, you need to simply click on the pencil icon inside any of the elements on the webpage, in preview mode, and start customizing that element.
1. Editing text
Here are the options to edit the text segments inside the webpage:
- Select a font family for the selected text
- Add a web font, if you want to apply a different font than those which are already available in the list
- Select a subset
- Write some text with italics
- Underline a fragment of text
- Turn to strikethrough text
- Turn to superscript
- Turn to subscript
- Align the text (left, right, center, justify)
- Change the default color of the text
- Clear all formatting
2. Editing image
Here are the options for editing the images you selected for the webpage:
- Upload an image from your computer
- Crop the image for the best presentation into the webpage
- Provide the URL for the image
- Specify a title for the image you inserted into the webpage (it will serve for better understanding what it is about, and for SEO purposes as well)
- Provide a short description of the image (caption) that will explain what the image is about and will serve for SEO purposes, as well
- Provide an ALT text (alternate text) that will be shown to the users in case the image cannot be displayed
- Provide a more detailed description of the image
- Delete the image, in case you no longer want it to be displayed onto the page
3. Editing links
If you click on the pencil icon inside a link element, a popup will open with the following options:
- Text – you need to fill in with the anchor text (the text visible on the page, that the link will be placed on)
- Link – you need to provide the URL (the address) the visitors will be directed towards when clicking on the link
- Target – you need to select how the link will open (it might open in the same tab, in a new tab or in a lightbox).
After you have set all these elements for the link, you need to press “Apply Changes” for the modifications to take effect into the webpage.
4. Editing buttons
If you click inside the pencil icon on a button element on the webpage, a popup will open for editing that button:
- Button text – fill in this field with the text of the button
- Button link – specify the URL for the page the button will lead to, when it is pressed
- Target – choose how the new page will open (in the same tab, in a new tab or in a lightbox)
- Button size – choose the dimensions of the button. You can choose among “big button”, “small button” and “normal button”.
- Button shadow – from here, you can apply a shadow effect to the button. There are multiple options regarding how visible the shadow should be: small shadow, medium shadow, large shadow, extra large shadow or no shadow at all.
- Button color – this will help you give a particular color to the button. Set the brightness, saturation and shade of the color
- Button text color – this option needs to be paired with the previous one, as a darker text should be set to contrast with a lighter background color; the same way, a lighter text color should be set to contrast with a darker button background color.
- Button preset – from here, you define the shape of the button. There are multiple possibilities, ranging from square round to round to square outline, etc.
- Button icon – this option allows you to add an iconic symbol next to the button text. Choose among a wide variety of available icons
After all these settings are in place, hit the “Apply change” button to see them live.
