Woocommerce Element Properties

Email Elements #

The email elements in the email customizer plugin are useful to design attractive email templates that’s better than your competitors. Email Customizer Pro provides 16 various email elements that are explained below:

• Customer Details: It includes customer details like Emails, Billing address, Shipping address, and contact details.
• Order Details: It has details like product order with quantity, price, and order number.
• Divider: Used to divide the template design and it’s based on your usage.
• Header: Add a header with the logo of your company.
• Textarea: Enter any required texts in multiple lines inside the textarea.
• Button: Add a button with the URL to redirect to the desired page. You can add many buttons inside templates depending on your requirements.
• Disclaimer: Add your disclaimer text for the readers.
• Maintext: The Maintext element comes with CKEditor, background image/color adding options, and double column option. Add text inside the content field. You can format your text, change the alignment of the font, include bulleted & numbered lists and more with CKEditor. It also lets you add merge fields such as {customer_name}, {order_no}, {order_date}, {blog_name}, {user_name}, {user_email}, and more.
• Image: Add images inside your email templates using this email element. You can upload external images or images in your media library.
• Title: Provide title text in your mail template.
• Social Links: Get connected to your customers by sharing your social profiles links. Give the links to your social media profiles like Facebook, Twitter, Google+, Linkedin, Skype, Youtube, and Instagram.
• Footer: Add some texts with redirect links at the end of your email template.
• Signature: Add email signatures inside your template. Insert the signature element inside your template by dragging and dropping it. Select the edit icon. Click the ‘Sign Here’ button. Sign and submit your signature.
• Multiple Image: Use this element to add multiple images inside your template.
• Image Text: This lets you add an image with some text which displays in equal ratios.
• Video: Insert this element if you want to include video inside your email template.

Use these elements when designing the email template. Just drag and drop the fields inside the email template designing area. All email elements have the edit, duplicate, and delete option.

Properties of Email Elements #

Here we have listed all the properties of every email element.

Customer Details

1. Font Family	Choose one font family from the list of styles.
2. Customer Details Background Color	Change the background color by choosing a color in the color picker. Select the reset icon to revert to the previous color.
3. Customer Details Font Color	Change the font color by selecting a color in the color picker. Click the reset icon to revert to the previous font color.
4. Width Size	Adjust the width size of the element to fit your template design. Select the reset icon to revert to the previous width size.

Order Details

1. Font Style	Choose one font style from the dropdown.
2. Table Background Color	Choose the color from the color picker to set as the table background.
3. Font Color	Choose any font color from the color picker.
4. Header Color	Select a color for the table header.
5. Background Color	Select a color to apply in the element’s background.
6. Width Size	Adjust the width size of the element based on your needs.

Divider

1. Divider Width	Adjust the width of the divider.
2. Divider Height	Adjust the height of the divider.
3. Divider Color	Choose a color for the divider.
4. Divider Background Color	Choose a color for the divider background.
5. Width Size	Adjust the width size of the divider element.

Header

1. Header Image Position	Choose the header image position from the dropdown. By default, it’s placed in the center.
2. Choose Image From	Upload an image inside the header. Either give an external URL of an image or upload an image from the media library. Choose the url and enter the image url. Or choose wp-media, click ‘Upload Image’ and upload an image from the WordPress media library.
3. Background Color	Set the background color for the header.
4. Logo Width	Adjust the width of the logo image. It also shows the value of the width after you change the width.
5. Logo Height	Adjust the height of the logo image. You can view the value of the height below after adjusting.
6. Width Size	You can change the width size of the header.

Text Area

1. Enter Text	Enter any text inside the ‘enter text’ field.
2. Text Position	Change the position of the text to left, center, or right.
3. Font Color	Set the font color for the text.
4. Font Style	Choose any font style from the dropdown for the text.
5. Font Size	Select any font size for the text from the dropdown.
6. Text Area Background Color	Set the background color for the text area.
7. Width Size	Adjust the width size of the text area element.

Button

1. Button Link	Provide the button link here.
2. Text	Enter the text for the button.
3. Button Color	Set the button color.
4. Font Color	Set the button font color.
5. Button Position	Change the button position to center or left or right.
6. Button Background color	Set the background color for the button element.
7. Width Size	Adjust the button element width size.
8. Button Height	Adjust the button height.
9. Button Radius	Adjust the radius of the button.
10. Button Width	Adjust the button width.

Disclaimer

1. Text	Provide some text here.
2. Disclaimer Position	Modify the disclaimer position to left, center, or right.
3. Font Color	Set the font color for the disclaimer text.
4. Font Style	Choose any one font style from the dropdown.
5. Font Size	Choose a font size for the disclaimer text.
6. Disclaimer Background Color	Choose a bg color for the disclaimer.
7. Width Size	Set the width size for the disclaimer element.

Main Text

1. Title Background	Choose a background color. Or add an image as a background.  Either enter the image url or upload any image from the WordPress media library.
2. Width Size	Set the width size for the main text.
3. Top	Set the top border radius.
4. Bottom	Set the bottom border radius.
5. Number of Columns	It has double column support. Select column1 for single column and select column2 for double columns.
6. Content	Add media and text inside the column content. Format your text and media using the CKeditor.

Image

1. Image Position	Change the image position to left, center, or right.
2. Choose Image From	You can either insert an external image or upload an image from WordPress media. Choose ‘Url’ and provide the image url. Select ‘WP-media’ and click ‘Upload image’ then upload the desired image from your WordPress media.
3. Image Background Color	Select a background color for the image.
4. Image Width	Adjust the width of the image.
5. Image Height	Adjust the height of the image.
6. Top	Set the top border radius.
7. Bottom	Set the bottom border radius.
8. Border	Choose the desired border to give around the image. You can set color and pixel value for the image border.
9. Rounded Corner	Use to round the corner of the image border outside edges.
10. Width Size	Adjust the width size of the element.

Title

1. Text Position	Change the text position to left, center, or right.
2. Sample Text	Enter the title text here.
3. Text Color	Choose any color for the title.
4. Font Size	Select apt font size for the text.
5. Background Color	Add a background color to the title text element.
6. Width Size	Adjust the width size of the element.

Social Links

1. Icons Position	Choose the icon position to place it in the left, center, or right.
2. Link Background Color	Add an apt background color.
3. Facebook link	Provide the link to your Facebook profile.
4. Twitter link	Provide the link to your Twitter profile.
5. Google+ link	Provide the link of your Google+ profile.
6. Linkedin Link	Provide the link to your Linkedin profile.
7. Skype Link	Add the Skype link.
8. Youtube Link	Add Youtube channel link
9. Instagram Link	Enter your Instagram profile link
10. Width Size	Adjust the width size of the social links element.

Footer

1. Text	Add a text to display in the footer.
2. Text link	Give a link for the text to redirect to the desired location.
3. Text	Add some texts to display in the footer.
4. Text link	Give a link for the text to redirect to the desired page.
5. Text	Add some texts here.
6. Text link	Give a link for the text to redirect to the desired location.
7. Text Color	Select a color for the text in the footer.
8. Background Color	Choose a background color for the footer.
9. Width Size	Adjust the width size of the footer element.

Signature

1. Signature position	Select a position for your signature to place inside the template.
2. Background Color	Add a background color for the signature element.
3. Logo Width	Set width for the signature.
4. Logo Height	Set height for the signature.
5. Width size	Set the width size of the signature element.
6. Sign here button	Use the button to draw and submit your signature.

Multiple Image

1. Image background color	Choose a background color for the multiple image element.
2. Choose Image From	Choose ‘Url’ and provide the link. Enable the checkbox beside it to upload the image inside the template. Or select ‘WP-Media’ and click ‘Upload Image’ then choose an image from the media library.
3. Image Link	Give a link for the image to redirect to the desired location.
4. Image Caption	Enter a caption for the image.
5. Choose Image From	Upload any external image or media image.
6. Image Link	Give a link for the image.
7. Image caption	Add an image caption.
8. Chooser image from	Include any image Url or choose a media image.
9. Image link	Give a link for the image to redirect the user.
10. Image caption	Give an image caption.
11. Border	Set borders for each image.
12. Rounded corner	Use it to round the images’ borders outside edges.
13. Width size	Set the width size for multiple images.

Image Text

1. Background color	Set a background color for image text.
2. Image URL	Add image URL or upload image inside your WordPress media. If you want to replace the URL with a new image. Copy and paste the image Url then click the ‘Update’ button.
3. Image Width	Set width for the image.
4. Image Height	Set height for the image.
5. Enter Text	Enter any text here to be displayed on the left side of the image.
6. Font Style	Choose the apt font style.
7. Font Size	Select font size from the dropdown.
8. Font Color	Select a color for the font.
9. Width Size	Set a width size of the Image text.

Video

1. Video URL	Enter the URL of the video here.
2. Video Background color	Choose a background color.
3. Width size	Adjust the width of the video element.
4. Enter caption	Enter a caption for the video
5. Font color(caption)	Set font color for the video caption text.
6. Font style(caption)	Choose a font style for the caption.
7. Font size	Choose the font size of the caption.