MANAGING YOUR SITE
Brizy Support
UPDATED 16-01-26
Welcome to the Brizy Support section. Inside this area you can find help for:
▶️ This icon indicates there is a help video for the topic.
If you want the agency to action urgent edits book a support slot, or request the help in your client portal you can view the step by step guides using the button below.
What is the difference between Brizy Pages and Brizy Blog?
Before using Brizy blogs, familiarity with Brizy Basics is recommended. Brizy functionality guidelines apply, with these exceptions:
- 📝 Blog posts are published using 2 setups:
- Content page:
- Where the blog 'items' are specified (title, featured image, introduction etc). There is a labelled screenshot example in the FAQ to illustrate this.
- Layout (published) page - audience sees this:
- A normal Brizy page using blocks, however the blogs are set to show dynamic content - see next point). There is a labelled screenshot example in the FAQ to illustrate this.
- ⛁ Blogs use dynamic content i.e 'Latest Blog Title'.
Using Brizy
Getting started
▶️ Before getting started on Brizy Cloud it is recommended to watch this video walkthrough, which is embedded below.
Although the video runs through various actions at a fast pace, it more importantly introduces the box/block model. The details on how to do the actions in the video are mostly covered on this page.
▶️ Watch the overview video (07:00)
How do I get setup on Brizy?
- To set up your account you will receive an email invite.
- The first time you setup your account or login there may be an option 'Start Trial' - click this button. This is a normal onboarding operation, and you rest assured will not result in extra charges..
- Once your account is set up, you use the same details to login to Brizy.
- You will see your account appear in the Team Members
How do I login to my account?
- Once you are setup on on Brizy, you can use the same details to login to Brizy. (it's recommended to save this link in your ♥ favourites)
- If you cannot remember your password, see the next question.
I've forgotten my password, what should I do?
- Go to the login page and use the 'recover password' by email option - entering the same email that the Brizy invite was sent to.
Basics (pages, links, images)
- 👉 Important note: Adding/deleting elements and accessing full menu options is only possible in 🖥️ Desktop view.
How do I create a new page or edit an existing page? ▶️
Once you are logged in, you may need to select a workspace from the drop down (if applicable).
To start work on your website you need to select your project by clicking 'Edit Project' (as below)
After this you will see a hamburger menu option ( ☰ ) in the top right. Click this and a menu will appear showing Pages. Select the Pages option.
Choose the relevant option below - depending if you are editing an existing page or want to create a new page.
✏️ Editing a page
🛡Best practice safeguard: Duplicate the page you want to edit first, and rename the duplicate 'Page name - Backup'. This will ensure you have a backup if something occurs with the page you are editing.
To start editing a page, click on the pencil across from the page you want to edit to load the page builder.
To edit a part of the page, simply hover over it and click on the part you would like to edit. There are other sections on this page which address specific editing. The video at the bottom of this section may be helpful for a visual walkthough.
★ Creating a new page
You can create a new page by clicking the '+ Add New Page' button at the bottom of the page list.
However it is easier to duplicate an existing page (see next paragraph).
Find a page that has some of the styles you like, or is very basic and ready to be expanded.
Click on the duplicate icon as below.
Next add in the basic CONTENT settings for the page and click the 'Save Changes' button at the bottom. This is not linked to the SEO settings.
Next go to the SEO tab and add in the Title and Description SEO content for search engines to index, then click the 'Update' button.
You can leave the markup schema blank.
Once this is complete, click the 'Edit' text at the bottom to start editing your page.
This video, also embedded below, along with the next question, show examples on how to work on page elements on an existing page.
How do I duplicate and move content and blocks? (the easiest way to create new content) ▶️
Duplicating and moving full block elements
- Click once on the full block element you wish to duplicate and the black element bar will appear.
- Click on the icon that looks like 2 cards as below (it will turn blue when you hover and the word 'Duplicate' will appear.
- For full block elements you can move the order of these page elements by using the left hand side black page menu icon. (as the below screenshot shows)
- You can then drag them up and down to reorder as the screenshot below shows
▶️ This video, embedded at the end of this section, explains how to use page elements.
Duplicating and moving other page elements (text blocks, images etc)
- Moving page elements can be trickier but can be done with patience.
- Optional first step: Duplicate an existing element to move/use elsewhere.
- If you wish to first duplicate an element, this is done by click on the outside of the element where the black menu bar comes up.
- From this menu choose the duplicate option as below.
- To move an existing or duplicated page element:
- To move a text block only: Hover (don't click inside to select the element) then hold your left hand mouse button over the dotted edge ( ......... ) for at least 3 secs then start to drag the element to the desired position.
- To move all elements other than text blocks: Click on the element to select it, then hold your left mouse button over the edge and start to drag the element to the desired position.
- If you can add the element in a new position a long thin grey line will appear. This indicates the element can be placed here.
- Release the mouse to add the element here.
- 👉NOTE: If you are dragging the element to a place where no line appears - this means you cannot add the element here and you'll need to choose a new position..
How do I add a new block?
- To insert a new block, hover below or above the block you wish to insert the content choosing and click the ➕ button as shown in the image below.
- In the menu that appears, you can choose either choose the 'Blocks' tab (default options) or the ♥ 'Saved' tab (if you have already saved blocks) and select a suitable block.
- Once you have found your content, click to select it, then click the 'Import' button, as shown in the image below.
How do I save (favourite) ♥ blocks I've created to use later?
Creating favourites
- You can save a content block to use later on the page or another page of your project.
- This is useful as it by having a a collection of 'favourites' which are all tested on different devices, you can simply insert them into a page and type over the content as needed.
- Unlike Global Blocks, saved blocks can be added more than once to a page and contain page specific content - changing a newly inserted 'favourite' block on one page, does not change it on another page.
- To favourite a block (entire section of a page) click on the block menu icon, as shown below.
- In the menu that appears - click the ♥ heart icon, as shown below. Your content is now available in this project's library.
Adding your saved (favourite) content blocks
- To insert this content into your page, you follow the normal 'Insert Block' procedure. Hover below or above the block you wish to insert the content choosing and click the ➕ button as shown in the image below.
- In the menu that appears, choose the ♥ 'Saved' tab and find your content, as shown in the image below.
- Once you have found your content, click to select it, then click the 'Import' button, as shown in the image below.
How do I delete and remove content?
- To delete a page element (text, images etc) click on the element you want to delete and the black menu will appear.
- To delete a block (entire section of a page) click on the block menu icon, as shown below.
- In either menu that appear - click the trash can icon 🗑
- To undo a delete use the ↺ back circular arrow on the bottom page menu.
How do I add links or documents? ▶️
- Select and highlight the text or button then click once.
- Choose the link 🔗 option from the black bar that appears.
- Choose the type of link you want to use
- Choose 'Page' for another site page.
- After choosing 'Page' type the title of the page in the box below, then press Enter.
- A dropdown will appear with the Page options - select the correct page.
- Choose 'URL' and paste in an external site.
- Choose 'File' and upload the file.
- NOTE: ⚓ For creating 'anchor' links (links that go to a specfic part of the page) - see the Intermediate section.
- NOTE: After you create a text link, it may not appear as underlined - highlight the link again and choose the U underline option.
▶️ This video, also embedded below, shows how to master links in Brizy.
I want to change or add new images to my pages - what are the steps? ▶️
The below steps presume you have found an image that is either copyright free, or you have the relevant license to use. Copyright free images can be found on resources such as Unsplash.
⚠️ IMPORTANT NOTE: You should not upload high resolution images that are over 1.5 MB in size to Brizy pages. Most images downloaded directly are higher in file size than 1MB. Images need to be optimised so their file size is reduced before adding to Brizy. This is to ensure a good experience for mobile users and so SEO scoring is not impacted.
- Image size: You need to have an idea of the rough dimensions for the image purpose in pixels (px). If you are replacing an image you can use the dimensions of the existing image, otherwise these image dimensions are best practice. Your image doesn't have to exactly match the pixel dimensions, but the aspect ratio and orientation (landscape/portrait) is important.
- Resize: Once you know the image size you need in px (pixels), you can then resize the image using a free tool such as Adobe Express and following this video guide if you haven't used it before.
- Optimise: If you don't have Photoshop to compress the image you'll need to upload it to a free compression site like Optimzilla. Web images need to be small file sizes for fast download. Uploading full quality images may reduce your SEO score and will cause a slow load on the webpage.
- Add to Brizy: Once you have your compressed image ready, you can add this image to Brizy by selecting the image from the left hand side ➕ menu (as shown in the image below) and dragging it to the desired space, as shown in the image below.
▶️ This video, also embedded below, shows how to master images.
The next section shows how you can adjust your newly inserted image.
I want to adjust the image I've added - what are the steps? ▶️
If you've inserted your image and want it to look the most effective on all devices, click on the image you've inserted to get the black menu bar for the options available.
- Image align: You can align the image left, centre or right by clicking on the image and using the black menu align icon, as pictured below.
- Image re-sizing: You can resize the image using the handles after selecting it, or using the black menu ⚙️ setting icon, as pictured below.
- After clicking the ⚙️ gear icon on the black image menu, you can adjust the size and access other options, as shown in the image below. You'll want to resize the image to best fit each device individually (see the question on testing your page on 📱different devices).
- Image spacing: You add margin and padding to an image per device. Click on the image to show the black image menu, then select the ⚙️ gear.
- After clicking the ⚙️ gear icon on the black image menu, select the '⚙️ Styling' option.
- You can then adjust the Padding and Margin for the image, as shown in the image below. You'll want to resize the image to best fit each device individually (see the question on testing your page on 📱different devices).
▶️ This video, also embedded below shows the various options you can use with your images.
▶️ This video explores a further Brizy Pro Cloud feature - image galleries.
I want to add a video or embed content from elsewhere - how do I do this? ▶️
- To embed a YouTube/Vimeo video click the + button on the left and drag the video element (as shown in the below image) to where you'd like it on the page. After this paste in the URL to the element.
You can then choose various options depending on the source of your media.
▶️ This video, embedded below, shows how to embed media.
How do I test my page on different devices, preview and publish my page? ▶️
It is strongly recommended to go through the these steps when you want to publish your page:
- a) adjust for 📱different devices and
- b) preview the results and adjust again as needed
- c) test on your own mobile
These steps are shown below with screenshots.
a) Device switcher - test for different devices
At the bottom left of the page, you can page looks on different devices. You may find it useful to adust the margins and padding for each device.
b) Preview your page
At the bottom left of the page you will see a small black bar. You can preview your page (recommended) before publishing by pressing the icon with the diagonal arrow.
c) Update (Publish) or Save Draft
The blue button gives you the options to 'Update' (publish to the web) or if you click the arrow 'Save as Draft' (changes won't be published yet).
▶️ This video, embedded blow explains how more about saving and publishing.
Intermediate (styles, spacing, accordions, anchors)
I want to change the font size/colour across the whole site for different styles - what's the best way? ▶️
In nearly all cases it is best to work with the global styles for your site for both consistency and manageability. It is highly recommend to use the existing styles and not create new styles by amending page elements individually. New 'accidental' styles can show up in the 'Styles' section as 'New Style #10' etc. Amassing new styles without limit results in an unmanageable amount of page styles and usually visual inconsistency.
Extra step for font style changes: If you want to adjust a style, first ensure you know which style you are adjusting, by clicking on the text element and choosing the T from the black menu bar, as shown in the image below. As you can see in this example, the style is 'Paragraph.
- Styles are managed using the paintbrush icon in the left hand side menu bar as shown in the image below.
- Unless you are wanting a dramatic change, it is not recommended to change the 'Current Style' option.
- You can change the colours by clicking on the appropriate colour and selecting a replacement one. Please note all colour changes are site wide, and will effect every page.
- Select a 'Typography' style to adjust the font size and weight etc..
- Styles are specific to each device size. Click the device to set the appropriate sizes as shown in the image below.
▶️ This video, also embedded below, explains how to make changes to the styles.
I want to adjust the space between elements, how do I use 'margin' and padding'? ▶️
Method 1 (Full control): Using the element margin and padding
- You can drag the width of page elements - specifically for each device: desktop, tablet and mobile.
- Using margin and padding you can space elements in a way that gives the page 'room to breathe'.
- First you need to select the element to adjust the padding and spacing and click the ⚙️ gear icon as the below screenshot shows.
- From the options that appear, tweak the settings to achieve your desired spacing and other effects, as shown in the image below.
Method 2 (quick adjustments): Direct drag of blocks top and bottom margins
- You can also directly adjust the margins of blocks on the page by hovering your mouse over the top of a block. You can then drag your mouse up and down to increase/decrease height as shown in the image below. This is especially important for mobile view, where more padding is generally needed.
Method 3 (quick addition): Using Spacers
- A final way to create 'space' is by inserting 'spacers'. You can insert a spacer from the left hand side ➕ 'Add element' icon, as shown in the image below.
- You can then adjust the height of the spacer by clicking on the element and choosing the ⚙️ setting option and adjusting the height setting. This is shown in the image below.
Important:
After making your adjustments, check how it looks in another device using the device switcher (see this question for specifics) and make needed tweaks.
▶️ This video, embedded below, explains how.
How do I use rows and columns to organise content?
Rows and columns create useful ways to organise information on a page. They work separately from tables which are better for displaying simple, raw data. Rows and columns can hold any content and mastering their usage gives you massive advantages when creating pages.
Note: It is important to test how your rows and columns work on a mobile device.
Generally a 2 column (3 column maximum) approach will ensure a good experience on mobile devices.
Part 1: Start your '1 row' setup.
- a) First we need to add a row from the left hand side menu (as shown in the below image). Choose 'Row'' and drag the row into the part of the page you intend to use.
- b) You will start with the recommended 2 columns, although if you wish you can add a third by using the same menu to drag in an extra column.
Part 2: 'Perfect' your '1 row' setup.
- a) Add background colours and sample content for testing. This could include alternating background colours and sample elements such as text and images to check they display. The image below shows how to change the background colour or 'overlay' of a column.
- b) Adjust the spacing per device.
- (i) For the single row: Hover your mouse over the corner of the row and click the ⌃ up arrow that appears. Click the ⚙️ setting gear icon and choose the '⚙️ Styling' option. Adjust the margin, padding and other settings as desired.
- 🔁📱Repeat this action for each device view.
- (ii) For each column individually: Hover your mouse over the corner of a column and click the ⌃ up arrow that appears. Click the ⚙️ setting gear icon and choose the '⚙️ Styling' option. Adjust the margin, padding and other settings as desired.
- 🔁📱Repeat this action for each device view.
- 🔁 Repeat these actions for each column individually.
- The image below shows this process being performed on the first column.
- c) Perform final testing on each device view. Check your rows, columns and sample content is correct on each device before continuing. Adjust sample content as needed, although exact text and images won't be needed. We will be duplicating this setup so this needs to be tested and correct before moving on to the next part.
Part 3: Duplicate each row and add real content
- (a) Duplicate the row you have setup and tested. To do this again hover your mouse over the corner and click the ⌃ up arrow that appears.
- (b) From the menu that appears choose the 'duplicate' option as many times as is necessary. Add in your actual content to the new duplicated rows and columns. The image below shows a row being duplicated.
▶️ This video, embedded below, explains how to use rows and columns.
I want to add a link that goes to a specific part of a page (⚓ 'anchor' links) - how do I do this? ▶️
This explanation assumes you are comfortable with adding links - as detailed in a previous question. Please see that question in the 'Basics' section to acquaint yourself with the basic process.
With Brizy you can create a link to a specific block on a page - this is called an 'anchor' or 'block' link.
To create an anchor link, first decide which block on your page the link will direct to
- Follow the normal process to create a link, choosing the 🔗 link icon from the black menu as usual.
- In the link menu that appears, choose 'Block' and pick the block as shown in the image below. We recommend naming the section by clicking on the pencil icon and changing '#block-name' to a 1-3 word description, using hyphens or underscores to seperate words (not spaces).
▶️ This video, embedded below, explains the whole process.
I'd like to add content which is only shown when clicked (like this box) - how do I create accordians? ▶️
This block of content is called an 'Accordion' in Brizy. They are very useful for breaking up large blocks of information so the user can digest them as needed.
Basic accordians
- To create a basic accordion you can simply drag it onto your page from the left hand side black add element menu, as shown in the image below.
The below modifications are recommended:
- Step 1) Delete the initial contents of the accordion.
- Step 2) Toggle off the 'Collapsible' switch. This is found in the main accordion menu, when you click on the element. There is an image showing this below. This ensures the block only expands/shows when clicked.
- Step 3) Add icon markers to your accordion. This is done in the 'Icon' tab of the main accordion menu wher you can also choose a suitable size. The image below shows this.
- Step 4) Change the Text style from 'Custom' to suitable Heading. To do this click on the title text of the accordion and click the T on the menu. Note that this changes all accordion headers.
- Step 5) As with all elements, using the ⚙️ settings gear icon you can check the '⚙️ Styling' and adjust the margin/padding for each device to ensure a great experience for your viewers.
That's the basics of accordians. Accordians can hold any content including images, rows, videos - and also more accordions.
If you need to break up information extensively, you can use 'nested accordians'. The accordian below shows how to accomplish this, and gain further levels. If you duplicate an existing accordion and drag that into a nested level, you will not need to repeat the initial modification steps, however if you insert a new accordian, you will need to repeat these steps for that new accordian.
Creating nested accordians (this is an example)
Like this accordion is nested within the question block, you can create nested accordions to break up information. In this guide we will refer to the nested accordians as 'levels'. 'Level 1' being the parent, or starting accordian.
To do this:
- 1) Ensure your original accordian 'Level 1' is empty. Within the accordion you wish to nest different levels - you need to delete anything that is currently there so we can add another accordian inside.
- 2) Drag in a new accordian into the black area (as below).
- 3) Adjust the 'Collaspible' and 'Icon' elements as below.
- 4) Repeat the process for further levels by dragging in a new accordion element.
▶️ This video, embedded below, explains accoridion options.
Advanced (menus, global blocks)
I want to change or add to a menu - how do I do this? ▶️
- With Brizy you can create a main site menu and custom menus.
- The same link can appear in multiple menus, should you wish it to.
- You can also create 'Custom links' to external websites
▶️ This video, embedded below, explains how to do this.
The top part of the page ('header') and the bottom part ('footer') are Global Blocks - what does this mean? ▶️
- Global Blocks are parts of a page you would like to stay the same across the whole site. Caution is needed when making adjustments to these site wide blocks, as changes apply to the entire site.
- The most common parts of the page which are 'Global Blocks' are:
- The 'Header' - the top part of the page, usually with the logo and main site menu
- The 'Footer' - the bottom part of the page, usually with copyright, social links and contact/legal details
- You can edit these parts of the page exactly the same as any other element - but note the changes will apply to all pages using that Global Block.
- If you want a Global Block to only appear on certain pages you can apply 'rules'.
- This video, also embedded below, explains this.
Brizy Blog
It is recommended that the basics of Brizy are understood before tackling the Blog feature. View the Brizy blog help page using the button below.
Help on demand
Get instant answers and help on all support topics.
Utilise the trained Ai agent in your 🔒 Client Portal
Getting started
Starting out in Brizy Cloud
Design Elements
Using elements and blocks
Mastering Images
Essential viewing for using images
Brizy Academy
If your thirst for knowledge is taking you further learn direct in the Brizy Academy
Client help
Let's talk
Choose the appropriate option below to chat or book work.
New clients can book a free discovery session, retainers can book a free catchup.
