A landing page creation system
Through the combination of component editing and page rendering units, vivid and prominent landing pages are generated, which solves the problems of high user skills and poor content in the existing technology, and improves the user experience and information communication effect.
Patent Information
- Application Number
- CN202311638641.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2023-12-01
- Publication Date
- 2025-08-08
- Estimated Expiration
- 2043-12-01
AI Technical Summary
The existing landing page construction technology requires users to have programming knowledge and skills, lack of data analysis and optimization functions, resulting in poor content focus and inability to effectively attract specific target audiences.
The component editing unit is used to generate rich text content and pictures, generate a page preview image through drag and drop operations, and adjust the background color using the page rendering unit to ensure the focus of text and pictures.
It lowers the threshold for user usage, provides custom optimization functions, improves the information focus and user experience of the landing page, and reduces the color difference between the overall display content and background color.
Smart Images

Figure CN117828215B_ABST
Abstract
Description
Technical Field
[0001] The present invention belongs to the field of data processing technology, and in particular relates to a landing page creation system. Background Art
[0002] In internet marketing, a landing page is the webpage displayed to potential users after they click on an ad or use a search engine. Typically, this page highlights a specific keyword (or phrase), allowing visitors to identify a specific marketing campaign with a clear theme elsewhere. However, existing landing page building technologies often lack focus and fail to provide targeted content. Furthermore, existing landing page building tools on the market have the following drawbacks: they require programming knowledge and skills, and lack data analysis and optimization capabilities. Summary of the Invention
[0003] In order to solve the above problems, the present invention proposes a landing page creation system.
[0004] The technical solution of the present invention is: a landing page creation system includes a component editing unit, a preview image generation unit and a page rendering unit;
[0005] The component editing unit is used to generate a number of components, and generate rich text content and a number of pictures arranged in browsing order through the components as a complete data set;
[0006] The preview image generating unit is used to generate a page preview image from the complete data set through a drag and drop operation;
[0007] The page rendering unit is used to render the page preview image, adjust the initial background color of the page preview image, and generate the final landing page.
[0008] Furthermore, the components generated by the component editing unit include a rich text content acquisition component, a rich text format adjustment component, a picture content acquisition component, a picture order adjustment component, and a data set generation component;
[0009] The rich text content acquisition component is used to acquire the text content input by the user as the rich text basic content, and acquire the preset color set input by the user; wherein the preset color set includes a first preset color, a second preset color, and a third preset color;
[0010] The rich text format adjustment component is used to calculate the weight of each word in the rich text basic content, determine the color of each word based on the weight of each word and the preset color set, and generate rich text content;
[0011] The image content acquisition component is used to obtain the image collection input by the user;
[0012] The image order adjustment component is used to calculate the browsing priority value of each image in the image collection and sort the browsing priority values of each image from large to small as the browsing order of each image;
[0013] The dataset generation component is used to take rich text content and pictures arranged in browsing order as a complete dataset.
[0014] The beneficial effect of the above further scheme is: in the present invention, the landing page, as a website page used to attract specific target audiences and obtain potential customers, must be vivid and focused. Therefore, it is necessary to highlight the important text in the landing page in color and sort the browsing order of the pictures displayed in the landing page to ensure that the information displayed on the landing page is highlighted and the content conveyed is accurate.
[0015] As a special text format, rich text is more colorful than ordinary text and can contain fonts of various colors, making the text more interesting. Therefore, the present invention adopts two calculation methods for words with high word frequency and low word frequency, and uses word frequency, inverse document frequency and other calculation methods to obtain the weight value of the word, which represents the importance of the word in the basic content of the rich text. The most important word adopts the first preset color pre-set by the user, the second most important word adopts the second preset color pre-set by the user, and the remaining colors adopt the third preset color, thereby completing the highlighting of the key text in the rich text content. In the process of image processing, the browsing priority value of the image is calculated by the parameters of the pixel points, and the order of the browsing priority values from large to small is used as the browsing order of the images, to ensure that the image that appears first is closer to the key content that the user wants to express.
[0016] Furthermore, the calculation formula of the word weight value λ is:
[0017]
[0018]
[0019]
[0020] Where N represents the number of times a word appears in the rich text base content, M represents the number of words in the rich text base content, X represents the first feature matrix of the word, Y represents the second feature matrix of the word, x represents the word vector of the word, f represents the word frequency, f' represents the inverse document frequency of the word, E represents the unit matrix, and c represents a constant. Indicates rounding up.
[0021] Furthermore, the specific method for the rich text format adjustment component to determine the color of each word is as follows: sort the weight values of all words from large to small to obtain a weight sequence, and sort the top words in the weight sequence. The color of the word corresponding to the weight value is set to the first preset color, and the remaining words in the weight sequence are The color of the word corresponding to the weight value is set to the second preset color, and the colors of the remaining words are set to the third preset color; wherein, Indicates rounding up, and M indicates the number of words in the rich text base content.
[0022] The beneficial effect of the above further solution is that: in the present invention, the number of preset colors in the preset color set can be adjusted according to the actual situation of the user. and before It can also be adjusted according to actual conditions.
[0023] Furthermore, the calculation formula of the browsing priority value θ of the image is:
[0024]
[0025] Where H k Indicates the grayscale value of the kth pixel in the image, H k_0 Indicates the grayscale value of the pixel adjacent to the k-th pixel in the image, H k_1 Indicates the grayscale value of the right pixel adjacent to the k-th pixel in the image, H k_2 Indicates the grayscale value of the pixel next to the k-th pixel in the image, H k_3 It represents the grayscale value of the left pixel adjacent to the k-th pixel in the image, e represents the exponent, K represents the number of pixels in the image, A represents the length of the image, and B represents the width of the image.
[0026] The beneficial effect of the above further solution is: in the present invention, the browsing value of the image is determined by parameters such as the grayscale value of each pixel and the grayscale value of the pixel's 4 neighborhoods, which can reflect the weight of the image in the entire image set.
[0027] Furthermore, the specific method for the preview image generation unit to generate a page preview image is: obtain a preset blank template, use the drag component to drag and drop the rich text content into the preset blank template, and drag and drop each picture in the picture collection into the preset blank template according to the browsing order of each picture to generate a page preview image.
[0028] The beneficial effect of the above further solution is: in the present invention, drag and drop is part of the graphical interface, and page preview images are generated by dragging components, which makes it easy for users to do complex things intuitively.
[0029] Furthermore, the page rendering unit generates the final landing page including the following steps:
[0030] Calculate the pixel rendering value of the page preview image based on each image in the page preview image;
[0031] Calculate the text rendering value of the page preview image based on the rich text content in the page preview image;
[0032] According to the pixel rendering value and text rendering value of the page preview image, the initial background color of the page preview image is rendered to obtain the final background color and generate the final landing page.
[0033] The beneficial effect of the above further scheme is: in the present invention, there are multiple pictures and colored texts in the page preview image generated by the preview image generation unit, resulting in a large number of overall colors in the page preview image. The present invention takes into account the unified style of the overall landing page, and therefore renders and adjusts the background color of the page preview image, fully considering the influence of the RGB channel values of the pictures and text on the color of the page preview image, so that the final landing page background color is unified and coordinated with the overall content color, thereby improving the user browsing experience.
[0034] Furthermore, the calculation formula of the pixel rendering value ω1 of the page preview image is:
[0035]
[0036] Where R pq Indicates the R channel value of the qth pixel in the pth image, G pq Indicates the G channel value of the qth pixel in the pth image, B pq Indicates the B channel value of the qth pixel in the pth image, Q indicates the number of pixels in the image, P indicates the number of images in the page preview, and R max Indicates the maximum R channel value of all pixels in the page preview image, G max Indicates the maximum G channel value of all pixels in the page preview image, B max Indicates the maximum B channel value of all pixels in the page preview image, R min Indicates the minimum R channel value of all pixels in the page preview image, G min Indicates the minimum G channel value of all pixels in the page preview image, B min Indicates the minimum B channel value of all pixels in the page preview image.
[0037] Furthermore, the calculation formula for the text rendering value ω2 of the page preview image is:
[0038]
[0039] Where r uIndicates the R channel value of the color corresponding to the u-th text, g u Indicates the G channel value of the color corresponding to the u-th text, b u Indicates the B channel value of the color corresponding to the u-th character, U indicates the number of characters in the page preview, r max Indicates the maximum R channel value of the color corresponding to all text in the page preview image, g max Indicates the maximum G channel value of the color corresponding to all text in the page preview image, b max Indicates the maximum B channel value of the color corresponding to all text in the page preview image, r min Indicates the minimum R channel value of the color corresponding to all text in the page preview image, g min Indicates the minimum G channel value of the color corresponding to all text in the page preview image, b min Indicates the minimum B channel value of the color corresponding to all text in the page preview image, f u Indicates the word frequency of the u-th character in the page preview.
[0040] Furthermore, the specific method for rendering the initial background color of the page preview image is: taking the average of the pixel rendering value and the text rendering value of the page preview image as the background rendering value, taking the product of the R channel value of each pixel point in the initial background color of the page preview image and the background rendering value as the R channel value of each pixel point in the final background color, taking the product of the G channel value of each pixel point in the initial background color of the page preview image and the background rendering value as the G channel value of each pixel point in the final background color, taking the product of the B channel value of each pixel point in the initial background color of the page preview image and the background rendering value as the B channel value of each pixel point in the final background color, obtaining the final background color, and completing the rendering.
[0041] The beneficial effects of the present invention are:
[0042] (1) The landing page creation system can lower the user threshold. Users do not need to have programming knowledge and skills. Through the component editing unit, preview image generation unit and page rendering unit, they can easily build an efficient landing page, reducing user usage costs;
[0043] (2) The landing page creation system provides a wealth of custom optimization functions, analyzes and processes text and images, and can optimize the display focus of text and images, making it easier for users browsing the website to quickly understand the displayed content;
[0044] (3) The landing page creation system adjusts the background color of the landing page to reduce the color difference between the overall displayed content and the background color, reduce the abruptness, and improve the user experience. BRIEF DESCRIPTION OF THE DRAWINGS
[0045] Figure 1 Create a structural diagram of the system for the landing page. DETAILED DESCRIPTION
[0046] The embodiments of the present invention will be further described below with reference to the accompanying drawings.
[0047] like Figure 1 As shown, the present invention provides a landing page creation system, including a component editing unit, a preview image generation unit and a page rendering unit;
[0048] The component editing unit is used to generate a number of components, and generate rich text content and a number of pictures arranged in browsing order through the components as a complete data set;
[0049] The preview image generating unit is used to generate a page preview image from the complete data set through a drag and drop operation;
[0050] The page rendering unit is used to render the page preview image, adjust the initial background color of the page preview image, and generate the final landing page.
[0051] In an embodiment of the present invention, the components generated by the component editing unit include a rich text content acquisition component, a rich text format adjustment component, a picture content acquisition component, a picture order adjustment component, and a data set generation component;
[0052] The rich text content acquisition component is used to acquire the text content input by the user as the rich text basic content, and acquire the preset color set input by the user; wherein the preset color set includes a first preset color, a second preset color, and a third preset color;
[0053] The rich text format adjustment component is used to calculate the weight of each word in the rich text basic content, determine the color of each word based on the weight of each word and the preset color set, and generate rich text content;
[0054] The image content acquisition component is used to obtain the image collection input by the user;
[0055] The image order adjustment component is used to calculate the browsing priority value of each image in the image collection and sort the browsing priority values of each image from large to small as the browsing order of each image;
[0056] The dataset generation component is used to take rich text content and pictures arranged in browsing order as a complete dataset.
[0057] In the present invention, as a website page used to attract specific target audiences and obtain potential customers, the landing page must be vivid and highlight the key points. Therefore, it is necessary to highlight the important text in the landing page in color and sort the browsing order of the pictures displayed in the landing page to ensure that the information displayed on the landing page is highlighted and the content conveyed is accurate.
[0058] As a special text format, rich text is more colorful than ordinary text and can contain fonts of various colors, making the text more interesting. Therefore, the present invention adopts two calculation methods for words with high word frequency and low word frequency, and uses word frequency, inverse document frequency and other calculation methods to obtain the weight value of the word, which represents the importance of the word in the basic content of the rich text. The most important word adopts the first preset color pre-set by the user, the second most important word adopts the second preset color pre-set by the user, and the remaining colors adopt the third preset color, thereby completing the highlighting of the key text in the rich text content. In the process of image processing, the browsing priority value of the image is calculated by the parameters of the pixel points, and the order of the browsing priority values from large to small is used as the browsing order of the images, to ensure that the image that appears first is closer to the key content that the user wants to express.
[0059] In the embodiment of the present invention, the calculation formula of the word proportion weight value λ is:
[0060]
[0061]
[0062]
[0063] Where N represents the number of times a word appears in the rich text base content, M represents the number of words in the rich text base content, X represents the first feature matrix of the word, Y represents the second feature matrix of the word, x represents the word vector of the word, f represents the word frequency, f' represents the inverse document frequency of the word, E represents the unit matrix, and c represents a constant. Indicates rounding up.
[0064] In the embodiment of the present invention, the specific method for the rich text format adjustment component to determine the color of each word is as follows: sort the weight values of all words from large to small to obtain a weight sequence, and sort the top words in the weight sequence by the weight value. The color of the word corresponding to the weight value is set to the first preset color, and the remaining words in the weight sequence are The color of the word corresponding to the weight value is set to the second preset color, and the colors of the remaining words are set to the third preset color; wherein, Indicates rounding up, and M indicates the number of words in the rich text base content.
[0065] In the present invention, the number of preset colors in the preset color set can be adjusted according to the actual situation of the user. and before It can also be adjusted according to actual conditions.
[0066] In the embodiment of the present invention, the calculation formula of the browsing priority value θ of the image is:
[0067]
[0068] Where H k Indicates the grayscale value of the kth pixel in the image, H k_0 Indicates the grayscale value of the pixel adjacent to the k-th pixel in the image, H k_1 Indicates the grayscale value of the right pixel adjacent to the k-th pixel in the image, H k_2 Indicates the grayscale value of the pixel next to the k-th pixel in the image, H k_3 It represents the grayscale value of the left pixel adjacent to the k-th pixel in the image, e represents the exponent, K represents the number of pixels in the image, A represents the length of the image, and B represents the width of the image.
[0069] In the present invention, the browsing value of a picture is determined by parameters such as the grayscale value of each pixel and the grayscale value of the pixel's four neighborhoods, and can reflect the weight of the picture in a collection of all pictures.
[0070] In an embodiment of the present invention, the specific method for the preview image generation unit to generate a page preview image is: obtaining a preset blank template, using a drag component to drag and drop rich text content into the preset blank template, and dragging and dropping each picture in the picture collection into the preset blank template according to the browsing order of each picture to generate a page preview image.
[0071] In the present invention, drag and drop is a part of the graphical interface, and page preview generation is completed by dragging components, which makes it easy for users to do complex things intuitively.
[0072] In an embodiment of the present invention, the page rendering unit generates the final landing page including the following steps:
[0073] Calculate the pixel rendering value of the page preview image based on each image in the page preview image;
[0074] Calculate the text rendering value of the page preview image based on the rich text content in the page preview image;
[0075] According to the pixel rendering value and text rendering value of the page preview image, the initial background color of the page preview image is rendered to obtain the final background color and generate the final landing page.
[0076] In the present invention, the page preview image generated by the preview image generation unit contains multiple pictures and colored text, resulting in a large number of overall colors in the page preview image. Taking into account the unified style of the overall landing page, the present invention renders and adjusts the background color of the page preview image, fully considering the influence of the RGB channel values of the pictures and text on the color of the page preview image, so that the final landing page background color is unified and coordinated with the overall content color, thereby improving the user browsing experience.
[0077] In the embodiment of the present invention, the calculation formula of the pixel rendering value ω1 of the page preview image is:
[0078]
[0079] Where R pq Indicates the R channel value of the qth pixel in the pth image, G pq Indicates the G channel value of the qth pixel in the pth image, B pq Indicates the B channel value of the qth pixel in the pth image, Q indicates the number of pixels in the image, P indicates the number of images in the page preview, and R max Indicates the maximum R channel value of all pixels in the page preview image, G max Indicates the maximum G channel value of all pixels in the page preview image, B max Indicates the maximum B channel value of all pixels in the page preview image, R min Indicates the minimum R channel value of all pixels in the page preview image, G min Indicates the minimum G channel value of all pixels in the page preview image, B min Indicates the minimum B channel value of all pixels in the page preview image.
[0080] In the embodiment of the present invention, the calculation formula of the text rendering value ω2 of the page preview image is:
[0081]
[0082] Where r u Indicates the R channel value of the color corresponding to the u-th text, g u Indicates the G channel value of the color corresponding to the u-th text, b u Indicates the B channel value of the color corresponding to the u-th character, U indicates the number of characters in the page preview, r max Indicates the maximum R channel value of the color corresponding to all text in the page preview image, g max Indicates the maximum G channel value of the color corresponding to all text in the page preview image, b max Indicates the maximum B channel value of the color corresponding to all text in the page preview image, r min Indicates the minimum R channel value of the color corresponding to all text in the page preview image, gmin Indicates the minimum G channel value of the color corresponding to all text in the page preview image, b min Indicates the minimum B channel value of the color corresponding to all text in the page preview image, f u Indicates the word frequency of the u-th character in the page preview.
[0083] In an embodiment of the present invention, a specific method for rendering the initial background color of a page preview image is as follows: using the average of the pixel rendering value and the text rendering value of the page preview image as the background rendering value, multiplying the R channel value of each pixel in the initial background color of the page preview image by the background rendering value as the R channel value of each pixel in the final background color, multiplying the G channel value of each pixel in the initial background color of the page preview image by the background rendering value as the G channel value of each pixel in the final background color, and multiplying the B channel value of each pixel in the initial background color of the page preview image by the background rendering value as the B channel value of each pixel in the final background color, thereby obtaining the final background color and completing the rendering.
[0084] Those skilled in the art will appreciate that the embodiments described herein are intended to help readers understand the principles of the present invention, and it should be understood that the scope of protection of the present invention is not limited to such specific descriptions and embodiments. Those skilled in the art can make various other specific variations and combinations based on the technical teachings disclosed in the present invention without departing from the essence of the present invention, and such variations and combinations are still within the scope of protection of the present invention.
Claims
1. A landing page creation system, characterized in that: Includes component editing unit, preview image generation unit and page rendering unit; The component editing unit is used to generate a plurality of components, and generate rich text content and a plurality of pictures arranged in a browsing order through the plurality of components as a complete data set; The preview image generating unit is used to generate a page preview image from the complete data set through a drag operation; The page rendering unit is used to render the page preview image, adjust the initial background color of the page preview image, and generate the final landing page; The components generated by the component editing unit include a rich text content acquisition component, a rich text format adjustment component, a picture content acquisition component, a picture order adjustment component and a data set generation component; The rich text content acquisition component is used to acquire text content input by the user as rich text basic content, and acquire a preset color set input by the user; wherein the preset color set includes a first preset color, a second preset color, and a third preset color; The rich text format adjustment component is used to calculate the weight of each word in the rich text basic content, determine the color of each word according to the weight of each word and the preset color set, and generate rich text content; The picture content acquisition component is used to obtain a picture set input by the user; The picture order adjustment component is used to calculate the browsing priority value of each picture in the picture collection, and sort the browsing priority values of each picture from large to small as the browsing order of each picture; The dataset generation component is used to take the rich text content and the pictures arranged in browsing order as a complete dataset; The calculation formula of the weight value λ of the word is: ; Where N represents the number of times a word appears in the rich text base content, M represents the number of words in the rich text base content, X represents the first feature matrix of the word, Y represents the second feature matrix of the word, x represents the word vector of the word, f represents the word frequency, f' represents the inverse document frequency of the word, E represents the unit matrix, and c represents a constant. Indicates rounding up; The specific method of the rich text format adjustment component to determine the color of each word is: sort the proportion weight values of all words from large to small to obtain a proportion weight sequence, and select the top words in the proportion weight sequence as the color of each word. The color of the word corresponding to the weight value is set to the first preset color, and the remaining words in the weight sequence are The color of the word corresponding to the weight value is set to the second preset color, and the colors of the remaining words are set to the third preset color; wherein, Indicates rounding up, and M indicates the number of words in the rich text base content; The calculation formula of the browsing priority value θ of the picture is: ; Where H k Indicates the grayscale value of the kth pixel in the image, H k_0 Indicates the grayscale value of the pixel adjacent to the k-th pixel in the image, H k_1 Indicates the grayscale value of the right pixel adjacent to the k-th pixel in the image, H k_2 Indicates the grayscale value of the pixel next to the k-th pixel in the image, H k_3 It represents the grayscale value of the left pixel adjacent to the k-th pixel in the image, e represents the exponent, K represents the number of pixels in the image, A represents the length of the image, and B represents the width of the image.
2. The landing page creation system according to claim 1, characterized in that: The specific method for the preview image generation unit to generate a page preview image is: obtaining a preset blank template, using a drag component to drag and drop rich text content into the preset blank template, and dragging and dropping each picture in the picture collection into the preset blank template according to the browsing order of each picture to generate a page preview image.
3. The landing page creation system according to claim 1, characterized in that: The page rendering unit generates the final landing page including the following steps: Calculate the pixel rendering value of the page preview image based on each image in the page preview image; Calculate the text rendering value of the page preview image based on the rich text content in the page preview image; According to the pixel rendering value and text rendering value of the page preview image, the initial background color of the page preview image is rendered to obtain the final background color and generate the final landing page.
4. The landing page creation system according to claim 3, characterized in that: The calculation formula of the pixel rendering value ω1 of the page preview image is: ; Where R pq Indicates the R channel value of the qth pixel in the pth image, G pq Indicates the G channel value of the qth pixel in the pth image, B pq Indicates the B channel value of the qth pixel in the pth image, Q indicates the number of pixels in the image, P indicates the number of images in the page preview, and R max Indicates the maximum R channel value of all pixels in the page preview image, G max Indicates the maximum G channel value of all pixels in the page preview image, B max Indicates the maximum B channel value of all pixels in the page preview image, R min Indicates the minimum R channel value of all pixels in the page preview image, G min Indicates the minimum G channel value of all pixels in the page preview image, B min Indicates the minimum B channel value of all pixels in the page preview image.
5. The landing page creation system according to claim 3, characterized in that: The calculation formula of the text rendering value ω2 of the page preview image is: ; Where r u Indicates the R channel value of the color corresponding to the u-th text, g u Indicates the G channel value of the color corresponding to the u-th text, b u Indicates the B channel value of the color corresponding to the u-th character, U indicates the number of characters in the page preview, r max Indicates the maximum R channel value of the color corresponding to all text in the page preview image, g max Indicates the maximum G channel value of the color corresponding to all text in the page preview image, b max Indicates the maximum B channel value of the color corresponding to all text in the page preview image, r min Indicates the minimum R channel value of the color corresponding to all text in the page preview image, g min Indicates the minimum G channel value of the color corresponding to all text in the page preview image, b min Indicates the minimum B channel value of the color corresponding to all text in the page preview image, f u Indicates the word frequency of the u-th character in the page preview.
6. The landing page creation system according to claim 3, characterized in that: The specific method for rendering the initial background color of the page preview image is as follows: using the average of the pixel rendering value and the text rendering value of the page preview image as the background rendering value, multiplying the R channel value of each pixel point in the initial background color of the page preview image and the background rendering value as the R channel value of each pixel point in the final background color, multiplying the G channel value of each pixel point in the initial background color of the page preview image and the background rendering value as the G channel value of each pixel point in the final background color, and multiplying the B channel value of each pixel point in the initial background color of the page preview image and the background rendering value as the B channel value of each pixel point in the final background color, thereby obtaining the final background color and completing the rendering.
Citation Information
Patent Citations
Business page generation method and device
CN114201170A