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 the photo gallery component?

How to use the photo gallery component?

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

Picture gallery components

[Introduction] The picture collection component is a collection of pictures composed of multiple pictures, supporting multiple styles such as matrix tile display, horizontal alignment display, vertical alignment display, etc.
[Application Scenario] Generally used when multiple pictures of the same type need to be displayed in batches, it is more appropriate to use the photo gallery component. The picture collection component supports adding description text for each picture. The description text can be fixed below the picture, can also be fixed on the picture, or can be hovered over the picture. There is always a display method for you.


1. How to add a picture collection component?
Step 1: Find the entry for adding components. Put the mouse on the area where you want to add the picture collection 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;

Find the add component button

Step 2: Add \"picture collection\" component. In the basic components, find the \"Picture Collection\" component, click \"Picture Collection\", the \"Set Picture Collection\" window pops up;

Find the photo gallery component

2. How to set the picture collection component?

In the pop-up set picture collection window, you can set the content and style of the picture collection.


Component title: You can enter the component title as needed. If you do not enter it, the title will not be displayed;
Mode selection: If you select the enlargement mode, click the picture, the picture will be enlarged; if you select the link mode, click to jump to the corresponding link page;
\"More\" link: According to your needs, you can only put a few representative pictures on this page, more pictures can guide users to other details page, you can add a link here, Chinese display \"More\", English display\"more\", displayed in the upper right corner of this component area;
Add picture: add this picture for the first time, you need to upload it through the \"\"Local Upload\"\" button; if the picture you have previously uploaded is saved in the database by default, you can also choose from the database through \"\" \"Button to the database to select this picture;

Set gallery content

There is a pen-shaped button in the lower left corner of each picture. This button is an edit button. Click this button to pop up a setting box, you can set the following:

Picture Alt attribute: The name of the picture is taken by default. It is recommended to re-modify this label for each picture according to the promoted content. This is the unique identification of the search engine for picture recognition, so it will be beneficial to SEO in the future. At the same time, if the visitor's network is not good, the picture cannot be loaded. If this tag is added, the user can also understand what it is about, so it is also beneficial to the user experience.

Description: You can add a description to the picture, and then set the picture description style to make the description appear in different positions;

Picture link: If you select the link mode, you can add a link to this picture, there are many types of links, such as: site pages, external links, emails, page anchors, product categories, article categories, files, you can choose according to your needs

Edit picture ALT attributes, description, links


Display style:
Matrix tile display: horizontal and vertical;
Horizontal alignment display: It is required that the height of the picture is consistent and the width is inconsistent, so that the arrangement is staggered;
Vertical alignment display (waterfall flow): It is required that the picture width is the same and the height is inconsistent.

Set the number of pictures of different widths under responsive changes:
The screen width of different terminals is the same, the user can \"customize\" the number of pictures displayed under different terminals as needed.
Self-adaptive: It is automatically typeset according to the width of the picture. The content area of ​​the non-through bar is 1180px width. For example, the pictures are all 600px*600px, then only one picture can be arranged per line, and no more than two pictures can be displayed on one line. If you upload a batch of 500*500 pictures, you may display two pictures in one line, because the 1180px width can only hold two pictures.
Custom: customize the number of pictures displayed on different terminals according to your needs. The width of widescreen computers is usually >1200px, the width of notebook or PAD horizontal screen is usually 961px~1200px, the width of PAD vertical screen is usually 741px~960px, mobile phones The width of the horizontal screen is usually 500px~740px, and the width of the vertical screen of the mobile phone is usually <500px.
Fixed: You can fix the number of pictures displayed on a single line, 2 to 5 pictures. The same number is displayed regardless of the terminal.

Display style

Picture parameter setting: the picture spacing can be set, the default is 10px, which can be adjusted as needed;
Picture mask color setting: If you select a picture description display style with a mask layer, you can set the color of the picture mask layer;
Choose a description and display style: If the picture has a description, you can choose a description and display style.

Picture set style

After setting the content and style of the component, you can use the following functions of this component as needed:

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