Working with the new enudge responsive styles

Transcription

1 Working with the new enudge responsive styles This tutorial assumes that you have added one of the mobile responsive colour styles to your campaign contents. To add an enudge style to your campaign: 1. Open your enudge campaign and navigate to 2. Content & Test. 2. Clear any existing content from your campaign, by clicking on the HTML icon in the toolbar, and then selecting all the content, and pressing your delete key. 3. Click on the Insert Style icon. 4. Choose one of the - mobile responsive templates from the drop down list, and then click the Insert button. Page 1

2 IMPORTANT INFORMATION When editing the contents of your campaign, based on one of the mobile responsive enudge styles, please ensure that you do not delete the outer two tables. These are required in order for the to layout responsively that is, not require the reader to pinch, zoom and pan around their screen in order to be able to read the contents. If editing the template via the html view, please ensure that you also do not delete the code above the first table. This code is required to help the function responsively. At the top of your html editor, you will see a line of code that looks like this: <style type="text/css"><!-- * This section of code is quite long, and will end with a line that looks like this: --></style> ADDING & REMOVING ROWS OF CONTENT To add extra rows to the main content section of the style, place your cursor within the existing row, and then click on the Insert Row After icon in the editor toolbar, shown in the following image: You can add as many rows as needed, by repeating the above steps. Alternatively, you can add a row above the existing content by choosing the Insert Row Before icon (this icon is immediately to the left of the Insert Row After icon. If you need to remove a row of content, place your cursor anywhere within the row to be removed, and click on the Delete Row icon (this icon is immediately to the right of the Insert Row After icon). Page 2

3 ADDING NEW COLUMNS OF CONTENT To add extra columns to your main content section, place your cursor in the section, and choose one of the following two icon options: Insert Column Before or Insert Column After as appropriate. The image below shows the location of the Insert After icon: PLEASE NOTE: it is not advisable to add any more than one extra column of content (making 2 columns of content, in total). Adding an extra column of content, may cause the text to look quite squished on a mobile phone view. Responsive s work best with one single column of text. To remove any unwanted columns: Select the column you wish to remove. Then to the right of the Insert Column icons, click on the icon called Delete Column. ADDING A LARGE RESPONSIVE IMAGE (FULL WIDTH) When adding a large, full width image, to your responsive , follow the steps below to ensure it will fit nicely on smaller device screens. 1. Insert an image, as you would normally, by clicking on the Insert/Edit Image icon in the editor. This will bring up a window, where you can either browse for an image, or upload a new one to your collection. 2. Once you have selected the image, click on the Appearance tab and make the following adjustments: o The Dimensions will be showing for your image by default. Remove these numbers, leaving the fields blank. o In the Style section paste the following code: height: auto!important; width: 100%!important; 3. Then click Insert and your large responsive image is now ready to go. Page 3

4 The image below shows the image appearance tab as described in the above steps: Making the above changes will cause your image to shrink with the device screen automatically, and therefore is useful for images that are not very complex. ALIGN IMAGE LEFT OR RIGHT When adding an image that you wish to align to either the left or right of text content: Firstly place your cursor in the section of text beside which you intend to position your image. Click on the Insert/Edit Image icon, to upload/browse or select your image. In the Insert/Edit Image window, select the Appearance tab. Here you will see an Alignment section, and from the dropdown list, you can select either Left or Right ; whichever option you require. The Dimensions will be included by default; remove the values in these fields, leaving the fields blank, except o If your actual image width is larger than 300px, enter a number smaller than (or equal to) 300 into the first (width) field. The second field should be left blank. In the Style field, enter in the following code: height: auto!important; width: 40%!important; When aligning images left or right, it s often nice to have a bit of space around the image. It helps s to look tidy and neat. To add this extra space: o Below the Dimensions information, are two field options called Vertical Space and Horizontal Space. o In both of these blank fields provided, enter in the number 10 (or similar) 5 may be enough padding, for example. Click the Insert button. Page 4

5 The image will now appear beside the chosen text section, with 10px of space around it, and will scale down to fit nicely on responsive devices. PLEASE NOTE: Outlook tends to display these images a little imperfectly. For example, when there is more than one specially aligned responsive image per row/column, the images end up overlapping each other in Outlook. One way around this, is to only use one aligned responsive image per row/column. Add an extra row for each new image that you wish to include. EDIT TABLE CELL PROPERTIES (SUCH AS ALIGNMENT FOR TEXT) In order to adjust the overall text (and/or image) alignment of a row/column, you will need to edit the individual row/column settings. By default, these rows/columns are set to left align. Place your cursor in the row/column to be adjusted. Right click, and move your cursor to the Cell option with an arrow next to it, and then choose Table Cell Properties from the additional sub menu. (Alternatively, you can click on the Table Cell Properties from the toolbar 3 rd icon from the left, on the bottom row). Under the General tab, in the Alignment section, select the desired alignment option from the dropdown list (left, centre or right). Click the Update button. ADDING 3 IMAGES NEXT TO EACH OTHER (IN ONE ROW) If you need to add 3 images next to each other in a row (without any text beside or in between the images), the following steps will help you to align them neatly. 1. Align the row cell to centre (as explained in the section above). 2. The images you intend to layout in a row must be no larger than 250px in width. 3. Insert each image by clicking on the Insert/Edit Image icon and either select or upload your image. o Within the Appearance tab - set the Dimensions fields to blank for each image, deleting the default number values. o Then in the Style field, insert the following code: height: auto!important; width: 28%!important; 4. Place all 3 images next to each other (in the one row), repeating the above steps. 5. Place your cursor in the spaces between each image, and press your keyboard space bar a couple of times, adding a small gap between each image. Page 5

6 EDITING THE FOOTER SECTION Your footer section, by default, has some example text included. You can change all of this to suit your own campaign. Usually a footer section will include a few links to social media or your organisation s website address for example. If you require further assistance, please call (03) or [email protected] Page 6