Welcome to Rongchuang Media. I believe you will reap the most advanced digital operation solutions in the foreign trade industry!
National Service Hotline:400-0430- 678

Rongchuang Cloud Marketing Platform

18Years focus on the enterpriseGlobal digital marketing platformBuilding operations, search engine marketing, social media marketing, brand marketing overseasAll staff, whole network, panoramaNew business model!
You are here: Home » Documentation Help Center » Graphic help » Components » Basic components » How to use picture components?

How to use picture components?

Views:0     Author:Site Editor     Publish Time: 2016-06-28      Origin:Site Inquire

Picture component
[Introduction to components] The picture component can quickly add a picture to the page, and achieve a rich single picture display effect by setting the text, link, shape, and special effects of the picture.
[Application scenarios] The application scenarios of picture components are also very wide. For example, the website logo is usually implemented by adding pictures, and the rich single picture display effect can be achieved by setting the text, links, shapes, and special effects of the pictures. Picture components can also be used in conjunction with text components and button components to achieve a richer and more diverse display effect.


1. How to add picture components?
Step 1: Find the entry for adding components. Put the mouse on the area where you want to add the picture component, a small water drop (that is, add a component button) appears, click the small water drop, and the \"Add component\" pop-up box will pop up

Add components

Step 2: Add \"picture\" component. In the basic components, find the \"Picture\" component, click \"Picture\", and the \"Set Picture\" window will pop up;

Picture component

2. How to set the picture component?

In the pop-up setting picture window, you can set the picture content, style, special effects and advanced functions.


Select picture: upload this picture for the first time, you need to upload from \"Local Selection\". If you have uploaded this picture before, you can click \"Select from database\" button to upload this picture, if you need to delete this picture You can click \"Clear\" for various pictures;

Picture Alt attribute: add notes to the picture. By default, the name of the picture is the label that the search engine uniquely recognizes the picture. Please be sure to fill it in, which is good for website optimization. And when the picture cannot be displayed, the Alt property of the picture will be displayed;

Picture Title attribute: add a note to the picture link. The text displayed when the mouse hovers over the picture is good for the user experience. The difference between the Alt attribute and Titl attribute of the picture, please refer to this link http://www.leadong.com/id5035.html for details;

Picture description: Hover the text below or on the picture, you can choose different styles in the \"style\" label as needed;

Picture link: You can add a link to this picture, click this picture to transfer to this link; there are many types of links, you can choose according to your needs;

Picture position: You can choose whether the position of this picture displayed in this component is left-aligned, centered or right-aligned.


In order to show better results on different terminals, you can upload pictures on the pad and mobile phone separately. You can also set the alt attribute and tile attribute of the picture separately.



Choose picture display style: You can choose the display style of this picture according to your needs, default, rounded corners, round, photo frame.

Choose a description and display style: You can choose the position of the picture description display, below the picture or on the picture according to your needs.

Picture mask color setting: If the selected picture description is with a mask layer, you can set the mask layer color.


Special effects:

You can set the image effects for the first time on the page, as shown in the figure below.

You can set the special effects of hovering the picture.

Special effects

After setting the above settings of the component, you can use the following functions of this component as needed. The following are the common functions of all components:

3. ViewHow to edit the style of a component

4. ViewHow to copy components?

5. ViewHow to apply components?

6. ViewHow to remove components?

7. ViewHow to restore components?

18Years of global marketing experience to help companies break the stalemate in overseas promotion under the epidemic
Leave a message for free to build a foreign trade station + new overseas precision marketing plan

One-click access to search engines, social media operationsProgram


Responsive official website

Search Engine Marketing Solution

Social marketing plan

Brand promotion plan

Marketing Academy

Contact Sunac

Shijiazhuang High-tech Zone International Talent City D2
Hebei Operation Center
 Pre-sale:
    After sale:0311-67691131
 tousu@rongchuangmedia.net
 Floor 19A, Block B, Dongsheng Business Plaza, Shijiazhuang
Beijing Operations Center

   Manager Zhang: 18614049883
 tousu@rongchuangmedia.net
A, Xueyuan Road, Haidian District, Beijing 5 768Creative Industrial ParkB North 1061
Public security recordPublic security record number: 13019902000104
ICP recordRecord certificate number: Hebei ICP No. 15001123
bgValue-added telecommunications business license number: Hebei B2-20115046
© 2020 Shijiazhuang Rongchuang Media Co., Ltd. All rights reserved