Creating responsive emails using the Mosaico Extension in PowerBase

What is the Mosaico Extension?

The Mosaico extension enhances CiviCRM's mailing feature by allowing you to create drop-and-drag mailings that are mobile responsive. You will still have the option to use the existing Mailing feature in CiviCRM and have access to your existing email templates.

If you still want to use the traditional CiviCRM mailing feature, to create an email, go to Mailings menu > New Mailing (Traditional).

If you want to use your existing templates that you created with the traditional CiviCRM mailing features, go to Mailings menu > Message Templates.

Here is the link to the webinar recording for PowerBase online workshop on using Mosaico.

NOTE: Currently, we find that the Mosaico features work best with PowerBase when you are using Firefox as your browser.

How to Create a Mass Mailing (Email) using Mosaico

  • To create a new mailing, click on the Mailings menu > New Mailing

1. Mailing

Enter information about your Mailing:

  • Mailing Name (required): Enter a descriptive name for this mailing so you can locate it later
  • Campaign Name (optional): select the campaign that is related to this mailing
  • From (required): select the email that will be displayed as the Sender in the recipient's inbox
  • Recipients (required): select the mailing list group(s) you want to send this email to
  • Subject (required): the subject line of the email. Tokens may also be used in the subject line.

Click CONTINUE to go to the next step to design your email, or click SAVE so you can edit your mailing later.

2. Design

The next step is "Design" where you can select an "Empty Template" to start from scratch, or select an existing template. Hover your mouse over the template you want to start with and click SELECT.

In this example we will start from scratch by selecting "Empty Template versafix-1"

You will then be looking at the mail editor where on the left side you will see several format options made up of different design blocks to help you build your mailing in the content area, which we'll call the "palette":

  • From the Block menu, you can drop and drag the blocks you want to use from the left side OR you can click on the ADD button (the button will appear when you hover your mouse over the block) to add the block onto your mailing "palette" to assemble the look you want for your email.

Tip: We suggest building your email from the top down using the blocks. You always have the opportunity to move blocks around on your email template (palette) by clicking and dragging the blocks to rearrange them to your liking.

Adding a design block to your mailing palette

In this example, we'll select two blocks to build our template:

  • Add a content block that includes an image on the left, and a Section Title, text area, and button on the right
  • Then add a footer block that contains social media icons

So our palette will look something like this:

After you've selected the blocks you want to use for your design, you can now begin editing the content of each block.

Editing a specific design block

To edit a specific design block, click on the block to select it:

  • To add an image to your block (your block should indicate an area to "Drop an Image here", click on the image icon on the menu to view your "gallery" of images.

You will be able to select existing images in your gallery by clicking on the "Gallery" or "Recents" tab" or upload a new image by click in the area "Click or drag files here", which opens your browser to select the file to upload:

Then to add the image, just drop and drag your image to the "Drop an Image here" area in your block OR you can double click on the "Drop an Image here" area to highlight, then double click the image you want to add:

Photo credit: Pennsylvania Immigration and Citizenship Coalition

  • To add text, click on the text area itself and begin typing. You will see a formatting menu so you can change the style and color of the text.

  • To edit text on buttons, just double click on the button, and you can enter the text and format the text. To configure the link for the button, use the Style menu as discussed below.

  • From the Style menu, you can change colors and fonts of text, buttons, and backgrounds and more within a specific block or for the entire mailing including all the blocks you've added. You first need to click on the block on your email palette to select it and then click on the Style menu:

    • You can edit the properties to change the colors for the background, external background, text, links for buttons and images, and more.
    • You can select the font and size of your text
    • From the Style menu you can also switch between applying the styles to a specific block or globally (all the blocks in your template):

    • Click on the "single cube" image to apply the style to a specific block only

    • Click on the "multiple cube" image to apply the style globally (all the blocks in your template)

  • From the Content menu, you can change the content options of a selected block in your mailing. You first need to click on the block on your email template (palette) to select it and then click on the Content menu. :
    • You can edit properties of images in certain blocks if applicable (e.g. links, image size, alternative text for the image) or
    • You can edit the properties of the Preheader if applicable (where the "unsubscribe" or "view in browser" links appear) to show the block or edit the links
    • you can edit the social media area of the "footer" block if applicable (e.g. you can choose which social media icons to display and edit the links, or decide to display the social media icons in color or in black & white)

In this example we selected the "footer block" and clicked on Content menu to edit the properties of the social media icons:

  • Adding Tokens by click in the text area where you want to display the tokens, and the format menu appears. Just click on TOKENS and select the tokens you want to add to email template.

  • To rearrange or delete blocks, click to highlight the desired block, then use the up and down arrow images to move your block to the position you want in the palette, or click on the trash icon to delete the block from your email.

Testing Your Mailing

As with sending any mass mailings, you want to test your email to check for content and formatting. You need to be editing your email message to access the TEST link.

You can:

  • Send a test email to an individual, like yourself, by entering an email address in the "Send test email:" field then click Send Test
  • Send a test email to a group to help you proofread your email, by selecting the group you want to send to in the "Send test email to group:" field, then click Send Test

When you are done click the "X" on the Preview/Test window to close this window. Then click the CLOSE link when you're done with editing your Design.

You can then click the SAVE DRAFT button to save the email message and return later.

If you are ready to send or schedule the mailing, click the CONTINUE button to move to step 3. Options.

3. Options

You are now ready to send or schedule your mailing to be sent.

You can decide to configure Advanced Mailing Options for:

  • Attachments
  • Responses
  • Tracking
  • Publications

These options have the same functionality and settings as the traditional CiviCRM mailing options, which you can find more details in the CiviCRM book here.

Sending Your Mailing

To send your mailing right away, select the option to Send Immediately and then click the Submit Mailing button.

To schedule your mailing to be sent in the future select the option Send On, then select the date and time to schedule the mailing, and then click the Submit Mailing button.

Creating Templates

If you had created email templates using the CiviCRM traditional Mailing feature, then those templates will exist separately from your Mosaico templates and can be found by clicking on Mailings > Message Templates.

To find Mosaico templates or to create new Mosaico templates click on Mailings > Mosaico Templates:

You can then find your existing Mosaico templates here, or you can create a new template by selecting the "versafix-1" template and clicking NEW:

Then enter a new name for your template in the Create New Template field, then click OK. Continue creating your email template by following the instructions above.

Category: 
Email and Postal Mailings
PowerBase - General