Logo Magzmaker

Edit a page

My Magzmaker > Manage> Editions > Page > 

  • When you open a page in edit mode, you'll see section guidelines with content blocks. Hover over a block and click the pencil icon  in the top right to edit.
  • To view the page without the guidelines, click on 'Preview' in the purple bar at the top.
  • To return to edit mode, click on 'Back to Editing'
Markers

Dividing a Page Using Sections

To structure a page, utilize sections as containers that allow for column-based layouts. Each section can be configured with a specific number of columns to span the width of the page.

  • Creating Column Layouts: Sections can be layered vertically with varying column configurations to organize different parts of the page.

  • Adding Content: Within these columns, place content blocks such as text, images, and videos to populate each section effectively.

This method enables organized and flexible page designs, enhancing the presentation of your content.

Some examples of column layouts of a section:

Sectie kolom indelingen

Adding and Managing Sections

To start adding a section to your page:

  1. Quick Add: Click "Import section from library" in the middle of the page to quickly add pre-designed sections, either empty or pre-filled with content.

  2. Custom Layout: Choose "+ Add section" to create a new, empty section where you can define the column layout yourself.

Editing and Removing Sections:

  • Edit: To modify an existing section, click on the section's name listed on the left.
  • Remove: To delete a section, click on the icon  on the left.

These tools help you effectively organize and customize the layout of your page.

Add section, add block

Inserting and Managing Sections

To add a section to your page:

  1. Insert from Library:

    • Click Insert section from library. You can choose a:
      • Blanco Section: Empty sections for quick layout setup.
      • Custom Section: Pre-formatted sections with elements like paragraphs, quotes, images, or videos. Customize these by adjusting text and images to fit your page.

  2. Reorder Sections:

    • Use the 'Reorder sections' button at the top right to view and organize all sections. Sections can be easily identified and moved by    dragging them into the desired position based on their titles.
Section library - blanco sections
Section library - custom sections

Section Settings

To configure a section:

  1. Adding a New Section: Click 'Add section' to insert a new section on your page. You can then set various properties to customize this section.

  2. Editing an Existing Section: To edit a section that is already on the page, click on the section's name on the left side. This will allow you to modify the properties of the section.

There are 4 tabs to set the properties of a section:

  • General Tab: A section's layout can include 1 to 6 columns. Upon selecting a layout, the grid divides into 12 equal parts. For example, a 2-column section is split into 6-6, while a 4-column layout is divided into 3-3-3-3.
    Breakpoint: Set a breakpoint to adjust how columns align on different screen widths. The default breakpoint is 768 pixels, where columns stack vertically on narrower screens. Adjust this setting to stack columns at different widths (e.g., 1024 or 1280 pixels) depending on your design needs.
  • Colors Tab: Customize the background color for the entire section or individual columns.
  • Background Tab: Select a background image and configure settings for its position, size, and more.
  • Style Tab: Add spacing above or below the section and set borders as needed.

Note: Users with the Professional Publisher license can apply custom CSS for further customization.

Section settings - tab General
Section settings - tab Colors
Section settings - tab Background
Section settings - tab Style

Adding Content Blocks

To add a content block, ensure a section is already in place. Within any section on the page, click '+ Add block' to begin. 

Types of Content Blocks:

  • Image: Insert individual images.
  • Button: Add clickable buttons for navigation or actions.
  • Masonry: Create a photo collage that allows for image enlargement.
  • Slick Slider: Setup a photo slider that can include single images with fade or slide effects, or multiple images side by side (slide effect only).
  • Text Block: Add blocks of text.
  • Video Block: Embed video content.
Add block options

  • Configuring Your Block: When you insert a block, you may enter a title (optional). By default, the type of content (text, image, etc.) is used as the title, which can help you identify and organize blocks easily. You can modify the title at any time.

  • Adjusting Block Settings: Once a block is added, fine-tune it using the tabs Content, Settings, Animations, and Advanced to tailor each block to your needs.
Block settings - tabs

Edit menu
Editing a Block
  • Edit:
    • Click the edit icon located to the right of the block  .
    • A small menu will appear; select Settings to access configuration options.

Additional options:

  •  Move:
    • Blocks can be repositioned directly on the page using drag and drop. Hover over the block to see the move icon then drag it to the desired location within the section.
    • To transfer a block to another section, use the dropdown menu at the top to select the target section and column, then click Move.
  • Remove block:
    • To delete the block from the page, select the remove option.
  • Clone: 
    • Duplicate the block by selecting Clone. The new block will initially appear below the original. Move it by dragging to the appropriate column.
    • Important: Save your changes before editing the cloned block to ensure all modifications are retained.
Block settings Overview

When adding or editing a block, adjust its settings across four tabs: Content, Settings, Animations, Advanced.
Here’s how to configure each:

Tab: Content

  • Title: Used internally to identify the block
  • Anchor: Name this block for internal links (e.g., #Text1) to enable direct navigation within the page. For example, if you enter "Text1" here, you can place #Text1 in the link field of another block. When you click on the link, the page will scroll to the block with the anchor name "Text1". The "read more" buttons in the templates in the library are created this way.
  • Link - Adding a Link to a Text Block, Button, or Image
    1. External link: Insert the URL for external sites.
    2. Internal link:  Start typing to receive suggestions of existing page titles to link.
    3. Anchor Link: Link to another part of the same page.

Tab: Settings

  • Padding - Space between the content and block edges.
  • Margin - Space around the block up to the section's edge. 
    • Note. In Magzmaker, we usually use margin to determine the width. For a text block, we often set the left and right margin to 25%, making the content area 50%. You could also set the Width field to 50%. Then, set the left and right margin fields to "auto" to center the block. The value "auto" ensures that the available space is divided equally.
  • Width, Max-width - Define in % or px. Alternatively, use margins to set width dynamically.
  • Height - Typically determined by content rather than a set value.
  • Background color  - Choose a color for the block background. A background image can also be added.

Tab: Animation

  • Select an animation style, duration, and start time from the dropdown list.

Tab: Advanced

  • Resonsive: Default setting ensures mobile-friendly display with 15px padding on the sides. Uncheck to customize size and spacing.
  • Borders: Set border thickness, color, style, and corner rounding.
Saving Changes

To ensure all modifications to sections or blocks are reflected on the live (published) page, it's essential to save your work:

  • Save Button: Use the purple 'Save' button located at the top right of the page to save your changes and continue editing.

  • Unsaved Changes Notification: If there are any unsaved changes, a yellow message will appear at the top left of the page stating, "You have unsaved changes."

Make sure to save frequently to update your content effectively and prevent any loss of progress.

Yellow message - unsaved page

Note: when you switch to PREVIEW mode to view how the page will look to viewers, only the changes that have been saved will be displayed. Ensure you save any edits you've made before entering preview mode to accurately assess the current state of your page.