It has a width and vertical-align as attributes.
This is basically just a spacer element, as explained above. A weird MJML bug means that if you want to vertically align elements inside one column, the other columns within the same section need to also be vertically aligned to the middle. It also has an attribute called vertical-align which allows us to vertically align content within the column. Otherwise, the content would be stuck side to side. This is because we want there to be space between the first column (image) and the third column (text) in Desktop mode. The first column contains the image, for which we’ve set a source and a height. We gave it some space on top of the column, below it, to its left and to its right so that the image and text weren’t stuck to the sides or to the preceding elements. Maybe we should make this a snippet! Wow, I wish I could keep my white sneakers squeaky clean all the time. Sunset skate sesh! Here's some more of that body copy from earlier. This stuff can get pretty icky so keeping it simple is really helpful. You could probably make it its own snippet if you need it more than a couple times…
Repeat this component as many times as necessary. You can experiment with the value if you want more or less space. We gave it a font-size and padding-top so that the paragraphs weren’t stuck to the previous elements. We gave some familiar attributes we’ve already seen.We added padding-left and padding-right as attributes so that the text inside the email wasn’t squashed to the sides. has something a little different here.Do I even need to explain the comments?.
#MJML BUTTON CODE#
Wow! I can write code my own emails now!. Here is a very long paragraph of several words. href allows us to send the button to another website - align="center" allows us to center the text along a horizontal axisīODY COPY. You can experiment with the value if you want it to have more or less space. It can have a lot of different attributes, but we only used three: - padding-top allows us to add 16px of space above the button so that it isn’t stuck to the text that comes before it. creates a button, as you can tell by the name.how big the text is) - set the font-weight to “600” (ie. We guesstimated it lol - made the text white (#ffffff) using the color attribute - center-aligned it along the horizontal axis (you could also give the attribute align the values of left or right ) - set the font-size to 40px (ie. We gave it the following attributes and values: - padding-top of 50px to vertically center the text (this just adds space above the text). is what we use to display human-readable text.image-height is a mandatory attribute if you set the mode to “fixed-height”. specified the background width to 640px (the default is 600px) - pulled in the image from wherever it is hosted using background-url - set a fallback background-color in case the image fails to load - specified the image height to 400px. We did the following: - made the hero image take a mode of “fixed height” so that the image size didn’t change between desktop and mobile view. We put it right after the Header component. as usual to mark off the start of the component.You could in theory just put up an image. We gave it text and a CTA, but that’s totally optional. is one of the rare MJML components that don’t have to be nested within or.
0 kommentar(er)
